How to inject http to class constructor in unit testing angular class using jasmine?

Question

I have a abstract class called logPublisher. Below is the code:

  export abstract class LogPublisher {
    location: string;

    abstract log(record: LogEntry): Observable<boolean>;
    abstract clear(): Observable<boolean>;
}

Class LogWebApi extends LogPublisher:

export class LogWebApi extends LogPublisher {

    constructor(private http: Http) {
        super();
        this.location = "http://localhost:59143/api/v1/Log";
    }

    log(record: LogEntry): Observable<boolean> {
        let ret: boolean = false;
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        let values: LogEntry[];

        return this.http.post(this.location, record, options)
            .map(response => response.json)
            .catch(this.handleErrors);
    }

    clear(): Observable<boolean> {
        //TODO: call webapi to clear all log entries
        return Observable.of(true);
    }

    private handleErrors(error: any): Observable<any> {
      console.log("Error while logging: " + error);
      return Observable.throw(error);
    }
}

Now in my unit test for class LogWebApi, how will i inject "http" ? I am writing unit tests using jasmine.

Any code snippet will be helpful.

Thanks in advance.

score 0 · Answer 1 · answered Jun 20 '18 at 04:21

You can use HttpClientTestingModule and HttpTestingController when testing the services which has a HttpClient as a dependency. You can find a god explanation in the official angular documenation in the Testing Http Request section.

import {TestBed} from '@angular/core/testing';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import { LogWebApi } from 'path-to-your-service';

describe('ChannelRecsService tests', () => {
  let service: LogWebApi;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [LogWebApi]
    });

    service = TestBed.get(LogWebApi);
    httpMock = TestBed.get(HttpTestingController);
  });

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

  describe('#log tests', () => {
    it('Shpould make a http POST request to the given url', () => {
      const logrecord = {put the object you want to pass in here};
      const mockResponse = //create a mock response object;
      service.log(logrecord).subscribe((res) => {
        expect(res).toEqual(mockResponse);
      });

      const req = httpMock.expectOne('http://localhost:59143/api/v1/Log');
      expect(req.request.method).toBe('POST');
      req.flush(mockResponse);
    });
  });
});

How to inject http to class constructor in unit testing angular class using jasmine?

1 Answers1