jeudi 31 mars 2016

Unit Testing an injected service within an Angular Controller

I have the following Angular Controller and Service setup (in Typescript) in my app and I would like to write tests for them (using Jasmine, Karma and PhantomJS).

See below for error.

For full source code, see: http://ift.tt/22T2XoU

MainController.ts

namespace app.controllers {

export class MainController implements app.Interfaces.IMainController {

    public city: string;
    public departures: Interfaces.IQueryResult;
    public arrivals: Interfaces.IQueryResult;
    public error: string;
    public time: number;
    public nationalRail: Interfaces.INationalRailService;

    static $inject: Array<string> = ['nationalRail', '$interval', '$routeParams'];
    constructor(nationalRail: app.Interfaces.INationalRailService, private $interval: ng.IIntervalService, private $routeParams: Interfaces.IParameters) {
        this.nationalRail = nationalRail;
        this.city = $routeParams.City;
        this.GetData();
        this.$interval(() => {
            this.GetData();
        }, 60000);
        this.$interval(() => {
            this.time = Date.now();
        }, 1000);
    }

    GetData(): void {
        this.nationalRail.getDepartures(this.city).then((data: app.Interfaces.IQueryResult) => {
            this.departures = data;
            this.error = null;
        }, () => { this.error = "Unable to load data for '" + this.city + "'"; });

        this.nationalRail.getArrivals(this.city).then((data: app.Interfaces.IQueryResult) => {
            this.arrivals = data;
            this.error = null;
        }, () => { this.error = "Unable to load data for '" + this.city + "'"; });
    }
}

var appModule = angular.module('nationalRailViewer')
appModule.controller('MainController', ['nationalRail', '$interval', '$routeParams',
    (nationalRail: app.Interfaces.INationalRailService, $interval: ng.IIntervalService, $routeParams: Interfaces.IParameters) => new MainController(nationalRail, $interval, $routeParams)]);
}

NationalRailService.ts

namespace app.services {
export class NationalRailService implements app.Interfaces.INationalRailService {

    http: ng.IHttpService;

    static $inject: Array<string> = ['$http'];
    constructor($http: ng.IHttpService) {
        this.http = $http;
    }

    getDepartures(city: string): ng.IPromise<app.Interfaces.IQueryResult> {
        return this.http.get("http://ift.tt/1X0P3dl" + city)
            .then(function(response) {
                return response.data;
            });
    }

    getArrivals(city: string): ng.IPromise<app.Interfaces.IQueryResult> {
        return this.http.get("http://ift.tt/22T2XoW" + city)
            .then(function(response) {
                return response.data;
            });
    }
}

angular.module('nationalRailViewer')
    .service('nationalRail', ['$http', ($http: ng.IHttpService) => new NationalRailService($http)]);
}

I'd like to write a test that ensures the getDepartures and getArrivals functions are called on instantiation of the controller. So far I have the following spec.

controllerSpec.ts

describe("MainController Controller", function() {
var httpbackend: ng.IHttpBackendService;
var controller: app.Interfaces.IMainController; 
var interval: ng.IIntervalService;
var routeParams: app.Interfaces.IParameters;
var nationalRail: app.Interfaces.INationalRailService;

var $controller: ng.IControllerService;  

beforeEach(angular.mock.module("nationalRailViewer"));

beforeEach(() => angular.mock.inject(function($http: ng.IHttpService, 
                            $httpBackend: ng.IHttpBackendService,
                            _nationalRail_: app.Interfaces.INationalRailService,
                            $controller: ng.IControllerService, 
                            $interval: ng.IIntervalService, 
                            $routeParams: app.Interfaces.IParameters) {

    interval = $interval;
    routeParams = $routeParams;
    routeParams.City = "aberdeen";
    httpbackend = $httpBackend;
    nationalRail =  _nationalRail_;
    $controller = $controller;
}));

it("Should call getDepartures on NationalRailService", () => {      
    spyOn(nationalRail, "getDepartures").and.callFake(() => {});
    controller = $controller<app.Interfaces.IMainController>('MainController', { nationalRail: nationalRail, $interval: interval, $routeParams: routeParams});
    expect(httpbackend.expectGET("/departures/aberdeen")).toHaveBeenCalled();
    httpbackend.flush();
});

it("Should call getArrivals on NationalRailService", () => {
    spyOn(nationalRail, "getArrivals").and.callFake(() => {});
    controller = $controller<app.Interfaces.IMainController>('MainController', { nationalRail: nationalRail, $interval: interval, $routeParams: routeParams});
    expect(httpbackend.expectGET("arrivals/aberdeen")).toHaveBeenCalled();
    httpbackend.flush();
});
});

For some reason the injections don't seem to be working and I can't run any of my tests without getting the following error:

Error: spyOn could not find an object to spy upon for getArrivals()

Or similar error for the following test, if I comment out the previous.

Why is my inject function not injecting the correct objects?

Aucun commentaire:

Enregistrer un commentaire