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

Question

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

这是组件模板：

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

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

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

Answer 1

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

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

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

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

如果有更多代码，我可能会给出一个更详细的编码示例，但这应该会引导你走上正确的道路。