fix(fxLayoutGap): respond correctly to layout changes (#919)

Author: CaerusKaru

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

@@ -112,7 +112,7 @@ export class MediaMarshaller {
   getValue(element: HTMLElement, key: string, bp?: string): any {
     const bpMap = this.elementMap.get(element);
     if (bpMap) {
-      const values = bp !== undefined ? bpMap.get(bp) : this.getFallback(bpMap);
+      const values = bp !== undefined ? bpMap.get(bp) : this.getFallback(bpMap, key);
       if (values) {
         const value = values.get(key);
         return value !== undefined ? value : '';
@@ -129,7 +129,7 @@ export class MediaMarshaller {
   hasValue(element: HTMLElement, key: string): boolean {
     const bpMap = this.elementMap.get(element);
     if (bpMap) {
-      const values = this.getFallback(bpMap);
+      const values = this.getFallback(bpMap, key);
       if (values) {
         return values.get(key) !== undefined || false;
       }
@@ -214,13 +214,16 @@ export class MediaMarshaller {
   /**
    * get the fallback breakpoint for a given element, starting with the current breakpoint
    * @param bpMap
+   * @param key
    */
-  private getFallback(bpMap: BreakpointMap): ValueMap | undefined {
+  private getFallback(bpMap: BreakpointMap, key?: string): ValueMap | undefined {
     for (let i = 0; i < this.activatedBreakpoints.length; i++) {
       const activatedBp = this.activatedBreakpoints[i];
       const valueMap = bpMap.get(activatedBp.alias);
       if (valueMap) {
-        return valueMap;
+        if (key === undefined || valueMap.has(key)) {
+          return valueMap;
+        }
       }
     }
     return bpMap.get('');

src/lib/flex/layout-gap/layout-gap.spec.ts

@@ -10,6 +10,8 @@ import {CommonModule, isPlatformServer} from '@angular/common';
 import {TestBed, ComponentFixture, async, inject} from '@angular/core/testing';
 import {DIR_DOCUMENT} from '@angular/cdk/bidi';
 import {
+  MatchMedia,
+  MockMatchMedia,
   MockMatchMediaProvider,
   SERVER_TOKEN,
   StyleBuilder,
@@ -32,9 +34,12 @@ describe('layout-gap directive', () => {
   let fakeDocument: {body: {dir?: string}, documentElement: {dir?: string}};
   let styler: StyleUtils;
   let platformId: Object;
+  let matchMedia: MockMatchMedia;
   let createTestComponent = (template: string, styles?: any) => {
     fixture = makeCreateTestComponent(() => TestLayoutGapComponent)(template, styles);
-    inject([StyleUtils, PLATFORM_ID], (_styler: StyleUtils, _platformId: Object) => {
+    inject([MatchMedia, StyleUtils, PLATFORM_ID],
+      (_matchMedia: MockMatchMedia, _styler: StyleUtils, _platformId: Object) => {
+      matchMedia = _matchMedia;
       styler = _styler;
       platformId = _platformId;
     })();
@@ -49,6 +54,7 @@ describe('layout-gap directive', () => {
       imports: [CommonModule, FlexLayoutModule],
       declarations: [TestLayoutGapComponent],
       providers: [
+        MockMatchMediaProvider,
         {provide: DIR_DOCUMENT, useValue: fakeDocument},
         {provide: SERVER_TOKEN, useValue: true}
       ]
@@ -332,7 +338,80 @@ describe('layout-gap directive', () => {
   });
 
   describe('with responsive features', () => {
-    // TODO(ThomasBurleson): add tests here
+    it('should set gap on breakpoint change', () => {
+      let template = `
+        <div fxLayoutAlign='center center' fxLayoutGap='13px' fxLayoutGap.md="24px">
+          <div fxFlex></div>
+          <div fxFlex></div>
+          <div fxFlex></div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      expect(nodes.length).toEqual(3);
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '0px'}, styler);
+
+      matchMedia.activate('md');
+      fixture.detectChanges();
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '0px'}, styler);
+    });
+
+    it('should set gap without fallback', () => {
+      let template = `
+        <div fxLayoutAlign='center center' fxLayoutGap.md="24px">
+          <div fxFlex></div>
+          <div fxFlex></div>
+          <div fxFlex></div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      expect(nodes.length).toEqual(3);
+      expectEl(nodes[0]).not.toHaveStyle({'margin-right': '*'}, styler);
+      expectEl(nodes[1]).not.toHaveStyle({'margin-right': '*'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+      matchMedia.activate('md');
+      fixture.detectChanges();
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '0px'}, styler);
+    });
+
+    it('should set gap with responsive layout change', () => {
+      let template = `
+        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="24px">
+          <div fxFlex></div>
+          <div fxFlex></div>
+          <div fxFlex></div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      expect(nodes.length).toEqual(3);
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '24px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+      matchMedia.activate('xs');
+      fixture.detectChanges();
+      expectEl(nodes[0]).toHaveStyle({'margin-bottom': '24px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-bottom': '24px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-bottom': '*'}, styler);
+    });
   });
 
   describe('rtl support', () => {
@@ -412,7 +491,6 @@ describe('layout-gap directive', () => {
         ],
         declarations: [],
         providers: [
-          MockMatchMediaProvider,
           {
             provide: LayoutGapStyleBuilder,
             useClass: MockLayoutGapStyleBuilder,