16

Chutzpah の Visual Studio Test Adapter のようなヘッドレス ブラウザを取得して、ディレクティブが .html テンプレート ファイルにアクセスできるようにする方法を知っている人はいますか? Chutzpah は、私のオプションを制限しているように見えるヘッドレス ブラウザに PhantomJS を使用しています。

Chutzpah Test Adapter 2.5 と AngularJS 1.2.0-r.2 を使用しています。

エラーが発生します：

予期しない要求: GET myApp/directives/template.html

これは、Angular が $http サービスを使用してディレクティブのテンプレートにアクセスしようとしたことが原因です。

私はいくつかの異なる回避策を見つけました：

  1. XMLHttpRequest を使用して手動でテンプレートをインポートします。
  2. Grunt などのユーティリティを使用して、テンプレートをディレクティブの JS コードにインライン化します。
  3. $httpBackend.when('GET', 'myApp/directives/template.html').passThrough()- これは単体テストではなく、e2e テストでのみ機能します。
  4. テンプレートをテスト コードに直接挿入します。

これらのオプションのどれも、私を特に満足させません。コンポーネントとしてテストできるように、ディレクティブがそのテンプレートを透過的にロードできるようにしたいと考えています。このシナリオを機能させる方法はありますか?

コード例:

angular.module('myDirective', []).directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'myApp/directives/template.html',
        // Some other options, omitted for brevity.
    };
});

template.html:

<div><div ng-transclude></div></div>

ジャスミンテストの例:

describe('myDirective', function() {
    // Assign $scope using inject(), load module etc.
    // Insert workaround for $httpBackend loading my templateUrl here.
    it('should transclude content', function() {
        var element = $compile("<my-directive>Look Mom, I'm in my directive!</my-directive>")($scope);
        $scope.$digest();

        expect(element.text().trim()).toBe("Look Mom, I'm in my directive!");
    });
}
4

6 に答える 6

2

ディレクティブをテストしようとして、同様の問題が発生しました。https://github.com/vojtajina/ng-directive-testingのパターンを使用して解決策を見つけました 。

ステップ 1: ng-html2js プラグインを使用して、Angular テンプレートを JavaScript にコンパイルします。

ng-html2js では、テスト ディレクトリがアプリ ディレクトリと同じでない場合に役立つと予想される「url」のカスタム操作を実行することもできます。

于 2013-12-11T23:17:03.540 に答える
0

jasmine-jquery を使用して、コンテンツをファイルまたは http から $templateCache にロードできます。変更なしで Chutzpah で動作します。

最初に jasmine-jquery をプロジェクトに追加し、chutzpah.json を追加します。

（私のコードから）

"References" : [
    {"Path" : "vendor/jasmine-jquery-2.1.0.js"}
]

次に、テストで $templateCache を注入し、次のように jasmine.getFixtures() を介して「ライブ」コンテンツをロードします。

beforeEach(inject(function ($templateCache) {
    //Loading template from live develop server
    jasmine.getFixtures().fixturesPath = "http://localhost:47152";
    var templateUrl = "/myApp/directives/template.html";
    $templateCache.put(templateUrl, jasmine.getFixtures()  
        .getFixtureHtml_(templateUrl));
}));

http 経由で読み込み、テストに Chrome を使用する場合は、サーバーに CORS サポートを追加する必要があります。

于 2015-09-03T09:09:12.943 に答える
-1

テンプレートを作成する前に、テンプレートをインジェクターに含めるようにしてください。試してみてください。

beforeEach(module('myApp/directives/template.html');
于 2013-11-21T15:19:50.250 に答える