I've been looking through countless SO post on this but can't get the unit test of my angular controller to work.
Error:
TypeError: Object #<Object> has no method 'apply'
Error: [ng:areq] Argument 'CorrMatrixCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=CorrMatrixCtrl&p1=not%20a%20function%2C%20got%20undefined
at /home/sebastian/gutenberg-for-good/app/lib/angular/angular.js:78:12
at assertArg (/home/sebastian/gutenberg-for-good/app/lib/angular/angular.js:1402:11)
at assertArgFn (/home/sebastian/gutenberg-for-good/app/lib/angular/angular.js:1412:3)
at /home/sebastian/gutenberg-for-good/app/lib/angular/angular.js:6881:9
at null.<anonymous> (/home/sebastian/gutenberg-for-good/test/unit/controllersSpec.js:28:20)
at Object.invoke (/home/sebastian/gutenberg-for-good/app/lib/angular/angular.js:3762:17)
at workFn (/home/sebastian/gutenberg-for-good/test/lib/angular/angular-mocks.js:2144:20)
Error: Declaration Location
at window.inject.angular.mock.inject (/home/sebastian/gutenberg-for-good/test/lib/angular/angular-mocks.js:2129:25)
at null.<anonymous> (/home/sebastian/gutenberg-for-good/test/unit/controllersSpec.js:26:33)
at /home/sebastian/gutenberg-for-good/test/unit/controllersSpec.js:1:1
Controller:
angular.module('gutenberg.controllers', ['ui.bootstrap'])
.controller('CorrMatrixCtrl', ['AnalysisFactory', '$scope', function(AnalysisFactory, $scope){
$scope.get = function() {
//something
};
}]);
Test:
describe("corrMatrixCtrl test", function() {
var fakeFactory = {
// some code
};
beforeEach(angular.module("gutenberg.controllers"));
it("should have a get method", inject(function($controller, $rootScope) { // line 26
var controller = $controller("CorrMatrixCtrl", {AnalysisFactory: fakeFactory, $scope: $rootScope.$new()}); // line 28
expect(angular.isFunction(controller.get)).toBe(true);
}));
});
From all the tutorials I've been reading or watching and all the documentation I can't see the error. Any kind of help is highly appreciated!
Karma config:
module.exports = function(config){
config.set({
basePath : '../',
files : [
'app/lib/angular/angular.js',
'app/lib/angular/angular-*.js',
'test/lib/angular/angular-mocks.js',
'app/js/**/*.js',
'test/unit/controllersSpec.js'
],
exclude : [
'app/lib/angular/angular-loader.js',
'app/lib/angular/*.min.js',
'app/lib/angular/angular-scenario.js'
],
autoWatch : true,
frameworks: ['jasmine'],
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-jasmine'
],
})}
First off, your defining the get method on the $scope, and not on the controller. So your test should be:
var scope = $rootScope.$new();
var controller = $controller("CorrMatrixCtrl", {AnalysisFactory: fakeFactory, $scope: scope});
expect(angular.isFunction(scope.get)).toBe(true);
If you wanted to define it on the controller, your controller code should be:
this.get = function() {
//something
};
That probably doesn't solve your problem though. My guess is that you don't include the controller code in the test. Add an alert/console.log at the top of the controller file and rerun the test to make sure that it's there.
Related
Hi i am new to unit testing in angular. I am trying to add a simple test, but i keep getting an error saying that my angular controller is not registered. Below is my test case. I am not sure where i am going wrong?
'use strict';
/**
*
*/
describe('Controller',function() {
beforeEach(module('Module'));
var $controller;
beforeEach(inject(function(_$controller_) {
$controller = _$controller_;
}));
it("Should initialize AllValues to an empty array",function() {
var $scope = {
};
var testController= $controller(
'TestController', {
$scope : $scope
});
expect(testController.AllValues).toEqual(new Array());
})
});
below is my file structure in karma.conf.js
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'App/**/*Test.js',
'App/**/*Module.js',
//'App/**/**.js',
]
May be you don't include 'TestController' refrence in 'specrunner.html'
I'm quite new to unit testing of AngularJS, and have been pulling my hair figuring things out. I am currently testing a simple controller that produces some outputs, which I need to unit test.
controller: SummaryController
(function(app) {
'use strict';
function SummaryController($scope, $stateParams, $state, $interval, $payments, $cashierApp, $window, $banks, $prepaidcards, $flash, $player, $cookies, $rootScope, $filter) {
// lots of stuff going on here, but I only need this part
$scope.showQR = $payments.get('paymentoption').content.field_display_qrcode;
// a basic assignment of a boolean value which I need to check if it is defined
}
app.controller('depositStatusCtrl', ['$scope', '$stateParams', '$state', '$interval', '$payments', '$cashierApp', '$window', '$banks', '$prepaidcards', '$flash', '$player', '$cookies', '$rootScope', '$filter', SummaryController]);
})(angular.module('cashierApp'));
spec (unit test): controller.spec.js
'use strict';
describe('Cashier App: Deposit Status Page', function() {
var service,
ctrl,
scope;
beforeEach(module('cashierApp'));
beforeEach(inject(function($rootScope, $controller, SummaryController) {
scope = $rootScope.$new();
mockSummaryCtrl = SummaryController;
spyOn(mockSummaryCtrl, 'save').andCallThrough();
firstController = $controller('depositStatusCtrl', {
$scope: scope,
SummaryController: mockSummaryCtrl
});
}));
it('should check if qrcode display is enabled', function() {
expect(scope.showQR).toBeDefined();
// expect(scope.showQR).toBe(true);
// expect(scope.showQR).toBe(false);
});
});
I've tried every possible approach I can find on the web, and this one I tried to use was based on an example here.
I cannot get this to work at all. How do you properly test controllers and/or providers in AngularJS? When I run karma start (I'm using karma-jasmine, btw), I always get the same error of:
Error: [$injector:unpr] Unknown provider: SummaryControllerProvider <- SummaryController
EDIT: Here's my karma.conf.js just in case you need to know how I use my dependencies.
'use strict';
module.exports = function(config) {
var configuration = {
autoWatch: true,
frameworks: ['jasmine'],
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-carousel/dist/angular-carousel.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/ngclipboard/src/ngclipboard.js',
'bower_components/angular-qrcode/angular-qrcode.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'bower_components/ng-file-upload/ng-file-upload-all.min.js',
'bower_components/ng-device-detector/ng-device-detector.min.js',
'bower_components/re-tree/re-tree.min.js',
'bower_components/angular-timer/dist/angular-timer.min.js',
'bower_components/angular-touch/angular-touch.min.js',
'bower_components/highlightjs/highlight.pack.min.js',
'bower_components/moment/moment.js',
'src/app/app.js',
'src/app/core/cashier.core.js',
'src/app/core/directives/modal/modal.js',
'src/app/pages/deposit/deposit.js',
'src/app/pages/withdrawal/withdrawal.js',
'src/app/paymentoptions/alipaywap/alipaywap.js',
'src/app/paymentoptions/alipaywap/alipaywap.confirm.js',
'src/app/paymentoptions/astropay/astropay.js',
'src/app/paymentoptions/atmotc/atmotc.js',
'src/app/paymentoptions/atmotc/atmotc.confirm.js',
'src/app/paymentoptions/banktransfer/banktransfer.js',
'src/app/paymentoptions/banktransfer/banktransfer.confirm.js',
'src/app/paymentoptions/bitcoin/bitcoin.js',
'src/app/paymentoptions/bitcoinwithdrawal/bitcoinwithdrawal.js',
'src/app/paymentoptions/debitcard/debitcard.js',
'src/app/paymentoptions/lbtwithdrawal/lbtwithdrawal.js',
'src/app/paymentoptions/prepaidcard/prepaidcard.js',
'src/app/paymentoptions/qqpay/qqpay.js',
'src/app/paymentoptions/unionpay/unionpay.js',
'src/app/paymentoptions/wcnp/wcnp.js',
'src/app/paymentoptions/wechat/wechat.js',
'src/app/pages/deposit/deposit.status/deposit.status.controller.js',
'src/app/pages/deposit/deposit.status/deposit.status.controller.spec.js'
],
reporters: ['progress', 'coverage', 'junit'],
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'templates'
},
// browsers: ['PhantomJS','Chrome'],
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-angular-filesort',
'karma-jasmine',
'karma-ng-html2js-preprocessor',
'karma-junit-reporter',
'karma-coverage'
],
junitReporter: {
outputFile: 'target/unittest-results.xml',
suite: ''
},
preprocessors: {
'src/**/*.html': ['ng-html2js'],
'src/**/*.js': ['coverage']
},
coverageReporter: {
reporters: [{
type: 'cobertura',
dir: 'target/coverage/'
},
{
type: 'html',
dir: 'target/coverage/'
}
]
}
};
// This block is needed to execute Chrome on Travis
// If you ever plan to use Chrome and Travis, you can keep it
// If not, you can safely remove it
// https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
if (configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
configuration.customLaunchers = {
'chrome-travis-ci': {
base: 'Chrome',
flags: ['--no-sandbox']
}
};
configuration.browsers = ['chrome-travis-ci'];
}
config.set(configuration);
};
Try to start from this. The reason you get not an error that angular's injector works with only known "types" - controller, services, e.t.c. And in your example you tried to get some function, that it does not now. However, it knows this function by controllers name - depositStatusCtrl.
beforeEach(inject(function($rootScope, $controller, depositStatusCtrl) {
spyOn(depositStatusCtrl, 'save').andCallThrough();
}));
it('should check if qrcode display is enabled', function() {
expect(depositStatusCtrl).toBeDefined();
});
I'm facing some trouble with a generated project (by yoeman) and it's testing.
What I want is to build a fully automated testing environement. I use Gulp, Karma, Jasmine and angular-mocks.
TypeError: undefined is not an object (evaluating 'controller.awesomeThings')
In my console after 'gulp test' it throws this error message. but this doesn't make any sense for me.
Look at my test spec:
'use strict';
describe('Controller: AboutCtrl', function() {
// load the controller's module
beforeEach(function() {
module('evoriApp');
});
var controller;
var scope;
// Initialize the controller and a mock scope
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
controller = $controller('AboutCtrl', {
'$scope': scope
});
}));
it('should attach a list of awesomeThings to the scope', function() {
console.log(controller);
expect(controller.awesomeThings.length).toBe(3);
});
});
And karma should have any file it needs (karma.conf.js):
files: [
// bower:js
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-aria/angular-aria.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-material/angular-material.js',
// endbower
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
This is how the generated gulp method looks like:
gulp.task('test', ['start:server:test'], function () {
var testToFiles = paths.testRequire.concat(paths.scripts, paths.mocks, paths.test);
return gulp.src(testToFiles)
.pipe($.karma({
configFile: paths.karma,
action: 'watch'
}));
});
I don't know where the failure is. I checked all paths and rewrote the testfiles multiple times... But the error doesn't change.
Does anybody have an idea, what the error could be caused by?
Ok guys, I got it.
I tried to run the test in the jasmine standalone environement to minimies the area where the error root is.
This is what my controller looks like:
angular.module('evoriApp')
.controller('AboutCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.testVariable = 2;
});
I rewrote the 'this.awesomeThings' to '$scope.awesomeThings' and didn't get it, that this is something different. Whatever...
This is the now running spec:
describe('Controller: AboutCtrl', function() {
// load the controller's module
beforeEach(function() {
module('evoriApp');
console.log("1");
});
var controller;
var scope;
// Initialize the controller and a mock scope
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
controller = $controller('AboutCtrl', {
$scope: scope
});
}));
it('sollte instanziert worden sein', function() {
expect(controller).toBeDefined();
});
it('sollte ein Object "awesomeThings" besitzen', function() {
expect(scope.awesomeThings).toBeDefined();
});
it('should attach a list of awesomeThings to the scope', function() {
expect(scope.awesomeThings.length).toBe(3);
});
});
What I learned: In a test you have to generate the scope, which you pass to the controller, by yourself and afterward you got to use the passed scope variable for $scope.variables.
I am getting into Angular Testing with Karma and Jasmine. After doing the karma init and writing the first test for a home controller, I keep getting Executed 0 of 0 ERROR. It does not seem like it's being picked up in the files.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'public/assets/libs/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'public/app/app.module.js',
'public/app/app.config.js',
'public/app/**/*.js',
'test/unit/**/*.spec.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 3030,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
}); //config.set
} //module.export
The test (fixed)
describe('HomeController', function() {
//Inject 'app' module into this spec.
beforeEach(module('app'));
//Inject instance of Scope.
var homeController;
beforeEach(inject(function($rootScope, $controller) {
//create a new scope
scope = $rootScope.$new();
//create new controller, using the newly created scope
HomeController = $controller('HomeController', {
$scope: scope
});
}));
//Set expectations
it('the message should say Hello World', function(HomeController) {
expect(scope.message).toBe('Hello World');
});
});
And the HomeController:
(function() {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope', '$log'];
function HomeController($scope, $log) {
/*jshint validthis: true*/
var vm = this;
vm.message = 'Hello World';
} //HomeController()
})(); //Controller
Thanks for helping.
I figured it out. The test it('...') was inside the beforeEach() block, so there were 0 tests. It is now in it's own separate block, below.
To all those also experiencing the "Executed 0 of 0 ERROR" issue:
Here is how to better debug this error since the log message in the command line might be truncated or not helpful enough:
In the Browser instance of karma (e.g. Chrome), set a breakpoint in karma.js in the following function:
this.error = function (msg, url, line) {
Since the string representation of the msg that will be transported to the command line log is not very helpful, analyze it here.
Had the same problem testing typescript - I found the problem in the chrome console:
Refused to execute script from 'xxx' because its MIME type ('video/mp2t') is not executable.
The fix turned out to be adding
mime: {
'text/x-typescript': ['ts', 'tsx']
}
into karma.conf.js.
I want to test an Angular controller for my application fooApp, defined as follow:
var fooApp = angular.module('fooApp', [ 'ngRoute', 'ngAnimate', 'hmTouchEvents' ]);
...
The controller, MainCtrl is defined:
"use strict";
fooApp.controller('MainCtrl', function ($scope, $rootScope, fooService) {
...
}
So I've tested several ways to create a test, like this one:
'use strict';
describe('MainController test', function () {
var scope;
var controller;
beforeEach(function () {
angular.mock.module('ngRoute', []);
angular.mock.module('ngAnimate', []);
angular.mock.module('hmTouchEvents', []);
angular.module('cwfApp', [ 'ngRoute', 'ngAnimate', 'hmTouchEvents' ]);
angular.mock.inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MainCtrl', {
$scope: scope
});
});
});
it('should display a list', function () {
console.log('-------------- Run Test 1 | ' + scope);
expect(scope.currentStep).toBe(1);
});
});
and the result:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16-build.64+sha.245de33/$injector/modulerr?p0=undefined&p1=Error%3A%20%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16-build.64%2Bsha.245de33%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520undefined%0A%20%20%20%20at%20Error%20(%3Canonymous%3E)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A6%3A471%0A%20%20%20%20at%20wb%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A18%3A360)%0A%20%20%20%20at%20Qa%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A18%3A447)%0A%20%20%20%20at%20nc%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A31%3A191)%0A%20%20%20%20at%20Object.d%20%5Bas%20invoke%5D%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A33%3A176)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A254%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A7%3A298)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A9)
at Error (<anonymous>)
at d:/dev/foo/app/bower_components/angular/angular.min.js:6:471
at d:/dev/foo/app/bower_components/angular/angular.min.js:32:400
at Array.forEach (native)
at r (d:/dev/foo/app/bower_components/angular/angular.min.js:7:298)
at e (d:/dev/foo/app/bower_components/angular/angular.min.js:32:9)
at Object.$b [as injector] (d:/dev/foo/app/bower_components/angular/angular.min.js:35:98)
at workFn (d:/dev/foo/app/bower_components/angular-mocks/angular-mocks.js:2142:52)
at Object.window.inject.angular.mock.inject [as inject] (d:/dev/foo/app/bower_components/angular-mocks/angular-mocks.js:2133:37)
at null.<anonymous> (d:/dev/foo/test/jasmine/todo.test.js:15:22)
TypeError: Cannot read property 'currentStep' of undefined
at null.<anonymous> (d:/dev/foo/test/jasmine/todo.test.js:25:21)
Chrome 31.0.1650 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.023 secs / 0.015 secs)
I've also tested with beforeEach(angular.mock.module('cwfApp')); (instead of the first beforeEach in the previous code), but the error is almost the same.
Regarding my karma.conf.js file, I set this list of files:
files: [
'app/bower_components/angular/angular.min.js',
'app/bower_components/angular-route/angular-route.min.js',
'app/bower_components/hammerjs/hammer.min.js',
'app/bower_components/angular-hammer/angular-hammer.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/foo-application.js',
'app/js/foo-controllers.js',
'app/js/foo-services.js',
'app/js/foo-router.js',
'test/jasmine/*.js'
],
The injection seems to fail, but I don't really understand what is missing or wrong in my configuration. The stacktrace above does not give a lot of explanations...
Any idea?
I'm using Angular 1.2.8.
Regards
Edit, with the code provided by #Engineer:
beforeEach(angular.mock.module('fooApp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MainCtrl', {
$scope: scope
});
}));
it('should display a list', function () {
console.log('-------------- Run Test 1 | ' + scope);
expect(scope.currentStep).toBe(1);
});
The error is almost the same:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16-build.64+sha.245de33/$injector/modulerr?p0=cwfApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16-build.64%2Bsha.245de33%2F%24injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16-build.64%252Bsha.245de33%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(%253Canonymous%253E)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A6%253A471%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A32%253A69%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A7%253A298)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A32%253A9)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A32%253A86%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(%3Canonymous%3E)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A6%3A471%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A400%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A7%3A298)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A9)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A86%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A7%3A298)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A9)
at Error (<anonymous>)
at d:/dev/foo/app/bower_components/angular/angular.min.js:6:471
at d:/dev/foo/app/bower_components/angular/angular.min.js:32:400
at Array.forEach (native)
at r (d:/dev/foo/app/bower_components/angular/angular.min.js:7:298)
at e (d:/dev/foo/app/bower_components/angular/angular.min.js:32:9)
at Object.$b [as injector] (d:/dev/foo/app/bower_components/angular/angular.min.js:35:98)
at workFn (d:/dev/foo/app/bower_components/angular-mocks/angular-mocks.js:2142:52)
TypeError: Cannot read property 'currentStep' of undefined
at null.<anonymous> (d:/dev/foo/test/jasmine/todo.test.js:20:21)
I will try to create a fiddle to reproduce my problem...
My problem was in fact due to a little mistake in karma.conf.js. Indeed, my application is defined as follow:
var fooApp = angular.module('fooApp', [ 'ngRoute', 'ngAnimate', 'hmTouchEvents' ]);
and my karma.conf.js loads the following scripts:
files: [
'app/bower_components/angular/angular.min.js',
'app/bower_components/angular-route/angular-route.min.js',
'app/bower_components/hammerjs/hammer.min.js',
'app/bower_components/angular-hammer/angular-hammer.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/foo-application.js',
'app/js/foo-controllers.js',
'app/js/foo-services.js',
'app/js/foo-router.js',
'test/jasmine/*.js'
], ...
but the module ngAnimate was not loaded. So I just added that line:
'app/bower_components/angular-animate/angular-animate.min.js',
and it works!
You are redefining fooApp module in the test.
You need to load it with Angular in the test code like this:
angular.mock.module('ngRoute', 'ngAnimate', 'hmTouchEvents', 'fooApp');
Try like this:
describe('MainController test', function () {
var scope;
var controller;
beforeEach(angular.mock.module('fooApp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MainCtrl', {
$scope: scope
});
});
it('should display a list', function () {
console.log('-------------- Run Test 1 | ' + scope);
expect(scope.currentStep).toBe(1);
});
});
The thing, you need to understand, is if you declare some module with its dependencies(like angular.module('fooApp', [ 'ngRoute', 'ngAnimate', 'hmTouchEvents' ])), when you inject the module(fooApp) on your tests, you don't need to inject the dependency modules either.