我试图完全理解如何使用Jasmine在AngularJS中测试指令。目前,我有一个如下所示设置的指令:
.directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
title:'=',
state:'@'
},
templateUrl: 'myHtml.tpl.html',
controller: function ($scope) {
// Business Logic Specific to the Directive goes in here
}
};
})
如上面的代码片段所示,我的指令在指令定义中有一个控制器。我试图测试的具体指令相当复杂。该指令中的控制器有超过200行代码。我试图弄清楚如何围绕这个控制器的内容编写单元测试。目前我有以下内容:
describe('myApp', function () {
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function ($controller, $rootScope) {
$scope = $rootScope.$new();
}));
it('should create my directive', inject(function ($rootScope, $compile, $log) {
var card = angular.element('<my-directive></my-directive>');
$compile(card)($rootScope);
$scope.$digest();
expect($log.assertEmpty).not.toThrow();
}));
});
上面的单元测试测试指令本身的创建。但是,我无法弄清楚如何在指令内部测试控制器。有没有办法做到这一点?如果是这样,怎么样?
谢谢!
答案 0 :(得分:4)
据我记得,有一种分离指令控制器的语法,如:
.directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
title:'=',
state:'@'
},
templateUrl: 'myHtml.tpl.html',
controller: 'MyDirectiveCtrl as ctrl'
};
})
并将其注册为常规控制器
.controller("MyDirectiveCtrl", function($scope) {})
因此,如果您这样做,那么您可以使用$ controller创建此控制器并愉快地测试。
答案 1 :(得分:1)
您可以使用以下代码测试控制器:
describe('myApp', function () {
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function ($controller, $rootScope) {
$scope = $rootScope.$new();
var card = angular.element('<my-directive></my-directive>');
$compile(card)($rootScope);
$scope.$digest();
controller = element.controller
}));
it('should create my directive', inject(function ($rootScope, $compile, $log) {
//TRY YOUR BUSINESS LOGIC TESTS HERE
//$scope.yourFunction(yourArgs...);
//expect($scope.yourVars).toSomething
}));
});