From d27fc03fbd542d8f3865ea7477a2525e5c820de7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 18 Jul 2026 09:03:05 +0200 Subject: [PATCH] refactor(material-experimental/column-resize): switch tests away from fakeAsync Reworks the column resize tests not to depend on `fakeAsync`. --- .../column-resize/column-resize.spec.ts | 148 +++++++++++------- 1 file changed, 90 insertions(+), 58 deletions(-) diff --git a/src/material-experimental/column-resize/column-resize.spec.ts b/src/material-experimental/column-resize/column-resize.spec.ts index 6c93f1ebf4ad..e7ecfdd53d0d 100644 --- a/src/material-experimental/column-resize/column-resize.spec.ts +++ b/src/material-experimental/column-resize/column-resize.spec.ts @@ -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'; @@ -387,14 +387,16 @@ describe('Material Popover Edit', () => { let component: BaseTestComponent; let fixture: ComponentFixture; - 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(); @@ -402,7 +404,8 @@ describe('Material Popover Edit', () => { component.triggerHoverState(); fixture.detectChanges(); - tick(200); + await wait(250); + fixture.detectChanges(); expect( component.getOverlayThumbElement(0).classList.contains('mat-column-resize-overlay-thumb'), @@ -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'), @@ -430,13 +434,13 @@ 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); @@ -444,13 +448,15 @@ describe('Material Popover Edit', () => { 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; @@ -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; @@ -478,15 +484,16 @@ 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); @@ -494,13 +501,15 @@ describe('Material Popover Edit', () => { 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); @@ -508,7 +517,7 @@ describe('Material Popover Edit', () => { component.updateResizeWithMouseInProgress(1); fixture.detectChanges(); - flush(); + await fixture.whenStable(); thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition; @@ -516,46 +525,52 @@ describe('Material Popover Edit', () => { 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; @@ -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; @@ -586,21 +602,22 @@ 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; @@ -608,30 +625,35 @@ describe('Material Popover Edit', () => { 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); - })); + }); }); } @@ -640,7 +662,7 @@ describe('Material Popover Edit', () => { let fixture: ComponentFixture; let columnSizeStore: FakeColumnSizeStore; - beforeEach(fakeAsync(() => { + beforeEach(async () => { TestBed.configureTestingModule({ providers: [ FakeColumnSizeStore, @@ -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(); @@ -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(); @@ -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 { + return new Promise(resolve => setTimeout(resolve, milliseconds)); +} + function createElementData() { return [ {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},