Angular 2 fakeAsync waiting for timeout in a function using tick()?

The purpose of fakeAsync is to control time within your spec. tick will not wait for any time as it is a synchronous function used to simulate the passage of time. If you want to wait until the asynchronous function is complete, you are going to need to use async and whenStable, however, in your example, the spec will take 3 seconds to pass so I wouldn't advise this.

The reason why the counter.spec.ts is failing is that you have only simulated the passage of 0 seconds (typically used to represent the next tick of the event loop). So when the spec completes, there are still mocked timers active and that fails the whole spec. It is actually working properly by informing you that a timeout has been mocked an is unhandled.

Basically, I think you are attempting to use fakeAsync and tick in ways for which they were not intended to be used. If you need to test a timeout the way that you have proposed, the simplest way would be to mock the setTimeout function yourself so that, regardless of the time used, you can just call the method.

EDITEDI ran into a related issue where I wanted to clear the timers, and since it was not the part under test, I didn't care how long it took. I tried:

tick(Infinity);

Which worked, but was super hacky. I ended up going with

discardPeriodicTasks();

And all of my timers were cleared.

Try to add one or a combination of the following function calls to the end of your test:

    flush();    flushMicrotasks();    discardPeriodicTasks();

1. flush (with optional maxTurns parameter) also flushes macrotasks. (This function is not mentionned in the Angular testing tutorial.)
2. flushMicrotasks flushes the microtask queue.
3. discardPeriodicTasks cancels "peridodic timer(s) still in the queue".

Timers in the queue do not necessarily mean that there's a problem with your code. For example, components that observe the current time may introduce such timers. If you use such components from a foreign library, you might also consider to stub them instead of "chasing timers".

For further understanding you may look at the javascript code of the fakeAsync function in zone-testing.js.

At the end of each test add:

 fixture.destroy(); flush();