角度ディレクティブのtemplateUrlが指すHTMLをテストするにはどうすればよいですか？

Question

私が持っているディレクティブ：

アプリ/コントローラ/ battle.js

angular.module('myModule') 
    .controller('myController', 
    ['$scope', 
    function($scope){ 
    $scope.sayHello = function(){console.log('hello');}; 
    }]) 
    .directive('myDirective', function(){ 
    return { 
     templateUrl: '../views/testView.html' 
    } 
    }); 

次のようにディレクティブが呼び出されること：

アプリ/ビュー/ routeOne.html

を

<my-directive ng-controller='myController'></my-directive> 

ディレクティブtemplateUrlがファイルを指しています

アプリ/ビュー/ testView.html

<div id='testView'>Hello</div> 
<div id='eggs'>Here are some eggs.</div> 

testView.html内のdiv idが存在することを確認するために、カルマ/ジャスミンとIユニット・テストを行う方法：それはのように見えますか？

方法が試み：

1. this stackoverflow answerごとにngHtml2Jsを使用します。原因が不明：作成したモジュールにアクセスする方法が不明確で、新しく作成されたモジュールがtestView.htmlファイルのDOM要素へのアクセス/クエリにどのように役立つか、testView.htmlを指す必要がある4つの場所のそれぞれでどのパスを使用するのかが不明です。 （1）と同様：失敗this blogpost.理由の通りHtml2Jsを使用

2. 。

3. this articleとしてjquery.ajaxでテンプレートにアクセスする。理由は失敗しました：角度のあるルータは、私がカールやブラウザを介して直接アクセスできるにもかかわらず、ファイルに直接問い合わせることができませんでした。多くの試みられたルートで失敗しました。おそらく、この方法が動作しないようにする角度ルータだけではありません。

4. the angular docsとして$を使用してください。原因が失敗しました：$コンパイルが見つかりません。または、ディレクティブが見つからないか、何も返さないディレクティブをコンパイルします。角度指令利回り多くの異なる方法、私は仕事をするために管理しているのどれものためのテンプレートのHTMLファイルをテストする方法については、インターネット上でトロール

。私は上記の方法のいずれかを使用して満足していますが、私は全体的な方法で最初から最後まで私を連れて来て、実際に私の質問に答えるために起こっていることを十分にカバーするガイドを見つけることはまだありません。それでは、私のディレクティブで使用されているHTMLをどのようにテストできますか？

Answer 1

私はいくつかの変更を加えて解決策1を提案します。

小さな指示の変更。 karma.conf.js battel.specで今

plugins: [ 
     // some other plugins as well 
     'karma-ng-html2js-preprocessor' 
    ], 
preprocessors: { 
    "path/to/templates/**/*.html": ["ng-html2js"] 
}, 

ngHtml2JsPreprocessor: { 
    // If your build process changes the path to your templates, 
    // use stripPrefix and prependPrefix to adjust it. 
    stripPrefix: "app", 
    prependPrefix: "..", 
    // the name of the Angular module to create 
    moduleName: "templates" 
}, 

で

angular.module('myModule') 
    .controller('myController',['$scope',function($scope){ 
     $scope.sayHello = function(){console.log('hello');}; 
    }]) 
    directive('myDirective', function(){ 
     return { 
     templateUrl: '../views/testView.html', 
     controller: 'myController' 
     } 
    }); 

。js //テストファイル

describe('Directive Tests', function() { 
    beforeEach(module('templates')); 
    beforeEach(module('myModule')); 

    var $compile, $rootScope; 

    beforeEach(inject(function (_$compile_, _$rootScope_) { 
     // The injector unwraps the underscores (_) from around the parameter names when matching 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
    })); 
    it('Some test', function(){ 
     var element = $compile("<my-directive></my-directive>")($rootScope); 
     $rootScope.$apply(); 
     expect(element.html()).toContain('Here are some eggs'); 
    }); 
});