javascript - Angular : How to spy on $element. 开启

Question

我有一个指令在它的 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 函数？

Answer 1

链接功能可以单独测试

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);