噶'意外的请求“测试角指令时，即使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测试directive.html

我使用的是业力和茉莉花来测试角指令。我已经通过在计算器上类似的问题看去，却发现一直试图在其他例子是无济于事的一切。

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.

的 code结构的

测试，应用结果
-src结果
--bower结果
--lib结果
--js结果
--modules结果
--- TESTDIR结果
---- test.js结果
----测试directive.html结果
----测试结果
----- test.spec.js结果
- 测试结果
--config结果
--- 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

的噶配置的

'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（模块（'DIR-模板'）），应该加载所有匹配的HTML文件进入$ templateCache和preventing 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.

任何帮助将是因为它真的被我发疯AP preciated。如果您有任何其他疑问，请发表评论。

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

推荐答案

所以，一个艰苦的头痛什么似乎是一个两行修复。在Chrome中（而不是PhantomJS）开噶并查看源文件后，我注意到，当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 /模块/测试/测试directive.html.js'！=='测试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屋！