测试角度指令时业力“意外请求"，即使使用 ng-html2js [英] Karma 'Unexpected Request' when testing angular directive, even with ng-html2js

问题描述

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

After spending the last day trying to make this work, I've found that I've circled back around to the same error I was having at the beginning:

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

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

I'm using Karma and Jasmine to test directives in Angular. I've looked through similar questions on StackOverflow, but find that everything that has been tried in the other examples is to no avail.

代码结构

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

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

Karma 配置

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

Have shortened a couple of files to stick to just where the issue is. In calling beforeEach(module('dir-templates')), it should be loading all of the matched .html files into the $templateCache and preventing the GET request that is throwing the error.

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

Any help would be appreciated as it's really been driving me nuts. Please comment if you have any additional questions.

推荐答案

因此，对于似乎是两行代码的修复，这是一个令人头疼的问题.在 Chrome(而不是 PhantomJS)中打开 Karma 并查看源文件后，我注意到当 ng-html2js 将指令附加到 $templateCache 时，它​​使用了整个路径，而不是指令定义中提供的路径.

So, a painstaking headache for what seems to be a two line fix. After opening Karma in Chrome (instead of PhantomJS) and looking at the source files, I noticed that when ng-html2js attaches the directive to the $templateCache it uses the entire path, not the one provided in the directive definition.

简而言之，'src/modules/test/test-directive.html.js' !== 'test-directive.html.js'.

为了实现这一点，将 karma.conf.js 文件 ngHtml2JsProcessor 修改为:

To achieve this, modify the karma.conf.js file ngHtml2JsProcessor to read like:

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

指令声明的 templateUrl 如下所示:

And the directive declaration's templateUrl to look like:

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

这篇关于测试角度指令时业力“意外请求"，即使使用 ng-html2js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！