Error while executing karma tests - angularjs

Question

I am trying to run karma unit tests for my application. The application is created using my company's custom angular yeoman generator. (The generator is very similar to the angular-yeoman generator).
I am trying to run karma jasmine test for my application. But I keep on getting the error message whenever I run grunt test
Chrome 35.0.1916 (Mac OS X 10.9.0) ERROR Uncaught object at
/Users//Dummy
Apps/karma1/app/bower_components/angular/angular.js:1611
Warning: Task "karma:unit" failed. Use --force to continue.
I have the following in my Gruntfile.js:
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
}
In karma.conf.js file I have :
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'app/bower_components/angular*/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-bootstrap/ui-bootstrap.js',
'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'app/bower_components/service-state/js/StateService.js',
'app/scripts/controllers/dashboard.js',
'../test/spec/**/*.js'
],
// list of files / patterns to exclude
exclude: [],
// web server port
port: 8080,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
My package.json file :
{
"name": "karma1",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-css": "~0.5.4",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-compass": "~0.5.0",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-less": "~0.9.0",
"grunt-contrib-cssmin": "~0.6.0",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-watch": "~0.5.2",
"grunt-autoprefixer": "~0.2.0",
"grunt-usemin": "~0.1.11",
"grunt-rev": "~0.1.0",
"grunt-shell": "~0.2.2",
"grunt-concurrent": "~0.3.0",
"load-grunt-tasks": "~0.1.0",
"grunt-google-cdn": "~0.2.0",
"grunt-ngmin": "~0.0.2",
"time-grunt": "~0.1.0",
"karma-ng-scenario": "^0.1.0",
"grunt-karma": "^0.8.3",
"karma": "^0.12.16",
"karma-ng-html2js-preprocessor": "^0.1.0",
"karma-jasmine": "^0.1.5",
"karma-chrome-launcher": "^0.1.4",
"karma-mocha": "latest",
"chai": "1.4.0",
"karma-script-launcher": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-requirejs": "~0.2.0",
"karma-coffee-preprocessor": "~0.1.0",
"karma-phantomjs-launcher": "~0.1.0",
"grunt-open": "~0.2.2",
"ng-midway-tester": "2.0.5"
},
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"test": "grunt test"
}
}
My test controller is :
'use strict';
describe('Controller: DashboardCtrl', function () {
// load the controller's module
beforeEach(module('karma1App'));
var DashboardCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller,$rootScope) {
scope = $rootScope.$new();
DashboardCtrl = $controller('DashboardCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function () {
expect(scope.awesomeThings.length).toBe(3);
});
});
I use REQUIREJS to load the other dependencies, but REQUIRE is used only in the directives. As a kick start I want to test my controllers and services but I keep getting this error.
Any idea what is going wrong.
Thanks!

Answer 1

The point I was missing that I was not loading the angular app. I am loading the angular app through a config file config.js
/* global angular */
'use strict';
var karma1App = angular.module('karma1App', [
'pascalprecht.translate', 'ngResource', 'ngRoute',
'ui.bootstrap' ]);
karma1App.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/site', {
activeTabName: 'site',
templateUrl: 'views/site.html',
controller: 'SiteCtrl'
})
.when('/Cases', {
templateUrl: 'views/Cases.html',
controller: 'CasesCtrl'
})
.when('/Cases/:caseid', {
templateUrl: 'views/Case.html',
controller: 'CaseCtrl'
})
.when('/Alarms', {
templateUrl: 'views/Alarms.html',
controller: 'AlarmsCtrl'
})
.when('/Analysis', {
templateUrl: 'views/Analysis.html',
controller: 'AnalysisCtrl'
})
.when('/Reports', {
templateUrl: 'views/Reports.html',
controller: 'ReportsCtrl'
}) /*
.when('/dashboard', {
activeTabName: 'dashboard',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
*/
.when('/admin', {
templateUrl: 'views/admin.html',
controller: 'AdminCtrl'
})
.otherwise({
redirectTo: '/site'
}); }]);
In the karma.conf.js I added this following script tag :
files: [
'app/bower_components/angular*/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-bootstrap/ui-bootstrap.js',
'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'./test/test-main.js',
'app/scripts/controllers/dashboard.js',
'../test/spec/**/*.js'
]
The test-main.js has the following line of code ONLY:
/* global angular */
'use strict';
var karma1App = angular.module('karma1App', [
'ngResource',
'ngRoute', // Angular 1.2 requires separate ngRoute
'ui.bootstrap',
'StateService'
]);
After loading the test-main.js file in the karma.conf.js file I was able to unit test my application using karma.
Hope this helps.
Thanks,
Anirban