Angular Testing Observables (making async tests to sync )

RxJS marble testing

 getTestScheduler().flush(); // flush the observables

fakeAsync()

The fakeAsync() function enables a linear coding style by running the test body in a special fakeAsync test zone. The test body appears to be synchronous. There is no nested syntax (like a Promise.then()) to disrupt the flow of control.

     We use tick() to advance the virtual clock of the setTimeout and other observables values and there by making it sync instead of waiting for given time out and waiting on service call to give observable. 

waitForAsync() 

It hides some asynchronous boilerplate by arranging for the tester's code to run in a special async test zone

But the test's asynchronous nature is revealed by the call to fixture.whenStable(), which breaks the linear flow of control.

In short to make the async tests to sync and advance the async queue 

Rxjs marble testing --> getTestScheduler().flush();

fakeAsync() --> tick()

waitForAsync()  -->  fixture.whenStable()

Reference:

https://angular.io/guide/testing-components-scenarios