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

は、より多くのコードで、私はおそらく、より複雑なコーディング例を与えることができるが、これは正しい軌道に乗ってあなたを導くべきです。