Unbekannter Provider: $ scopeProvider Beim Testen von eckigen Controllern mit Jasmine

Question

Ich versuche Unit Testing für einen bestimmten Controller einer Web-App mit Jasmine und Karma zu implementieren. Im Moment wird es gibt die folgenden Fehler:

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 

Hier ist der Code der Testdatei:

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(); 
    }); 
}); 

Könnte mir jemand sagen, was ich falsch mache?

Answer 1

In AngularJS alle Bereiche Kinder $rootScope sind.

In Komponententests können Sie nicht injizieren$scope da gibt es keinen Dienst, der existiert. Aber es gibt einen $rootScope Provider, der API wie $new enthält, um einen neuen untergeordneten Bereich zu erstellen.

$rootScope.$new(), erstellen Sie einen neuen untergeordneten Bereich.

Da können Sie nicht injizieren $scope Sie bekommen (kein solcher Anbieter existiert Sie $scope zur Verfügung zu stellen)

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

In der Antwort, Sie haben zur Verfügung gestellt,

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

Sie Pritzen $rootScope und direkt die $rootScope zu HomeCtrl übergeben. Es funktioniert, aber während der Tests fügt es alle Variablen und Funktionen in Controller-Code $rootScope.

Aber im realen Szenario erwartet Ihre HomeCtrl eine $scope (Kindbereich). Um das tatsächliche Szenario zu replizieren, wäre es besser, wenn Sie einen untergeordneten Bereich übergeben.

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

Answer 2

Der folgende Code folgt:

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(); 
    })); 
});