fix(mock-match-media): ensure overlapping breakpoints are activated (#1265)

Author: CaerusKaru

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

@@ -255,4 +255,17 @@ describe('mock-match-media', () => {
 
     subscription.unsubscribe();
   });
+
+  it('activates overlapping breakpoints correct', () => {
+    mediaController.activate('xs', true);
+    expect(mediaController
+      .isActive('screen and (min-width: 0px) and (max-width: 599.9px)'))
+      .toBe(true);
+    expect(mediaController
+      .isActive('screen and (min-width: 600px) and (max-width: 959.9px)'))
+      .toBe(false);
+    expect(mediaController
+      .isActive('screen and (max-width: 599.9px)'))
+      .toBe(true);
+  });
 });

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

@@ -72,54 +72,58 @@ export class MockMatchMedia extends MatchMedia {
       // Simulate activation of overlapping lt-<XXX> ranges
       switch (alias) {
         case 'lg'   :
-          this._activateByAlias('lt-xl');
+          this._activateByAlias(['lt-xl']);
           break;
         case 'md'   :
-          this._activateByAlias('lt-xl, lt-lg');
+          this._activateByAlias(['lt-xl', 'lt-lg']);
           break;
         case 'sm'   :
-          this._activateByAlias('lt-xl, lt-lg, lt-md');
+          this._activateByAlias(['lt-xl', 'lt-lg', 'lt-md']);
           break;
         case 'xs'   :
-          this._activateByAlias('lt-xl, lt-lg, lt-md, lt-sm');
+          this._activateByAlias(['lt-xl', 'lt-lg', 'lt-md', 'lt-sm']);
           break;
       }
 
       // Simulate activation of overlapping gt-<xxxx> mediaQuery ranges
       switch (alias) {
         case 'xl'   :
-          this._activateByAlias('gt-lg, gt-md, gt-sm, gt-xs');
+          this._activateByAlias(['gt-lg', 'gt-md', 'gt-sm', 'gt-xs']);
           break;
         case 'lg'   :
-          this._activateByAlias('gt-md, gt-sm, gt-xs');
+          this._activateByAlias(['gt-md', 'gt-sm', 'gt-xs']);
           break;
         case 'md'   :
-          this._activateByAlias('gt-sm, gt-xs');
+          this._activateByAlias(['gt-sm', 'gt-xs']);
           break;
         case 'sm'   :
-          this._activateByAlias('gt-xs');
+          this._activateByAlias(['gt-xs']);
           break;
       }
     }
+
     // Activate last since the responsiveActivation is watching *this* mediaQuery
     return this._activateByQuery(mediaQuery);
   }
 
   /**
    *
    */
-  private _activateByAlias(aliases: string) {
+  private _activateByAlias(aliases: string[]) {
     const activate = (alias: string) => {
       const bp = this._breakpoints.findByAlias(alias);
       this._activateByQuery(bp ? bp.mediaQuery : alias);
     };
-    aliases.split(',').forEach(alias => activate(alias.trim()));
+    aliases.forEach(activate);
   }
 
   /**
    *
    */
   private _activateByQuery(mediaQuery: string) {
+    if (!this.registry.has(mediaQuery) && this.autoRegisterQueries) {
+      this._registerMediaQuery(mediaQuery);
+    }
     const mql: MockMediaQueryList = this.registry.get(mediaQuery) as MockMediaQueryList;
 
     if (mql && !this.isActive(mediaQuery)) {