Angular 2 mock http post unittest failing

Question

I am stuck in a unitest that is failing but I cant understaind why.

So I have a service that I want to test. A simple service making post to an API url.

Here is code for service

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { environment } from '../../../environments/environment';
import 'rxjs/add/operator/map';

import { ICarrierDetails } from './carrier-details';

@Injectable()
export class CarrierService {

  apiGatewayCartUri = environment.cartApiUri;

  constructor(private http: Http) { }

  getCarriersDetails(): Observable<ICarrierDetails[]> {
    return this.http.post(this.apiGatewayCartUri + 'carriers/', {})
      .map((response: Response) => <ICarrierDetails[]>response.json());
  }

}

And here is my spec file:

import { CarrierService } from './carrier.service'
import { Observable } from 'rxjs/Observable';
import { environment } from '../../../environments/environment';
import 'rxjs/add/observable/of';

describe('CarrierService', () => {
    let carrierService: CarrierService;
    let mockHttp;
    let apiGatewayCartUri;


    beforeEach(() => {
        apiGatewayCartUri = environment.cartApiUri;
        mockHttp = jasmine.createSpyObj('mockHttp', ['post'])
        carrierService = new CarrierService(mockHttp)    
    });

    describe('Should call http.post method with the right URL', () => {        
        mockHttp.post.and.returnValue(Observable.of(false));
        carrierService.getCarriersDetails();
        expect(mockHttp.post).toHaveBeenCalledWith(apiGatewayCartUri + 'carriers/', {});
    });
});

And this is exception i get all the time in console:

Chrome 59.0.3071 (Mac OS X 10.12.5) CarrierService Should call http.post method with the right URL encountered a declaration exception FAILED TypeError: Cannot read property 'post' of undefined at Suite. (http://localhost:9883/_karma_webpack_/main.bundle.js:97:17) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9883/_karma_webpack_/polyfills.bundle.js:10672:26) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (http://localhost:9883/_karma_webpack_/polyfills.bundle.js:10464:43) at Suite. (http://localhost:9883/_karma_webpack_/vendor.bundle.js:2195:29) at Env.jasmineEnv.(anonymous function) [as describe] (http://localhost:9883/_karma_webpack_/vendor.bundle.js:2172:38) at Suite. (http://localhost:9883/_karma_webpack_/main.bundle.js:96:5) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9883/_karma_webpack_/polyfills.bundle.js:10672:26) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (http://localhost:9883/_karma_webpack_/polyfills.bundle.js:10464:43) at Suite. (http://localhost:9883/_karma_webpack_/vendor.bundle.js:2195:29)

I think this part is wrong carrierService = new CarrierService(mockHttp), you cannot use service like that in Unit Test. More expanation about Services in Test chariotsolutions.com/blog/post/… — onetwo12

onetwo12 onetwo12 · Accepted Answer · 2017-07-14T14:56:54

I think your problem is in the beforeEach method. It should be async function.

Try to use it like this:

import { async } from '@angular/core/testing';

beforeEach(async(() => {
  apiGatewayCartUri = environment.cartApiUri;
  mockHttp = jasmine.createSpyObj('mockHttp', ['post']);
  carrierService = new CarrierService(mockHttp);
}));

Angular 2 mock http post unittest failing

1 Answers