如何測試一個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指令應用於元素

回答

相關問題