首页 文章

Karma 'Unexpected Request'测试角度指令时，即使使用ng-html2js

提问于
浏览 次
25

在最后一天尝试完成这项工作之后，我发现我已经绕回到我在开始时遇到的同样错误：

Error: Unexpected request: GET test-directive.html

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

代码结构

测试应用程序
-src
--bower
--lib
--js
--modules
--- TESTDIR
---- test.js
----测试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();
            };
        }
    };
}]);

测试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请求 .

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

angularjs unit-testing angularjs-directive karma-runner

3 回答

  • 0

    所以，这似乎是一个两线修复的痛苦头痛 . 在Chrome中打开Karma（而不是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'
},

    并且指令声明的templateUrl看起来像：

    templateUrl: 'modules/test/test-directive.html'
    回复于
  • 29

    要添加关于确保匹配的模板名称与前缀匹配的注释（没有前导斜杠等），另外要检查的是另一种情况 .

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

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

    区分大小写对于指令的templateurl的实际（非测试）使用不是问题（GET请求显然不区分大小写，并且将根据初始GET请求的任何内容生成模板缓存键，即 . 你的指令） .

    回复于
  • 0

    收到此错误时的一些调试提示：

    当Karma chrome启动程序打开浏览器时，搜索抛出错误的模板，在我的情况下这是 student-survey.html ，您将看到 student-survey.html.js 这是放置在角度模板缓存中的模板 . 检查html.js文件，您将看到缓存ID： $templateCache.put('/app/views/student-survey.html',....

    您必须确保缓存ID，在这种情况下 app/views/student-survey.html 将匹配您的应用程序中引用的内容，在我的情况下，缓存ID缺少尾随'/'，我设法通过在 ngHtml2JsPreprocessor 部分的 prependPrefix 部分放置 / 来修复在我的 karma.conf.js ：

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

    回复于

相关问题