Develop Reference

How can I test this Angular controller?

I'm discovering Karma great world and I wanted to ask you a simple question about a controller I want to test. Here it is :
angular.module('app', ['ngSanitize'])
.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$scope.myCtrlData = '';
$http.get('../../data/file.json').then(function (res) {
$scope.myCtrlData = res.data.ctrlData;
});
}]);
It simply feed $scope.myCtrlData with a local json file content.
I started to write a quick test but I am stuck when running it.
describe('Test : MyController', function() {
var scope, httpBackend, make;
beforeEach(module('ngSanitize'));
beforeEach(module('app'));
beforeEach(inject(function($rootScope, $controller, $httpBackend){
httpBackend = $httpBackend;
scope = $rootScope.$new();
httpBackend.whenGET('../../data/file.json')
.respond(200, {
'data': { 'ctrlData': 'Yeah' }
});
make = $controller('MyController', { '$scope': scope });
}));
it('should get the data', function() {
httpBackend.flush();
expect(scope.myCtrlData).toBeDefined();
expect(scope.myCtrlData).toEqual('Yeah');
});
});
As a result I get a fail with this log :
PhantomJS 2.1.1 (Mac OS X 0.0.0) BioController should get the data FAILED
Expected undefined to equal 'Yeah'.
/Users/toto/Projects/awesomeproject/tests/views/yeah/test.js:32:30
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.01 secsPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.002 secs / 0.01 secs)
Could you please help me to figure out what did I do wrong ?
Thank you very much for your precious help :-)

You need to instantiate the controller.
make = $controller('MyController', { '$scope': scope });
with
$controller('MyController', { '$scope': scope });
Also,
can you modify your code
it('should get the data', function() {
httpBackend.whenGET('../../data/file.json')
.respond(200, {
'data': { 'ctrlData': 'Yeah' }
});
expect(scope.myCtrlData).toBeDefined();
expect(scope.myCtrlData).toEqual('Yeah');
httpBackend.flush();
});
Remove the httpBackend from the beforeEach and check

AngularJS Jasmine test: TypeError: 'undefined' is not an object

New to Angular and following up from my earlier post from angularjs jasmine tests: Variable vm not found
I am having a TypeError in my angular tests and not sure what the problem is. Here is my test:
(function(){
'use strict';
describe('Testing DeliveriesController', function() {
beforeEach(module('app.deliveries'));
describe('Testing deliveries controller', function(){
var vm, controller;
beforeEach(inject(function($controller, $rootScope){
vm = $rootScope.$new();
controller = $controller('DeliveriesController', {$scope:vm});
}));
afterEach(function() {
vm = undefined;
controller = undefined;
});
describe('priorities length', function(){
it('it should test priority length', function () {
expect(vm.priorities.length).toBe(0);
});
});
});
});
})();
The error I get is as follows:
PhantomJS 1.9.8 (Mac OS X 0.0.0) Testing DeliveriesController Testing deliveries controller priorities length it should test priority length FAILED
Error: [$injector:unpr] Unknown provider: DeliveriesServiceProvider <- DeliveriesService <- DeliveriesController
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=DeliveriesServiceProvider%20%3C-%20DeliveriesService%20%3C-%20DeliveriesController
at /Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4031
at getService (/Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4178)
at /Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4036
at getService (/Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4178)
at invoke (/Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4210)
at instantiate (/Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4227)
at /Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:8524
at /Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular-mocks/angular-mocks.js:1916
at /Users/rgoti/ingestion/external-ingestion/app/public/src/app/deliveries/deliveries.spec.js:12
at invoke (/Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular/angular.js:4219)
at workFn (/Users/rgoti/ingestion/external-ingestion/app/public/bower_components/angular-mocks/angular-mocks.js:2475)
undefined
TypeError: 'undefined' is not an object (evaluating 'vm.priorities.length')
at /Users/rgoti/ingestion/external-ingestion/app/public/src/app/deliveries/deliveries.spec.js:23

