How can I mock an Observable.throw in an Angular2 test?

Question

I want to test the error handling in my Angular2 component and therefore want to mock a service to return an Observable.throw('error'). How can that be done using Jasmine and Karma and Angular 2?

Answer 1

Here is my solution for the ones using Rxjs 6

let mockService = {
  getData: () => {
    return of({data:'any data'});
  }
}

spyOn(mockService , 'getData').and.callFake(() => {
  return throwError(new Error('Fake error'));
});

Answer 2

You should create an observable, and just call the observer error. For example

let mockService = {
  error: false,
  data: 'something',
  getData: () => {
    return Observable.create(observer => {
      if (this.error) {
        observer.error(new Error(..))
      } else {
        observer.next(this.data);
      }
      observer.complete();
    })
  }
}

Now for your tests, you can use the mock for both success cases and error cases. For an error case, just set the error property to true. In the success case, next is called with the data.

When you subscribe to an observable, you can pass three callback, success, error, and complete

service.getData().subscribe(
  (data) => {}   // sucess
  (error) => {}  // error
  () => {}       // complete
)

So with the observer, when calling observer.next, observer.error, observer.complete, the corresponding callback will be called.

Answer 3

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

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

Here I am throwing http 404 error from Observable.throw({status: 404}) by mocking xMethod of xSerive in my test.

Answer 4

Simplified version for RxJS 6:

let mockService = {
  getData: () => {
    return of({data:'any data'});
  }
}

spyOn(mockService , 'getData').and.returnValue(throwError('test error'));