未知提供者：使用Jasmine測試角度控制器時的$ scopeProvider

Question

我正在嘗試使用Jasmine和Karma為Web應用程序的特定控制器實現單元測試。 目前它給出以下錯誤：

 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子代。

在單元測試中，您無法注入 $scope因為沒有服務存在。 但是有一個$ rootScope提供程序，它包含像$new這樣的API來創建一個新的子范圍。

$rootScope.$new() ，創建一個新的子范圍。

因為，你不能注入你得到的$scope （沒有這樣的提供者為你提供$scope ）

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

在答案中，您提供了，

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

您正在注入$rootScope並直接將$rootScope傳遞給HomeCtrl 。 它可以工作，但在執行測試時，它會將控制器代碼中的所有變量和函數添加到$rootScope 。

但在實際情況中，您的HomeCtrl期望$scope （子范圍）。 因此，為了復制實際場景，如果傳遞子范圍會更好。

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

Answer 2

以下代碼成功：

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

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

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

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