Courtesy: comment from #StubbbOrn:
Could you show controller's code? It would help to understand problem better. Looks like DeliveriesController depends not only on $scope but also on DeliveriesService. When you instantiate controller you should provide it all dependencies (either real or mocked ones).
This solution worked for me and was the solution. Thanks #StubbOrn

Looks like you are using DeliveriesService in your controller.
Whenever you are using a service, you need to make sure either you inject that service or add it using a $provider.
beforeEach(inject(function($controller, $rootScope, _DeliveriesService_){
vm = $rootScope.$new();
DeliveriesSrvc = _DeliveriesService_;
controller = $controller('DeliveriesController', {$scope:vm});
}));
or
beforeEach(module(function ($provide) {
mockObj = {
functionName: jasmine.createSpy('functionName')
}
$provide.value('DeliveriesService',mockObj)
}));

injections issues in unit testing using karma angularjs

I need to test a controller with a lot of injections (services, factories, values), now I have a problem with a value...
I have the following situation:
This is my controller.
(function () {
'use strict';
angular
.module('otpConfigureDatasets')
.controller('otpConfigureDatasetsController', otpConfigureDatasetsController);
otpConfigureDatasetsController.$inject = ['$location', '$state', 'otpWebMapApp', 'otpWMDeltaTracker', 'otpWMStateCache', '$scope', '$timeout', 'otpConfigureDatasetService', 'otpAllDatasetsService', 'otpReviewListDatasetsService','otpConfigureDatasetSelectedTab'];
function otpConfigureDatasetsController($location, $state, otpWebMapApp, otpWMDeltaTracker, otpWMStateCache, $scope, $timeout, otpConfigureDatasetService, otpAllDatasetsService, otpReviewListDatasetsService, otpConfigureDatasetSelectedTab) {
var vm = this;
...
vm.tabs = [{
title: 'MY REVIEW LIST',
selectedAmt: vm.reviewData,
contentTemplate: './app/features/configureDatasets/reviewListDatasets.html',
active: otpConfigureDatasetSelectedTab.tab == 'MyReviewList'
}, {
title: 'ALL DATASETS',
selectedAmt: vm.allData,
contentTemplate: './app/features/configureDatasets/allDatasets.html',
active: otpConfigureDatasetSelectedTab.tab == 'AllDatasets'
}];
...
}
})();
My Spec.js below
'use strict';
describe('Test', function () {
var MainCtrl, scope, _otpWebMapApp_, _otpWMDeltaTracker_, _otpWMStateCache_, _otpConfigureDatasetService_,
_otpAllDatasetsService_, _otpReviewListDatasetsService_, _otpConfigureDatasetSelectedTab_;
beforeEach(function () {
module('otpConfigureDatasets');
});
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('otpConfigureDatasetsController', {
$scope: scope, otpWebMapApp: _otpWebMapApp_, otpWMDeltaTracker: _otpWMDeltaTracker_, otpWMStateCache: _otpWMStateCache_,
otpConfigureDatasetService: _otpConfigureDatasetService_, otpAllDatasetsService: _otpAllDatasetsService_,
otpReviewListDatasetsService: _otpReviewListDatasetsService_, otpConfigureDatasetSelectedTab: _otpConfigureDatasetSelectedTab_
});
}));
it('Should be true', function () {
expect(true).toBe(true);
});
});
But when I try to run the test case, It doesn´t work and display the following error:
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Windows 8 0.0.0)]: Connected on socket NHknSeC3p_h_lf12SK Gh with id 27552356
PhantomJS 1.9.8 (Windows 8 0.0.0) Test Should be true FAILED
TypeError: 'undefined' is not an object (evaluating 'otpConfigureDatasetSelectedTab.tab')
at otpConfigureDatasetsController (D:/workspace/.....
I already have all the required files in the karma.config.js....
If I comment these two lines in the controller.
//active: otpConfigureDatasetSelectedTab.tab == 'MyReviewList'
and
//active: otpConfigureDatasetSelectedTab.tab == 'AllDatasets'
The unit testing works fine.
What´s wrong in my Spec definition???

You are not saving the object you're trying to mock. You basically have just
_otpConfigureDatasetService_ = undefined,
_otpReviewListDatasetsService_ = undefined
So it's not the controller that is failing, it's the unit test. You're injecting undefined in place of both objects. I'm not sure what you want to do exactly, but you either need to define some mock objects like _otpConfigureDatasetService_ = {tab: 'something'} or get the real services and adjust them
beforeEach(inject(function ($controller, $rootScope, otpConfigureDatasetService, otpReviewListDatasetsService) {
//
_otpConfigureDatasetService_ = otpConfigureDatasetService;
_otpReviewListDatasetsService_ = otpReviewListDatasetsService;
//
scope = $rootScope.$new();
MainCtrl = $controller('otpConfigureDatasetsController', {
$scope: scope, otpWebMapApp: _otpWebMapApp_, otpWMDeltaTracker: _otpWMDeltaTracker_, otpWMStateCache: _otpWMStateCache_,
otpConfigureDatasetService: _otpConfigureDatasetService_, otpAllDatasetsService: _otpAllDatasetsService_,
otpReviewListDatasetsService: _otpReviewListDatasetsService_, otpConfigureDatasetSelectedTab: _otpConfigureDatasetSelectedTab_
});
}));
BTW the convention is to define _object_ in the inject function and then to save it. If you inject them how they're called then you don't need to use _object_ form for your local variables.
I also prefer to use the $injector
beforeEach( inject(function($injector) {
exampleService = $injector.get('exampleService');
}));

Karma unit test Angular JS directives with externalUrl

I am trying to test an Angular directive that has an external template, but cannot get this to work. This is my first attempt at using Karma. I have Googled for a solution, and tried various changes to the karma.conf.js file, but still keep getting this:
Error: [$injector:modulerr] Failed to instantiate module app/inventory/itemDetails.html due to:
Error: [$injector:nomod] Module 'app/inventory/itemDetails.html' is not available! You either misspelled the module name or forgot to load it.
Folder structure:
app
inventory
itemDetails.html
itemDetailsDirective.js (templateUrl: "app/inventory/itemDetails.html")
UnitTest
karma.conf.js
specs
inventorySpec.js
karma.conf.js
// list of files / patterns to load in the browser
files: [
'../scripts/jquery.min.js',
'scripts/angular.js',
'scripts/angular-mocks.js',
'../app/*.js',
'../app/**/*.js',
'../app/inventory/itemDetails.html',
'specs/*.js'
],
preprocessors: {
'../app/inventory/itemDetails.html':['ng-html2js'] // Is this supposed to be the path relative to the karma.conf.js file?
},
ngHtml2JsPreprocessor: {
stripPrefix: '../',
},
itemDetailsDirective.js
templateUrl: "app/inventory/itemDetails.html",
inventorySpec.js (most stuff commented out for debug purposes)
describe("itemDetailsDirective", function () {
var element, $scope;
beforeEach(module("app/inventory/itemDetails.html"));
beforeEach(inject(function ($compile, $rootScope) {
console.log("itemDetailsDirective");
//element = angular.element('<item-details></item-details>');
//$scope = $rootScope.$new();
//$compile(element)($scope);
//$scope.$digest();
}));
it('should display', function () {
// var isolatedScope = element.isolateScope();
// //expect(isolatedScope.condition).toEqual("Fair");
});
});
So I have a UnitTest folder (VS 2013 project) parallel to the app folder. The paths under "files" in karma.conf.js are correct - all "non-templateUrl" tests work fine.
Help would be great, while I still have some hair left!

I got this working, thanks to this article that I just came across: http://willemmulder.net/post/63827986070/unit-testing-angular-modules-and-directives-with
The key is that the paths are relative to the DISK root!
To illustrate, I changed the karma.conf.js file to use cahceIdFromPath:
ngHtml2JsPreprocessor: {
cacheIdFromPath : function(filepath) {
console.log("karma, cacheIdFromPath " + filepath);
var templateFile = filepath.substr(filepath.indexOf("/app/") + 1 );
console.log("karma, templateFile: " + templateFile);
return templateFile;
},
},
Output:
karma, cacheIdFromPath C:/Dev/BcCom/app/inventory/itemDetails.html
karma, templateFile: app/inventory/itemDetails.html
With the above, it now works as it should!

I am not sure what do you want to test but you are trying to use an html as module which I think is not correct and probably you have to use $httpbackendto mock the GET request. I made a dummy example:
'use strict';
describe('TestMyDirective', function() {
var $compile, $http, $httpBackend, $rootScope, $scope, template;
beforeEach(module('myApp'));
beforeEach(inject(function($injector) {
$rootScope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
// Inject $httpBackend service
$httpBackend = $injector.get('$httpBackend');
// Mock request to your html
$httpBackend.whenGET('my.html').respond("GotIT");
$scope = $rootScope.$new();
template = $compile("<my-directive> </my-directive>")($scope);
$scope.$digest();
}));
/*
*
* Tests
*
*/
describe('Test something', function() {
it('should test something', function() {
// You can test that your directive add something on the $scope
});
});
});

Tests Failing due to socket io does not exist

io with my own angular service. I'm using yeoman and angular workflow: http://yeoman.io/ I need to make io recognised by karma so the test does not fail?
'use strict';
angular.module('publicApp')
.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function on(eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function emit(eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
});
}
};
});
angular.module('publicApp')
.controller('MainCtrl', function ($scope, socket) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'];
socket.on('person:added', function (data) {
$scope.person = data;
});
});
angular.module('publicApp', [])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('publicApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function () {
expect(scope.awesomeThings.length).toBe(3);
});
});
io is part of window, I've tried using angulars $window object but had no luck. The error I'm getting from karma is:
Running "karma:unit" (karma) task
WARN [karma]: Port 8080 in use
INFO [karma]: Karma v0.10.2 server started at http://localhost:8081/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/michaeljames/Documents/Projects/StackOverflow/public/test/mock/**/*.js" does not match any file.
INFO [Chrome 29.0.1547 (Mac OS X 10.8.2)]: Connected on socket LmbsWIC-97zMEi76FmiE
Chrome 29.0.1547 (Mac OS X 10.8.2) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
ReferenceError: io is not defined
at Object.$get (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/scripts/services/socket.js:5:16)
at Object.invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3000:28)
at /Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2838:37
at getService (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2960:39)
at invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2978:13)
at Object.instantiate (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3012:23)
at /Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:4981:24
at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:14:16)
at Object.invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3000:28)
at workFn (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular-mocks/angular-mocks.js:1795:20)
Error: Declaration Location
at window.jasmine.window.inject.angular.mock.inject (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular-mocks/angular-mocks.js:1781:25)
at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:12:14)
at /Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:3:1
TypeError: Cannot read property 'length' of undefined
at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:20:31)
Chrome 29.0.1547 (Mac OS X 10.8.2): Executed 1 of 1 (1 FAILED) ERROR (0.306 secs / 0.067 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.

I'd mock the entire socket service, since this is a means of going to some sort of server and these unit tests should be about testing your UI code only (the reason for $httpBackend in ngMock).
Here are some clever guys that figured it out:
https://github.com/btford/angular-socket-io-seed/issues/4#issuecomment-14505212.

In your karma.config.js files section inject the server side socket.io.js
files: [
'test/unit/**/*.js',
'any/other/included/files/*.js',
'http://localhost:8080/socket.io/socket.io.js' //just only inject it
],