Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 11, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/material/grid-list/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ ng_test_library(
deps = [
":grid-list",
"//src/cdk/bidi",
"//src/cdk/platform",
"@npm//@angular/platform-browser",
],
)
Expand Down
117 changes: 107 additions & 10 deletions src/material/grid-list/grid-list.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Expand Down Expand Up @@ -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;
Expand All @@ -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();

Expand All @@ -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));
Expand All @@ -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();

Expand All @@ -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
Expand All @@ -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();

Expand All @@ -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'));

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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();

Expand All @@ -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;

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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},
Expand Down Expand Up @@ -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'));

Expand Down Expand Up @@ -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'));

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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;

Expand Down