Unit testing an observable in Angular 2

by

The correct way for Angular (ver. 2+):

it('retrieves all the cars', waitForAsync(inject([CarService], (carService) => {
     carService.getCars().subscribe(result => expect(result.length).toBeGreaterThan(0)); 
}));

Async Observables vs Sync Observables

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 waitForAsync 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 waitForAsync function and your test would become simply

it('retrieves all the cars', inject([CarService], (carService) => {
     carService.getCars().subscribe(result => expect(result.length).toBeGreaterThan(0)); 
});

Marbles

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.

Official guide for testing

More Related Contents:

  1. Updating input html field from within an Angular 2 test
  2. Angular 2 Unit Tests: Cannot find name ‘describe’
  3. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  4. How can I unit test a component that uses the Router in Angular?
  5. Any way to test EventEmitter in Angular2?
  6. How to unit test a component that depends on parameters from ActivatedRoute?
  7. Mocking AngularJS module dependencies in Jasmine unit tests
  8. How do I trigger a keyup/keydown event in an angularjs unit test?
  9. What’s the difference between faking, mocking, and stubbing?
  10. What is the difference between integration and unit tests?
  11. How deep are your unit tests?
  12. When should I mock?
  13. How to catch exception correctly from http.request()?
  14. NUnit vs. MbUnit vs. MSTest vs. xUnit.net [closed]
  15. Unit test naming best practices [closed]
  16. How to start working with GTest and CMake
  17. How do I unit-test saving file to the disk?
  18. How to terminate a program when it crashes? (which should just fail a unit test instead of getting stuck forever)
  19. Mocking $modal in AngularJS unit tests
  20. Angular 2 cache observable http result data [duplicate]
  21. How to spyOn a value property (rather than a method) with Jasmine
  22. How to test Spring Data repositories?
  23. How to debug timed out waiting for asynchronous Angular tasks? Failure to find elements on angular page occurring
  24. RSpec vs Cucumber (RSpec stories) [closed]
  25. iteration a json object on Ngfor in angular 2
  26. How can I create an observable with a delay
  27. How to mock specific methods but not all of them in Rust?
  28. How to execute only one test spec with angular-cli
  29. Testing route configuration in ASP.NET WebApi
  30. how do I mock sqlconnection or should I refactor the code?

Leave a Comment