angularjs – Karma’Unexpected Request’当测试角度指令,即使

发布时间：2020-12-17 08:27:15 所属栏目：安全来源：网络整理

导读：在花了最后一天试图做这项工作后，我发现我回到了同样的错误，我在开头有：错误：意外请求：GET test-directive.html 我使用Karma和Jasmine来测试Angular中的指令。我已经看过类似的问题，在StackOverflow，但发现，在其他示例中尝试过的一切是无济于事。

在花了最后一天试图做这项工作后，我发现我回到了同样的错误，我在开头有：

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

我使用Karma和Jasmine来测试Angular中的指令。我已经看过类似的问题，在StackOverflow，但发现，在其他示例中尝试过的一切是无济于事。

代码结构

测试应用程序
-src
– 电源
–lib
–js
– 模块
— testDir
—- test.js
—- test-directive.html
– – 测试
—– test.spec.js
-测试
–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请求抛出错误。

任何帮助将不胜感激，因为它真的一直驱动我坚果。如果您有任何其他问题，请发表评论。

所以，一个痛苦的头痛，似乎是一个两线修复。在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'

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!