我在 angularjs 指令上运行 karma 单元测试时遇到了很大的困难。这是我的设置:
var scope, ele;
var template = '<div data-my-directive data="data" config="config"></div>';
beforeEach(function () {
// Load directive's module
module('dashboard');
module('templates-dev');
// Load mock services/data (overriding real implementation)
module(function($provide) {
$provide.value("MockWidgetData", new MockWidgetData());
});
// Construct services/data to be available
// inside each testing block.
inject(function($rootScope, $compile, MockWidgetData) {
// Create a fresh scope
scope = $rootScope.$new();
ele = angular.element(template);
// Fill that scope with mock data
scope.config = MockWidgetData.config;
scope.data = MockWidgetData.data;
// Compile the element and attach our scope
$compile(ele)(scope);
// Digest the scope to trigger a scope update
// and attach our directive's link function
scope.$digest();
});
});
我的指令将“data”和“config”对象传递给其子指令,这些对象恰好是其他指令。该指令本身使用 templateUrl
,这就是我提供 module(templates-dev)
的原因:一个 html2js我的模板的预编译、 Angular 模块化、$templateCache
版本。这是我的指令 templateUrl
的示例:
<div id="container">
<button id="my-btn" ng-click="doSomething('parameter')"></button>
<div other-dir data="data" config="config"></div>
</div>
这是我的指令示例:
angular.module('dashboard').directive('myDirective', function() {
return {
restrict: 'A',
templateUrl: 'my-dir-template.html',
scope: { //
data: '=',
config: '='
},
replace: true,
link: function(scope, element, attrs) {
scope.someFunc() = { ... },
scope.someFunc1() = { ... },
});
问题:
- $compile(ele)(scope) 之后,元素的 .log() 显示整个 DOM,包括各种 angular.js 指令和其他奇怪的指令 信息。我希望看到我的指令的测试模板 与上面的 templateUrl 混合在一起。
- 范围的 .log() 显示完整的数据和配置对象及其预期值。正如人们所期望的,它还显示了我的指令链接函数内部可用的函数。然而,在我的测试 block 内,就好像作用域对象被清空了......我无法访问我的指令的任何函数(它们都返回未定义)。
- 我可以通过 ele.find("#my-btn").eq(0) 捕获指令 html 的一些元素,但所有正常功能都不起作用(.click() 等)。
我做错了什么?编译过程有问题吗?我的测试结构是否错误?我应该尝试删除链接功能并将其替换为 Controller 吗?我的瞄准镜没有对齐,而且我已经连续两天在这方面失败了……有点烦人。
<小时/>经过仔细检查...看起来我可以在 $compile(ele)(scope)
之前 scope.$digest()
,这将正确传播“数据” "和 "config"对象到子范围。但是,我的作用域将失去对指令链接中定义的函数的访问权限。
最佳答案
您应该在$compile(ele)(scope)
之后调用scope.$digest()
。摘要是进行指令编译所必需的。您的指令具有隔离的范围,这就是您无法访问它的功能的原因。要获得它们,您应该尝试以下操作:
var elScope = element.isolateScope();
在这里你会得到你的 elScope.someFunc();
检查单元测试指令的示例:
http://best-web-creation.com/articles/view/id/angular-js-unit-test-directive?lang=en
关于unit-testing - 指令内的单元测试 Angular 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19306383/