"Неожиданный запрос кармы" при тестировании директивы angular, даже с ng-html2js

Проведя последний день, пытаясь сделать эту работу, я обнаружил, что обратился назад к той же ошибке, что и в начале:

Ошибка: Неожиданный запрос: GET test-directive.html

Я использую Karma и Jasmine для проверки директив в Angular. Я просмотрел похожие вопросы в StackOverflow, но обнаружил, что все, что было проверено в других примерах, не имеет смысла.

Структура кода

Test-App
-src
--bower
--lib
--js
--modules
--- testDir
---- test.js
---- Тест-directive.html
---- тест
----- test.spec.js
-test
--config
--- karma.conf.js
--e2e

Карма 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();
            };
        }
    };
}]);

Тест-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, который вызывает ошибку.

Любая помощь будет оценена по достоинству, так как это действительно заводило меня с ума. Прокомментируйте, если у вас есть дополнительные вопросы.

Ответ 1

Итак, кропотливая головная боль для того, что кажется двухстрочным исправлением. После открытия Karma в Chrome (вместо PhantomJS) и просмотра исходных файлов я заметил, что когда ng-html2js присоединяет директиву к $templateCache, он использует весь путь, а не тот, который указан в определении директивы.

Короче говоря, 'src/modules/test/test-directive.html.js' !== 'test-directive.html.js'.

Чтобы достичь этого, измените файл karma.conf.js ngHtml2JsProcessor следующим образом:

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

И шаблон объявления директивы url выглядит следующим образом:

templateUrl: 'modules/test/test-directive.html'

Ответ 2

Чтобы добавить к комментариям о том, что совпадение имени шаблона совпадает с префиксом (не имеет косой черты и т.д.), еще одна вещь для проверки - это случай.

Ключ кеша шаблона чувствителен к регистру, поэтому убедитесь, что ваши директивы ссылаются на файлы html с использованием надлежащего корпуса. Ключи кеша шаблона, которые генерирует ngHtml2JsPreprocessor, используют оболочку фактических имен файлов и имен каталогов в файловой системе.

Итак, если ваш файл называется Test-Directive.html или ваша папка называется "Модули", но ваша директива ссылается на "modules/test-directive.html", она не будет разрешаться из кеша.

Чувствительность к регистру не является проблемой при реальном (не-тестовом) использовании вашей директивы templateurl (запрос GET, очевидно, нечувствителен к регистру, и ключ кеша шаблона будет сгенерирован на основе любого исходного запроса GET, т.е. указан в вашей директиве).

Ответ 3

Некоторые советы по отладке при получении этой ошибки:

Когда пусковая установка Karma chrome открывает браузер, найдите шаблон, который бросает ошибку, в моем случае это было student-survey.html, вы увидите student-survey.html.js, который является шаблоном, размещенным в кеше шаблона angular. Осмотрев файл html.js, вы увидите идентификатор кеша: $templateCache.put('/app/views/student-survey.html',....

Вы должны убедиться, что идентификатор кеша в этом случае app/views/student-survey.html будет соответствовать тому, что упоминается в вашем приложении, в моем случае идентификатор кеша отсутствовал в конце '/', который мне удалось исправить, разместив / в разделе prependPrefix раздела ngHtml2JsPreprocessor в karma.conf.js:

ngHtml2JsPreprocessor: { prependPrefix: '/', moduleName: 'templates' }