AngularJS Karma test - allow the object passed to the controller, undefined when testing

Question

We are using ui-router 0.2.10.

I insert the permission object as a parameter into my controller, which then sets the scope variable in the controller. It works great in the application like this:

state provider

$stateProvider.state('myState', { resolve:{ foo: function(){ return 'bar'; }, url: '/', templateUrl: 'index.html', controller: 'FooCtrl' }) 

controller

 app.Controllers.controller('FooCtrl', ['$scope', '$state', 'foo', function ($scope, $state, $log, Zone, foo) { $scope.testVar = foo console.log($scope.testVar); }]) 

The bar is then registered on the console, as expected in Chrome.

But when performing tests using Karma, the permission object is now undefined, which does not give a result. Here is the test code:

 describe('controllers', function(){ var $rootScope, $scope, $state beforeEach(module('app')) beforeEach(inject(function($injector) { $state = $injector.get('$state') $rootScope = $injector.get('$rootScope') $scope = $rootScope.$new() $controller = $injector.get('$controller') })) it('FooCtrl should exist', inject( function() { $state.go('myState') $rootScope.$apply() $controller = $controller('FooCtrl', { '$scope': $scope }) $rootScope.$apply() assert.equal($scope.testVar, "bar", "these strings are equal") })) }) 

This error is presented (the permission object in my case is called resolRouteModels):

 [$injector:unpr] Unknown provider: fooProvider <- foo http://errors.angularjs.org/1.3.0-build.2921+sha.02c0ed2/$injector/unpr?p0=fooProvider%20%3C-%20foo 

Any help would be greatly appreciated, and please let me know if you encounter this problem.

Answer 1

When you instantiate your controller, Angular can usually figure out how to satisfy controller dependencies. In this case, he does not know about the "resolution" of the UI router.

One way to solve this problem is to provide this dependency on your own in the test, just as you pass the area to the controller:

 var foo = 'bar'; // whatever $controller = $controller('FooCtrl', {$scope: $scope, foo: foo} ); 

Note: you can also create a mock $state object and pass it to the controller in the same way if you want to include it in your tests.

Answer 2

My guess is that your Angular setup is perfect, if so, you can test your code this way. I used the Jasmine 2 syntax.

 describe('Foo Controller', function() { var $scope, $state, controller, Zone, foo, $log; beforeEach(module('app')); beforeEach(inject(function($controller) { $scope = {}; $state = {}; $log = {}; Zone = {}; foo = {}; controller = $controller; })); it('should log the value foo', function() { spyOn(console, 'log'); controller('FooCtrl', { $scope, $state, $log, Zone, foo }); expect($scope.testVar).toEqual({}); expect(console.log).toHaveBeenCalledWith({}); }); it('should log the value foo', function() { spyOn(console, 'log'); // You could change the value of foo ie foo = 'create more spies than fbi'; controller('FooCtrl', { $scope, $state, $log, Zone, foo }); expect($scope.testVar).toEqual('create more spies than fbi'); expect(console.log).toHaveBeenCalledWith('create more spies than fbi'); }); }); 

Once again I hope this helps. Peace.