test: clean up IE/Edge test workarounds

src/material-experimental/mdc-input/input.spec.ts

@@ -1,4 +1,3 @@
-import {Platform, PlatformModule} from '@angular/cdk/platform';
 import {dispatchFakeEvent, wrappedErrorMessage} from '../../cdk/testing/private';
 import {
   ChangeDetectionStrategy,
@@ -38,6 +37,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule} from './index';
+import {getSupportedInputTypes} from '@angular/cdk/platform';
 
 describe('MatMdcInput without forms', () => {
   it('should default to floating labels', fakeAsync(() => {
@@ -69,24 +69,21 @@ describe('MatMdcInput without forms', () => {
 
   it('should not be treated as empty if type is date', fakeAsync(() => {
     const fixture = createComponent(MatInputDateTestController);
-    const platform = TestBed.inject(Platform);
     fixture.detectChanges();
 
-    if (!(platform.TRIDENT || (platform.SAFARI && !platform.IOS))) {
+    if (getSupportedInputTypes().has('date')) {
       const formField = fixture.debugElement.query(By.directive(MatFormField))!
         .componentInstance as MatFormField;
       expect(formField).toBeTruthy();
       expect(formField!._control.empty).toBe(false);
     }
   }));
 
-  // Safari Desktop and IE don't support type="date" and fallback to type="text".
-  it('should be treated as empty if type is date in Safari Desktop or IE', fakeAsync(() => {
+  it('should be treated as empty if type is date on unsupported browser', fakeAsync(() => {
     const fixture = createComponent(MatInputDateTestController);
-    const platform = TestBed.inject(Platform);
     fixture.detectChanges();
 
-    if (platform.TRIDENT || (platform.SAFARI && !platform.IOS)) {
+    if (!getSupportedInputTypes().has('date')) {
       const formField = fixture.debugElement.query(By.directive(MatFormField))!
         .componentInstance as MatFormField;
       expect(formField).toBeTruthy();
@@ -1486,7 +1483,6 @@ function configureTestingModule(
       MatIconModule,
       MatInputModule,
       animations ? BrowserAnimationsModule : NoopAnimationsModule,
-      PlatformModule,
       ReactiveFormsModule,
       ...imports,
     ],

src/material/button/testing/shared.spec.ts

@@ -93,7 +93,7 @@ export function runHarnessTests(
     // cancel dispatched click events on disabled buttons. We skip this check on Edge and Firefox.
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1582570 and:
     // https://stackoverflow.com/questions/32377026/disabled-button-is-clickable-on-edge-browser
-    if (platform.EDGE || platform.FIREFOX) {
+    if (platform.FIREFOX) {
       return;
     }
 

src/material/grid-list/BUILD.bazel

@@ -49,7 +49,6 @@ 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,35 +1,20 @@
-import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
+import {TestBed, ComponentFixture} 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();
 
-    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;
+    return TestBed.createComponent<T>(componentType);
   }
 
-  afterEach(() => (disableComputedStyleTests = false));
-
   it('should throw error if cols is not defined', () => {
     const fixture = createComponent(GridListWithoutCols);
 
@@ -86,10 +71,6 @@ 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;
@@ -103,10 +84,6 @@ 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();
 
@@ -128,10 +105,6 @@ 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))!;
@@ -149,10 +122,6 @@ 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();
 
@@ -168,10 +137,6 @@ describe('MatGridList', () => {
   it('should default to pixels if row height units are missing', () => {
     const fixture = createComponent(GridListWithUnitlessFixedRowHeight);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const tile = fixture.debugElement.query(By.directive(MatGridTile))!;
     expect(getDimension(tile, 'height')).toBe(100);
@@ -180,10 +145,6 @@ describe('MatGridList', () => {
   it('should default gutter size to 1px', () => {
     const fixture = createComponent(GridListWithUnspecifiedGutterSize);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
 
@@ -200,10 +161,6 @@ describe('MatGridList', () => {
     const fixture = createComponent(GridListWithUnspecifiedGutterSize);
     const gridList = fixture.debugElement.query(By.directive(MatGridList))!;
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     gridList.componentInstance.gutterSize = 0;
     fixture.detectChanges();
 
@@ -221,10 +178,6 @@ describe('MatGridList', () => {
   it('should lay out the tiles correctly for a nested grid list', () => {
     const fixture = createComponent(NestedGridList);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const innerTiles = fixture.debugElement.queryAll(
       By.css('mat-grid-tile mat-grid-list mat-grid-tile'),
@@ -238,10 +191,6 @@ describe('MatGridList', () => {
   it('should set the gutter size if passed', () => {
     const fixture = createComponent(GridListWithGutterSize);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
 
@@ -257,10 +206,6 @@ describe('MatGridList', () => {
   it('should use pixels if gutter units are missing', () => {
     const fixture = createComponent(GridListWithUnitlessGutterSize);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
 
@@ -277,10 +222,6 @@ describe('MatGridList', () => {
     const fixture = createComponent(GridListWithUnspecifiedGutterSize);
     const gridList = fixture.debugElement.query(By.directive(MatGridList))!;
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     gridList.componentInstance.gutterSize = '10%';
     fixture.detectChanges();
 
@@ -293,10 +234,6 @@ describe('MatGridList', () => {
   it('should set the correct list height in ratio mode', () => {
     const fixture = createComponent(GridListWithRatioHeightAndMulipleRows);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const list = fixture.debugElement.query(By.directive(MatGridList))!;
     const inlineStyles = list.nativeElement.style;
@@ -309,10 +246,6 @@ describe('MatGridList', () => {
   it('should set the correct list height in fixed mode', () => {
     const fixture = createComponent(GridListWithFixRowHeightAndMultipleRows);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const list = fixture.debugElement.query(By.directive(MatGridList))!;
     expect(getDimension(list, 'height')).toBe(201);
@@ -321,10 +254,6 @@ describe('MatGridList', () => {
   it('should allow adjustment of tile colspan', () => {
     const fixture = createComponent(GridListWithColspanBinding);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.componentInstance.colspan = 2;
     fixture.detectChanges();
 
@@ -339,10 +268,6 @@ describe('MatGridList', () => {
   it('should allow adjustment of tile rowspan', () => {
     const fixture = createComponent(GridListWithRowspanBinding);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.componentInstance.rowspan = 2;
     fixture.detectChanges();
 
@@ -357,10 +282,6 @@ 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},
@@ -395,10 +316,6 @@ 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'));
 
@@ -431,10 +348,6 @@ describe('MatGridList', () => {
   it('should lay out tiles correctly when single cell to be placed at the beginning', () => {
     const fixture = createComponent(GridListWithSingleCellAtBeginning);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
 
@@ -497,10 +410,6 @@ 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();
 
@@ -562,10 +471,6 @@ describe('MatGridList', () => {
   it('should lay out the tiles if they are not direct descendants of the list', () => {
     const fixture = createComponent(GridListWithIndirectTileDescendants);
 
-    if (disableComputedStyleTests) {
-      return;
-    }
-
     fixture.detectChanges();
     const tile = fixture.debugElement.query(By.directive(MatGridTile))!;
     const inlineStyles = tile.nativeElement.style;

src/material/input/input.spec.ts

@@ -1,4 +1,4 @@
-import {Platform, PlatformModule, _supportsShadowDom} from '@angular/cdk/platform';
+import {getSupportedInputTypes, _supportsShadowDom} from '@angular/cdk/platform';
 import {
   createFakeEvent,
   dispatchFakeEvent,
@@ -77,23 +77,20 @@ describe('MatInput without forms', () => {
 
   it('should not be treated as empty if type is date', fakeAsync(() => {
     const fixture = createComponent(MatInputDateTestController);
-    const platform = TestBed.inject(Platform);
     fixture.detectChanges();
 
-    if (!(platform.TRIDENT || (platform.SAFARI && !platform.IOS))) {
+    if (getSupportedInputTypes().has('date')) {
       const el = fixture.debugElement.query(By.css('label'))!.nativeElement;
       expect(el).not.toBeNull();
       expect(el.classList.contains('mat-form-field-empty')).toBe(false);
     }
   }));
 
-  // Safari Desktop and IE don't support type="date" and fallback to type="text".
-  it('should be treated as empty if type is date in Safari Desktop or IE', fakeAsync(() => {
+  it('should be treated as empty if type is date on unsupported browser', fakeAsync(() => {
     const fixture = createComponent(MatInputDateTestController);
-    const platform = TestBed.inject(Platform);
     fixture.detectChanges();
 
-    if (platform.TRIDENT || (platform.SAFARI && !platform.IOS)) {
+    if (!getSupportedInputTypes().has('date')) {
       const el = fixture.debugElement.query(By.css('label'))!.nativeElement;
       expect(el).not.toBeNull();
       expect(el.classList.contains('mat-form-field-empty')).toBe(true);
@@ -1862,7 +1859,6 @@ function createComponent<T>(
       MatFormFieldModule,
       MatInputModule,
       BrowserAnimationsModule,
-      PlatformModule,
       ReactiveFormsModule,
       ...imports,
     ],

src/material/select/BUILD.bazel

@@ -63,7 +63,6 @@ ng_test_library(
         "//src/cdk/bidi",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
-        "//src/cdk/platform",
         "//src/cdk/scrolling",
         "//src/cdk/testing/private",
         "//src/material/core",