typescript - Angularディレクティブが要素に適用されたかどうかをテストする方法

私のアプリには、シンプルなクリックイベントと stopPropagation ディレクティブが適用されたボタンがあります。

こちらがコンポーネントのテンプレートです:

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

このディレクティブは単に要素上の任意のイベントをキャッチし、任意のイベントで$event.stopPropagation()をトリガーします。

ディレクティブは自分自身のテストでテストされます。しかし、コンポーネント内でそのディレクティブが実際に適用されているかどうかをどのようにテストしますか？

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

もっとコードがあれば、もっと詳しいコーディングの例を示せるかもしれませんが、これでもあなたを正しい方向に導くはずです。