What is the difference between tick() and flush() in angular testing?
They do different things relative to async operations that were previously started. For example; calling setTimeout(...)
starts an async operation.
-
tick()
moves time forward. -
flush()
moves time to the end.
This can be better illustrated with the unit tests for those functions.
Tick
This unit test shows tick being used to move time forward in steps until all 10 timers have finished. Tick is called multiple times.
https://github.com/angular/angular/blob/master/packages/core/test/fake_async_spec.ts#L205
it('should clear periodic timers', fakeAsync(() => {
let cycles = 0;
const id = setInterval(() => { cycles++; }, 10);
tick(10);
expect(cycles).toEqual(1);
discardPeriodicTasks();
// Tick once to clear out the timer which already started.
tick(10);
expect(cycles).toEqual(2);
tick(10);
// Nothing should change
expect(cycles).toEqual(2);
}));
Flush
This unit test shows that all async tasks should be finished when it returns, and that the returned value tells you how long it took for them to finish.
https://github.com/angular/angular/blob/master/packages/core/test/fake_async_spec.ts#L273
it('should flush multiple tasks', fakeAsync(() => {
let ran = false;
let ran2 = false;
setTimeout(() => { ran = true; }, 10);
setTimeout(() => { ran2 = true; }, 30);
let elapsed = flush();
expect(ran).toEqual(true);
expect(ran2).toEqual(true);
expect(elapsed).toEqual(30);
}));
Justin Kavalan
Updated on July 07, 2022Comments
-
Justin Kavalan almost 2 years
On the angular documentation I see these two functions,
tick()
andflush()
. Both of these seem to do similar things. From the angular documentation, it says for tick:Simulates the asynchronous passage of time for the timers in the fakeAsync zone.
and for flush:
Simulates the asynchronous passage of time for the timers in the fakeAsync zone by draining the macrotask queue until it is empty. The returned value is the milliseconds of time that would have been elapsed.
Can anyone explain the difference to me?
EDIT (answered in the comments):
In addition, in the angular documentation
tick()
is used without parameters, and the comment on that line even uses the phrase "flush"it('should display error when TwainService fails', fakeAsync(() => { // tell spy to return an error observable getQuoteSpy.and.returnValue( throwError('TwainService test failure')); fixture.detectChanges(); // onInit() // sync spy errors immediately after init tick(); // flush the component's setTimeout() fixture.detectChanges(); // update errorMessage within setTimeout() expect(errorMessage()).toMatch(/test failure/, 'should display error'); expect(quoteEl.textContent).toBe('...', 'should show placeholder'); }));