テンプレートを使用するディレクティブをテストする

Question

templateUrlを使用してテンプレートを読み込むテストディレクティブは、どのようにして単体テストできますか？

$ httpBackendはモックなので、テンプレートもロードされません。 私は

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

のようなものを使用し、それが実際にテンプレートを取得してみましょうできるようにしたいと思いますが、私はこれを正しく行う方法を考え出したていません。

私はユニットテストディレクティブの仕方に関して混乱していると思います。 免責事項：私は経験のテスト、またはジャスミンまたはtestacularを使用している。

何か助けていただければ幸いです。

Answer 1

pkozlowski.opensourceのおかげで正しい方向へ私を導いてくれました！私はそれを解決したか疑問誰のための

：

1. プロジェクトにhttps://npmjs.org/package/grunt-angular-templatesを追加します。
2. すべてのテンプレートを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 /ではなくview /でなくても、テンプレートキャッシュのパスと一致しなくなり、リクエストが発生することはありません。

Answer 2

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

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

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

私はもともとこの技術はVojtaジナことにより、優れたリポジトリによって広められたと信じて：あなたは、テンプレートの準備hereとテンプレートプリロードhereでモジュールを参照して、実際のテストを見ることができますhttps://github.com/vojtajina/ng-directive-testing。