为什么在我的 AngularJS / Karma 单元测试中找不到 $scope？答案

【问题标题】：Why won't $scope be found in my AngularJS / Karma unit test?为什么在我的 AngularJS / Karma 单元测试中找不到 $scope？
【发布时间】：2014-05-07 17:34:39
【问题描述】：

我的控制器：

angularMoonApp.controller('SourceController', ['$scope', '$rootScope', '$routeParams', 'fileService', function ($scope, $rootScope, $routeParams, fileService) {
  $scope.init = function() {
    $rootScope.currentItem = 'source';

    fileService.getContents($routeParams.path).then(function(response) {
      $scope.contents = response.data;
      $scope.fileContents = null;
      if(_.isArray($scope.contents)) {
        // We have a listing of files
        $scope.breadcrumbPath = response.data[0].path.split('/'); 
      } else {
        // We have one file
        $scope.breadcrumbPath = response.data.path.split('/');
        $scope.breadcrumbPath.push('');

        $scope.fileContents = atob(response.data.content);

        fileService.getCommits(response.data.path).then(function(response) {
          $scope.commits = response.data;
        });
      }
    });
  }

  $scope.init();
}]);

我的单元测试：

(function() {
  describe('SourceController', function() {
    var $scope, $rootScope, $httpBackend, $routeParams, $q, createController, fileService, deferred;

    beforeEach(module('angularMoon'));

    beforeEach(inject(function($injector) {
      $httpBackend = $injector.get('$httpBackend');
      $rootScope = $injector.get('$rootScope');
      $routeParams = $injector.get('$routeParams');
      $scope = $rootScope.$new();
      $q = $injector.get('$q');
      deferred = $q.defer();

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

      createController = function() {
        return $controller('SourceController', {
          '$scope': $scope,
          '$routeParams': $routeParams,
          'fileService': fileService
        });
      };
    }));

    it("should set the current menu item to 'source'", function() {
      createController();
      $scope.init();
      expect($rootScope.currentItem).toBe('source');
    });

    it("should get test the getContents call of the fileService", function() {
      spyOn(fileService, 'getContents').andCallThrough();
      createController();
      $scope.init();

      expect(fileService.getContents).toHaveBeenCalled();
    });

    it("should return an object with multiple files", function() {
      var multipleFiles = [{path: '.DS_Store'}, {path: '.bowerrc'}];
      deferred.resolve(multipleFiles);
      spyOn(fileService, 'getContents').andReturn(deferred.promise);

      createController();
      $scope.init();

      expect($scope.contents).toBe(multipleFiles);
      expect($scope.breadcrumbPath).toBe('');
    });
  });
})();

最后一次测试失败：

Expected undefined to be [ { path : '.DS_Store' }, { path : '.bowerrc' } ].
Expected undefined to be ''.

为什么$scope 在这里未定义？

【问题讨论】：

标签： angularjs unit-testing karma-jasmine

【解决方案1】：

您的控制器希望您注入您在单元测试中没有执行的 $rootScope。

你有：

  createController = function() {
    return $controller('SourceController', {
      '$scope': $scope,
      '$routeParams': $routeParams,
      'fileService': fileService
    });

但应该有：

  createController = function() {
    return $controller('SourceController', {
      '$scope': $scope,
      '$rootScope': $rootScope,
      '$routeParams': $routeParams,
      'fileService': fileService
    });

此外，您还需要调用此代码：

createController();
$scope.init();

在你兑现承诺之前：

deferred.resolve(multipleFiles);

【讨论】：

【解决方案2】：

范围不是未定义的。未定义的是$scope.contents 和$scope.breadcrumbPath。

那是因为承诺回调总是被异步调用。你需要打电话

$scope.$apply()

在验证您的期望之前。

【讨论】：