Pretty simple AngularJS Unit Test in Karma seems to fail

Question

My karma.conf.coffee:

module.exports = (config) ->
  config.set
    basePath: '../'

    files: [
      'public/bower_components/lodash/dist/lodash.min.js'
      'public/bower_components/angular/angular.min.js'
      'public/bower_components/angular-mocks/angular-mocks.js'
      'public/bower_components/angular-route/angular-route.min.js'
      'public/bower_components/angular-strap/dist/angular-strap.min.js'
      'public/scripts/**/*.js'
      'test/unit/**/*.js'
    ]

    singleRun: true

    frameworks: ['jasmine']

    browsers: ['PhantomJS']

    plugins: [
      'karma-junit-reporter'
      'karma-jasmine'
      'karma-phantomjs-launcher'
    ]

    logLevel: config.LOG_INFO

I'm testing my HeaderController which is:

'use strict';

angularMoonApp.controller('HeaderController', ['$scope', '$rootScope', function ($scope, $rootScope) {
  $scope.init = function () {
    $rootScope.currentItem = 'home';    
  }

  $scope.init();

}]);

My test/unit/controllers/header.spec.js is:

'use strict';

(function() {
  describe('HeaderController', function() {
    var $scope, $rootScope, createController;

    beforeEach(module('angularMoon'));

    beforeEach(inject(function($injector) {
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();

      var $controller = $injector.get('$controller');

      createController = function() {
        return $controller('HeaderController');
      };
    }));

    it("should set the current menu item to 'home'", function() {
      createController();
      $scope.init();

      expect($rootScope.currentItem).toBe('home');

    });

  });
})();

But when I executed $ karma start test/karma.conf.coffee, I get:

INFO [karma]: Karma v0.12.14 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket nVTesgfm72ZGKPHrK027 with id 17114851
PhantomJS 1.9.7 (Mac OS X) HeaderController should set the current menu item to 'home' FAILED
    Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope
        at /Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:35
        at c (/Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:34)
        at /Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:36
        at c (/Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:34)
        at d (/Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:34)
        at /Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:34
        at /Users/mycomp/Sites/angular-introduction-website/public/bower_components/angular/angular.min.js:66
        at /Users/mycomp/Sites/angular-introduction-website/test/unit/controllers/header.spec.js:16
        at /Users/mycomp/Sites/angular-introduction-website/test/unit/controllers/header.spec.js:21

So what am I doing wrong for such a simple test?

Answer 1

You forgot to pass $scope to your controller in $controller. Here's a working plunk.

createController = function() {
          // pass the objects you need injected in the controller.
          // including other services (if required)
        return $controller('HeaderController', {
            '$scope': $scope
        });
      };