Skip to content

refactor(material/timepicker): switch tests away from fakeAsync #33266

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
crisbeto merged 1 commit into from
May 18, 2026
+48 −49
Merged

refactor(material/timepicker): switch tests away from fakeAsync #33266

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
97 changes: 48 additions & 49 deletions src/material/timepicker/timepicker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
ViewEncapsulation,
ChangeDetectionStrategy,
} from '@angular/core';
import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {DateAdapter, MATERIAL_ANIMATIONS, provideNativeDateAdapter} from '../core';
import {
clearElement,
Expand Down Expand Up @@ -45,7 +45,7 @@ describe('MatTimepicker', () => {
beforeEach(() => configureTestingModule());

describe('value selection', () => {
it('should only change the time part of the selected date', fakeAsync(() => {
it('should only change the time part of the selected date', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.componentInstance.value.set(new Date(2024, 0, 15, 0, 0, 0));
fixture.detectChanges();
Expand All @@ -54,7 +54,7 @@ describe('MatTimepicker', () => {

getOptions()[3].click();
fixture.detectChanges();
flush();
await fixture.whenStable();

const value = fixture.componentInstance.input.value()!;
expect(value).toBeTruthy();
Expand All @@ -64,9 +64,9 @@ describe('MatTimepicker', () => {
expect(adapter.getHours(value)).toBe(1);
expect(adapter.getMinutes(value)).toBe(30);
expect(adapter.getSeconds(value)).toBe(0);
}));
});

it('should accept the selected value and close the panel when clicking an option', fakeAsync(() => {
it('should accept the selected value and close the panel when clicking an option', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
const input = getInput(fixture);
fixture.detectChanges();
Expand All @@ -79,7 +79,7 @@ describe('MatTimepicker', () => {

getOptions()[1].click();
fixture.detectChanges();
flush();
await fixture.whenStable();

expect(getPanel()).toBeFalsy();
expect(input.value).toBe('12:30 AM');
Expand All @@ -91,9 +91,9 @@ describe('MatTimepicker', () => {
value: jasmine.any(Date),
}),
);
}));
});

it('should support two-way binding on the `value` input', fakeAsync(() => {
it('should support two-way binding on the `value` input', async () => {
const fixture = TestBed.createComponent(TimepickerTwoWayBinding);
const input = getInput(fixture);
fixture.detectChanges();
Expand All @@ -115,14 +115,14 @@ describe('MatTimepicker', () => {
// Propagation from host down to input
fixture.componentInstance.value.set(createTime(13, 37));
fixture.detectChanges();
flush();
await fixture.whenStable();
value = inputInstance.value()!;
expect(adapter.getHours(value)).toBe(13);
expect(adapter.getMinutes(value)).toBe(37);
expectSameTime(fixture.componentInstance.value(), value);
}));
});

it('should emit the `selected` event if the option being clicked was selected already', fakeAsync(() => {
it('should emit the `selected` event if the option being clicked was selected already', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.componentInstance.value.set(new Date(2024, 0, 15, 2, 30, 0));
fixture.detectChanges();
Expand All @@ -132,7 +132,7 @@ describe('MatTimepicker', () => {

getOptions()[getActiveOptionIndex()].click();
fixture.detectChanges();
flush();
await fixture.whenStable();

expect(getPanel()).toBeFalsy();
expect(fixture.componentInstance.selectedSpy).toHaveBeenCalledTimes(1);
Expand All @@ -142,7 +142,7 @@ describe('MatTimepicker', () => {
value: jasmine.any(Date),
}),
);
}));
});
});

describe('input behavior', () => {
Expand Down Expand Up @@ -343,44 +343,44 @@ describe('MatTimepicker', () => {
expect(getPanel()).toBeFalsy();
});

it('should close the timepicker when clicking outside', fakeAsync(() => {
it('should close the timepicker when clicking outside', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.detectChanges();
getInput(fixture).click();
fixture.detectChanges();
expect(getPanel()).toBeTruthy();
document.body.click();
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(getPanel()).toBeFalsy();
}));
});

it('should close the timepicker when tabbing away from the input', fakeAsync(() => {
it('should close the timepicker when tabbing away from the input', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.detectChanges();
getInput(fixture).click();
fixture.detectChanges();
expect(getPanel()).toBeTruthy();
dispatchKeyboardEvent(getInput(fixture), 'keydown', TAB);
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(getPanel()).toBeFalsy();
}));
});

it('should close the timepicker when pressing escape', fakeAsync(() => {
it('should close the timepicker when pressing escape', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.detectChanges();
getInput(fixture).click();
fixture.detectChanges();
expect(getPanel()).toBeTruthy();
const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(getPanel()).toBeFalsy();
expect(event.defaultPrevented).toBe(true);
}));
});

it('should emit events on open/close', fakeAsync(() => {
it('should emit events on open/close', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.detectChanges();
const {openedSpy, closedSpy} = fixture.componentInstance;
Expand All @@ -394,10 +394,10 @@ describe('MatTimepicker', () => {

document.body.click();
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(openedSpy).toHaveBeenCalledTimes(1);
expect(closedSpy).toHaveBeenCalledTimes(1);
}));
});

it('should clean up the overlay if it is open on destroy', () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
Expand All @@ -409,17 +409,17 @@ describe('MatTimepicker', () => {
expect(getPanel()).toBeFalsy();
});

it('should be able to open and close the panel programmatically', fakeAsync(() => {
it('should be able to open and close the panel programmatically', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.detectChanges();
fixture.componentInstance.timepicker.open();
fixture.detectChanges();
expect(getPanel()).toBeTruthy();
fixture.componentInstance.timepicker.close();
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(getPanel()).toBeFalsy();
}));
});

it('should focus the input when opened programmatically', () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
Expand All @@ -431,7 +431,7 @@ describe('MatTimepicker', () => {
expect(document.activeElement).toBe(input);
});

it('should expose the current open state', fakeAsync(() => {
it('should expose the current open state', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
fixture.detectChanges();
const timepicker = fixture.componentInstance.timepicker;
Expand All @@ -441,12 +441,12 @@ describe('MatTimepicker', () => {
expect(timepicker.isOpen()).toBe(true);
timepicker.close();
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(timepicker.isOpen()).toBe(false);
}));
});

// Note: this will be a type checking error, but we check it just in case for JIT mode.
it('should do nothing if trying to open a timepicker without an input', fakeAsync(() => {
it('should do nothing if trying to open a timepicker without an input', async () => {
const fixture = TestBed.createComponent(TimepickerWithoutInput);
fixture.detectChanges();
fixture.componentInstance.timepicker.open();
Expand All @@ -456,11 +456,10 @@ describe('MatTimepicker', () => {
expect(() => {
fixture.componentInstance.timepicker.close();
fixture.detectChanges();
flush();
}).not.toThrow();
}));
});

it('should be able to reopen the panel when closed by a scroll strategy', fakeAsync(() => {
it('should be able to reopen the panel when closed by a scroll strategy', async () => {
const scrolledSubject = new Subject();

TestBed.resetTestingModule();
Expand All @@ -482,12 +481,12 @@ describe('MatTimepicker', () => {
expect(getPanel()).toBeTruthy();
scrolledSubject.next();
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(getPanel()).toBeFalsy();
fixture.componentInstance.timepicker.open();
fixture.detectChanges();
expect(getPanel()).toBeTruthy();
}));
});

it('should be able to opt out of opening on click', () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
Expand Down Expand Up @@ -822,7 +821,7 @@ describe('MatTimepicker', () => {
expect(event.defaultPrevented).toBe(true);
});

it('should select the active option and close when pressing enter', fakeAsync(() => {
it('should select the active option and close when pressing enter', async () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
const input = getInput(fixture);
fixture.detectChanges();
Expand All @@ -842,7 +841,7 @@ describe('MatTimepicker', () => {

const event = dispatchKeyboardEvent(input, 'keydown', ENTER);
fixture.detectChanges();
flush();
await fixture.whenStable();

expect(input.value).toBe('1:30 AM');
expectSameTime(fixture.componentInstance.input.value(), createTime(1, 30));
Expand All @@ -855,7 +854,7 @@ describe('MatTimepicker', () => {
value: jasmine.any(Date),
}),
);
}));
});

it('should not navigate using the left/right arrow keys', () => {
const fixture = TestBed.createComponent(StandaloneTimepicker);
Expand Down Expand Up @@ -1040,7 +1039,7 @@ describe('MatTimepicker', () => {
expect(fixture.componentInstance.control.touched).toBe(true);
});

it('should mark the control as touched when the panel is closed', fakeAsync(() => {
it('should mark the control as touched when the panel is closed', async () => {
const fixture = TestBed.createComponent(TimepickerWithForms);
fixture.detectChanges();
expect(fixture.componentInstance.control.touched).toBe(false);
Expand All @@ -1051,9 +1050,9 @@ describe('MatTimepicker', () => {

document.body.click();
fixture.detectChanges();
flush();
await fixture.whenStable();
expect(fixture.componentInstance.control.touched).toBe(true);
}));
});

it('should not set the `required` error if there is no valid value in the input', () => {
const fixture = TestBed.createComponent(TimepickerWithForms);
Expand All @@ -1071,7 +1070,7 @@ describe('MatTimepicker', () => {
expect(control.errors?.['required']).toBeFalsy();
});

it('should set an error if the user enters an invalid time string', fakeAsync(() => {
it('should set an error if the user enters an invalid time string', () => {
const fixture = TestBed.createComponent(TimepickerWithForms);
const control = fixture.componentInstance.control;
const input = getInput(fixture);
Expand Down Expand Up @@ -1115,9 +1114,9 @@ describe('MatTimepicker', () => {
fixture.detectChanges();
expect(control.errors?.['matTimepickerParse']).toBeFalsy();
expectSameTime(control.value, createTime(12, 10));
}));
});

it('should set an error if the user enters a time earlier than the minimum', fakeAsync(() => {
it('should set an error if the user enters a time earlier than the minimum', async () => {
const fixture = TestBed.createComponent(TimepickerWithForms);
const control = fixture.componentInstance.control;
const input = getInput(fixture);
Expand All @@ -1138,9 +1137,9 @@ describe('MatTimepicker', () => {
fixture.componentInstance.min.set(createTime(11, 0));
fixture.detectChanges();
expect(control.errors?.['matTimepickerMin']).toBeFalsy();
}));
});

it('should set an error if the user enters a time later than the maximum', fakeAsync(() => {
it('should set an error if the user enters a time later than the maximum', async () => {
const fixture = TestBed.createComponent(TimepickerWithForms);
const control = fixture.componentInstance.control;
const input = getInput(fixture);
Expand All @@ -1161,7 +1160,7 @@ describe('MatTimepicker', () => {
fixture.componentInstance.max.set(createTime(13, 0));
fixture.detectChanges();
expect(control.errors?.['matTimepickerMax']).toBeFalsy();
}));
});

it('should mark the input as disabled when the form control is disabled', () => {
const fixture = TestBed.createComponent(TimepickerWithForms);
Expand Down
Loading