Unit testing angularjs controller using Node.js, Gulp.js and Mocha - angularjs

Question

I am trying to unit test an angularjs controller using Node.js. I am using gulp.js and mocha to run the tests, via gulp-mocha.
This is what my gulpfile.js looks like right now:
(function () {
var gulp = require('gulp');
var mocha = require('gulp-mocha');
gulp.task('default', function () {
return gulp
.src('Scripts/Tests/*.js', { read: false })
.pipe(mocha({
ui: 'tdd',
reporter: 'dot',
globals: {
angular: require('./Scripts/angular.js')
}
}));
});
})();
This is the code under test:
(function () {
var application = angular.module('Main');
application.controller('MainController', ['$scope', function ($scope) {
$scope.isDisabled = function () {
return true;
};
}]);
})();
And this is the test file itself:
(function () {
var chai = require('chai');
var assert = chai.assert;
angular.module('Main', []); // Create an empty module
require('../MainController.js'); // Fill the module with the controller
suite('Main Controller', function () {
test('isDisabled always true', function () {
var controllerFactory = angular.injector.get('$controller');
var controller = controllerFactory('MainController', {
'$scope': {}
});
var result = controller.isDisabled();
assert.isTrue(result);
});
});
})();
I need to make angular a global in order for my test and the file I am testing to work. However, the call to require in gulpfile.js is giving me a Reference Error: window is not defined error. That makes sense, since I am running in Node.js.
What do I need to do to load up angular in Node.js?

Answer 1

As #unobf said (and the angularjs documentation says), the trick to testing angular from Node.js was to use Karma. That meant installing karma and karma-mocha, along with karma-chrome-launcher, karma-ie-launcher, karma-firefox-launcher (or whatever) via npm install.
Then I basically had to redo my gulp.js file from scratch:
(function () {
var gulp = require('gulp');
var karma = require('karma').server;
gulp.task('runTests', function (done) {
karma.start({
configFile: __dirname + '/karma.config.js',
singleRun: true
}, done);
});
gulp.task('default', ['runTests']);
})();
I also had to create a karma.config.js file to configure karma to use Chrome, Firefox, IE with mocha. In the same file, I configured mocha to use the tdd UI and the dot reporter:
module.exports = function(config) {
config.set({
browsers: ['Chrome', 'Firefox', 'IE'],
frameworks: ['mocha'],
files: [
'./Scripts/angular.js',
'./Scripts/chai.js',
'./Scripts/*.js',
'./Scripts/Tests/*.js'
],
singleRun: true,
client: {
mocha: {
reporter: 'dot',
ui: 'tdd'
}
}
});
};
I learned you have to specify angularjs, chai.js, etc. first so they are picked up first and in global scope for the other files. Along the same lines, the files for the code being tested have to be listed before the test files.
The code being tested didn't change at all. Once my tests were running, I realized my test was broken, and it ended up looking like this to pass:
(function () {
var assert = chai.assert;
suite('Main Controller', function () {
test('isDisabled always true', function () {
var injector = angular.injector(['ng', 'Main']);
var $controller = injector.get('$controller');
var scope = {};
var controller = $controller('MainController', {
'$scope': scope
});
var result = scope.isDisabled();
assert.isTrue(result);
});
});
})();
The big take away was that the controller simply populates the $scope object. I call isDisabled() on the $scope object instead. Of course, getting at the controller is a lot of work, so it makes more sense to use the inject method provided by angular-mocks.js:
(function () {
var assert = chai.assert;
suite('Main Controller', function () {
var $scope = {};
setup(function () {
module('Main');
inject(function ($controller) {
$controller('MainController', {
'$scope': $scope
});
});
});
test('isDisabled always true', inject(function ($controller) {
var result = $scope.isDisabled();
assert.isTrue(result);
}));
});
})();
Hopefully this is enough to get anyone started who is trying to use Node.js and mocha to test angularjs code.

Answer 2

I am doing this in Grunt, but the same principle applies to Gulp. You need to inject the "angular-mocks.js" file to be able to mock the dependency injection. I am using Karma http://karma-runner.github.io/0.12/index.html to do this and set it up in my karma.conf.js file as follows:
module.exports = function(config){
config.set({
basePath : '../../',
files : [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
...
Then you can inject a $controller into your tests and do things like test your controller initialization. The test below is initializing the scope and then testing that the controller is adding methods to the scope (note, I am using Jasmine, but the same can be done with mocha) but Jasmine comes with some nice builtin spy capabilities.
describe('analysisController', function () {
var scope, state;
beforeEach(function () {
module('analysis');
scope = {
$apply:jasmine.createSpy(),
ws: {
registerCallback:jasmine.createSpy(),
sendMessage:jasmine.createSpy()
}
},
state = {
go : jasmine.createSpy()
};
});
it('should add a bunch of methods to the scope', inject(function ($controller) {
$controller('analysisController', {
$scope : scope,
$state: state
});
expect(typeof scope.colorContrast).toBe('function');
expect(typeof scope.XPathFromIssue).toBe('function');
}));
...