How to unit test chained requests with mergeMap

Question

How can I unit test the mergeMap in chained requests like the one in the following service:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { mergeMap, delay } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class reqService {
  constructor(private httpClient: HttpClient) {}

  getMultimpleReq() {
    return this.httpClient.get(`https://swapi.dev/api/starships/9/`).pipe(
      mergeMap(obj => {
        console.log("first request", obj);
        let filmFromFirstRequest = obj.MGLT;
        return this.httpClient
          .get(`https://swapi.dev/api/people/${filmFromFirstRequest}/`)
          .pipe(delay(1000));
      })
    );
  }
}

Here is the complete app example code on https://stackblitz.com/edit/angular-chainrequests?devtoolsheight=33&file=src/app/reqservice.ts

score 1 · Answer 1 · answered Mar 25 '21 at 19:26

You have to use the HttpTestingController, try this:

// httpMock is HttpTestingController below.
// we need fakeAsync because you have a delay and we need to traverse the time in a fake way
// We don't want to wait for the whole 1 second
it('makes subsequent api calls', fakeAsync(() => {
  const getCallResponse = { MGLT: 'xyz' }; // mock your get call
  const secondGetCallResponse = {}; // mock your second get call
  let finalResponse: any;
  // subscribe to the method to send the http requests to take flight
  const httpSubscription = reqService.getMultimpleReq().subscribe(
    response => finalResponse = response;
  );
  
  // resolve the first get response
  const getCall = httpMock.expectOne('https://swapi.dev/api/starships/9/');
  expect(getCall.request.method).toEqual('GET');
  // we flush this response
  getCall.flush(getCallResponse);
  // xyz in the url because we made MGLT to 'xyz'
  const secondGetCall = httpMock.expectOne('https://swapi.dev/api/people/xyz/');
  expect(getCall.request.method).toEqual('GET');
  secondGetCall.flush(secondGetCallResponse);
  
  tick(1001); // advance the timer by 1001 ms to ensure the subscribe runs
  expect(finalResponse).toEqual(secondGetCallResponse); // your final assertion
  
});

Check this out to do testing for HTTP calls and check this question with the answer out, it may help.

How to unit test chained requests with mergeMap

1 Answers1