Karma jasmine and angular controller using 'Controller as' syntax (this instead of $scope)

Question

I'm trying to set up karma to make some unit tests but I can't manage to make it work on a basic example :

This is the controller file :

angular.module('balrogApp.requests', [
  /* Dependancies */
])
  // Routes configuration
  .config(['$routeProvider', function($routeProvider) {
    /* $routeProvider configuration */
  }])
  .controller('requestsController', function(Requests, Users, Projects, RequestsComments, CostEstimations,
                                             Regions, growl, $route, $rootScope, $scope, $location) {
    this.test = 'test42';

/* ... */

});

This is the test file :

describe('requestsController', function() {
  beforeEach(module('balrogApp.requests'));

  var ctrl;
  beforeEach(inject(function($controller) {
    ctrl = $controller('requestsController');
  }));

  it('should have test = "test42"', function(){
    expect(ctrl.test).toBe("test42");
  });
});

But this error is thrown :

Chrome 43.0.2357 (Windows 7 0.0.0) requestsController should have test = "test42" FAILED Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- requestsController http://errors.angularjs.org/1.4.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20requestsController at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:68:12 at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4289:19 at Object.getService [as get] (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4437:39) at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4294:45 at getService (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4437:39) at invoke (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4469:13) at Object.instantiate (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4486:27) at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:9151:28 at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular-mocks/angular-mocks.js:1882:12 at Object. (C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:6:12) Error: Declaration Location at window.inject.angular.mock.inject (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular-mocks/angular-mocks.js:2409:25) at Suite. (C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:5:14) at C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:1:1 TypeError: Cannot read property 'test' of undefined at Object. (C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:10:16) Chrome 43.0.2357 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.108 secs / 0.087 secs)

Nikos Paraskevopoulos Nikos Paraskevopoulos · Accepted Answer · 2015-11-17T16:43:34

The $scope (on which your controller depends on) is a so-called "local", i.e. it is specific to the instance of the controller and does not live in the dependency injection container. You have to provide it yourself, e.g. as:

beforeEach(inject(function($rootScope, $controller) {
    ctrl = $controller('requestsController', { $scope: $rootScope.$new() });
}));

Since you are creating a new scope, it would be good to destroy it after the test:

var scope;

beforeEach(inject(function($rootScope, $controller) {
    scope = $rootScope.$new();
    ctrl = $controller('requestsController', { $scope: scope });
}));

afterEach(function() {
    scope.$destroy();
});

Karma jasmine and angular controller using 'Controller as' syntax (this instead of $scope)

1 Answers