[英]Unit testing AngularJS directives
How can I unit test my directive? 我如何对我的指令进行单元测试?
What I have is 我拥有的是什么
angular.module('MyModule').
directive('range', function() {
return {
restrict: 'E',
replace: true,
scope: {
bindLow: '=',
bindHigh: '=',
min: '@',
max: '@'
},
template: '<div><select ng-options="n for n in [min, max] | range" ng-model="bindLow"></select><select ng-options="n for n in [min, max] | range" ng-model="bindHigh"></select></div>'
};
})
In my unit test I want to start with a very simple test 在我的单元测试中,我想从一个非常简单的测试开始
describe('Range control', function () {
var elm, scope;
beforeEach(inject(function(_$compile_, _$rootScope) {
elm = angular.element('<range min="1" max="20" bind-low="low" bind-high="high"></range>');
var scope = _$rootScope_;
scope.low = 1;
scope.high = 20;
_$compile_(elm)(scope);
scope.$digest();
}));
it('should render two select elements', function() {
var selects = elm.find('select');
expect(selects.length).toBe(2);
});
});
This doesn't work though as the directive is registered on the app module and I don't want to include the module as that will make all of my config
and run
code run. 这不起作用,因为该指令在app模块上注册,我不想包含该模块,因为这将使我的所有
config
和run
代码运行。 That would defeat the purpose of testing the directive as a separate unit. 这将破坏将指令作为一个单独的单元进行测试的目的。
Am I supposed to put all my directives in a separate module and load just that? 我是否应该将所有指令放在一个单独的模块中并加载它? Or is there any other clever way of solving this?
还是有其他聪明的方法来解决这个问题吗?
EDIT: I see the question has changed since my last answer. 编辑:自从我上次回答以来,我发现问题已经改变了。
You need to put your directive in an independant module. 您需要将您的指令放在一个独立的模块中。
For example: 例如:
angular.module('MyModule.directives');
To test only that module you may load that module explicitly in the test like this: 要仅测试该模块,您可以在测试中显式加载该模块,如下所示:
beforeEach(module('MyModule.directives'));
This will load that module and all its dependancies. 这将加载该模块及其所有依赖项。
Remember to state the directive module as a dependancy in your MyModule definition in your app: 请记住在应用程序的MyModule定义中将指令模块声明为依赖:
angular.module('MyModule', ['MyModule.directives', ...]);
You should declare all your directives in 'youapp.directives' module and include that module in your directive tests. 您应该在'youapp.directives'模块中声明所有指令,并在指令测试中包含该模块。
In your app.js 在你的app.js中
angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'myApp.services', 'myApp.filters']).config(...)
In your directives.js 在你的directives.js中
angular.module('myApp.directives', []) .directive(.....)
Finally your directivesSpec.js 最后你的指令规范.js
describe('directives specs', function() {
beforeEach(module('myApp.directives'));
describe('range', function() {
...
});
});
The angular-seed project https://github.com/angular/angular-seed seems to have the opinion that directives should go in their own module that is then a dependency of the base app module. angular-seed项目https://github.com/angular/angular-seed似乎认为指令应该放在他们自己的模块中,然后是基础应用程序模块的依赖项。
So the directives go in a module called "myApp.directives" : 因此指令进入名为“myApp.directives”的模块:
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}]);
And then the base app module add the directive module as a depenency 然后基础应用程序模块将指令模块添加为依赖性
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
So then their test example just depends on the directive module 那么他们的测试示例只取决于指令模块
describe('directives', function() {
beforeEach(module('myApp.directives'));
etc...
I haven't actually tried this with your or my code yet but it looks like you were mostly looking for most common practice guidance. 我还没有用你或我的代码尝试这个,但看起来你主要是寻找最常见的练习指导。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.