Testing error case with observables in services

AngularTypescriptKarma CoverageAngular2 TestingAngular2 Observables

Angular Problem Overview


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?

Angular Solutions


Solution 1 - Angular

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

Solution 2 - Angular

Not sure exactly the purpose of the code you are showing, which is trying to test a mock service. The coverage problem is with the component and the error callback to not have been called (which is only called when there is an error).

What I usually do for most of my observable services, is to create a mock whose methods just returns itself. The mock service has a subscribe method that accepts the next, error, and complete callbacks. The user of the mock gets to configure it to add an error so the error function gets called, or add data, so the next method gets called. The thing I like most about this is that it's all synchronous.

Below is something like what I normally use. It's just an abstract class for other mocks to extend. It provides the basic functionality that an observable provides. The extending mock service should just add the methods it needs, returning itself in the method.

import { Subscription } from 'rxjs/Subscription';

export abstract class AbstractMockObservableService {
  protected _subscription: Subscription;
  protected _fakeContent: any;
  protected _fakeError: any;

  set error(err) {
    this._fakeError = err;
  }

  set content(data) {
    this._fakeContent = data;
  }

  get subscription(): Subscription {
    return this._subscription;
  }

  subscribe(next: Function, error?: Function, complete?: Function): Subscription {
    this._subscription = new Subscription();
    spyOn(this._subscription, 'unsubscribe');

    if (next && this._fakeContent && !this._fakeError) {
      next(this._fakeContent);
    }
    if (error && this._fakeError) {
      error(this._fakeError);
    }
    if (complete) {
      complete();
    }
    return this._subscription;
  }
}

Now in your tests you just do something like

class MockService extends AbstractMockObservableService {
  doStuff() {
    return this;
  }
}

let mockService;
beforeEach(() => {
  mockService = new MockService();
  TestBed.configureTestingModule({
    providers: [{provide: SomeService, useValue: mockService }],
    declarations: [ TestComponent ]
  });
});
it('should call service success', () => {
  mockService.content = 'some content';
  let fixture = TestBed.createComponent(TestComponent);
  // test component for success case
});
it('should call service error', () => {
  mockService.error = 'Some error';
  let fixture = TestBed.createComponent(TestComponent);
  // test component for error case
  // this should handle your coverage problem
});

// this assumes you have unsubscribed from the subscription in your
// component, which you should always do in the ngOnDestroy of the component
it('should unsubscribe when component destroyed', () => {
  let fixture = TestBed.createComponent(TestComponent);
  fixture.detectChanges();
  fixture.destroy();
  expect(mockService.subscription.unsubscribe).toHaveBeenCalled();
})

Solution 3 - Angular

I had mocked the fake error response in service.ts

By commenting previous http call and

let error:any = new Error("failed"); return new Observable(error);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser3656550View Question on Stackoverflow
Solution 1 - AngularAniruddha DasView Answer on Stackoverflow
Solution 2 - AngularPaul SamsothaView Answer on Stackoverflow
Solution 3 - AngularYasar WhizzView Answer on Stackoverflow