web-dev-qa-db-ja.com

angularディレクティブをテストするときのng-html2jsを使用した場合でも、Karmaの「予期しないリクエスト」

この仕事をするために最後の日を過ごした後、私は最初に持っていたのと同じエラーに戻って回ったことに気づきました：

エラー：予期しないリクエスト：GET test-directive.html

KarmaとJasmineを使用して、Angularでディレクティブをテストしています。 StackOverflowで同様の質問を調べましたが、他の例で試したものはすべて役に立たないことがわかりました。

コード構造

テストアプリ
-src
-バウアー
-lib
-js
-モジュール
--- testDir
---- test.js
---- test-directive.html
- - テスト
----- test.spec.js
-テスト
-config
--- karma.conf.js
-e2e

Karma Config

_'use strict';
module.exports = function(config){
    config.set({
    basePath: '../../',
    frameworks: ['jasmine'],
    files: [
        // Angular
        'src/bower/angular/angular.js',
        // Mocks
        'src/bower/angular-mocks/angular-mocks.js',
        // Libraries
        'src/lib/**/*.js',
        // App
        'src/js/*.js',
        'src/modules/*/*.js',
        // Tests
        'src/modules/**/test/*spec.js',
        // Templates
        'src/modules/**/*.html'
    ],
    autoWatch: false,
    singleRun: true,
    reporters: ['progress'],
    browsers: ['PhantomJS'],

    preprocessors: {
        'src/modules/**/*.html': 'ng-html2js'
    },
    ngHtml2JsPreprocessor: {
        moduleName: 'dir-templates'
    },
    plugins: [
        'karma-jasmine',
        'karma-ng-html2js-preprocessor',
        'karma-phantomjs-launcher',
        'karma-chrome-launcher',
        'karma-junit-reporter'
    ]
    });
};
_

test.js

_'use strict';
angular.module('modules.test', []).
directive('testDirective', [function() {
    return {
        restrict: 'E',
        templateUrl: 'test-directive.html',
        link: function($scope, $elem, $attrs) {
            $scope.someFn = function() {
                angular.noop();
            };
        }
    };
}]);
_

test-direct.html

_<span>Hello World</span>
_

test.spec.js

_'use strict';
describe('test module', function() {
    beforeEach(module('modules.test'));
    /* -- DIRECTIVES------------------ */
    describe('directives', function() {
        var $compile, $scope, Elm;
        beforeEach(module('dir-templates');
        beforeEach(inject(function($compile, $rootScope) {
            $scope = $rootScope.$new();
            Elm = angular.element('<test-directive></test-directive>');
            $compile(Elm)($scope);
            $scope.$digest();
        }));
        it('should have one span tag', function(){
            //Jasmine test here to check for one span tag.
        });
    });
});
_

問題がどこにあるかに固執するために、いくつかのファイルを短縮しました。 beforeEach(module('dir-templates'))を呼び出す場合、一致したすべての.htmlファイルを$ templateCacheにロードし、エラーをスローしているGETリクエストを防止する必要があります。

それは本当に私を狂わせているので、どんな助けもいただければ幸いです。他にご不明な点がございましたら、コメントしてください。

angularjsunit-testingangularjs-directivekarma-runner
25
dmaloney.calu

したがって、2行の修正と思われるものに対する骨の折れる頭痛の種です。 Chrome（PhantomJSの代わりに）でKarmaを開き、ソースファイルを確認した後、ng-html2jsがディレクティブを$ templateCacheにアタッチすると、提供されたパスではなく、パス全体が使用されることに気付きました。ディレクティブ定義内。

要するに、 'src/modules/test/test-directive.html.js' !== 'test-directive.html.js'。

これを実現するには、karma.conf.jsファイルngHtml2JsProcessorを次のように変更します。

ngHtml2JsPreprocessor: {
    stripPrefix: 'src/',
    moduleName: 'dir-templates'
},

そして、ディレクティブ宣言のtemplateUrlは次のようになります。

templateUrl: 'modules/test/test-directive.html'
29
dmaloney.calu

一致するテンプレート名がプレフィックスと一致すること（先頭にスラッシュがないなど）を確認することに関するコメントに追加するために、もう1つ確認する必要があるのは大文字小文字です。

テンプレートキャッシュキーでは大文字と小文字が区別されるため、ディレクティブが適切な大文字小文字を使用してHTMLファイルを参照していることを確認してください。 ngHtml2JsPreprocessorが生成するテンプレートキャッシュキーは、ファイルシステム上の実際のファイル名とディレクトリ名の大文字と小文字を使用します。

したがって、ファイルの名前がTest-Directive.htmlであるか、フォルダーの名前が「Modules」であるが、ディレクティブが「modules/test-directive.html」を参照している場合、キャッシュから解決されません。

大文字と小文字の区別は、ディレクティブのtemplateurlの実際の（テスト以外の）使用法では問題になりません（GETリクエストは明らかに大文字と小文字を区別せず、テンプレートキャッシュキーは最初のGETリクエストが何であったかに基づいて生成されます。あなたの指示）。

0
user2842949