Develop Reference

Unit testing AngularJS application with karma-browserify

I'm trying to unit test an AngularJS/Browserify application via karma-browserify. Ultimately, when I run my gulp karma task, I get the error Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it...
My gulpfile.js has the task
gulp.task('test', function(done) {
new karma.Server({
configFile: __dirname + '/karma.conf.js'
}, done).start();
});
My karma.conf.js includes
{
// ...
frameworks: ['browserify', 'jasmine'],
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'spec/**/*.js'
],
preprocessors: {
'spec/**/*.js': [ 'browserify' ]
},
browserify: {
debug: true
}
// ...
}
I define my module in a main.js that includes
require('angular').module('myApp', [
//...lots of `require`s for each dependency...
]);
I define my controller in a MainCtrl.js that looks like
function MainCtrl(/*...deps...*/) {
var ctrl = this;
ctrl.foo = 'bar';
}
module.exports = MainCtrl;
then register the controller elsewhere like
var app = require('angular').module('myApp');
app.controller('MainCtrl', [/*...deps...*/, require('./MainCtrl')]);
Finally my test looks like
(function() {
"use strict";
describe('MainCtrl', function() {
var ctrl;
beforeEach( angular.mock.module('myApp') );
beforeEach( inject( function($controller) {
ctrl = $controller('MainCtrl');
}));
it('should be defined', function() {
expect(ctrl).toBeDefined();
});
});
}());
Workaround
The workaround I have is to add my main.js file to karma.conf.js
files: [
'js/main.js', // ADDED: Defines the app and `require`s angular
'node_modules/angular-mocks/angular-mocks.js',
'spec/**/*.js'
],
preprocessors: {
'js/main.js': ['browserify'], // ADDED
'spec/**/*.js': ['browserify']
}
and everything works. But I thought I wasn't supposed to add my source files to karma (at least not with karma-browserify). Is this the right way to set up my project?

Yes, the 'workaround' is the desired way to use karma-browserify.
preprocessors definition specifies which of the included files should be processed by which preprocessor but does not include them:
The keys of the preprocessors config object are used to filter the
files specified in the files configuration.
it is files definition that actually includes the files:
The files array determines which files are included in the browser and
which files are watched and served by Karma.

Files tells Karma which files it should load relative to the base path. These are:
All test related libraries
Our source code to test
The tests themselves

Including Angular configuration Module

