test(ssr): fix SSR flakes and change matchMedia variable name (#988)

* use `mediaController` as matchMedia variable name in *.spec.ts
* improve use of inject() in tests

Author: ThomasBurleson

src/lib/core/breakpoints/data/orientation-break-points.spec.ts

@@ -50,7 +50,7 @@ describe('break-point-provider', () => {
     beforeEach(() => {
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
-        imports: [FlexLayoutModule.withConfig({}, EXTRAS)]
+        imports: [FlexLayoutModule.withConfig({serverLoaded: true}, EXTRAS)]
       });
     });
     beforeEach(inject([BREAKPOINTS], (bps: BreakPoint[]) => {
@@ -86,7 +86,12 @@ describe('break-point-provider', () => {
     beforeEach(async (() => {
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
-        imports: [FlexLayoutModule.withConfig({addOrientationBps: true}, EXTRAS)]
+        imports: [
+          FlexLayoutModule.withConfig({
+            addOrientationBps: true,
+            serverLoaded: true,
+          }, EXTRAS)
+        ]
       });
     }));
     // tslint:disable-next-line:no-shadowed-variable
@@ -127,7 +132,12 @@ describe('break-point-provider', () => {
     beforeEach(() => {
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
-        imports: [FlexLayoutModule.withConfig({disableDefaultBps: true}, EXTRAS)]
+        imports: [
+          FlexLayoutModule.withConfig({
+            disableDefaultBps: true,
+            serverLoaded: true,
+          }, EXTRAS)
+        ]
       });
     });
     beforeEach(inject([BREAKPOINTS], (bps: BreakPoint[]) => {

src/lib/core/match-media/match-media.spec.ts

@@ -14,7 +14,9 @@ import {MatchMedia} from './match-media';
 import {MediaObserver} from '../media-observer/media-observer';
 
 describe('match-media', () => {
-  let matchMedia: MockMatchMedia;
+  let breakPoints: BreakPointRegistry;
+  let mediaController: MockMatchMedia;
+  let mediaObserver: MediaObserver;
 
   beforeEach(() => {
     // Configure testbed to prepare services
@@ -23,16 +25,22 @@ describe('match-media', () => {
     });
   });
 
-  beforeEach(inject([MatchMedia], (service: MockMatchMedia) => {
-    matchMedia = service;      // inject only to manually activate mediaQuery ranges
-  }));
+  beforeEach(inject(
+      [MediaObserver, MatchMedia, BreakPointRegistry],
+      (_mediaObserver: MediaObserver, _matchMedia: MockMatchMedia,
+       _breakPoints: BreakPointRegistry) => {
+        breakPoints = _breakPoints;
+        mediaController = _matchMedia;      // inject only to manually activate mediaQuery ranges
+        mediaObserver = _mediaObserver;
+      }));
+
   afterEach(() => {
-    matchMedia.clearAll();
+     mediaController.clearAll();
   });
 
   it('can observe the initial, default activation for mediaQuery == "all". ', () => {
     let current: MediaChange = new MediaChange();
-    let subscription = matchMedia
+    let subscription = mediaController
         .observe()
         .subscribe((change: MediaChange) => {
           current = change;
@@ -48,20 +56,20 @@ describe('match-media', () => {
     let query2 = '(min-width: 730px) and (max-width: 950px)';
 
     const queries = [query1, query2];
-    let subscription = matchMedia.observe(queries).subscribe((change: MediaChange) => {
+    let subscription = mediaController.observe(queries).subscribe((change: MediaChange) => {
       current = change;
     });
 
     expect(current.mediaQuery).toEqual('all');    // default mediaQuery is active
-    let activated = matchMedia.activate(query1);    // simulate mediaQuery change to Query1
+    let activated = mediaController.activate(query1);    // simulate mediaQuery change to Query1
     expect(activated).toEqual(true);
     expect(current.mediaQuery).toEqual(query1);
-    expect(matchMedia.isActive(query1)).toBeTruthy();
+    expect(mediaController.isActive(query1)).toBeTruthy();
 
-    activated = matchMedia.activate(query2);        // simulate mediaQuery change to Query2
+    activated = mediaController.activate(query2);        // simulate mediaQuery change to Query2
     expect(activated).toEqual(true);
     expect(current.mediaQuery).toEqual(query2);   // confirm no notification
-    expect(matchMedia.isActive(query2)).toBeTruthy();
+    expect(mediaController.isActive(query2)).toBeTruthy();
 
     subscription.unsubscribe();
   });
@@ -71,131 +79,108 @@ describe('match-media', () => {
     let query1 = 'screen and (min-width: 610px) and (max-width: 620px)';
     let query2 = '(min-width: 730px) and (max-width: 950px)';
 
-    matchMedia.registerQuery([query1, query2]);
+    mediaController.registerQuery([query1, query2]);
 
-    let subscription = matchMedia.observe([query1], true).subscribe((change: MediaChange) => {
+    let subscription = mediaController.observe([query1], true).subscribe((change: MediaChange) => {
       current = change;
     });
 
-    activated = matchMedia.activate(query1);   // simulate mediaQuery change
+    activated = mediaController.activate(query1);   // simulate mediaQuery change
     expect(activated).toEqual(true);
     expect(current.mediaQuery).toEqual(query1);
-    expect(matchMedia.isActive(query1)).toBeTruthy();
+    expect(mediaController.isActive(query1)).toBeTruthy();
 
-    activated = matchMedia.activate(query2);   // simulate mediaQuery change
+    activated = mediaController.activate(query2);   // simulate mediaQuery change
     expect(activated).toEqual(true);
-    expect(matchMedia.isActive(query2)).toBeTruthy();
+    expect(mediaController.isActive(query2)).toBeTruthy();
 
     expect(current.mediaQuery).not.toEqual(query2);   // confirm no notification
     expect(current.mediaQuery).toEqual(query1);
 
     subscription.unsubscribe();
   });
 
-});
+  describe('match-media-observable', () => {
 
-describe('match-media-observable', () => {
-  let breakPoints: BreakPointRegistry;
-  let matchMedia: MockMatchMedia;
-  let mediaObserver: MediaObserver;
+    it('can observe an existing activation', () => {
+      let current: MediaChange = new MediaChange();
+      let bp = breakPoints.findByAlias('md')!;
+      mediaController.activate(bp.mediaQuery);
+      let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+        current = change;
+      });
 
-  beforeEach(() => {
-    // Configure testbed to prepare services
-    TestBed.configureTestingModule({
-      providers: [MockMatchMediaProvider]
+      expect(current.mediaQuery).toEqual(bp.mediaQuery);
+      subscription.unsubscribe();
     });
-  });
 
-  beforeEach(inject(
-      [MediaObserver, MatchMedia, BreakPointRegistry],
-      (_mediaObserver: MediaObserver, _matchMedia: MockMatchMedia,
-       _breakPoints: BreakPointRegistry) => {
-        matchMedia = _matchMedia;      // inject only to manually activate mediaQuery ranges
-        breakPoints = _breakPoints;
-        mediaObserver = _mediaObserver;
-      }));
-  afterEach(() => {
-    matchMedia.clearAll();
-  });
+    it('can observe the initial, default activation for mediaQuery == "all". ', () => {
+      let current: MediaChange = new MediaChange();
+      let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+        current = change;
+      });
 
-  it('can observe an existing activation', () => {
-    let current: MediaChange = new MediaChange();
-    let bp = breakPoints.findByAlias('md')!;
-    matchMedia.activate(bp.mediaQuery);
-    let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-      current = change;
+      expect(current.mediaQuery).toEqual('all');
+      subscription.unsubscribe();
     });
 
-    expect(current.mediaQuery).toEqual(bp.mediaQuery);
-    subscription.unsubscribe();
-  });
-
-  it('can observe the initial, default activation for mediaQuery == "all". ', () => {
-    let current: MediaChange = new MediaChange();
-    let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-      current = change;
-    });
-
-    expect(current.mediaQuery).toEqual('all');
-    subscription.unsubscribe();
-  });
-
-  it('can observe custom mediaQuery ranges', () => {
-    let current: MediaChange = new MediaChange();
-    let customQuery = 'screen and (min-width: 610px) and (max-width: 620px)';
-    let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-      current = change;
-    });
+    it('can observe custom mediaQuery ranges', () => {
+      let current: MediaChange = new MediaChange();
+      let customQuery = 'screen and (min-width: 610px) and (max-width: 620px)';
+      let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+        current = change;
+      });
 
-    matchMedia.useOverlaps = true;
-    let activated = matchMedia.activate(customQuery);
-    expect(activated).toEqual(true);
-    expect(current.mediaQuery).toEqual(customQuery);
+      mediaController.useOverlaps = true;
+      let activated = mediaController.activate(customQuery);
+      expect(activated).toEqual(true);
+      expect(current.mediaQuery).toEqual(customQuery);
 
-    subscription.unsubscribe();
-  });
-
-  it('can observe registered breakpoint activations', () => {
-    let current: MediaChange = new MediaChange();
-    let bp = breakPoints.findByAlias('md') !;
-    let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-      current = change;
+      subscription.unsubscribe();
     });
 
-    let activated = matchMedia.activate(bp.mediaQuery);
-    expect(activated).toEqual(true);
+    it('can observe registered breakpoint activations', () => {
+      let current: MediaChange = new MediaChange();
+      let bp = breakPoints.findByAlias('md') !;
+      let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+        current = change;
+      });
 
-    expect(current.mediaQuery).toEqual(bp.mediaQuery);
+      let activated = mediaController.activate(bp.mediaQuery);
+      expect(activated).toEqual(true);
 
-    subscription.unsubscribe();
-  });
+      expect(current.mediaQuery).toEqual(bp.mediaQuery);
 
-  /**
-   * Only the MediaObserver ignores de-activations;
-   * MediaMonitor and MatchMedia report both activations and de-activations!
-   */
-  it('ignores mediaQuery de-activations', () => {
-    let activationCount = 0;
-    let deactivationCount = 0;
-
-    mediaObserver.filterOverlaps = false;
-    let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-      if (change.matches) {
-        ++activationCount;
-      } else {
-        ++deactivationCount;
-      }
+      subscription.unsubscribe();
     });
 
-    matchMedia.activate(breakPoints.findByAlias('md')!.mediaQuery);
-    matchMedia.activate(breakPoints.findByAlias('gt-md')!.mediaQuery);
-    matchMedia.activate(breakPoints.findByAlias('lg')!.mediaQuery);
-
-    // 'all' mediaQuery is already active; total count should be (3)
-    expect(activationCount).toEqual(4);
-    expect(deactivationCount).toEqual(0);
+    /**
+     * Only the MediaObserver ignores de-activations;
+     * MediaMonitor and MatchMedia report both activations and de-activations!
+     */
+    it('ignores mediaQuery de-activations', () => {
+      let activationCount = 0;
+      let deactivationCount = 0;
+
+      mediaObserver.filterOverlaps = false;
+      let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+        if (change.matches) {
+          ++activationCount;
+        } else {
+          ++deactivationCount;
+        }
+      });
+
+      mediaController.activate(breakPoints.findByAlias('md')!.mediaQuery);
+      mediaController.activate(breakPoints.findByAlias('gt-md')!.mediaQuery);
+      mediaController.activate(breakPoints.findByAlias('lg')!.mediaQuery);
+
+      // 'all' mediaQuery is already active; total count should be (3)
+      expect(activationCount).toEqual(4);
+      expect(deactivationCount).toEqual(0);
+
+      subscription.unsubscribe();
+    });
 
-    subscription.unsubscribe();
   });
-
 });

src/lib/core/match-media/match-media.ts

@@ -167,9 +167,9 @@ function buildQueryCss(mediaQueries: string[], _document: Document) {
 }
 
 function constructMql(query: string, isBrowser: boolean): MediaQueryList {
-  const canListen = isBrowser && !!(<any>window).matchMedia('all').addListener;
+  const canListen = isBrowser && !!(<Window>window).matchMedia('all').addListener;
 
-  return canListen ? (<any>window).matchMedia(query) : {
+  return canListen ? (<Window>window).matchMedia(query) : {
     matches: query === 'all' || query === '',
     media: query,
     addListener: () => {