I've been attempting to create some Angular Controller tests for my App using TypeScript for a few days now, but haven't had any success. Let me start by saying that this is my first time writing tests in Jasmine. My issue is that I'm having trouble mocking a dependent service in order to test the controller. Any guidance or pointing me in the right direction would be greatly appreciated.
Angular Module :
angular.module('some.module', ['ui.router', 'ngAnimate', 'ui.bootstrap', 'pascalprecht.translate', 'ngCookies', 'smart-table']);
Angular Controller :
module App.Controllers {
export class TestController{
static $inject = ["$scope","SomeService"];
WhatController: () => string;
constructor(private $scope: App.IAppScope, private SomeService) {
var vm = this;
vm.WhatController = function (): string {
return SomeService.someAction();
};
}
}
angular.module("some.module").controller("TestController", TestController);
}
Angular Service :
module App.Services {
export class SomeService{
httpService: ng.IHttpService;
static $inject = ["$http"];
someAction: () => any;
constructor($http: ng.IHttpService) {
var service = this;
service.someAction= () => {
return "test";
}
}
}
factory.$inject = ['$http'];
function factory($http: ng.IHttpService) {
return new SomeService($http);
}
angular.module('some.module').factory('SomeService', factory);
}
Karma File :
module.exports = function (config) {
config.set({
basePath: 'Scripts',
frameworks: ['jasmine', 'jasmine-matchers'],
files: [
{ pattern: 'angular.js', included: true },
{ pattern: 'angular-mocks.js', included: true },
{ pattern: 'angular-ui-router.js', included: true },
{ pattern: 'angular-ui/ui-bootstrap-tpls.js', included: true },
{ pattern: 'angular-animate.js', included: true },
{ pattern: 'angular-translate.js', included: true },
{ pattern: 'angular-translate-loader-url.js', included: true },
{ pattern: 'angular-cookies.js', included: true },
{ pattern: 'smart-table.js', included: true },
'../app/app.module.js',
'../app/pages/**/*.controller.js',
//Here are controller files
{ pattern: '../app/pages/**/*.spec.js', included: true },
],
exclude: ['**/*min.js'],
preprocessors: {
'../app/pages/**/*.controller.js': ['coverage'],
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: true,
coverageReporter: {
type : 'html',
dir : 'coverage/'
}
})
}
Test :
'use strict';
describe("complaints.controller.test", () => {
var $http: ng.IHttpService;
var mockSomeServices: App.Services.SomeServices;
var mock = angular.mock;
beforeEach(() => {
mock.module('ui.router');
mock.module('ngAnimate');
mock.module('ui.bootstrap');
mock.module('pascalprecht.translate');
mock.module('ngCookies');
mock.module('smart-table');
});
//This don't work mockSomeServices is undefined
beforeEach(mock.inject((_$http_, $injector) => {
$http = _$http_;
mockSomeServices = $injector.get('SomeServices');
}));
//This also don't work mockSomeServices is undefined
beforeEach(mock.inject((_$http_, $injector, SomeServices) => {
$http = _$http_;
mockSomeServices = SomeServices;
}));
});