I have trouble building an Angular module that stores all the configuration data and then including it in my main Angular module.
The idea is for the system to be able to change the configuration data. So the main Module code and controller codes are the same but the config module is different.
I have tried many different way to get this to work but they all give me a series of errors.
My config modules looks like this
(function( ){
angular.module('favoriteeats.config')
.constant('GLOBAL_CONFIG', {
'base_uri': '".url( )."'
});
});
My main (condensed) module looks like this. Note I'm using it with a blade template for the brackets.
(function( ){
var app = angular.module('favoriteeats', ['favoriteeats.config','ngResource'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
})();
My controller looks like this.
(function( ){
var app = angular.module('favoriteeats');
app.controller('EntrustRolePermissions', function($scope, $controller) {
angular.extend(this, $controller('BaseController', {$scope: $scope}));
var vm = this;
vm.roles = [ ];
vm.user_roles = [ ];
vm.updateRoles = function(){
ret = vm.restApi('role','GET');
console.log(ret);
}
vm.updateRoles( );
}) //end contoller
})();
When I include the config module script in the head I get this error.
"Error: [$injector:modulerr] Failed to instantiate module favoriteeats due to:
[$injector:modulerr] Failed to instantiate module favoriteeats.config due to:
[$injector:nomod] Module 'favoriteeats.config' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."
When I include the config module script in the footer after lazying loading the JS I get the same error.
If I add the config module script to a separate JS file and add this before or after the main module js file I get the same error.
The only way it seem to work is if I included in the same `(function( ){' container as the main module. IE
(function( ){
angular.module('favoriteeats.config')
.constant('GLOBAL_CONFIG', {
'base_uri': '".url( )."'
});
var app = angular.module('favoriteeats', ['favoriteeats.config','ngResource'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
})();
Why is this? How can I extract it and include my config script from another location!?!? I cannot find the answer to determine what is wrong.

You should declare a module by indicating its dependencies (in this case an empty array) and then you have to execute the function:
(function( ){
angular.module('favoriteeats.config', [])
.constant('GLOBAL_CONFIG', {
'base_uri': '".url( )."'
});
})();

You're referencing the 'favoriteeats.config' module instead of defining it. If you add the empty list of dependencies, it should work.
angular.module('favoriteeats.config', [])

You have a faulty IIFE.
(function( ){
angular.module('favoriteeats.config')
.constant('GLOBAL_CONFIG', {
'base_uri': '".url( )."'
});
}); // This does not close the IIFE.
Change it to:
(function( ){
angular.module('favoriteeats.config')
.constant('GLOBAL_CONFIG', {
'base_uri': '".url( )."'
});
}()); // or })();
edit; I didn't even pay attention to the fact that you are not defining your module, but rather referencing it. Like #joao and #mithon suggested - add some brackets:
angular.module('favoriteeats.config', [])

Setting up Jasmine/karma for angular

I am lightly following this guide - http://paislee.io/testing-angularjs-with-grunt-karma-and-jasmine/ - and having a few issues as follows:
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I installed everything as it told me to and found another pretty basic example of setting up a test(this is my first time implementing so I'm starting small), the test looks like so
describe('Unit: MainCtrl', function() {
// Load the module with MainCtrl
beforeEach(module('myApp'));
var ctrl, scope;
// inject the $controller and $rootScope services
// in the beforeEach block
beforeEach(inject(function($controller, $rootScope) {
// Create a new scope that's a child of the $rootScope
scope = $rootScope.$new();
// Create the controller
ctrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should create $scope.greeting when calling sayHello',
function() {
expect(scope.greeting).toBeUndefined();
scope.sayHello();
expect(scope.greeting).toEqual("Hello Ari");
});
})
And in the controller it's just
$scope.name = "Ari";
$scope.sayHello = function() {
$scope.greeting = "Hello " + $scope.name;
}
(this is from http://www.ng-newsletter.com/advent2013/#!/day/19 )
I have my app set up and controllers in separate folders, using a regular ng-route structure, I'm thinking this maybe is the issue? I'm using grunt karma for this - here is the task just incase it's helpful.
karma: {
unit: {
options: {
frameworks: ['jasmine'],
singleRun: true,
browsers: ['PhantomJS'],
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/scripts/**/*.js'
]
}
}
}
I could use some help, this is my first time attempting this, I would LOVE to get some automated testing in place. Thanks for reading!!

You need to include ngRoute in your files list in the karma conf. The error message says as much.
karma: {
unit: {
options: {
frameworks: ['jasmine'],
singleRun: true,
browsers: ['PhantomJS'],
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-mocks/angular-route.js',
'app/scripts/**/*.js'
]
}
}
}

You have not included ngroute module, as there is some dependency on this module.
There should be a bower component
'app/bower_components/angular-route/angular-route.js',
Install this bower component and add this line to karma config.
Check for other module too.

Angular JS Error: [$injector:nomod] Module 'portfolioMockupApp.services' is not available

I'm attempting to write some unit tests with Karma and am receiving the following error:
PhantomJS 1.9.8 (Mac OS X) ERROR
Error: [$injector:nomod] Module 'portfolioMockupApp.services' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.3/$injector/nomod?p0=portfolioMockupApp.services
at /Users/danielbogart/Documents/coding/work/portfolio-mockup/bower_components/angular/angular.js:1749
Also, I have two separate files within the portfolioMockupApp.services module, both saved in the scripts/services directory.
Karma.conf files section:
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-touch/angular-touch.js',
'test/mock/**/*.js',
'test/spec/**/*.js',
'app/scripts/services/*.js',
'app/scripts/directives/*.js',
'app/scripts/controllers/*.js',
'app/scripts/app.js',
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'./src/**/*.js',
'./test/**/*.js'
],
Portfolio.js spec (first and only test currently):
'use strict';
describe('Controller: PortfolioCtrl', function () {
// load the controller's module
beforeEach(module('portfolioMockupApp', 'portfolioMockupApp.services'));
var PortfolioCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $scope, $log, $stateParams, $state,
$rootScope,portService, portfolioCreateService) {
scope = $rootScope.$new();
PortfolioCtrl = $controller('PortfolioCtrl', {
$scope: scope
});
}));
it('should have a list of 5 tabs by default', function () {
expect(scope.tabs.length).toBe(5);
});
});

The problem stemmed from having two separate service files using the same service module. In the Karma.conf file I had to explicitly load the service file that initialized the module, and then the other service file and rest of the app afterwards.
'app/scripts/services/port-service.js',
'app/scripts/services/new-port-service.js',
'app/scripts/app.js',
'app/scripts/services/*.js',
'app/scripts/directives/*.js',
'app/scripts/controllers/*.js',

Thanks for checking back in with a solution. I had this same issue when two modules relied on each other and existed in the same folder, lets call them app/scripts/parentModule.js and app/scripts/constants.js. Both should be picked up by the wildcard entry in karma.config.js.
'app/scripts/*.js'
'app/scripts/anotherFolder/*.js'
Since constants.js relies on parentModule.js, the later must be included first and my guess is the wildcard was including the files alphabetically but I've not confirmed this yet.
'app/scripts/parentModule.js'
'app/scripts/*.js'
'app/scripts/anotherFolder/*.js'

Angular, Jasmine mock whole module dependiences," is not available!" error

In my module i have some dependiences:
var app = angular.module('action', ['xeditable']);
Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. more: http://vitalets.github.io/angular-xeditable/
End no i my Jasmine test i want to mock all this module.
I was trying like this:
var mocks;
beforeEach(function() {
mocks = jasmine.createSpyObj("mocks", ["xeditable"]);
module("action", function($provide){
$provide.value('xeditable', mocks.xeditable)
});
});
but i still get:
Error: [$injector:nomod] Module 'xeditable' is not available!
I know that there were a lot of questions about it but do not know how to deal, very please help :)

i solved it, just added another beforeEach before load module, like that:
beforeEach(function () {
//mock the xeditable lib:
angular.module("xeditable", []);
});
beforeEach(function() {
module("action");
});