Karma 中非常简单的 AngularJS 单元测试似乎失败了

Question

我的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

我正在测试我的 HeaderController，它是：

'use strict';

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

  $scope.init();

}]);

我的test/unit/controllers/header.spec.js 是：

'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');

    });

  });
})();

但是当我执行$ karma start test/karma.conf.coffee 时，我得到：

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

那么对于这么简单的测试，我做错了什么？

Answer 1

您忘记在 $controller 中将 $scope 传递给您的控制器。这是一个有效的plunk。

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