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

在我的应用程序中，我有一个简单的单击事件和一个stopPropagation指令应用它的按钮。如何测试一个Angular指令应用于元素

这里是组件模板：

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

该指令简单地捕捉任何事件的元素上，并在任何情况下触发$event.stopPropagation()。

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

来源

2017-07-17 BlackHoleGalaxy

那么用一个点击动作创建一个标签，看看你的指令是否可以阻止它？ – trichetriche

我会使用一个像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();});

随着更多的代码，我可能会给一个更详尽的编码示例，但这应该引导你在正确的轨道上。

来源

2017-07-17 11:57:55

您认为我应该测试HTML属性是否存在于元素上？ – BlackHoleGalaxy

你可以这样做来仔细检查你的指令是否被调用，而且如果它通过使用Angular的TestBed对你的元素生效，并检查你的fixture的nativeElement并使用querySelector来定位你的特定HTML元素，请参见[ Angular Testing]（https://angular.io/guide/testing#final-setup-and-tests）。如果你想这样做取决于你的项目测试策略。我会说做一次作为一个证明，但不要测试指令使用的每个元素。让我知道，如果我能进一步帮助你。 –

感谢您的建议:) – BlackHoleGalaxy

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

回答

相关问题