我有一个指令在它的 link
函数中做这样的事情
angular.module('myApp')
.directive('barFoo', function() {
return {
restrict: 'E',
link: function (scope, element) {
element.on('click', ....);
}
};
});
现在我想在单元测试中验证它是否正确调用了 on
element = angular.element('<bar-foo></bar-foo>');
$compile(element)(scope);
spyOn(element, 'on');
...
expect(element.on).toHaveBeenCalled();
它告诉我 spy 没有被调用。根据我在网上找到的内容,angular/jquery 每次都会在 DOM 元素周围创建一个新的包装器。这意味着我的指令中的 element
与我的规范文件中的元素不同。 element[0]
很可能(未验证)可能是相同的。我还尝试监视 angular.element
var mockEl = { on: angular.noop };
spyOn(angular, 'element').andReturn(mockEl);
spyOn(mockEl, 'on');
但这似乎比它修复的问题更多(例如,我还需要像 isloateScope
这样的函数)。
无论如何,有没有一些简单的方法可以监视指令中使用的元素的 on
函数?
最佳答案
链接功能可以单独测试
element = angular.element('<bar-foo');
spyOn(element, 'on');
BarFooDirective[0].link(scope, element);
expect(element.on).toHaveBeenCalled();
如果它足够简单(远离 attrs、必需的 Controller 、依赖项),否则规范会导致比它能解决的问题更多的问题。
否则可以测试like it is done by the framework :
element = angular.element('<bar-foo');
expect(angular.element._data(element[0]).events.click).toBeDefined();
对于可能在其自身或子指令中定义了多个 click
监听器的真实指令,仅确保监听器存在是不够的。通常您可能希望封装内部函数,但出于测试目的,匿名点击处理程序也可以暴露给作用域:
element = angular.element('<bar-foo');
expect(angular.element._data(element[0]).events.click).toContain(scope.onClick);
关于javascript - Angular : How to spy on $element. 开启,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33738918/