测试角度指令时的业力“意外请求”，即使使用 ng-html2js

Question

在花了最后一天尝试完成这项工作后，我发现我又回到了我一开始遇到的同样错误：

错误：意外请求：GET test-directive.html

我正在使用 Karma 和 Jasmine 来测试 Angular 中的指令。我在 StackOverflow 上查看了类似的问题，但发现在其他示例中尝试的所有方法都无济于事。

代码结构

测试应用
-src
--凉亭
--lib
--js
--模块
---testDir
----test.js
----test-directive.html
----测试
-----test.spec.js
-测试
--配置
---karma.conf.js
--e2e

业力配置

'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 请求。

任何帮助都将不胜感激，因为它真的让我发疯了。如果您有任何其他问题，请发表评论。

Answer 1

因此，对于似乎是两行修复的问题，真是令人头疼。在 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'

Answer 2

要添加到 cmets 以确保匹配的模板名称与前缀匹配（没有前导斜杠等），要检查的另一件事是大小写。

模板缓存键区分大小写，因此请确保您的指令使用正确的大小写引用 html 文件。 ngHtml2JsPreprocessor 生成的模板缓存键使用文件系统上实际文件名和目录名的大小写。

因此，如果您的文件名为 Test-Directive.html 或您的文件夹名为“Modules”但您的指令引用“modules/test-directive.html”，它将无法从缓存中解析。

在实际（非测试）使用指令的 templateurl 时区分大小写不是问题（GET 请求显然不区分大小写，模板缓存键将根据初始 GET 请求的任何内容生成，即无论在您的指令中指定）。