Angular unit testing of service using HttpClientTestingModule and HttpTestingController

Question

I have a problem with testing my application. Mainly my problem is with URL. This is my testBed:

  let service: AdnimistrationSiteService;
  let httpClient: HttpClient
  let httpClientMock: HttpTestingController;
  let helper : Helper;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ],
      providers: [AdnimistrationSiteService]
    });
    httpClient = getTestBed().inject(HttpClient);
    service = getTestBed().inject(AdnimistrationSiteService);
    httpClientMock = getTestBed().inject(HttpTestingController)
    helper = new Helper();
  });

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

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

The call I am trying to test looks like this:

 getAllFilesWithIcons(id_name: string): Observable<any[]> {
    let parameters = new HttpParams().set("id_name", id_name);
    let url = environment.baseUrl + "/api/v1/example/get_example_api";
    return this.http.get(url, {params: parameters})
    .pipe(
      map(products => products["result"]),
      catchError(err => {
        console.log(err);
        return throwError(err)
      })
    )
  }

I don't really understand what I have to test here. Whether to make a call real to the server or mocked. If so, I do not know about the parameters. I have tried many times but I have an error every time.

My test looks like this:

    it("Should return data", () => {
        const testData = [
          {'element_filename': 'something', 'icon_symbol': 'symbol_test', "inventory_id": "inv " , "sensors": ["abc " , "eff "]}
        ]
        service.getAllFilesWithIcons("id_name").subscribe((id) => {
          console.log(id)
          console.log(testData)
          expect(testData).toBe(id, "should mocked data")
        })
        const req = httpClientMock.expectOne(environment.baseUrl + "/api/v1/example/get_example_api" + '?id_name=id_name')

        // expect(req.cancelled).toBeFalsy()
        expect(req.request.method).toBe("GET")
        req.flush(testData)
    })

But still in this case "id" is undefined all the time.

Answer 1

id is undefined because you're mapping to product['result'] and result does not exist on the object.

To fix it, try this:

it("Should return data", () => {
        // !! change this line to have result key !!
        const testData = { result: [
          {'element_filename': 'something', 'icon_symbol': 'symbol_test', "inventory_id": "inv " , "sensors": ["abc " , "eff "]}
        ] };
        service.getAllFilesWithIcons("id_name").subscribe((id) => {
          // id should not be undefined anymore
          console.log(id)
          expect(id).toBeTruthy();
          console.log(testData)
        })
        const req = httpClientMock.expectOne(environment.baseUrl + "/api/v1/example/get_example_api" + '?id_name=id_name')

        // expect(req.cancelled).toBeFalsy()
        expect(req.request.method).toBe("GET")
        req.flush(testData)
    })