Skip to content

Commit 0254d10

Browse files
crisbetocrisbeto
authored
refactor(material-experimental/column-resize): switch tests away from fakeAsync (angular#33549)
Reworks the column resize tests not to depend on `fakeAsync`.
1 parent a62e659 commit 0254d10

1 file changed

Lines changed: 90 additions & 58 deletions

File tree

‎src/material-experimental/column-resize/column-resize.spec.ts‎

Lines changed: 90 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Service,
1010
ViewChild,
1111
} from '@angular/core';
12-
import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
12+
import {ComponentFixture, TestBed} from '@angular/core/testing';
1313
import {MatTableModule} from '@angular/material/table';
1414
import {BehaviorSubject, Observable, ReplaySubject} from 'rxjs';
1515
import {dispatchKeyboardEvent} from '../../cdk/testing/private';
@@ -387,22 +387,25 @@ describe('Material Popover Edit', () => {
387387
let component: BaseTestComponent;
388388
let fixture: ComponentFixture<BaseTestComponent>;
389389

390-
beforeEach(fakeAsync(() => {
390+
beforeEach(async () => {
391391
fixture = TestBed.createComponent(componentClass);
392392
component = fixture.componentInstance;
393393
fixture.detectChanges();
394-
flush();
395-
}));
394+
await fixture.whenStable();
395+
await wait(50);
396+
fixture.detectChanges();
397+
});
396398

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

400402
const headerRowHeight = component.getHeaderRowHeight();
401403
const tableHeight = component.getTableHeight();
402404

403405
component.triggerHoverState();
404406
fixture.detectChanges();
405-
tick(200);
407+
await wait(250);
408+
fixture.detectChanges();
406409

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

417420
component.beginColumnResizeWithMouse(0);
421+
fixture.detectChanges();
418422

419423
expect(
420424
component.getOverlayThumbElement(0).classList.contains('mat-column-resize-overlay-thumb'),
@@ -430,27 +434,29 @@ describe('Material Popover Edit', () => {
430434
component.completeResizeWithMouseInProgress(0);
431435
component.endHoverState();
432436
fixture.detectChanges();
433-
tick(200);
434-
flush();
437+
await wait(250);
438+
fixture.detectChanges();
435439

436440
expect(component.getOverlayThumbElement(0)).toBeUndefined();
437-
}));
441+
});
438442

439-
it('resizes the target column via mouse input (live updates)', fakeAsync(() => {
443+
it('resizes the target column via mouse input (live updates)', async () => {
440444
const initialTableWidth = component.getTableWidth();
441445
const initialColumnWidth = component.getColumnWidth(1);
442446
const initialColumnPosition = component.getColumnOriginPosition(1);
443447
// const initialNextColumnPosition = component.getColumnOriginPosition(2);
444448

445449
component.triggerHoverState();
446450
fixture.detectChanges();
447-
tick(200);
451+
await wait(250);
452+
fixture.detectChanges();
448453
component.beginColumnResizeWithMouse(1);
454+
fixture.detectChanges();
449455

450456
const initialThumbPosition = component.getOverlayThumbPosition(1);
451457
component.updateResizeWithMouseInProgress(5);
452458
fixture.detectChanges();
453-
flush();
459+
await fixture.whenStable();
454460

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

469475
component.updateResizeWithMouseInProgress(1);
470476
fixture.detectChanges();
471-
flush();
477+
await fixture.whenStable();
472478

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

480486
component.completeResizeWithMouseInProgress(1);
481-
flush();
487+
fixture.detectChanges();
488+
await fixture.whenStable();
482489

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

485492
component.endHoverState();
486493
fixture.detectChanges();
487-
}));
494+
});
488495

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

493500
component.columnResize.liveResizeUpdates = false;
494501

495502
component.triggerHoverState();
496503
fixture.detectChanges();
497-
tick(200);
504+
await wait(250);
505+
fixture.detectChanges();
498506
component.beginColumnResizeWithMouse(1);
507+
fixture.detectChanges();
499508

500509
const initialThumbPosition = component.getOverlayThumbPosition(1);
501510
component.updateResizeWithMouseInProgress(5);
502511
fixture.detectChanges();
503-
flush();
512+
await fixture.whenStable();
504513

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

509518
component.updateResizeWithMouseInProgress(1);
510519
fixture.detectChanges();
511-
flush();
520+
await fixture.whenStable();
512521

513522
thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
514523

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

518527
component.completeResizeWithMouseInProgress(1);
519-
flush();
528+
fixture.detectChanges();
529+
await fixture.whenStable();
520530

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

524534
component.endHoverState();
525535
fixture.detectChanges();
526-
}));
536+
});
527537

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

531541
component.triggerHoverState();
532542
fixture.detectChanges();
533-
tick(200);
543+
await wait(250);
544+
fixture.detectChanges();
534545
component.beginColumnResizeWithMouse(1, 2);
546+
fixture.detectChanges();
535547

536548
const initialPosition = component.getOverlayThumbPosition(1);
537549

538550
component.updateResizeWithMouseInProgress(5);
551+
fixture.detectChanges();
539552

540553
expect(component.getOverlayThumbPosition(1)).toBe(initialPosition);
541554
expect(component.getColumnWidth(1)).toBe(initialColumnWidth);
542-
}));
555+
});
543556

