test(grid-list): disable flaky tests in Edge (#16504)

Disables some tests that have become so flaky that they aren't very useful in Edge.

Author: crisbeto

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",
     ],
 )

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<T>(componentType: Type<T>): ComponentFixture<T> {
     TestBed.configureTestingModule({
       imports: [MatGridListModule],
       declarations: [componentType],
     }).compileComponents();
 
-    return TestBed.createComponent<T>(componentType);
+    const fixture = TestBed.createComponent<T>(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;