CODEWITHSUNDEEP
unit-testingangularkarma-runner
tengen
tengen

Reputation: 2165

Angular 2 Testing a service which injects Http without using Testbed

I want to test a simple Angular 2 data service. The service uses Http, but nothing else. In the quickstart guide it says:

However, it's often more productive to explore the inner logic of application classes with isolated unit tests that don't depend upon Angular. Such tests are often smaller and easier to read, write, and maintain.

The example of writing an isolated unit test it gives is that for simple services you can just test the service by creating a new instance of it in each test... maybe something like:

beforeEach(() => { service = new EventDataService(); });

it('#getEvents should return an observable', () => {
    expect(service.getEvents()).toBe(Observable.from([]);
});

However, my EventDataService uses Http, so I get an error if I don't put Http in the constructor like so:

beforeEach(() => { service = new EventDataService(http: Http); });

But Http doesn't exist unless I import it, which I don't want to do - I don't want to test Http. I tried stubbing http out, but all the ways I tried ended up failing or leading me to import even MORE things to satisfy the Typescript gods...

I'm sure I'm over thinking this. I have tried the suggestions on quite a few sites that talk about testing in Angular 2, but anything older than a few months is suspect to me since the framework has changed so much in the last 6-12 months. I feel like I should be able to keep this simple for such a simple example.

Am I doing something obvious wrong? I am using Angular 2 V 2.4.10, Webpack 2.3.1, Sinon 2.1.0, and Typescript 2.2.1.

Service:

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs";
import { Event } from "../event/event.interface";

@Injectable()
export class EventDataService {
    events: Event[];

    constructor(private http: Http) { }

    getEvents(): Observable<Event[]> {
        return this.http.get("api/events")
        .map((response) => {return response.json(); })
    }
};

Spec:

import { Http } from "@angular/http";
import { EventDataService } from "./event-data.service";
import * as sinon from "sinon";
import { expect } from "chai";

describe("Event Data Service", () => {
    it("GetEvents", () => {
        sinon.stub(Http, "get").returns(Promise.resolve("sinon Event!"));
        let eventDataService = new EventDataService();

        expect(eventDataService.getEvents()).to.equal("sinon event!");;
    });
});

Thank you!

Upvotes: 2

Views: 2069

Answers (2)

snorkpete
snorkpete

Reputation: 14564

Although i wholeheartedly agree with the general sentiment that you should use TestBed in this scenario to stub out your Http dependency (after all, that's a huge motivator for why Angular has dependency injection in the first place), I'm seeing some errors in your approach which seems to indicate some misunderstanding.

Your EventDataService has a constructor which expects a single parameter of type Http. Therefore, whenever you want to create an instance of your EventDataService manually, you have to use the constructor and pass a single parameter of type Http.

So, you should be doing:

let dataService = new EventDataService(x);

where x is a variable of type Http. What may not be obvious is that Typescript is not a language like Java - Typescript can get out of your way if you want it to. So, you could, for eg, just create a new object, and say it's of type 'Http' and the Typescript compiler will assume you know what you're doing and let you proceed.

So you could do:

let x = ({ } as Http);
let dataService = new EventDataService(x);

The first line is telling the compiler that i want the type of {} to be Http, and Typescript will get out of your way and assume you know what you're doing.

So, you can use that technique to get an 'instance' of Http for your testing - i use the word 'instance' very loosely.

However, if you look at your EventDataService, it expects that the http object that gets passed to its constructor to have a get method that returns an object that you can call map on. In other words, it expects get to return an Observable. So, if you want to fake out Http for testing purposes, your fake Http instance needs to have a get method, and that get method needs to return an Observable.

Putting all of the above together, if i wanted to write my own test without using TestBed, I'd end up with:

    let fakeHttp = {
      get: (_: any) => {}
    };

    // I'm not familiar with sinon,
    // but i believe this is stubbing the get method of fakeHttp
    // and returning a canned response
    sinon.stub(fakeHttp, "get").returns(Observable.of("sinon Event!"));

    let eventDataService = new EventDataService(fakeHttp);

    // remember, getEvents returns an observable,
    // so to test it you have to subscribe to it and check its values
    eventDataService.getEvents().subscribe(data => {
      expect(data).to.equal("sinon Event!");
    });

Would i approach this this way? Probably not - I'd just use TestBed to get a fake Http instance (not because this approach is that difficult, but just because TestBed simplifies things when you have multiple dependencies, and services always seem to grow that way). But at the end of the day, constructor dependency injection, like what Angular uses, is pretty easy to understand - pass your dependencies (fake or real) as parameters to the constructor of the class you're trying to create an instance of.

Upvotes: 6

Babar Hussain
Babar Hussain

Reputation: 2915

You should need to create a testing module and mock the response to test the service methods provide dependencies in your testing module

 import { async, getTestBed, TestBed, inject } from "@angular/core/testing";
 import { Response, ResponseOptions, HttpModule, XHRBackend } from "@angular/http";
 import { MockBackend, MockConnection } from "@angular/http/testing";
 import { EventDataService } from "./event-data.service";

 describe("EventDataService", () => {
  let mockBackend: MockBackend;
  let service: EventDataService;
  let injector: Injector;

  beforeEach(() => {
   TestBed.configureTestingModule({
     imports: [HttpModule],
      providers: [
      { provide: XHRBackend, useClass: MockBackend },
      EventDataService
      ]
    });

    injector = getTestBed();
  });

  beforeEach(() => {
    mockBackend = injector.get(XHRBackend);
    service = injector.get(EventDataService);
  });

Upvotes: 1

Related Questions