What is the correct way of unit testing a service returning an Observable result in Angular 2? Let's say we have a getCars method in a CarService service class:
...
export class CarService{
...
getCars():Observable<any>{
return this.http.get("http://someurl/cars").map( res => res.json() );
}
...
}
If I try to write the tests in the following way I get the warning: 'SPEC HAS NO EXPECTATIONS':
it('retrieves all the cars', inject( [CarService], ( carService ) => {
carService.getCars().subscribe( result => {
expect(result.length).toBeGreaterThan(0);
} );
}) );
Using injectAsync does not help because it works with Promise
objects as far as I could see.
Angular
(ver. 2+):it('retrieves all the cars', async(inject( [CarService], ( carService ) => {
carService.getCars().subscribe(result => expect(result.length).toBeGreaterThan(0));
}));
It is important to understand that Observables can be either synchronous or asynchronous.
In your specific example the Observable is asynchronous (it wraps an http call).
Therefore you have to use async
function that executes the code inside its body in a special async test zone. It intercepts and keeps track of all promises created in its body, making it possible to expect test results upon completion of an asynchronous action.
However, if your Observable was a synchronous one, for example:
...
export class CarService{
...
getCars():Observable<any>{
return Observable.of(['car1', 'car2']);
}
...
you wouldn't have needed async
function and your test would become simply
it('retrieves all the cars', inject( [CarService], ( carService ) => {
carService.getCars().subscribe(result => expect(result.length).toBeGreaterThan(0));
});
Another thing to consider when testing Observables in general and Angular in particular is marble testing.
Your example is pretty simple, but usually the logic is more complex than just calling http
service and testing this logic becomes a headache.
Marbles make the test very short, simple and comprehensive (it is especially useful for testing ngrx effects).
If you're using Jasmine
you can use jasmine-marbles, for Jest
there is jest-marbles, but if you prefer something else, there is rxjs-marbles, that should be compatible with any test framework.
Here is a great example for reproducing and fixing a race condition with marbles.