javascript - 未知提供商 : $scopeProvider When Testing Angular Controller With Jasmine

Question

我正在尝试使用 Jasmine 和 Karma 为网络应用程序的特定 Controller 实现单元测试。目前它给出以下错误:

Chrome 53.0.2785 (Mac OS X 10.10.5) HomeCtrl should be defined FAILED
  Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope
  http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope

这是测试文件的代码:

describe('HomeCtrl', function(){
    var $controller, HomeCtrl;

    beforeEach(angular.mock.module('TestModule'));

    beforeEach(inject(function(_$controller_, _$rootScope_, _$scope_) {
        $controller = _$controller_;
        rootScope = $rootScope.new();
        scope = $scope.new();
        HomeController = $controller('HomeCtrl', {
                $scope: scope
        });
    }));

    // Verify our controller exists
    it('should be defined', function() {
        expect(HomeController).toBeDefined();
    });
});

谁能告诉我我做错了什么？

Answer 1

在 AngularJS 中，所有范围都是 $rootScope 的子级。

在单元测试中，您不能注入(inject) $scope 因为不存在任何服务。但是有一个 $rootScope包含 API 的提供商像 $new 来创建一个新的子作用域。

$rootScope.$new()，创建一个新的子作用域。

因为，你不能注入(inject)你得到的$scope(没有这样的提供者可以为你提供$scope)

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope

在回答中，您提供了，

 beforeEach(inject(function(_$controller_, _$rootScope_) {
   $controller = _$controller_;
   $rootScope = _$rootScope_;
   HomeCtrl = $controller('HomeCtrl', {
    $scope: $rootScope,
   });
  }));

您正在注入(inject) $rootScope 并直接将 $rootScope 传递给 HomeCtrl。它可以工作，但在执行测试时，它会将 Controller 代码中的所有变量和函数添加到 $rootScope。

但在实际情况中，您的 HomeCtrl 需要一个 $scope(子范围)。因此，要复制实际场景，最好传递一个子作用域。

beforeEach(inject(function(_$controller_, _$rootScope_) {
  $controller = _$controller_;
  $scope = _$rootScope_.$new();
  HomeCtrl = $controller('HomeCtrl', {
   $scope: $scope,
  });
 }));