544-
it('cancels an active mouse resize with the escape key', fakeAsync(() => {
557+
it('cancels an active mouse resize with the escape key', async () => {
545558
const initialTableWidth = component.getTableWidth();
546559
const initialColumnWidth = component.getColumnWidth(1);
547560
const initialColumnPosition = component.getColumnOriginPosition(1);
548561

549562
component.triggerHoverState();
550563
fixture.detectChanges();
551-
tick(200);
564+
await wait(250);
565+
fixture.detectChanges();
552566
component.beginColumnResizeWithMouse(1);
567+
fixture.detectChanges();
553568

554569
const initialThumbPosition = component.getOverlayThumbPosition(1);
555570

556571
component.updateResizeWithMouseInProgress(5);
557572
fixture.detectChanges();
558-
flush();
573+
await fixture.whenStable();
559574

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

569584
dispatchKeyboardEvent(document, 'keyup', ESCAPE);
570-
flush();
585+
fixture.detectChanges();
586+
await fixture.whenStable();
571587

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

575591
component.endHoverState();
576592
fixture.detectChanges();
577-
}));
593+
});
578594

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

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

587603
component.triggerHoverState();
588604
fixture.detectChanges();
589-
tick(200);
605+
await wait(250);
606+
fixture.detectChanges();
590607

591608
expect(resize).toBe(null);
592609

593610
component.resizeColumnWithMouse(1, 5);
594611
fixture.detectChanges();
595-
flush();
612+
await fixture.whenStable();
596613

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

599616
component.endHoverState();
600617
fixture.detectChanges();
601-
}));
618+
});
602619

603-
it('does not notify subscribers of a canceled resize', fakeAsync(() => {
620+
it('does not notify subscribers of a canceled resize', async () => {
604621
let resize: ColumnSize | null = null;
605622
component.columnResize.columnResizeNotifier.resizeCompleted.subscribe(size => {
606623
resize = size;
607624
});
608625

609626
component.triggerHoverState();
610627
fixture.detectChanges();
611-
tick(200);
628+
await wait(250);
629+
fixture.detectChanges();
612630
component.beginColumnResizeWithMouse(0);
631+
fixture.detectChanges();
613632

614633
component.updateResizeWithMouseInProgress(5);
615-
flush();
634+
fixture.detectChanges();
635+
await fixture.whenStable();
616636

617637
dispatchKeyboardEvent(document, 'keyup', ESCAPE);
618-
flush();
638+
fixture.detectChanges();
639+
await fixture.whenStable();
619640

620641
component.endHoverState();
621642
fixture.detectChanges();
622643

623644
expect(resize).toBe(null);
624-
}));
645+
});
625646

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

630651
component.columnResize.columnResizeNotifier.resize('name', 173);
631-
flush();
652+
fixture.detectChanges();
653+
await fixture.whenStable();
632654

633655
expectApproximate(component.getColumnWidth(1), 173);
634-
}));
656+
});
635657
});
636658
}
637659

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

643-
beforeEach(fakeAsync(() => {
665+
beforeEach(async () => {
644666
TestBed.configureTestingModule({
645667
providers: [
646668
FakeColumnSizeStore,
@@ -651,32 +673,36 @@ describe('Material Popover Edit', () => {
651673
component = fixture.componentInstance;
652674
columnSizeStore = TestBed.inject(FakeColumnSizeStore);
653675
fixture.detectChanges();
654-
flush();
655-
}));
676+
await fixture.whenStable();
677+
await wait(50);
678+
fixture.detectChanges();
679+
});
656680

657-
it('applies the persisted size', fakeAsync(() => {
681+
it('applies the persisted size', async () => {
658682
expectApproximate(component.getColumnWidth(1), 300, false);
659683

660684
columnSizeStore.emitSize('theTable', 'name', 300);
661-
662-
flush();
685+
fixture.detectChanges();
686+
await fixture.whenStable();
663687

664688
expectApproximate(component.getColumnWidth(1), 300);
665-
}));
689+
});
666690

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

670694
component.triggerHoverState();
671695
fixture.detectChanges();
672-
tick(200);
696+
await wait(250);
697+
fixture.detectChanges();
673698

674699
component.resizeColumnWithMouse(1, 5);
675700
fixture.detectChanges();
676-
flush();
701+
await fixture.whenStable();
677702

678703
component.completeResizeWithMouseInProgress(1);
679-
flush();
704+
fixture.detectChanges();
705+
await fixture.whenStable();
680706

681707
component.endHoverState();
682708
fixture.detectChanges();
@@ -686,23 +712,25 @@ describe('Material Popover Edit', () => {
686712
expect(tableId).toBe('theTable');
687713
expect(columnId).toBe('name');
688714
expectApproximate(sizePx, initialColumnWidth + 5);
689-
}));
715+
});
690716

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

694720
component.columnResize.liveResizeUpdates = false;
695721

696722
component.triggerHoverState();
697723
fixture.detectChanges();
698-
tick(200);
724+
await wait(250);
725+
fixture.detectChanges();
699726

700727
component.resizeColumnWithMouse(1, 5);
701728
fixture.detectChanges();
702-
flush();
729+
await fixture.whenStable();
703730

704731
component.completeResizeWithMouseInProgress(1);
705-
flush();
732+
fixture.detectChanges();
733+
await fixture.whenStable();
706734

707735
component.endHoverState();
708736
fixture.detectChanges();
@@ -712,10 +740,14 @@ describe('Material Popover Edit', () => {
712740
expect(tableId).toBe('theTable');
713741
expect(columnId).toBe('name');
714742
expectApproximate(sizePx, initialColumnWidth + 5);
715-
}));
743+
});
716744
});
717745
});
718746

747+
function wait(milliseconds: number): Promise<void> {
748+
return new Promise(resolve => setTimeout(resolve, milliseconds));
749+
}
750+
719751
function createElementData() {
720752
return [
721753
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},

0 commit comments

Comments
 (0)