Skip to content

refactor(material-experimental/column-resize): switch tests away from fakeAsync #33549

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

Open
crisbeto wants to merge 1 commit into
base: main
Choose a base branch
from
+90 −58
Open

refactor(material-experimental/column-resize): switch tests away from fakeAsync #33549

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
148 changes: 90 additions & 58 deletions src/material-experimental/column-resize/column-resize.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Service,
ViewChild,
} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MatTableModule} from '@angular/material/table';
import {BehaviorSubject, Observable, ReplaySubject} from 'rxjs';
import {dispatchKeyboardEvent} from '../../cdk/testing/private';
Expand Down Expand Up @@ -387,22 +387,25 @@ describe('Material Popover Edit', () => {
let component: BaseTestComponent;
let fixture: ComponentFixture<BaseTestComponent>;

beforeEach(fakeAsync(() => {
beforeEach(async () => {
fixture = TestBed.createComponent(componentClass);
component = fixture.componentInstance;
fixture.detectChanges();
flush();
}));
await fixture.whenStable();
await wait(50);
fixture.detectChanges();
});

it('shows resize handle overlays on header row hover and while a resize handle is in use', fakeAsync(() => {
it('shows resize handle overlays on header row hover and while a resize handle is in use', async () => {
expect(component.getOverlayThumbElement(0)).toBeUndefined();

const headerRowHeight = component.getHeaderRowHeight();
const tableHeight = component.getTableHeight();

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();

expect(
component.getOverlayThumbElement(0).classList.contains('mat-column-resize-overlay-thumb'),
Expand All @@ -415,6 +418,7 @@ describe('Material Popover Edit', () => {
expectApproximate(component.getOverlayThumbElement(2).offsetHeight, headerRowHeight);

component.beginColumnResizeWithMouse(0);
fixture.detectChanges();

expect(
component.getOverlayThumbElement(0).classList.contains('mat-column-resize-overlay-thumb'),
Expand All @@ -430,27 +434,29 @@ describe('Material Popover Edit', () => {
component.completeResizeWithMouseInProgress(0);
component.endHoverState();
fixture.detectChanges();
tick(200);
flush();
await wait(250);
fixture.detectChanges();

expect(component.getOverlayThumbElement(0)).toBeUndefined();
}));
});

it('resizes the target column via mouse input (live updates)', fakeAsync(() => {
it('resizes the target column via mouse input (live updates)', async () => {
const initialTableWidth = component.getTableWidth();
const initialColumnWidth = component.getColumnWidth(1);
const initialColumnPosition = component.getColumnOriginPosition(1);
// const initialNextColumnPosition = component.getColumnOriginPosition(2);

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();
component.beginColumnResizeWithMouse(1);
fixture.detectChanges();

const initialThumbPosition = component.getOverlayThumbPosition(1);
component.updateResizeWithMouseInProgress(5);
fixture.detectChanges();
flush();
await fixture.whenStable();

let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
Expand All @@ -468,7 +474,7 @@ describe('Material Popover Edit', () => {

component.updateResizeWithMouseInProgress(1);
fixture.detectChanges();
flush();
await fixture.whenStable();

thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
Expand All @@ -478,84 +484,93 @@ describe('Material Popover Edit', () => {
expectApproximate(component.getColumnWidth(1), initialColumnWidth + 1);

component.completeResizeWithMouseInProgress(1);
flush();
fixture.detectChanges();
await fixture.whenStable();

expectApproximate(component.getColumnWidth(1), initialColumnWidth + 1);

component.endHoverState();
fixture.detectChanges();
}));
});

it('resizes the target column via mouse input (no live update)', fakeAsync(() => {
it('resizes the target column via mouse input (no live update)', async () => {
const initialTableWidth = component.getTableWidth();
const initialColumnWidth = component.getColumnWidth(1);

component.columnResize.liveResizeUpdates = false;

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();
component.beginColumnResizeWithMouse(1);
fixture.detectChanges();

const initialThumbPosition = component.getOverlayThumbPosition(1);
component.updateResizeWithMouseInProgress(5);
fixture.detectChanges();
flush();
await fixture.whenStable();

let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
expectApproximate(thumbPositionDelta, 5);
expect(component.getColumnWidth(1)).toBe(initialColumnWidth);

component.updateResizeWithMouseInProgress(1);
fixture.detectChanges();
flush();
await fixture.whenStable();

thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;

expect(component.getTableWidth()).toBe(initialTableWidth);
expect(component.getColumnWidth(1)).toBe(initialColumnWidth);

component.completeResizeWithMouseInProgress(1);
flush();
fixture.detectChanges();
await fixture.whenStable();

expectApproximate(component.getTableWidth(), initialTableWidth + 1);
expectApproximate(component.getColumnWidth(1), initialColumnWidth + 1);

component.endHoverState();
fixture.detectChanges();
}));
});

it('should not start dragging using the right mouse button', fakeAsync(() => {
it('should not start dragging using the right mouse button', async () => {
const initialColumnWidth = component.getColumnWidth(1);

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();
component.beginColumnResizeWithMouse(1, 2);
fixture.detectChanges();

const initialPosition = component.getOverlayThumbPosition(1);

component.updateResizeWithMouseInProgress(5);
fixture.detectChanges();

expect(component.getOverlayThumbPosition(1)).toBe(initialPosition);
expect(component.getColumnWidth(1)).toBe(initialColumnWidth);
}));
});

it('cancels an active mouse resize with the escape key', fakeAsync(() => {
it('cancels an active mouse resize with the escape key', async () => {
const initialTableWidth = component.getTableWidth();
const initialColumnWidth = component.getColumnWidth(1);
const initialColumnPosition = component.getColumnOriginPosition(1);

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();
component.beginColumnResizeWithMouse(1);
fixture.detectChanges();

const initialThumbPosition = component.getOverlayThumbPosition(1);

component.updateResizeWithMouseInProgress(5);
fixture.detectChanges();
flush();
await fixture.whenStable();

let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
Expand All @@ -567,16 +582,17 @@ describe('Material Popover Edit', () => {
// expAppexpectApproximateect(component.getTableWidth(), initialTableWidth + 5);

dispatchKeyboardEvent(document, 'keyup', ESCAPE);
flush();
fixture.detectChanges();
await fixture.whenStable();

expectApproximate(component.getColumnWidth(1), initialColumnWidth);
expectApproximate(component.getTableWidth(), initialTableWidth);

component.endHoverState();
fixture.detectChanges();
}));
});

it('notifies subscribers of a completed resize via ColumnResizeNotifier', fakeAsync(() => {
it('notifies subscribers of a completed resize via ColumnResizeNotifier', async () => {
const initialColumnWidth = component.getColumnWidth(1);

let resize: ColumnSize | null = null as ColumnSize | null;
Expand All @@ -586,52 +602,58 @@ describe('Material Popover Edit', () => {

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();

expect(resize).toBe(null);

component.resizeColumnWithMouse(1, 5);
fixture.detectChanges();
flush();
await fixture.whenStable();

expect(resize).toEqual({columnId: 'name', size: initialColumnWidth + 5});

component.endHoverState();
fixture.detectChanges();
}));
});

it('does not notify subscribers of a canceled resize', fakeAsync(() => {
it('does not notify subscribers of a canceled resize', async () => {
let resize: ColumnSize | null = null;
component.columnResize.columnResizeNotifier.resizeCompleted.subscribe(size => {
resize = size;
});

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();
component.beginColumnResizeWithMouse(0);
fixture.detectChanges();

component.updateResizeWithMouseInProgress(5);
flush();
fixture.detectChanges();
await fixture.whenStable();

dispatchKeyboardEvent(document, 'keyup', ESCAPE);
flush();
fixture.detectChanges();
await fixture.whenStable();

component.endHoverState();
fixture.detectChanges();

expect(resize).toBe(null);
}));
});

it('performs a column resize triggered via ColumnResizeNotifier', fakeAsync(() => {
it('performs a column resize triggered via ColumnResizeNotifier', async () => {
// Pre-verify that we are not updating the size to the initial size.
expectApproximate(component.getColumnWidth(1), 173, false);

component.columnResize.columnResizeNotifier.resize('name', 173);
flush();
fixture.detectChanges();
await fixture.whenStable();

expectApproximate(component.getColumnWidth(1), 173);
}));
});
});
}

Expand All @@ -640,7 +662,7 @@ describe('Material Popover Edit', () => {
let fixture: ComponentFixture<BaseTestComponent>;
let columnSizeStore: FakeColumnSizeStore;

beforeEach(fakeAsync(() => {
beforeEach(async () => {
TestBed.configureTestingModule({
providers: [
FakeColumnSizeStore,
Expand All @@ -651,32 +673,36 @@ describe('Material Popover Edit', () => {
component = fixture.componentInstance;
columnSizeStore = TestBed.inject(FakeColumnSizeStore);
fixture.detectChanges();
flush();
}));
await fixture.whenStable();
await wait(50);
fixture.detectChanges();
});

it('applies the persisted size', fakeAsync(() => {
it('applies the persisted size', async () => {
expectApproximate(component.getColumnWidth(1), 300, false);

columnSizeStore.emitSize('theTable', 'name', 300);

flush();
fixture.detectChanges();
await fixture.whenStable();

expectApproximate(component.getColumnWidth(1), 300);
}));
});

it('persists the user-triggered size update', fakeAsync(() => {
it('persists the user-triggered size update', async () => {
const initialColumnWidth = component.getColumnWidth(1);

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();

component.resizeColumnWithMouse(1, 5);
fixture.detectChanges();
flush();
await fixture.whenStable();

component.completeResizeWithMouseInProgress(1);
flush();
fixture.detectChanges();
await fixture.whenStable();

component.endHoverState();
fixture.detectChanges();
Expand All @@ -686,23 +712,25 @@ describe('Material Popover Edit', () => {
expect(tableId).toBe('theTable');
expect(columnId).toBe('name');
expectApproximate(sizePx, initialColumnWidth + 5);
}));
});

it('persists the user-triggered size update (live updates off)', fakeAsync(() => {
it('persists the user-triggered size update (live updates off)', async () => {
const initialColumnWidth = component.getColumnWidth(1);

component.columnResize.liveResizeUpdates = false;

component.triggerHoverState();
fixture.detectChanges();
tick(200);
await wait(250);
fixture.detectChanges();

component.resizeColumnWithMouse(1, 5);
fixture.detectChanges();
flush();
await fixture.whenStable();

component.completeResizeWithMouseInProgress(1);
flush();
fixture.detectChanges();
await fixture.whenStable();

component.endHoverState();
fixture.detectChanges();
Expand All @@ -712,10 +740,14 @@ describe('Material Popover Edit', () => {
expect(tableId).toBe('theTable');
expect(columnId).toBe('name');
expectApproximate(sizePx, initialColumnWidth + 5);
}));
});
});
});

function wait(milliseconds: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}

function createElementData() {
return [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
Expand Down
Loading