Skip to content

test(multiple): rework whenStable usages #30878

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
Apr 16, 2025
Merged

test(multiple): rework whenStable usages #30878

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
56 changes: 22 additions & 34 deletions src/cdk/a11y/focus-trap/focus-trap.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
ViewChild,
ViewContainerRef,
ViewEncapsulation,
inject as inject_1,
inject,
} from '@angular/core';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
Expand Down Expand Up @@ -217,16 +217,13 @@ describe('FocusTrap', () => {
fixture.componentInstance.showTrappedRegion = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.whenStable().then(() => {
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
});
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
}));

it('should capture focus if auto capture is enabled later on', waitForAsync(() => {
Expand All @@ -243,16 +240,13 @@ describe('FocusTrap', () => {
fixture.componentInstance.autoCaptureEnabled = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.whenStable().then(() => {
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
});
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
}));

it('should automatically capture and return focus on init / destroy inside the shadow DOM', waitForAsync(() => {
Expand All @@ -270,16 +264,13 @@ describe('FocusTrap', () => {
fixture.componentInstance.showTrappedRegion = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.whenStable().then(() => {
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
});
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
}));

it('should capture focus if auto capture is enabled later on inside the shadow DOM', waitForAsync(() => {
Expand All @@ -300,16 +291,13 @@ describe('FocusTrap', () => {
fixture.componentInstance.autoCaptureEnabled = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.whenStable().then(() => {
expect(getActiveElement().id).toBe('auto-capture-target');

fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
fixture.componentInstance.showTrappedRegion = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
});
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
}));
});

Expand Down Expand Up @@ -473,7 +461,7 @@ class FocusTrapWithoutFocusableElements {
imports: [A11yModule, PortalModule],
})
class FocusTrapInsidePortal {
viewContainerRef = inject_1(ViewContainerRef);
viewContainerRef = inject(ViewContainerRef);

@ViewChild('template') template: TemplateRef<any>;
@ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet;
Expand Down
2 changes: 0 additions & 2 deletions src/cdk/overlay/overlay.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -955,7 +955,6 @@ describe('Overlay', () => {
const overlayRef = overlay.create(config);

overlayRef.attach(componentPortal);
await viewContainerFixture.whenStable();

const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.classList)
Expand All @@ -968,7 +967,6 @@ describe('Overlay', () => {
expect(pane.classList)
.withContext('Expected class not to be removed immediately')
.toContain('custom-panel-class');
await viewContainerFixture.whenStable();

pane.children[0].remove();
await new Promise(r => setTimeout(r));
Expand Down
6 changes: 2 additions & 4 deletions src/cdk/scrolling/virtual-scroll-viewport.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,15 +237,14 @@ describe('CdkVirtualScrollViewport', () => {
expect(viewport.getOffsetToRenderedContentStart()).toBe(10);
}));

it('should set content offset to bottom of content', fakeAsync(async () => {
it('should set content offset to bottom of content', fakeAsync(() => {
finishInit(fixture);
const contentSize = viewport.measureRenderedContentSize();

expect(contentSize).toBeGreaterThan(0);

viewport.setRenderedContentOffset(contentSize + 10, 'to-end');
flush();
await fixture.whenStable();

expect(viewport.getOffsetToRenderedContentStart()).toBe(10);
}));
Expand Down Expand Up @@ -1066,15 +1065,14 @@ describe('CdkVirtualScrollViewport', () => {
.toBe(0);
}));

it('should set content offset to bottom of content', fakeAsync(async () => {
it('should set content offset to bottom of content', fakeAsync(() => {
finishInit(fixture);
const contentSize = viewport.measureRenderedContentSize();

expect(contentSize).toBeGreaterThan(0);

viewport.setRenderedContentOffset(contentSize + 10, 'to-end');
flush();
await fixture.whenStable();

expect(viewport.getOffsetToRenderedContentStart()).toBe(0);
}));
Expand Down
26 changes: 10 additions & 16 deletions src/material/bottom-sheet/bottom-sheet.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -650,24 +650,18 @@ describe('MatBottomSheet', () => {
expect(focusTrapAnchors.length).toBeGreaterThan(0);
}));

it(
'should focus the first tabbable element of the bottom sheet on open when' +
'autoFocus is set to "first-tabbable"',
async () => {
bottomSheet.open(PizzaMsg, {
viewContainerRef: testViewContainerRef,
autoFocus: 'first-tabbable',
});
it('should focus the first tabbable element of the bottom sheet on open when autoFocus is set to "first-tabbable"', () => {
bottomSheet.open(PizzaMsg, {
viewContainerRef: testViewContainerRef,
autoFocus: 'first-tabbable',
});

viewContainerFixture.detectChanges();
await viewContainerFixture.whenStable();
viewContainerFixture.detectChanges();
viewContainerFixture.detectChanges();

expect(document.activeElement!.tagName)
.withContext('Expected first tabbable element (input) in the dialog to be focused.')
.toBe('INPUT');
},
);
expect(document.activeElement!.tagName)
.withContext('Expected first tabbable element (input) in the dialog to be focused.')
.toBe('INPUT');
});

it('should focus the bottom sheet element on open when autoFocus is set to "dialog"', fakeAsync(() => {
bottomSheet.open(PizzaMsg, {
Expand Down
78 changes: 36 additions & 42 deletions src/material/chips/chip-grid.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -935,20 +935,18 @@ describe('MatChipGrid', () => {
flush();
fixture.detectChanges();

fixture.whenStable().then(() => {
expect(errorTestComponent.form.submitted)
.withContext('Expected form to have been submitted')
.toBe(true);
expect(containerEl.classList)
.withContext('Expected container to have the invalid CSS class.')
.toContain('mat-form-field-invalid');
expect(containerEl.querySelectorAll('mat-error').length)
.withContext('Expected one error message to have been rendered.')
.toBe(1);
expect(chipGridEl.getAttribute('aria-invalid'))
.withContext('Expected aria-invalid to be set to "true".')
.toBe('true');
});
expect(errorTestComponent.form.submitted)
.withContext('Expected form to have been submitted')
.toBe(true);
expect(containerEl.classList)
.withContext('Expected container to have the invalid CSS class.')
.toContain('mat-form-field-invalid');
expect(containerEl.querySelectorAll('mat-error').length)
.withContext('Expected one error message to have been rendered.')
.toBe(1);
expect(chipGridEl.getAttribute('aria-invalid'))
.withContext('Expected aria-invalid to be set to "true".')
.toBe('true');
flush();
}));

Expand All @@ -957,36 +955,32 @@ describe('MatChipGrid', () => {
flush();
fixture.detectChanges();

fixture.whenStable().then(() => {
expect(containerEl.classList)
.withContext('Expected container to have the invalid CSS class.')
.toContain('mat-form-field-invalid');
expect(containerEl.querySelectorAll('mat-error').length)
.withContext('Expected one error message to have been rendered.')
.toBe(1);
expect(containerEl.querySelectorAll('mat-hint').length)
.withContext('Expected no hints to be shown.')
.toBe(0);

errorTestComponent.formControl.setValue('something');
flush();
fixture.detectChanges();
expect(containerEl.classList)
.withContext('Expected container to have the invalid CSS class.')
.toContain('mat-form-field-invalid');
expect(containerEl.querySelectorAll('mat-error').length)
.withContext('Expected one error message to have been rendered.')
.toBe(1);
expect(containerEl.querySelectorAll('mat-hint').length)
.withContext('Expected no hints to be shown.')
.toBe(0);

fixture.whenStable().then(() => {
expect(containerEl.classList).not.toContain(
'mat-form-field-invalid',
'Expected container not to have the invalid class when valid.',
);
expect(containerEl.querySelectorAll('mat-error').length)
.withContext('Expected no error messages when the input is valid.')
.toBe(0);
expect(containerEl.querySelectorAll('mat-hint').length)
.withContext('Expected one hint to be shown once the input is valid.')
.toBe(1);
});
errorTestComponent.formControl.setValue('something');
flush();
fixture.detectChanges();

flush();
});
expect(containerEl.classList).not.toContain(
'mat-form-field-invalid',
'Expected container not to have the invalid class when valid.',
);
expect(containerEl.querySelectorAll('mat-error').length)
.withContext('Expected no error messages when the input is valid.')
.toBe(0);
expect(containerEl.querySelectorAll('mat-hint').length)
.withContext('Expected one hint to be shown once the input is valid.')
.toBe(1);

flush();
}));

it('should set the proper aria-live attribute on the error messages', () => {
Expand Down
55 changes: 22 additions & 33 deletions src/material/datepicker/datepicker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,34 +389,28 @@ describe('MatDatepicker', () => {
}),
);

it(
'pressing enter on the currently selected date should close the calendar without ' +
'firing selectedChanged',
fakeAsync(() => {
const spy = jasmine.createSpy('selectionChanged spy');
const selectedSubscription = model.selectionChanged.subscribe(spy);
it('pressing enter on the currently selected date should close the calendar without firing selectedChanged', fakeAsync(() => {
const spy = jasmine.createSpy('selectionChanged spy');
const selectedSubscription = model.selectionChanged.subscribe(spy);

testComponent.datepicker.open();
fixture.detectChanges();
tick();
flush();
testComponent.datepicker.open();
fixture.detectChanges();
tick();
flush();

let calendarBodyEl = document.querySelector('.mat-calendar-body') as HTMLElement;
expect(calendarBodyEl).not.toBeNull();
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
let calendarBodyEl = document.querySelector('.mat-calendar-body') as HTMLElement;
expect(calendarBodyEl).not.toBeNull();
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));

dispatchKeyboardEvent(calendarBodyEl, 'keydown', ENTER);
fixture.detectChanges();
flush();
dispatchKeyboardEvent(calendarBodyEl, 'keydown', ENTER);
fixture.detectChanges();
flush();

fixture.whenStable().then(() => {
expect(spy).not.toHaveBeenCalled();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
selectedSubscription.unsubscribe();
});
}),
);
expect(spy).not.toHaveBeenCalled();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
selectedSubscription.unsubscribe();
}));

it('startAt should fallback to input value', () => {
expect(testComponent.datepicker.startAt).toEqual(new Date(2020, JAN, 1));
Expand Down Expand Up @@ -885,15 +879,10 @@ describe('MatDatepicker', () => {
beforeEach(fakeAsync(() => {
fixture = createComponent(DatepickerWithNgModel, [MatNativeDateModule]);
fixture.detectChanges();

fixture.whenStable().then(() => {
fixture.detectChanges();

testComponent = fixture.componentInstance;
model = fixture.debugElement
.query(By.directive(MatDatepicker))
.injector.get(MatDateSelectionModel);
});
testComponent = fixture.componentInstance;
model = fixture.debugElement
.query(By.directive(MatDatepicker))
.injector.get(MatDateSelectionModel);
}));

afterEach(fakeAsync(() => {
Expand Down
3 changes: 1 addition & 2 deletions src/material/dialog/testing/dialog-opener.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,12 @@ describe('MatTestDialogOpener', () => {
);
});

it('should pass data to the component', async () => {
it('should pass data to the component', () => {
const config = {data: 'test'};
const fixture = TestBed.createComponent(
MatTestDialogOpener.withComponent(ExampleComponent, config),
);
fixture.detectChanges();
await fixture.whenStable();
const dialogContainer = document.querySelector('mat-dialog-container');
expect(dialogContainer!.innerHTML).toContain('Data: test');
});
Expand Down
6 changes: 3 additions & 3 deletions src/material/menu/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1261,13 +1261,13 @@ describe('MatMenu', () => {
expect(destroyCount).withContext('Expected ngOnDestroy to have been called').toBe(2);
}));

it('should focus the first menu item when opening a lazy menu via keyboard', async () => {
it('should focus the first menu item when opening a lazy menu via keyboard', () => {
const fixture = createComponent(SimpleLazyMenu);
fixture.autoDetectChanges();
fixture.detectChanges();

// A click without a mousedown before it is considered a keyboard open.
fixture.componentInstance.triggerEl.nativeElement.click();
await fixture.whenStable();
fixture.detectChanges();

const item = document.querySelector('.mat-mdc-menu-panel [mat-menu-item]')!;

Expand Down
Loading
Loading