AngularJS中有控制器的单元测试指令

Question

我正在开发AngularJS应用程序。我希望能够通过这个应用程序实现单元测试。目前，我正在努力对我的指令之一进行单元测试。此时，我有一个模块设置如下：

angular.module('my.module', [])
.controller('myCtrl', function ($scope, $element) {
// Directive specific business logic goes here
})
.directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
title:'=',
state:'@'
},
templateUrl: 'myHtml.tpl.html',
controller: myCtrl
};
})
;

我把我的控制器从指令中分离出来，因为我需要能够对控制器进行单元测试。此代码在应用程序本身中起作用。然而，当我试图对它进行单元测试时，我遇到了一个问题。我遇到了问题，因为我不知道如何从单元测试中将$元素注入控制器。目前，我有以下测试设置：

describe('my.module', function () {
var $scope;
var myCtrl;
beforeEach(module('myApp'));
beforeEach(inject(function ($controller, $rootScope, $element) {
$scope = $rootScope.$new();
myCtrl = $controller('myCtrl', { $scope: $scope });
}));
it('should create controller', inject(function () {
expect(testCtrl).toBeDefined();
}));
it('should create the directive', inject(function ($rootScope, $compile, $log) {
var d = angular.element('<my-directive></my-directive>');
$compile(d)($rootScope);
$scope.$digest();
expect($log.assertEmpty).not.toThrow();
}));
});

$元素是自动注入指令中的元素。然而，我不知道如何将其注入控制器。我需要这样做，这样我才能对它进行单元测试。我该怎么做？

谢谢！

Answer 1

在控制器的单元测试中，我可以建议的是只担心控制器暴露的逻辑。您正在尝试在控制器测试中测试指令的逻辑，即通过$element。

在控制器测试中对此进行模拟，因为元素可以是任何东西。您的控制器不应该关心DOM；它是一个控制器，它的主要(可能只是)工作是创建一个作用域并向作用域公开"事物"——函数、变量、逻辑。它们不应该绑定到指令的逻辑，否则耦合过于紧密。控制器应该能够自由地接收输入，纠正的输入，并与输入一起工作，将某些东西作为输出返回。

如果你能给出一个控制器公开的逻辑的例子，那么我可以进一步帮助编写单元测试。

更新：

现在来看一下您提供的单元测试。您需要将逻辑从控制器和指令的单元测试中分离出来。

Answer 2

对于注入$element和$log按原样执行：

describe('my.module', function ($compile) {
var $scope, $controller, $element, $log, $compile, html;
beforeEach(module('myApp'));
// an another module ...
beforeEach(inject(function ($injector) {
$scope = $injector.get('$rootScope');
$controller = $injector.get('$controller');
$element = $injector.get('$element');
$log = $injector.get('$log');
$compile = $injector.get('$compile');
function createController (){
return $controller('MyCtrl', {'$scope' : $scope, '$element' : $element, '$log': $log });
}
// init your controller
createController();
}));
it('should create the directive',function () {
// possibility to use $scope, $element, $log in your test
$compile('<my-directive></my-directive>')($scope);
$scope.$digest();
expect($log.assertEmpty).not.toThrow();
});
});