[Fixed] Angular unit test cases service method

Issue

Problem: When i am running unit test case for service file then it is saying that

‘Spec ‘MerchantsService getMerchantData’ has no expectations.’ instead of showing the console.log, please help. Thanks in advance.

Below is my service file containg

  getMerchantData(searchParams: any): Observable<any> {
    return this.http.get(`${this.baseUrl}/merchants-data-url${searchParams}`)
  }

and below is the spec file for service.

import { async, inject, TestBed } from '@angular/core/testing'
import { MerchantsService } from './merchants.service'
import { HttpClientTestingModule } from '@angular/common/http/testing'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'

describe('MerchantsService', () => {
  let service: MerchantsService

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, ReactiveFormsModule, FormsModule],
    })
    service = TestBed.inject(MerchantsService)
  })

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

  it('getMerchantData', async() => {
    service.getMerchantData('?page=1').subscribe((res) => {
      console.log('getMerchantData', res.data)
      expect(res.data.length).toBeGreaterThan(0)
    })
  })
})

Solution

You need to test the http calls and make mock responses.

Try this:

import { async, inject, TestBed } from '@angular/core/testing'
import { MerchantsService } from './merchants.service'
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'

describe('MerchantsService', () => {
  let service: MerchantsService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, ReactiveFormsModule, FormsModule],
    })
    service = TestBed.inject(MerchantsService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    // after each test, verify no outstanding api calls remain
    httpTestingController.verify();
  });

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

  it('getMerchantData', () => {
    const mockMerchantData = {
      data: [{ id: 1 }, { id: 2 }], // mock your response to whatever you want
    };
    service.getMerchantData('?page=1').subscribe((res) => {
      console.log('getMerchantData', res.data)
      expect(res.data.length).toBeGreaterThan(0)
    });
    // you have to know your Base URL and put it in the placeholder below
    const req = httpTestingController.expectOne(`${BASE_URL_HERE}/merchants-data-url?page=1`);
    expect(req.request.method).toEqual('GET'); // expect a get request
    req.flush(mockMerchantData); // give this response to the API call in queue
  });
})

You should read this article in how to test HTTP calls in Angular.