6

templateUrlを使用してテンプレートをロードするディレクティブをユニットテストするにはどうすればよいですか？

$ httpBackendはモックであるため、テンプレートもロードされません。こんなものが使えるようになりたい

$httpBackend.whenGET(/^\/views\//).passThrough();

実際にテンプレートを取得させますが、これを正しく行う方法がわかりません。

テストディレクティブをユニット化する方法に関して、私は何か混乱していると思います。免責事項：私はテストしたり、ジャスミンやテスタキュラーを使用した経験がありません。

どんな助けでも大歓迎です。

4

2 に答える 2

8

テンプレート（によって参照されるtemplateUrl）に依存するディレクティブをテストする最も簡単な方法は、それらのテンプレートを前もって配置すること$templateCacheです。通常、これはビルドプロセスによって行われます。

詳細：各テンプレートマークアップはJavaScriptコードに変換され、に配置されます$templateCache。また、AngularJSモジュールが生成されます（モジュールの名前がテンプレートへのパスになります）。

この手法を適用することで、処理するJavaScriptファイルのみが得られ、HTTP呼び出しをモックする必要はありません。欠点は、追加のビルドステップが必要になることです。

もともとこの手法は、Vojta Jinaによる優れたリポジトリによって普及したと思います：https ：//github.com/vojtajina/ng-directive-testingここでテンプレートの準備を確認でき、テンプレートがプリロードされたモジュールを参照する実際のテストはここで確認できます。

于 2013-03-02T20:19:50.230 に答える
4

私を正しい方向に導いてくれたpkozlowski.opensourceに感謝します！

私がそれをどのように解決したのか疑問に思っている人のために：

  1. https://npmjs.org/package/grunt-angular-templatesをプロジェクトに追加します。
  2. gruntビルドタスクを追加して、すべてのテンプレートをjsファイルにコンパイルします。

このJSファイルはモジュールを登録します（名前はgruntfileで構成できます）。

テンプレートに依存するすべてのテストでは、このモジュールをロードする必要があります。

テスト例：

'use strict';

describe('Component: comments', function() {
  beforeEach(module('studentportalenApp'), module('app.templates'));

  var element;

  it('should render an error message if type is not recognized', inject(function($rootScope, $compile) {
    element = angular.element('<comments></comments>');
    element = $compile(element)($rootScope);
    expect(element.html()).toBe('Comments directive type not recognized.');
  }));
});

app.templatesモジュールで定義されているものとまったく同じURLを使用してビューを取得するように注意してください。つまり、views/ではなく/views /です。そうしないと、テンプレートのキャッシュパスと一致せず、とにかくリクエストが発生します。

于 2013-03-02T21:36:30.563 に答える