Unit testing http service on Angular 5

Question

I'm pretty confused about how to test a data service, there's just way too many possibilities and it's overwhelming.

I have this simple service:

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }

  getData<T>(path: string): Observable<T> {
    return this._http.get<T>(path);
  }

}

I want to test that calling getData<number> will, infact, return a data type of number.

The angular testing guide frustratingly shows several ways (use testbed, use beforeEach, use jasmine without testBed) and I've tried all of them but not with much success.

How do I do this please? I have so far failed to even get as far as calling the getData. I want to be able to mock the Http, emit mock return values (like in jasmine.spy.and.returnValue(mockData)) and verify that dataService is OK

I've got this in my data.service.spec.ts:

describe('DataService', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [
        HttpClientModule
      ],
      providers: [
        DataService,
        HttpClient
      ]
    });

  });

  // This was auto generated, and works
  it('should be created', inject([DataService], (service: DataService) => {
    expect(service).toBeTruthy();
  }));

  // I added this, but doesn't work
  describe('When getData() is called', () => {

    it('should return an observable of type T', inject([DataService], (service: DataService) => {

      service.getData<number>('mock-url')
        .subscribe(data => {
          expect(typeof(data)).toBe('number');
        });

    }));

  });

});

When I say it doesn't work... the second test passes! but it shouldn't. I can see the real request go out on dev console to the (invalid) url, and that errors out as expected, but the test just passes...

So I guess, my question is simply, in Angular 5, how do I mock my backend service and unit test it please?

Fateh Mohamed · Accepted Answer · 2018-05-29 11:14:15Z

3

try to test it like this using flush method

 inject(
  [HttpTestingController, DataService],
  (httpMock: HttpTestingController, service: DataService) =>{
     const mockResponse = 5;
     const mock-url = '...';

     service.getData<number>('mock-url').subscribe(data => {
        expect(data).toEqual(mockResponse);
         expect(typeof(data)).toBe('number');
    });

    const mockRequest = httpMock.expectOne((req: HttpRequest<any>) => req.url === mock-url); //get your request here

    expect(mockRequest.request.method).toBe('GET');

    mockRequest.flush(mockResponse);
   })

answered May 29, 2018 at 11:14

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LocustHorde Over a year ago

Hi - thanks for that. I get a httpMock.expectOne is not a function error. Do I need to initialise it before calling?

Fateh Mohamed Over a year ago

did you add HttpClientTestingModule in your TestBed.configureTestingModule ?

LocustHorde Over a year ago

Yup! it's added into the providers array!

LocustHorde Over a year ago

Hi, this started working after I removed HttpClient, HttpTestingController from providers. Found from here: stackoverflow.com/a/45482697/435867

Collectives™ on Stack Overflow

Unit testing http service on Angular 5

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related