如何测试Angular指令已应用于元素

Question

在我的应用程序中，我有一个带有简单点击事件的按钮，并在其上应用了stopPropagation指令。

以下是组件模板：

<button (click)="closeElement()" [stopPropagation]>
    Close
</button>

该指令只是捕获元素上的任何事件，并在任何事件上触发$event.stopPropagation()。

该指令本身通过自己的测试进行测试。但是，在组件中，如何实际应用测试指令？

Answer 1

我会使用https://jasmine.github.io/2.0/introduction.html中解释的间谍。通过监视指令的功能，您可以验证在使用＆＃39; toHaveBeenCalled＆＃39;单击按钮时调用它。

it("tracks that the spy was called", function() {

let spy= spyOn(<yourDirective>, 'stopPropagation');

..trigger click event...
expect(stopPropagation).toHaveBeenCalled();});

使用更多代码我可能会提供更精细的编码示例，但这应该会引导您走上正确的轨道。