Update tests in preparation for Angular 13 upgrade. (tensorflow#6056)

The upcoming upgrade to Angular 13 (and related libraries) requires some
modifications to tests that we can make pre-upgrade.

1. ngrx can no longer automatically reset selectors that have been
modified with overrideSelector() call. We must now call
store.resetSelectors() after each test.
  * See:
ngrx/platform#3264 (comment)

2. The upgrade has exposed a latent test bug. In one of the tests there
is the potential to refresh the window with a call to
`window.location.refresh()`. After the Angular 13 upgrade the refresh
actually happens and the test karma runner fails and complains "Some of
your tests did a full page reload!". The fix is to mock out the call to
`window.location.refresh()`.

tensorboard/components/experimental/plugin_util/plugin_api_host_test.ts

@@ -61,6 +61,10 @@ describe('plugin_api_host test', () => {
     runApi = TestBed.inject(PluginRunsApiHostImpl);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   describe('runs apis', () => {
     describe('#experimental.RunsChanged', () => {
       it('broadcasts runs when runs change', () => {

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/effects/debugger_effects_test.ts

@@ -395,6 +395,10 @@ describe('Debugger effects', () => {
     store.overrideSelector(getActivePlugin, '');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   function createAndSubscribeToDebuggerEffectsWithEmptyRepeater() {
     spyOn(TEST_ONLY, 'createTimedRepeater').and.callFake(
       (stream: Observable<any>) => stream

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_container_test.ts

@@ -56,6 +56,10 @@ describe('Graph Container', () => {
     dispatchSpy = spyOn(store, 'dispatch');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('renders no-op-selected element and nothing else when no op is selected', () => {
     const fixture = TestBed.createComponent(GraphContainer);
     store.overrideSelector(getFocusedGraphOpInfo, null);

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_container_test.ts

@@ -87,6 +87,10 @@ describe('Graph Executions Container', () => {
     store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('does not render execs viewport if # execs = 0', fakeAsync(() => {
     const fixture = TestBed.createComponent(GraphExecutionsContainer);
     store.overrideSelector(getNumGraphExecutions, 0);

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_container_test.ts

@@ -75,6 +75,7 @@ describe('Source Files Container', () => {
 
   afterEach(() => {
     tearDownMonacoFakes();
+    store?.resetSelectors();
   });
 
   it('renders no file selected when no source line is focused on', () => {

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_container_test.ts

@@ -58,6 +58,10 @@ describe('Stack Trace container', () => {
     dispatchSpy = spyOn(store, 'dispatch');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   for (const stickToBottommostFrame of [false, true]) {
     it(
       `shows non-empty eager stack frames; highlights focused frame: ` +

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_container_test.ts

@@ -91,6 +91,10 @@ describe('Timeline Container', () => {
     dispatchSpy = spyOn(store, 'dispatch');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('shows total number of executions', () => {
     const fixture = TestBed.createComponent(TimelineContainer);
     fixture.detectChanges();

tensorboard/webapp/alert/views/alert_snackbar_test.ts

@@ -66,6 +66,7 @@ describe('alert snackbar', () => {
 
   afterEach(() => {
     snackbar.dismiss();
+    store?.resetSelectors();
   });
 
   it('opens the snackbar on each alert', () => {

tensorboard/webapp/app_routing/effects/app_routing_effects_test.ts

@@ -250,6 +250,10 @@ describe('app_routing_effects', () => {
     );
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   describe('bootstrapReducers$', () => {
     beforeEach(() => {
       effects = TestBed.inject(AppRoutingEffects);

tensorboard/webapp/app_routing/views/router_outlet_test.ts

@@ -74,6 +74,10 @@ describe('router_outlet', () => {
     getNgComponentByRouteKindSpy = spyOn(registry, 'getNgComponentByRouteKind');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   function setActiveRoute(routeKind: RouteKind) {
     store.overrideSelector(
       getActiveRoute,

tensorboard/webapp/core/effects/core_effects_test.ts

@@ -133,6 +133,7 @@ describe('core_effects', () => {
 
   afterEach(() => {
     httpMock.verify();
+    store?.resetSelectors();
   });
 
   [

tensorboard/webapp/core/views/dark_mode_supporter_test.ts

@@ -35,6 +35,7 @@ describe('dark mode supporter test', () => {
 
   afterEach(() => {
     document.body.classList.remove('dark-mode');
+    store?.resetSelectors();
   });
 
   it('sets class name on body when dark mode is enabled', () => {

tensorboard/webapp/core/views/hash_storage_test.ts

@@ -60,6 +60,10 @@ describe('hash storage test', () => {
     getPluginIdSpy = spyOn(deepLinker, 'getPluginId');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('sets hash to plugin id when plugin id changes from null to value', () => {
     const setPluginIdCalls: Array<{
       id: string | null;

tensorboard/webapp/core/views/layout_test.ts

@@ -84,6 +84,10 @@ describe('layout test', () => {
     store.overrideSelector(getSideBarWidthInPercent, 10);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('renders sidebar and main content', () => {
     const fixture = TestBed.createComponent(TestableComponent);
     fixture.detectChanges();

tensorboard/webapp/core/views/page_title_test.ts

@@ -50,6 +50,10 @@ describe('page title test', () => {
     });
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('uses window_title as page title if given', () => {
     const spy = spyOn(TEST_ONLY.utils, 'setDocumentTitle');
     store.overrideSelector(getRouteKind, RouteKind.EXPERIMENT);
@@ -139,6 +143,10 @@ describe('page title test with custom brand names', () => {
     });
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('uses TensorBoard brand name as page title as default', () => {
     const spy = spyOn(TEST_ONLY.utils, 'setDocumentTitle');
     const fixture = TestBed.createComponent(TestingComponent);
@@ -213,6 +221,10 @@ describe('page title test for OSS TensorBoard', () => {
     });
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('uses `TensorBoard` for experiment page title', () => {
     const spy = spyOn(TEST_ONLY.utils, 'setDocumentTitle');
     store.overrideSelector(getRouteKind, RouteKind.EXPERIMENT);

tensorboard/webapp/deeplink/hash_test.ts

@@ -52,6 +52,10 @@ describe('hash storage test', () => {
     createElement.and.callThrough();
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('sets the hash to plugin id by replacing on first load', () => {
     store.overrideSelector(getActivePlugin, 'foo');
     const fixture = TestBed.createComponent(HashStorageContainer);

tensorboard/webapp/feature_flag/effects/feature_flag_effects_test.ts

@@ -78,6 +78,10 @@ describe('feature_flag_effects', () => {
     store.overrideSelector(getFeatureFlagsMetadata, FeatureFlagMetadataMap);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   describe('getFeatureFlags$', () => {
     let recordedActions: Action[];
 

tensorboard/webapp/feature_flag/http/feature_flag_http_interceptor_test.ts

@@ -57,6 +57,10 @@ describe('FeatureFlagHttpInterceptor', () => {
     httpClient = TestBed.inject(HttpClient);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('injects feature flags into the HTTP request', () => {
     store.overrideSelector(getFeatureFlagsToSendToServer, {
       inColab: true,

tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts

@@ -20,6 +20,12 @@ import {featureFlagOverridesReset} from '../actions/feature_flag_actions';
 import {getShowFlagsEnabled} from '../store/feature_flag_selectors';
 import {FeatureFlagPageContainer} from './feature_flag_page_container';
 
+const util = {
+  reloadWindow: () => {
+    window.location.reload();
+  },
+};
+
 @Component({
   selector: 'feature-flag-modal-trigger',
   template: ``,
@@ -51,11 +57,15 @@ export class FeatureFlagModalTriggerContainer implements OnInit {
           // Wait one tick before reloading the page so the 'enableShowFlags'
           // reset has a chance to be reflected in the URL before page reload.
           setTimeout(() => {
-            window.location.reload();
+            util.reloadWindow();
           }, 1);
         });
         return;
       }
     });
   }
 }
+
+export const TEST_ONLY = {
+  util,
+};

tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts

@@ -33,7 +33,10 @@ import {
   getShowFlagsEnabled,
 } from '../store/feature_flag_selectors';
 import {FeatureFlags} from '../types';
-import {FeatureFlagModalTriggerContainer} from './feature_flag_modal_trigger_container';
+import {
+  FeatureFlagModalTriggerContainer,
+  TEST_ONLY,
+} from './feature_flag_modal_trigger_container';
 import {FeatureFlagPageContainer} from './feature_flag_page_container';
 
 describe('feature_flag_modal_trigger_container', () => {
@@ -58,6 +61,13 @@ describe('feature_flag_modal_trigger_container', () => {
     store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
 
     spyOn(store, 'dispatch').and.stub();
+
+    // Fake out window.location.reload so it doesn't do anything.
+    TEST_ONLY.util.reloadWindow = () => {};
+  });
+
+  afterEach(() => {
+    store?.resetSelectors();
   });
 
   function createComponent() {

tensorboard/webapp/feature_flag/views/feature_flag_page_test.ts

@@ -64,6 +64,10 @@ describe('feature_flag_page_container', () => {
     dispatchSpy = spyOn(store, 'dispatch');
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   function createComponent() {
     fixture = TestBed.createComponent(FeatureFlagPageContainer);
     fixture.detectChanges();

tensorboard/webapp/header/dark_mode_toggle_test.ts

@@ -56,6 +56,10 @@ describe('dark mode toggle test', () => {
     overlayContainer = TestBed.inject(OverlayContainer);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   function getMenuButtons(fixture: ComponentFixture<DarkModeToggleContainer>) {
     const els = fixture.debugElement.queryAll(By.css('button'));
     expect(els.length).toBe(1);

tensorboard/webapp/header/header_test.ts

@@ -88,6 +88,10 @@ describe('header test', () => {
     store.overrideSelector(getCoreDataLoadedState, DataLoadState.NOT_LOADED);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   function assertDebugElementText(el: DebugElement, text: string) {
     expect(el.nativeElement.innerText.trim().toUpperCase()).toBe(text);
   }

tensorboard/webapp/metrics/data_source/metrics_data_source_test.ts

@@ -53,6 +53,7 @@ describe('TBMetricsDataSource test', () => {
 
   afterEach(() => {
     httpMock.verify();
+    store?.resetSelectors();
   });
 
   describe('fetchTagMetadata', () => {

tensorboard/webapp/metrics/effects/metrics_effects_test.ts

@@ -91,6 +91,10 @@ describe('metrics effects', () => {
     );
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   describe('#dataEffects', () => {
     beforeEach(() => {
       effects.dataEffects$.subscribe();

tensorboard/webapp/metrics/views/card_renderer/card_view_test.ts

@@ -71,6 +71,10 @@ describe('card view test', () => {
     intersectionObserver = TestBed.inject(IntersectionObserverTestingModule);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('stamps DOM only when it is first visible', () => {
     const fixture = TestBed.createComponent(CardViewContainer);
     fixture.componentInstance.cardId = 'cardId';

tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts

@@ -71,6 +71,10 @@ describe('metrics/views/data_download_dialog', () => {
     return fixture;
   }
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('renders', async () => {
     const fixture = await createComponent('card1');
     store.overrideSelector(getCardMetadata, {

tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts

@@ -120,6 +120,10 @@ describe('histogram card', () => {
     store.overrideSelector(selectors.getMetricsLinkedTimeSelection, null);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('renders empty message when there is no data', () => {
     const cardMetadata = {
       plugin: PluginType.HISTOGRAMS,

tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts

@@ -115,6 +115,10 @@ describe('image card', () => {
     store.overrideSelector(getRun, null);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   function expectImageSliderUI(
     fixture: ComponentFixture<ImageCardContainer>,
     imageId: string,

tensorboard/webapp/metrics/views/card_renderer/run_name_test.ts

@@ -43,6 +43,10 @@ describe('card run name', () => {
     store.overrideSelector(getRun, null);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('renders exp display name and run name', () => {
     store.overrideSelector(getExperimentIdForRunId, 'eid');
     store.overrideSelector(getExperimentIdToExperimentAliasMap, {

tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts

@@ -341,6 +341,10 @@ describe('scalar card', () => {
     );
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   describe('basic renders', () => {
     it('renders empty chart when there is no data', fakeAsync(() => {
       const cardMetadata = {

tensorboard/webapp/metrics/views/main_view/card_grid_test.ts

@@ -95,6 +95,10 @@ describe('card grid', () => {
     store.overrideSelector(getMetricsXAxisType, XAxisType.STEP);
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   it('keeps pagination button position when page size changes', fakeAsync(() => {
     store.overrideSelector(settingsSelectors.getPageSize, 2);
     let scrollOffset = 30;