角度2 cliのジャスミンプレビューサイト

Question

角度2のCLIでジャスミンテストを行い、angular.ioのテストガイドに従って最初のテストを書くのは初めてです。

私がplunkerのライブサンプルに行くと、すべてのテスト結果がindex.htmlでとてもうまく表示されますが、角度のあるCLIアプリケーションでテストを実行すると、ブラウザはカルマを開いてデバッグボタンをクリックできます。私の次のステップは、開発ツールコンソールのF12をクリックすることです。

私はすべてのテストの結果をコンソールログと一緒に見ることができます。私は非常に明確な概要を示しません。特にすぐに多くのテストを実行します。

私はこれに関するいくつかの情報が不足していると確信していますが、詳細を見つけることができません。

私が見つけたすべてのガイドは、いくつかのテストを実行してコンソールで実行していますが、大きなアプリケーションをテストする必要がある場合、間に他のコンソール情報。

私には何が欠けていますか？

Answer 1

コンポーネントのテストを実行しているとき（たとえば、コンポーネントのテンプレートを作成するテスト）。

ボタンをクリックするか、* ngForディレクティブの要素数を確認することができます。

あなたがで要素を取得することができます：あなたはたとえば、あなたの要素をテストするために要素を使用することができます

let myComponentElement = fixture.nativeElement 

：

ボタン：ボタンの

<button id="my-test-button" (click)="myTestFunction()>ClickMe</button> 

テスト：

it("click on my_test_button should call myTestFunction() ",()=> { 
    spyOn(componentInstance.myTestFunction); 
    let my_test_button = myComponentElement.querySelector("my-test-button") 
    my_test_button.click(); 
    fixture.detectChanges(); 
    expect(componentInstance.myTestFunction).toHaveBeenCall(); 
}) 

最後に、テストに「dubugger」を入れてクロムの「f12」をクリックすることで、テンプレートのテストを実際に見ることができます。例えば

：デバッグ時

it("click on my_test_button should call myTestFunction() ",()=> { 
     spyOn(componentInstance.myTestFunction); 
     let my_test_button = myComponentElement.querySelector("my-test-button") 
     **debugger;** 
     my_test_button.click(); 
     fixture.detectChanges(); 
     expect(componentInstance.myTestFunction).toHaveBeenCall(); 
    }) 

あなたのコンポーネントのテンプレートを参照してくださいshuold。

Good Luck !!!