How to mock a service call in a function in angular unit testing?

Question

I am trying to write a test case for the following function:

foo = () => { 
  this.someService.getDetails({key:'value'}).subscribe(details => {
  //do stuff
    this.someService.getMoreDetails().subscribe(moreDetails => {
    //do stuff
   });
  });
}

The service looks like this:

    getDetails = (args) :Observable<any> {
      return this.http.post<any>(//calls)
    } 
// similar for getMoreDetails

The test file that I have written looks like this:

     const someServiceStub = jasmine.createSpyObj('someService', ['getDetails', 'getMoreDetails']);
...
...

    it('should called getMoreDetails', () => {
        component.foo();
        fixture.detectChanges();
        someServiceStub.getDetails.and.returnValue(Observable.of
          ({ Details: 'Tired of giving you details'})
        );
        expect(someServiceStub.getMoreDetails).toHaveBeenCalled();
      });

However, my test case fails giving the error 'Cannot read property subscribe of undefined' (for the first line inside foo function).

I have tried using mockservice classes too but the same error comes up. What is the possible reason for this and how can I solve it?

JB Nizet · Accepted Answer · 2019-01-05 10:42:06Z

2

You start by calling the foo() function, which calls the getDetails() method of the service. This method is a spy, and you have never told the spy what to return, so it returns undefined.

Then, you tell the spy what to return. That's too late: the service call has already been made. Tell the spy what to return before calling foo().

answered Jan 5, 2019 at 10:42

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohan Agarwal Over a year ago

O my geekiness, it helped. Can you also suggest how to proceed if I had to test in some other test case, whether the getMoreDetails() is called, where i dont want to begin testing from the foo() call but directly from the response of getDetails(). (In short testing the nested api calls without repeating the testing for previous line of code in the function)

Collectives™ on Stack Overflow

How to mock a service call in a function in angular unit testing?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related