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

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.
angular · Aug 29, 2017 · 7b64345 · 7b64345
1 parent 64a7c50
commit 7b64345
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 48 deletions.
diff --git a/LICENSE b/LICENSE
@@ -10,7 +10,7 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the  Software.
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

diff --git a/src/lib/api/core/base.ts b/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);
   }

diff --git a/src/lib/media-query/breakpoints/data/break-points.ts b/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',

diff --git a/src/lib/media-query/mock/mock-match-media.spec.ts b/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();
+  });
 });
diff --git a/src/lib/media-query/observable-media.spec.ts b/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();
+        })));
 
   });
 

diff --git a/src/lib/utils/testing/custom-matchers.ts b/src/lib/utils/testing/custom-matchers.ts
@@ -224,12 +224,12 @@ 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}'
+        `;
       }
     };
   };