test: fix tests

Author: mmalerba

src/material/tabs/BUILD.bazel

@@ -96,6 +96,7 @@ ng_test_library(
         "//src/cdk/bidi",
         "//src/cdk/keycodes",
         "//src/cdk/observers",
+        "//src/cdk/observers/private",
         "//src/cdk/portal",
         "//src/cdk/scrolling",
         "//src/cdk/testing/private",

src/material/tabs/tab-header.spec.ts

@@ -1,33 +1,37 @@
 import {Dir, Direction} from '@angular/cdk/bidi';
 import {END, ENTER, HOME, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
+import {MutationObserverFactory, ObserversModule} from '@angular/cdk/observers';
+import {SharedResizeObserver} from '@angular/cdk/observers/private';
 import {PortalModule} from '@angular/cdk/portal';
 import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
 import {
-  dispatchFakeEvent,
-  dispatchKeyboardEvent,
   createKeyboardEvent,
-  dispatchEvent,
   createMouseEvent,
+  dispatchEvent,
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
 } from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
 import {
-  waitForAsync,
   ComponentFixture,
+  TestBed,
   discardPeriodicTasks,
   fakeAsync,
-  TestBed,
+  flushMicrotasks,
   tick,
+  waitForAsync,
 } from '@angular/core/testing';
 import {MatRippleModule} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
+import {Subject} from 'rxjs';
 import {MatTabHeader} from './tab-header';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
-import {ObserversModule, MutationObserverFactory} from '@angular/cdk/observers';
 
 describe('MDC-based MatTabHeader', () => {
   let fixture: ComponentFixture<SimpleTabHeaderApp>;
   let appComponent: SimpleTabHeaderApp;
+  let resizeEvents: Subject<ResizeObserverEntry[]>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -45,6 +49,9 @@ describe('MDC-based MatTabHeader', () => {
     });
 
     TestBed.compileComponents();
+
+    resizeEvents = new Subject();
+    spyOn(TestBed.inject(SharedResizeObserver), 'observe').and.returnValue(resizeEvents);
   }));
 
   describe('focusing', () => {
@@ -650,48 +657,45 @@ describe('MDC-based MatTabHeader', () => {
       expect(inkBar.alignToElement).toHaveBeenCalled();
     }));
 
-    it('should re-align the ink bar when the window is resized', fakeAsync(() => {
+    it('should re-align the ink bar when the header is resized', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
       fixture.detectChanges();
 
       const inkBar = fixture.componentInstance.tabHeader._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
-      dispatchFakeEvent(window, 'resize');
-      tick(150);
+      resizeEvents.next([]);
       fixture.detectChanges();
+      flushMicrotasks();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
       discardPeriodicTasks();
     }));
 
-    it('should update arrows when the window is resized', fakeAsync(() => {
+    it('should update arrows when the header is resized', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
 
       const header = fixture.componentInstance.tabHeader;
 
       spyOn(header, '_checkPaginationEnabled');
 
-      dispatchFakeEvent(window, 'resize');
-      tick(10);
+      resizeEvents.next([]);
       fixture.detectChanges();
+      flushMicrotasks();
 
       expect(header._checkPaginationEnabled).toHaveBeenCalled();
       discardPeriodicTasks();
     }));
 
     it('should update the pagination state if the content of the labels changes', () => {
       const mutationCallbacks: Function[] = [];
-      TestBed.overrideProvider(MutationObserverFactory, {
-        useValue: {
-          // Stub out the MutationObserver since the native one is async.
-          create: function (callback: Function) {
-            mutationCallbacks.push(callback);
-            return {observe: () => {}, disconnect: () => {}};
-          },
+      spyOn(TestBed.inject(MutationObserverFactory), 'create').and.callFake(
+        (callback: Function) => {
+          mutationCallbacks.push(callback);
+          return {observe: () => {}, disconnect: () => {}} as any;
         },
-      });
+      );
 
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
       fixture.detectChanges();

src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -1,24 +1,33 @@
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
-import {waitForAsync, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
-import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
-import {By} from '@angular/platform-browser';
+import {SharedResizeObserver} from '@angular/cdk/observers/private';
 import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
 } from '@angular/cdk/testing/private';
-import {Direction, Directionality} from '@angular/cdk/bidi';
+import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  flushMicrotasks,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
+import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
+import {By} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
+import {MAT_TABS_CONFIG} from '../index';
 import {MatTabsModule} from '../module';
 import {MatTabLink, MatTabNav} from './tab-nav-bar';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MAT_TABS_CONFIG} from '../index';
 
 describe('MDC-based MatTabNavBar', () => {
   let dir: Direction = 'ltr';
   let dirChange = new Subject();
   let globalRippleOptions: RippleGlobalOptions;
+  let resizeEvents: Subject<ResizeObserverEntry[]>;
 
   beforeEach(waitForAsync(() => {
     globalRippleOptions = {};
@@ -37,6 +46,9 @@ describe('MDC-based MatTabNavBar', () => {
     });
 
     TestBed.compileComponents();
+
+    resizeEvents = new Subject();
+    spyOn(TestBed.inject(SharedResizeObserver), 'observe').and.returnValue(resizeEvents);
   }));
 
   describe('basic behavior', () => {
@@ -174,14 +186,14 @@ describe('MDC-based MatTabNavBar', () => {
       expect(spy.calls.any()).toBe(false);
     });
 
-    it('should re-align the ink bar when the window is resized', fakeAsync(() => {
+    it('should re-align the ink bar when the nav bar is resized', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
-      dispatchFakeEvent(window, 'resize');
-      tick(150);
+      resizeEvents.next([]);
       fixture.detectChanges();
+      flushMicrotasks();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
     }));