3x14159265 3x14159265 - 2 months ago 22
TypeScript Question

Injecting Mock service in AngularJS/ Jasmine

I'm using jasmine to test my controllers, which I wrote in TypeScript. My unit tests are in plain javascript.
I'm getting an error when I test my controller, where I want to inject a mock service.

This is how my test looks:

'use strict';

describe('ConfigCtrl', function(){
var scope, http, location, timeout, $httpBackend, service;

beforeEach(angular.mock.module('busybee'));

beforeEach(angular.mock.inject(function($rootScope, $http, $location, $timeout, configService, $controller){

scope = $rootScope.$new();
http = $http;
location = $location;
timeout = $timeout;
service = configService;


$controller('configCtrl', {$scope: scope, $http: http, $location: location, $timeout: timeout, configService: service});
}));

it('should have text = "constructor"', function(){
expect(true).toBe(true);
});
});


My app.ts:

module game {
'use strict';

var busybee = angular.module('busybee', []);
busybee.controller('configCtrl', ConfigCtrl);

busybee.service('configService', ConfigService);
...
...

}


and my TypeScript controller:

module game {
'use strict';

export class ConfigCtrl {

static $inject: string[] = ['$scope', '$http', '$location', '$timeout', 'configService'];

constructor($scope: ng.IScope, $http: ng.IHttpService, $location: ng.ILocationService,
$timeout: ng.ITimeoutService, configService: game.ConfigService) {
//any code here
}
}
}


When running karma, I get the following error:

Chrome 28.0.1500 (Linux) ConfigCtrl should have text = "constructor" FAILED
TypeError: Cannot read property 'prototype' of undefined
at Object.instantiate (/home/david/git/busybee2-client/js/libs/angular/angular.min.js:28:283)
at Object.<anonymous> (/home/david/git/busybee2-client/js/libs/angular/angular.min.js:28:494)
at Object.d [as invoke] (/home/david/git/busybee2-client/js/libs/angular/angular.min.js:28:174)
at /home/david/git/busybee2-client/js/libs/angular/angular.min.js:29:339
at c (/home/david/git/busybee2-client/js/libs/angular/angular.min.js:27:13)
at Object.d [as invoke] (/home/david/git/busybee2-client/js/libs/angular/angular.min.js:27:147)
at workFn (/home/david/git/busybee2-client/js/libs/angular/angular-mocks.js:1778:20)
Error: Declaration Location
at Object.window.jasmine.window.inject.angular.mock.inject [as inject] (/home/david/git/busybee2-client/js/libs/angular/angular-mocks.js:1764:25)
at null.<anonymous> (/home/david/git/busybee2-client/js/test/ConfigCtrlSpecs.js:9:29)
at /home/david/git/busybee2-client/js/test/ConfigCtrlSpecs.js:3:1
Chrome 28.0.1500 (Linux): Executed 1 of 1 (1 FAILED) ERROR (0.329 secs / 0.032 secs)


It seems, there's a problem injecting the
configService
, but I don't have an idea why.

EDIT: added a jsfiddle http://jsfiddle.net/Q552U/6/

UPDATE: It seems it was a problem for jasmine having the compiled javascript of the TypeScript classes in different files. Compiling the TypeScript files to a single .js file (
tsc --out dest.js source.ts
), does it for me.

Answer

Try get the service using $injector.

beforeEach(angular.mock.inject(function($rootScope, $http, $location, $timeout, configService, $controller, $injector){
    scope = $rootScope.$new();
    http = $http;
    location = $location;
    timeout = $timeout;
    service = $injector.get('configService'); //not sure the name, you may try 'ConfigService' as well.

    $controller('configCtrl', {$scope: scope, $http: http, $location: location, $timeout: timeout, configService: service});
}));

Link to Demo.