使用 Karma 和 Jasmine / Angular 8 并行进行多个 API 调用的服务单元测试

Question

I am trying to write unit tests (Jasmine and Karma) for a service and a component whose aim is to perform two API calls to the Star Wars API (more info at https://swapi.co/ ) with two different URLS , to get people and starships data. Both calls are returned simultaneously with a forkJoin .

My App component calls the ApiService to perform two calls as follows:

APP COMPONENT:

import {Component, OnInit} from '@angular/core';
import {ApiService} from '../services/api.service';

export class AppComponent implements OnInit {

  constructor(private apiService: ApiService) {}

onGetData() {
    this.apiService.getData().subscribe((data: any) => {

      this.peopleData = data[0];
      this.starshipData = data[1];

     });

  }

API SERVICE:

import {HttpClient} from '@angular/common/http';

export class ApiService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any[]> {
    const randomPeoplePage = Math.floor(Math.random() * 9) + 1;
    const peopleUrl = `https://swapi.co/api/people/?page=${randomPeoplePage}`;

    const randomStarshipsPage = Math.floor(Math.random() * 4) + 1;
    const starshipsUrl = `https://swapi.co/api/starships/?page=${randomStarshipsPage}`;

    const peopleProm = this.http.get(peopleUrl);
    const starshipProm = this.http.get(starshipsUrl);

    return forkJoin([peopleProm, starshipProm]);

  }
}

I am fairly inexperienced with testing, especially on how to test API calls properly. I have been trying different solutions for the past couple of days, something like this:

 it('should return an Observable', () => {
    const randomPeoplePage = Math.floor(Math.random() * 9) + 1;
    const randomStarshipsPage = Math.floor(Math.random() * 4) + 1;


    const dummyData = [
      {
        count: 87,
        next: `https://swapi.co/api/people/?page=${randomPeoplePage + 1}` || null,
        previous: `https://swapi.co/api/people/?page=${randomPeoplePage - 1}` || null,
        results: new Array(87)
      },
      {
        count: 37,
        next: `https://swapi.co/api/starships/?page=${randomStarshipsPage + 1}` || null,
        previous: `https://swapi.co/api/starships/?page=${randomStarshipsPage - 1}` || null,
        results: new Array(37)
      }
    ];

    service.getData().subscribe(data => {
      expect(data.length).toBe(2);
      expect(data).toEqual(dummyData);

      const peopleReq = httpMock.expectOne(`https://swapi.co/api/people/?page=${randomPeoplePage}`);
      const starshipReq = httpMock.expectOne(`https://swapi.co/api/starships/?page=${randomStarshipsPage}`);

      forkJoin([peopleReq, starshipReq]).subscribe(() => {
        expect(peopleReq.request.method).toBe('GET');
        expect(starshipReq .request.method).toBe('GET');
      })

      peopleReq.flush(dummyData[0]);
      starshipReq.flush(dummyData[1]);

    });


  });
});

but this test isn't passing and I am really not sure why or what should I look into. Do I need to test the API calls in the api.service.spec.ts or in the app.component.spec.ts ? How do I simulate the return? Should I test them singularly? This is an 'academic' test, therefore any hint for best practice is welcome.

Thanks a lot!

Answer 1

A component should contain logic that is concerned with the presentation of the data. Now, you could have both Smart and Dumb components.
For Smart components, you could test the interaction with external services that provide data(store, route, a service that provides data), whereas for Dumb components you could test if the data is displayed properly and/or if @Output events are sent properly.

A service should contain business logic (api calls, maybe storing data etc...), logic that is not directly concerned with data presentation.

In this case, I'd simply provide some predefined data for the getData() so I ensure that I won't call the real API.

  it('....', () => {
    const url1 = 'url1';
    const url2 = 'url2';

    const responseMap = {
      url1: { data: 'url1' },
      url2: { data: 'url2' }
    }

    // Assuming this is imported..    
    class ApiService {
      constructor (private http) { }

      getData () {
      }
    }

    const getSpy = jasmine.createSpy('Http.get').and.callFake((arg) => {
      return of(responseMap[arg]);
    });
    const mockHttp = { get: getSpy }
    const apiService = new ApiService(mockHttp);

    spyOn(apiService, 'getData').and.callFake(function () {
      return forkJoin([this.http.get(url1), this.http.get(url2)])
    });

    apiService.getData()
      .subscribe(([r1, r2]) => {
        expect(getSpy).toHaveBeenCalledWith(url1);
        expect(getSpy).toHaveBeenCalledWith(url2);

        expect(r1).toBe(responseMap['url1']);
        expect(r2).toBe(responseMap['url2']);
      })
  });