fix(MatchMediaObservable): register breakpoints so observable announces properly

Breakpoints are registered in the BreakPointRegistry. But the MatchMediaObservable does not iterate that registry to configure the default listeners. This means only the "all" breakpoint is announced when using the observable.

Fixes #65. Closes #64.

Author: ThomasBurleson

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

@@ -10,6 +10,11 @@ import {BreakPointRegistry} from '../breakpoints/break-point-registry';
 @Injectable()
 export class MockMatchMedia extends MatchMedia {
 
+  /**
+   * Special flag used to test BreakPoint registrations with MatchMedia
+   */
+  public autoRegisterQueries : boolean = true;
+
   constructor(_zone:NgZone, private _breakpoints:BreakPointRegistry ){
     super(_zone);
     this._actives = [ ];
@@ -119,7 +124,7 @@ export class MockMatchMedia extends MatchMedia {
    * Insure the mediaQuery is registered with MatchMedia
    */
   private _registerMediaQuery(mediaQuery) {
-    if ( !this._registry.has(mediaQuery) ) {
+    if ( !this._registry.has(mediaQuery) && this.autoRegisterQueries ) {
       this.registerQuery(mediaQuery);
     }
   }

src/lib/media-query/providers/match-media-observable-provider.spec.ts

@@ -35,6 +35,42 @@ describe('match-media-observable-provider', () => {
      });
    });
 
+  it('can can observe built-in mediaQueries', async(inject(
+    [MatchMediaObservable, MatchMedia],
+    (media$, matchMedia) => {
+      let current : MediaChange;
+
+      expect( media$ ).toBeDefined();
+
+      let subscription = media$.subscribe((change:MediaChange)=>{
+        current = change;
+      });
+
+      // Confirm initial match is for 'all'
+      expect(current).toBeDefined();
+      expect(current.matches).toBeTruthy();
+      expect(current.mediaQuery).toEqual("all");
+
+      try {
+        matchMedia.autoRegisterQueries = false;
+
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('md');
+        expect(current.mediaQuery).toEqual(findMediaQuery('md'));
+
+        matchMedia.activate('gt-lg');
+        expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
+
+        matchMedia.activate('unknown');
+        expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
+
+      } finally {
+        matchMedia.autoRegisterQueries = true;
+        subscription.unsubscribe();
+      }
+  })));
+
+
    it('can inject a MatchMediaObservable instance', async(inject(
      [MatchMediaObservable, MatchMedia],
      (media$, matchMedia) => {

src/lib/media-query/providers/match-media-observable-provider.ts

@@ -17,17 +17,21 @@ import {BreakPoint} from '../breakpoints/break-point';
  * notification. For custom mediaQuery notifications, alias information will not be injected and those
  * fields will be ''.
  *
- * !! Only activation mediaChange notifications are publised by the MatchMediaObservable
+ * !! Only mediaChange activations (not de-activations) are announced by the MatchMediaObservable
  */
 export function instanceOfMatchMediaObservable(mediaWatcher: MatchMedia, breakpoints: BreakPointRegistry) {
     let onlyActivations = function(change : MediaChange) { return change.matches === true; };
     let findBreakpoint = function(mediaQuery:string):BreakPoint { return breakpoints.findByQuery(mediaQuery); };
     let injectAlias = function(change : MediaChange) { return mergeAlias(change, findBreakpoint(change.mediaQuery)); };
 
+    // Register all the mediaQueries registered in the BreakPointRegistry
+    // This is needed so subscribers can be auto-notified of all standard, registered mediaQuery activations
+    breakpoints.items.forEach( (bp:BreakPoint) => mediaWatcher.observe(bp.mediaQuery) );
+
     // Note: the raw MediaChange events [from MatchMedia] do not contain important alias information
     //       these must be injected into the MediaChange
     return mediaWatcher.observe( ).filter( onlyActivations ).map( injectAlias );
-};
+}
 
 /**
  *  Provider to return observable to ALL MediaQuery events