We Keep Coding

How to inject ngRoute into Jasmine / Karma AngularJS unit test?

I'm trying to get a basic unit test example working. It all works fine with this app.js
var whapp = angular.module('whapp', [])
.filter('reverse',[function(){
return function(string){
return string.split('').reverse().join('');
}
}]);
and this spec.js
describe('Filters', function(){ //describe your object type
beforeEach(module('whapp')); //load module
describe('reverse',function(){ //describe your app name
var reverse, rootScope;
beforeEach(inject(function($filter){ //initialize your filter
reverse = $filter('reverse',{});
}));
it('Should reverse a string', function(){ //write tests
expect(reverse('rahil')).toBe('lihar'); //pass
});
});
});
with this karma files config
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-mocks/angular-route/angular-route.js',
'node_modules/angular-mocks/angular-ui-router/release/angular-ui-router.js',
'app/js/*.js',
'tests/*.js'
]
The problem occurs when I try to inject ngRoute into my module in app.js like so
var whapp = angular.module('whapp', ['ngRoute'])
.filter('reverse',[function(){
return function(string){
return string.split('').reverse().join('');
}
}]);
In which case I get the following error in karma [UPDATE: this error occurs even if I don't load the angular-mock.js library into karma as shown above]
TypeError: undefined is not a constructor (evaluating 'reverse('rahil')') in tests/spec.js (line 9)
So... how do I inject ngRoute into spec.js correctly? I've tried a variety of things, none of which worked.

Apparently, you get this error because PhantomJS fails to instantiate your main Angular module whapp. One possible reason is, that the file node_modules/angular-mocks/angular-route/angular-route.js is missing.
Obviously, you are using npm to manage your dependencies. So try to replace your current file with:
node_modules/angular-route/angular-route.js
The same for the ui-route module:
node_modules/angular-ui-router/release/angular-ui-router.js
I hope this will help you.

Unknown proider error with karma jasmine unit tests

I have a unit test that is created with the Jasmine framework. When I put a single test specification in the describe block I get a pass in the karma console. If I copy that describe block with the test in it ( the it(); ) then I suddenly start getting problems with dependencies that the module uses.
In the console I get errors around unknown providers.
Here is my simple test:
describe('service definition tests', function () {
it('should be defined', function () {
expect(sut).toBeDefined();
});
});
and that passes okay. If I copy this block I get an error about dependencies. Which is strange as I've already proved that I can test the 'sut' is defined in the first test.
One thing to note is that I have a beforeEach block that loads the module and provides a dependency and it is this dependency that errors when I've duplicated the test. Here is the beforeEach:
var mockConfig = {};
beforeEach(function () {
module('app');
module(function ($provide) {
$provide.value('myConfig', mockConfig);
});
});
the problem has to be something to do with this beforeEach being as the error I get is about the myConfig dependency.
Here is the error:
uncaught Error: [$injecor:unpr] Unknown provider: myConfigProvider <- myConfig <- authorisation
http://errors.angularjs.org/1.4.6/$injector/unpr?p0=myConfiProvider

I managed to resolve this issue by creating a dummy implementation of myConfig factory so that the test files used this.
angular.module('app').factory('myConfig', function() {
var env = 'test';
return {
env: env
}
});
This code lives in a js file that is loaded with the rest of the tests.

AngularJS Test a Factory with Mocha

I am new to Mocha and AngularJS Unit Testing but want to test my application using Mocha. I have basic language tests working, but I cannot run tests against my applications Factory or Controller.
I have the following basic files.
apps.js
aangular.module('MyApp', []);
file1.js
angular.module('MyApp').factory('Factory1' ...);
file2.js
angular.module('MyApp').factory('Factory2' ...);
angular.module('MyApp').factory('Controller' ...);
describe('Main Test', function() {
var FactoryToTest;
beforeEach(module('MyApp'));
beforeEach(inject(function (_Factory_) {
FactoryToTest = _Factory_;
}));
describe('Factory2', function () {
it('should return "unknown"', function () {
Game = {};
expect(new Factory2(Game)).to.equal('unknown');
});
});
});
When I run the test, it generates an error, and I am not sure what to fix to get this to work.
Error:
Message:
object is not a function
Stack:
TypeError: object is not a function
at Suite.<anonymous> (b:\app\test.js:5:16)

You're getting an error because the beforeEach function should take a callback function instead of an object. According to the Angular guide on module unit testing (scroll to bottom of the page) :
Each module can only be loaded once per injector. Usually an Angular app has only one injector and modules are only loaded once. Each test has its own injector and modules are loaded multiple times.

Karma + Angular undefined error

I just started angular testing with karma and jasmine. I've written two basic tests. One of the two tests pass, but the other one is failing. I can't seem to debug it. I've been looking everywhere, and it should work according to various tutorials. The $scope variable should be available. I get the following error (and a lot of text, see ):
at C:/totalflatline-2.0/public/lib/angular/angular.js:4362
at forEach (C:/totalflatline-2.0/public/lib/angular/angular.js:336)
at loadModules (C:/totalflatline-2.0/public/lib/angular/angular.js:4364)
at createInjector (C:/totalflatline-2.0/public/lib/angular/angular.js:4248)
at workFn (C:/totalflatline-2.0/public/lib/angular-mocks/angular-mocks.js:2409)
at C:/totalflatline-2.0/public/lib/angular-mocks/angular-mocks.js:2392
at C:/totalflatline-2.0/public/shared/tests/unit/shared.client.controller.unit.tests.js:
5
at C:/totalflatline-2.0/node_modules/karma-jasmine/lib/boot.js:126
at C:/totalflatline-2.0/node_modules/karma-jasmine/lib/adapter.js:171
at http://localhost:9876/karma.js:210
at http://localhost:9876/context.html:83
TypeError: 'undefined' is not an object (evaluating '$scope.test')
at C:/totalflatline-2.0/public/shared/tests/unit/shared.client.controller.unit.tests.js:
9
at C:/totalflatline-2.0/node_modules/karma-jasmine/lib/boot.js:126
at C:/totalflatline-2.0/node_modules/karma-jasmine/lib/adapter.js:171
at http://localhost:9876/karma.js:210
at http://localhost:9876/context.html:83
hantomJS 1.9.8 (Windows 7): Executed 2 of 2 (1 FAILED) (0.402 secs / 0.025 secs)
The two tests are as following. The first one passes and the other one gives the above undefined error.
The one that passes:
describe('Testing MEAN Main Module', function() {
var mainModule;
beforeEach(function() {
mainModule = angular.module('mean');
});
it('Should be registered', function() {
expect(mainModule).toBeDefined();
console.log('Success!');
});
});
The one that fails:
describe('Testing the Shared Stats controller', function(){
var SharedController,$scope;
beforeEach(function(){
// load the module you're testing.
module('mean');
inject(function($rootScope,$controller){
// create a scope object for us to use.
$scope = $rootScope.$new();
SharedController = $controller('shared.StatsController',{
$scope:$scope
});
});
});
it('Should contain a user object',function(){
// User cannot be undefined
expect($scope.test).toEqual('yoo');
});
});
The angular controller is looking like this:
// Create the 'shared' controller
angular.module('shared').controller('shared.StatsController', [ '$scope',
function($scope) {
$scope.test = 'yoo';
}
]);
Angular version is 1.4 and the karma dependencies are versions:
"karma": "~0.12.23",
"karma-jasmine": "~0.2.2",
"karma-phantomjs-launcher": "~0.1.4",
I have been breaking my neck over this all day. I hope someone with more knowledge about testing angular can help me out.

Your angular controller isn't instantiated properly. To 'get' or load a module, you use angular.module('moduleName', []), with the second argument being an array with dependencies. So, it should be:
angular.module('shared', []).controller('StatsController', [ '$scope',
function($scope) {
$scope.test = 'yoo';
}
]);

AngularJS Jasmine Test Fails: Failed to instantiate module

My angular app worked great and so did my tests, using karma and jasmine, until I added a dependency in ui.bootstrap. Now the app still works as expected, but I can't get my tests to run. This is what I have:
app.js - added dependency in ui.bootstrap
angular.module('myApp', ['ngResource', 'ngRoute', 'ui.bootstrap']).config(function(...) {...});
service.js
angular.module('myApp').service('myService', function () {})
controller.js
angular.module('myApp').controller('MyController', function ($scope, $http, myService) {})
tests/main.js
describe('Controller: MyController', function () {
var MyController, scope;
// load the controller's module
beforeEach(function(){
module('myApp');
inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MyController = $controller('MyController', {
$scope:scope
});
});
});
it('should do something', function () {
expect(scope.myOptions.length).toBe(5);
});
});
And my test, which I run using grunt and krama, fails due to:
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot
What have I missed? The app runs with no problem, only the test fails.

In karma.conf.js there is a list of files that karma loads before test execution:
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
...
]
Add bootstrap-ui.js there.

Inject your dependencies
beforeEach(function(){
angular.module('ui.bootstrap',[]);
});

I had the same problem. Just solved it. Somehow putting the module(myApp); function call inside a the function you provide to beforeEach() doesn't work just try this:
Extract the module call into its own beforeEach():
beforeEach(module('myApp'));
And use another beforeEach() for the function you use.