angulartypescriptkarma-coverageangular2-testingangular2-observables

Testing error case with observables in services


Let's say I have a component that subscribes to a service function:

export class Component {

   ...

    ngOnInit() {
        this.service.doStuff().subscribe(
            (data: IData) => {
              doThings(data);
            },
            (error: Error) => console.error(error)
        );
    };
};

The subscribe call takes two anonymous functions as parameters, I've managed to set up a working unit test for the data function but Karma won't accept coverage for the error one.

enter image description here

I've tried spying on the console.error function, throwing an error and then expecting the spy to have been called but that doesn't quite do it.

My unit test:

spyOn(console,'error').and.callThrough();

serviceStub = {
        doStuff: jasmine.createSpy('doStuff').and.returnValue(Observable.of(data)),
    };

    serviceStub.doStuff.and.returnValue(Observable.throw(

        'error!'
    ));

serviceStub.doStuff().subscribe(

    (res) => {

        *working test, can access res*
    },
    (error) => {

      console.error(error);
      console.log(error);  //Prints 'error!' so throw works.
      expect(console.error).toHaveBeenCalledWith('error!'); //Is true but won't be accepted for coverage.
    }
);

What's the best practice for testing anonymous functions such as these? What's the bare minimum to secure test coverage?


Solution

  • You can simply mock Observable throw error object like Observable.throw({status: 404})and test error block of observable.

    const xService = fixture.debugElement.injector.get(SomeService);
    const mockCall = spyOn(xService, 'method').and.returnValue(Observable.throw({status: 404}));
    

    Update 2019 :

    Since some people are lazy to read comment let me put this here : It's a best practice to use errors for Rxjs

    import { throwError } from 'rxjs'; // make sure to import the throwError from rxjs
    const xService = fixture.debugElement.injector.get(SomeService);
    const mockCall = spyOn(xService,'method').and.returnValue(throwError({status: 404}));
    

    Update 2022: Use of throwError in the aforementioned way is deprecated. Instead, use throwError(() => new Error({status: 404})):

    import { throwError } from 'rxjs'; // make sure to import the throwError from rxjs
    const xService = fixture.debugElement.injector.get(SomeService);
    const mockCall = spyOn(xService,'method').and.returnValue(throwError(() => new Error({status: 404})));