CODEWITHSUNDEEP
angularjasminekarma-runner
Stefan
Stefan

Reputation: 1730

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

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?

Upvotes: 33

Views: 41540

Answers (4)

River
River

Reputation: 9093

Simplified version for RxJS 6:

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

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

Upvotes: 2

Fabien
Fabien

Reputation: 391

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'));
});

Upvotes: 39

Aniruddha Das
Aniruddha Das

Reputation: 21698

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.

Upvotes: 13

Paul Samsotha
Paul Samsotha

Reputation: 209072

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.

Upvotes: 23

Related Questions