This workspace defines a test specification async.spec.ts which tests various asynchronous test scenarios common to Angular including handling micro and macrotasks with fakeAsync and ComponentFixture.whenStable, asynchronous RxJS functions and operators, and update behaviors of the Nimble Design System and the underlying @microsoft/fast-foundation components.
- See async.spec.ts.
- Run
npm test
to run and watch the tests. - Run
npm test:ci
to run the tests once.
The following are notes derived from these tests.
tick
andflush
call Zone.js's FakeAsyncTestZoneSpec.tick
has a default tick count of 0, defined by Angular in milliseconds.flush
has a default turn count of 20, defined by the Zone.js fake async test scheduler.tick
andflush
flush all microtasks first, e.g.Promise.then
andqueueMicrotask
.tick
executes macrotasks, including periodic tasks (timers) likesetInterval
, scheduled up to the current time plus the tick count.- Therefore, by default
tick
only executes the tasks scheduled up to but not at the current time.
- Therefore, by default
flush
executes macrotasks, but not periodic tasks (timers), up to the turn count number of tasks (which is treated as the limit) or the first periodic task.- Therefore, by default
flush
executes a maximum of 20 non-periodic macrotasks. - If there are more than the limit number of tasks,
flush
throws an error.
- Therefore, by default
- Asynchronous RxJS functions and operators, e.g.
timer
,delay
,debounceTime
, commonly use theAsyncScheduler
which schedules periodic tasks withsetInterval
. flush
does not work with theAsyncScheduler
. Therefore,tick
orComponentFixture.whenStable
are commonly required for tests involving asynchronous RxJS operations.- Some of these functions accept a scheduler parameter that will override the default. However, schedulers like the
AnimationFrameScheduler
fallback to theAsyncScheduler
for RxJS operations that require a timer.
fakeAsync
may not work with even simple asynchronous Nimble updates like button appearance.ComponentFixture.whenStable
will commonly execute Nimble updates without issue, butwaitForUpdatesAsync
will not execute non-Nimble tasks.- Nimble can leak tasks between fakeAsync tests causing test failures due to pending queued tasks.
- Nimble's
waitForUpdatesAsync
has two common issues.- In watch mode,
waitForUpdatesAsync
may timeout after a change and compile. Refresh the page to rerun the test. - non-fakeAsync tests can leak tasks that break calls to
waitForUpdatesAsync
for all subsequent tests.
- In watch mode,
- There have been a few reported cases where
ComponentFixture.whenStable
did not work andwaitForUpdatesAsync
was required. However, the exact reason is not known.