diff --git a/src/material/grid-list/BUILD.bazel b/src/material/grid-list/BUILD.bazel index 8e033add5632..a3ac00e9b94f 100644 --- a/src/material/grid-list/BUILD.bazel +++ b/src/material/grid-list/BUILD.bazel @@ -48,6 +48,7 @@ ng_test_library( deps = [ ":grid-list", "//src/cdk/bidi", + "//src/cdk/platform", "@npm//@angular/platform-browser", ], ) diff --git a/src/material/grid-list/grid-list.spec.ts b/src/material/grid-list/grid-list.spec.ts index 621347f045e8..e0a47e9bfa67 100644 --- a/src/material/grid-list/grid-list.spec.ts +++ b/src/material/grid-list/grid-list.spec.ts @@ -1,21 +1,36 @@ -import {TestBed, ComponentFixture} from '@angular/core/testing'; +import {TestBed, ComponentFixture, inject} from '@angular/core/testing'; import {Component, DebugElement, Type, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MatGridList, MatGridListModule} from './index'; import {MatGridTile, MatGridTileText} from './grid-tile'; import {Directionality} from '@angular/cdk/bidi'; +import {Platform} from '@angular/cdk/platform'; describe('MatGridList', () => { + let disableComputedStyleTests = false; + function createComponent(componentType: Type): ComponentFixture { TestBed.configureTestingModule({ imports: [MatGridListModule], declarations: [componentType], }).compileComponents(); - return TestBed.createComponent(componentType); + const fixture = TestBed.createComponent(componentType); + + inject([Platform], (platform: Platform) => { + // IE and Edge aren't consistent in the values that they return from `getComputedStyle`. + // In some cases they return the computed values, and in others the passed-in ones. We use + // this flag to disable the tests that depend on `getComputedStyle` in order to avoid flakes. + // TODO: we can re-enable them when we start testing against the Chromium-based Edge. + disableComputedStyleTests = platform.EDGE || platform.TRIDENT; + })(); + + return fixture; } + afterEach(() => disableComputedStyleTests = false); + it('should throw error if cols is not defined', () => { const fixture = createComponent(GridListWithoutCols); @@ -71,6 +86,11 @@ describe('MatGridList', () => { it('should default to 1:1 row height if undefined ', () => { const fixture = createComponent(GridListWithUnspecifiedRowHeight); + + if (disableComputedStyleTests) { + return; + } + fixture.detectChanges(); const tile = fixture.debugElement.query(By.directive(MatGridTile)); const inlineStyles = tile.nativeElement.style; @@ -84,6 +104,10 @@ describe('MatGridList', () => { it('should use a ratio row height if passed in', () => { const fixture = createComponent(GirdListWithRowHeightRatio); + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.rowHeight = '4:1'; fixture.detectChanges(); @@ -105,6 +129,10 @@ describe('MatGridList', () => { it('should divide row height evenly in "fit" mode', () => { const fixture = createComponent(GridListWithFitRowHeightMode); + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.totalHeight = '300px'; fixture.detectChanges(); const tile = fixture.debugElement.query(By.directive(MatGridTile)); @@ -122,6 +150,10 @@ describe('MatGridList', () => { it('should use the fixed row height if passed in', () => { const fixture = createComponent(GridListWithFixedRowHeightMode); + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.rowHeight = '100px'; fixture.detectChanges(); @@ -136,16 +168,24 @@ describe('MatGridList', () => { it('should default to pixels if row height units are missing', () => { const fixture = createComponent(GridListWithUnitlessFixedRowHeight); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getDimension(tile, 'height')).toBe(100); }); it('should default gutter size to 1px', () => { const fixture = createComponent(GridListWithUnspecifiedGutterSize); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); // check horizontal gutter @@ -161,6 +201,10 @@ describe('MatGridList', () => { const fixture = createComponent(GridListWithUnspecifiedGutterSize); const gridList = fixture.debugElement.query(By.directive(MatGridList)); + if (disableComputedStyleTests) { + return; + } + gridList.componentInstance.gutterSize = 0; fixture.detectChanges(); @@ -177,8 +221,12 @@ describe('MatGridList', () => { it('should lay out the tiles correctly for a nested grid list', () => { const fixture = createComponent(NestedGridList); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const innerTiles = fixture.debugElement.queryAll( By.css('mat-grid-tile mat-grid-list mat-grid-tile')); @@ -189,8 +237,12 @@ describe('MatGridList', () => { it('should set the gutter size if passed', () => { const fixture = createComponent(GridListWithGutterSize); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); // check horizontal gutter @@ -204,8 +256,12 @@ describe('MatGridList', () => { it('should use pixels if gutter units are missing', () => { const fixture = createComponent(GridListWithUnitlessGutterSize); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); // check horizontal gutter @@ -221,6 +277,10 @@ describe('MatGridList', () => { const fixture = createComponent(GridListWithUnspecifiedGutterSize); const gridList = fixture.debugElement.query(By.directive(MatGridList)); + if (disableComputedStyleTests) { + return; + } + gridList.componentInstance.gutterSize = '10%'; fixture.detectChanges(); @@ -232,8 +292,12 @@ describe('MatGridList', () => { it('should set the correct list height in ratio mode', () => { const fixture = createComponent(GridListWithRatioHeightAndMulipleRows); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const list = fixture.debugElement.query(By.directive(MatGridList)); const inlineStyles = list.nativeElement.style; @@ -244,14 +308,23 @@ describe('MatGridList', () => { it('should set the correct list height in fixed mode', () => { const fixture = createComponent(GridListWithFixRowHeightAndMultipleRows); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const list = fixture.debugElement.query(By.directive(MatGridList)); expect(getDimension(list, 'height')).toBe(201); }); it('should allow adjustment of tile colspan', () => { const fixture = createComponent(GridListWithColspanBinding); + + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.colspan = 2; fixture.detectChanges(); @@ -266,6 +339,10 @@ describe('MatGridList', () => { it('should allow adjustment of tile rowspan', () => { const fixture = createComponent(GridListWithRowspanBinding); + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.rowspan = 2; fixture.detectChanges(); @@ -280,6 +357,10 @@ describe('MatGridList', () => { it('should lay out tiles correctly for a complex layout', () => { const fixture = createComponent(GridListWithComplexLayout); + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.tiles = [ {cols: 3, rows: 1}, {cols: 1, rows: 2}, @@ -314,6 +395,10 @@ describe('MatGridList', () => { it('should lay out tiles correctly', () => { const fixture = createComponent(GridListWithLayout); + if (disableComputedStyleTests) { + return; + } + fixture.detectChanges(); const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); @@ -347,6 +432,10 @@ describe('MatGridList', () => { () => { const fixture = createComponent(GridListWithSingleCellAtBeginning); + if (disableComputedStyleTests) { + return; + } + fixture.detectChanges(); const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); @@ -401,6 +490,10 @@ describe('MatGridList', () => { it('should reset the old styles when switching to a new tile styler', () => { const fixture = createComponent(GirdListWithRowHeightRatio); + if (disableComputedStyleTests) { + return; + } + fixture.componentInstance.rowHeight = '4:1'; fixture.detectChanges(); @@ -456,8 +549,12 @@ describe('MatGridList', () => { it('should lay out the tiles if they are not direct descendants of the list', () => { const fixture = createComponent(GridListWithIndirectTileDescendants); - fixture.detectChanges(); + if (disableComputedStyleTests) { + return; + } + + fixture.detectChanges(); const tile = fixture.debugElement.query(By.directive(MatGridTile)); const inlineStyles = tile.nativeElement.style;