0

Jasmine と Karma をテスト ランナーとして使用して、AngularJS のディレクティブの単体テストを作成しています。これを行っているとき、これを設定する最善の方法に従っているかどうか疑問に思っており、誰かが私を助けてくれることを望んでいました.

ディレクティブが templateUrl を使用してテンプレートを使用する場合、実際のテンプレートをインポートするのが最善でしょうか?これは少しトリッキーであることが証明されています。単体テストの場合、単体テストのポイントを混乱させる追加のリソースを引き込むことを避けるため、モックを作成することが最良の選択肢になるように思えます。

また、個々の DOM 要素内での検索に問題があり、element.text() を使用して DOM にバインドされたコンテンツを検索しています。私が見た多くの例では、このメソッドを使用してコンテンツを検索していますが、 getElementById() などのメソッドを使用して DOM の一部を分離し、小さなセクションに基づいてアサーションを作成する方法があるかどうか疑問に思っていました.時間。

テンプレートとして次の要素があるとします。

    <div>
    <div id = "one">data1</div>
    <div id = "two">data2</div>
    </div>

そして、それを angular.element にコンパイルします。element.getElementById("one").innerHTML のようなことをしても何もしません。element.text("data1") は値を見つけますが、あまり具体的ではありません。

ありがとう

4

1 に答える 1

2

問題は、ディレクティブがユーザー、DOM、およびスコープを結合することを意図しているということです。すべてのスコープ処理は、コントローラー内で行われます (おそらく、controller:プロパティを介してディレクティブにバインドされます)。

したがって、ディレクティブ部分に触れることなく、コントローラー用に単体テストを分離する必要があります。次に、ディレクティブをテストします。主に DOM の処理に関するものであるため、模擬テンプレートではなく、実際のテンプレートをテストすることをお勧めします。

要素を取得するには、必要に応じてfind()メソッドを使用できます。jQuery をまったく使用しない場合は、(AngularJs 依存関係の前に) 単体テストでそれをロードしてelement.find('#one')、たとえば を使用できます。すべての AngularJs要素は拡張された jQuery 要素です。プロジェクトに jQuery がない場合、Angular は jQLite を使用し、セレクターを実装しません。

また、こちらもご覧ください。この回答でディレクティブをテストする方法について詳しく説明します。

于 2013-07-15T18:03:11.443 に答える