Angular Testing - Chained HTTP Requests using rxjs switchMap

user_11794142 0
Viewed 1192

I am trying to unit test this function in my service that first executes POST request and then executes a GET afterwards. I'm using switchMap to accomplish this but the problem I'm having is that both of the requests are not getting picked up the the HttpTestingController match function

Here is the service function I want to test:

save(cow: Cow): Observable<Object> {
  return this.http.put<Cow>(`${this.cowUrl}/1`, cow, this.httpOptions)
    .pipe(switchMap(_ => {
       return this.getAllCows();
    })
  );
}

private getAllCows(): Observable<Cow[]> {
  return this.http.get<Cow[]>(`${this.cowUrl}`).pipe(tap(data => {
      this.cows = data;
    }),
    catchError(this.handleError<Cow[]>('getAllCows'))
  );
}

Here is the spec for that function: 

describe('CowService', () => {
  let cowService: CowService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ]
    });

    cowService = TestBed.get(CowService);
    httpMock = TestBed.get(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();
  });

  describe('save', () => {
    const cowList: Cow[] = [
      { id: '1', name: 'Cow' },
      { id: '2', name: 'Another Cow' }
    ];
    it('Successfully saves cow and updates the list of cows', () => {
      const cow: Cow = { id: null, name: 'Third Cow' };

      cowService.save(cow).subscribe();

      const reqs = httpMock.match(request =>  request.url = '/api/cows');

      console.log(reqs); // shows only the POST request and not the GET

      expect(reqs[0].request.url).toEqual('/api/cows');
      expect(reqs[0].request.method).toEqual('POST');

      expect(reqs[1].request.url).toEqual('/api/cows');
      expect(reqs[1].request.method).toEqual('GET');

      reqs[0].flush({});
      reqs[1].flush(cowList);
    });
  });
});

When doing this I get an error that says:

TypeError: Cannot read property 'flush' of undefined

karma-jasmine jasmine angular8 angular unit-testing
1 Answers

Try the following:

    it('Successfully saves cow and updates the list of cows', () => {
      const cow: Cow = { id: null, name: 'Third Cow' };

      cowService.save(cow).subscribe(
        response => expect(response).toEqual(cowList);
      );

      const putCall = httpMock.expectOne('/api/cows');
      expect(putCall.request.method).toEqual('PUT');
      // flush what the put call should return
      putCall.flush({});

      const getCall = httpMock.expectOne('/api/cows');
      expect(getCall.request.method).toEqual('GET');
      // flush what the get call should return
      getCall.flush(cowList);
    });
user_73654610
Related