fix(ObservableMedia): properly announce 'xs' activation at startup (#396)

MatchMedia was not properly announcing XS activations for applications with startup viewports < 600px.
Improve the specificity of the 'xs' media query enables proper MatchMedia notifications at startup.

Fixes #388.

Author: ThomasBurleson

src/lib/api/core/base.ts

@@ -133,9 +133,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    * Note: this allows use to preserve the original style
    * and optional restore it when the mediaQueries deactivate
    */
-  protected _getDisplayStyle(source?: HTMLElement): string {
-    let element: HTMLElement = source || this.nativeElement;
-    return lookupStyle(element, 'display');
+  protected _getDisplayStyle(source: HTMLElement = this.nativeElement): string {
+    return lookupStyle(source || this.nativeElement, 'display');
   }
 
   /**
@@ -164,7 +163,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   protected _applyStyleToElement(style: StyleDefinition,
                                  value?: string | number,
-                                 nativeElement?: any) {
+                                 nativeElement: any = this.nativeElement) {
     let element = nativeElement || this.nativeElement;
     applyStyleToElement(this._renderer, element, style, value);
   }

src/lib/media-query/breakpoints/data/break-points.ts

@@ -14,7 +14,7 @@ export const RESPONSIVE_ALIASES = [
 export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
   {
     alias: 'xs',
-    mediaQuery: '(max-width: 599px)'
+    mediaQuery: '(min-width: 0px) and (max-width: 599px)'
   },
   {
     alias: 'gt-xs',

src/lib/media-query/mock/mock-match-media.spec.ts

@@ -237,4 +237,21 @@ describe('mock-match-media', () => {
 
     subscription.unsubscribe();
   });
+
+  it('can observe a startup activation of XS', () => {
+    let current: MediaChange,
+        bpXS = breakPoints.findByAlias('xs');
+
+    matchMedia.activate(bpXS.mediaQuery);
+    let subscription = matchMedia.observe(bpXS.mediaQuery)
+          .subscribe((change: MediaChange) => {
+            current = change;
+          });
+
+    expect(current).toBeTruthy();
+    expect(current.mediaQuery).toEqual(bpXS.mediaQuery);
+    expect(matchMedia.isActive(bpXS.mediaQuery)).toBeTruthy();
+
+    subscription.unsubscribe();
+  });
 });

src/lib/media-query/observable-media.spec.ts

@@ -139,26 +139,46 @@ describe('observable-media', () => {
         }));
 
     it('can `.unsubscribe()` properly', async(inject(
-      [ObservableMedia, MatchMedia],
-      (media, matchMedia) => {
-        let current: MediaChange;
-        let subscription = media.subscribe((change: MediaChange) => {
-          current = change;
-        });
-
-        // Activate mediaQuery associated with 'md' alias
-        matchMedia.activate('md');
-        expect(current.mediaQuery).toEqual(findMediaQuery('md'));
-
-        // Un-subscribe
-        subscription.unsubscribe();
-
-        matchMedia.activate('lg');
-        expect(current.mqAlias).toBe('md');
-
-        matchMedia.activate('xs');
-        expect(current.mqAlias).toBe('md');
-      })));
+        [ObservableMedia, MatchMedia],
+        (media, matchMedia) => {
+          let current: MediaChange;
+          let subscription = media.subscribe((change: MediaChange) => {
+            current = change;
+          });
+
+          // Activate mediaQuery associated with 'md' alias
+          matchMedia.activate('md');
+          expect(current.mediaQuery).toEqual(findMediaQuery('md'));
+
+          // Un-subscribe
+          subscription.unsubscribe();
+
+          matchMedia.activate('lg');
+          expect(current.mqAlias).toBe('md');
+
+          matchMedia.activate('xs');
+          expect(current.mqAlias).toBe('md');
+        })));
+
+    it('can observe a startup activation of XS', async(inject(
+        [ObservableMedia, MatchMedia],
+        (media, matchMedia) => {
+          let current: MediaChange;
+          let subscription = media.subscribe((change: MediaChange) => {
+            current = change;
+          });
+
+          // Activate mediaQuery associated with 'md' alias
+          matchMedia.activate('xs');
+          expect(current.mediaQuery).toEqual(findMediaQuery('xs'));
+
+          // Un-subscribe
+          subscription.unsubscribe();
+
+          matchMedia.activate('lg');
+          expect(current.mqAlias).toBe('xs');
+
+        })));
   });
 
   describe('with custom BreakPoints', () => {
@@ -176,30 +196,30 @@ describe('observable-media', () => {
         providers: [
           BreakPointRegistry,   // Registry of known/used BreakPoint(s)
           MockMatchMediaProvider,
-          CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(CUSTOM_BREAKPOINTS, {defaults: excludeDefaults} ),
+          CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(CUSTOM_BREAKPOINTS, {defaults: excludeDefaults}),
           OBSERVABLE_MEDIA_PROVIDER,
         ]
       });
     });
 
     it('can activate custom alias with custom mediaQueries', async(inject(
-      [ObservableMedia, MatchMedia],
-      (media, matchMedia) => {
-        let current: MediaChange;
-        let subscription = media.subscribe((change: MediaChange) => {
-          current = change;
-        });
-
-        // Activate mediaQuery associated with 'md' alias
-        matchMedia.activate('print.md');
-        expect(current.mediaQuery).toEqual(mdMediaQuery);
-
-        matchMedia.activate('tablet-gt-xs');
-        expect(current.mqAlias).toBe('tablet-gt-xs');
-        expect(current.mediaQuery).toBe(gtXsMediaQuery);
-
-        subscription.unsubscribe();
-      })));
+        [ObservableMedia, MatchMedia],
+        (media, matchMedia) => {
+          let current: MediaChange;
+          let subscription = media.subscribe((change: MediaChange) => {
+            current = change;
+          });
+
+          // Activate mediaQuery associated with 'md' alias
+          matchMedia.activate('print.md');
+          expect(current.mediaQuery).toEqual(mdMediaQuery);
+
+          matchMedia.activate('tablet-gt-xs');
+          expect(current.mqAlias).toBe('tablet-gt-xs');
+          expect(current.mediaQuery).toBe(gtXsMediaQuery);
+
+          subscription.unsubscribe();
+        })));
 
   });
 

src/lib/utils/testing/custom-matchers.ts

@@ -224,12 +224,13 @@ function buildCompareStyleFunction(inlineOnly = true) {
     return {
       pass: allPassed,
       get message() {
-        const expectedValueStr = (typeof styles === 'string') ? styles : JSON.stringify(styles);
+        const expectedValueStr = (typeof styles === 'string') ? styles :
+            JSON.stringify(styles, null, 2);
         const foundValueStr = inlineOnly ? actual.outerHTML : JSON.stringify(found);
         return `
-                Expected ${foundValueStr} ${!allPassed ? ' ' : 'not '} to contain the
-                CSS ${typeof styles === 'string' ? 'property' : 'styles'} '${expectedValueStr}'
-              `;
+          Expected ${foundValueStr} ${!allPassed ? ' ' : 'not '} to contain the
+          CSS ${typeof styles === 'string' ? 'property' : 'styles'} '${expectedValueStr}'
+        `;
       }
     };
   };