Skip to content

Commit

Permalink
fix(fxLayoutGap): respond correctly to layout changes (#919)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CaerusKaru
CaerusKaru committed Dec 15, 2018
1 parent b8c040b commit 676ddf7
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 7 deletions.
11 changes: 7 additions & 4 deletions src/lib/core/media-marshaller/media-marshaller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 : '';
Expand All @@ -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;
}
Expand Down Expand Up @@ -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('');
Expand Down
84 changes: 81 additions & 3 deletions src/lib/flex/layout-gap/layout-gap.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
})();
Expand All @@ -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}
]
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -412,7 +491,6 @@ describe('layout-gap directive', () => {
],
declarations: [],
providers: [
MockMatchMediaProvider,
{
provide: LayoutGapStyleBuilder,
useClass: MockLayoutGapStyleBuilder,
Expand Down

0 comments on commit 676ddf7

Please sign in to comment.