AngularJS 业力测试：意外请求：GET.template.html答案

【问题标题】：AngularJS Karma Test: Unexpected request: GET.template.htmlAngularJS 业力测试：意外请求：GET.template.html
【发布时间】：2016-06-17 18:22:01
【问题描述】：

我正在尝试为我的 AngularJS 应用程序设置业力测试，但我总是以某种方式失败。我已按照here 的所有步骤进行操作，但我感觉 ng-html2js 预处理器无法正常工作。我总是收到以下消息：

错误：意外请求：GET js/templates/my-template.template.html

这是我的代码结构

这里是我的测试结构

我要测试的指令是：

angular
    .module('myapp')
    .directive('myDirective', ['myService', function (myService) {
        return {
            restrict: 'E',
            templateUrl: 'js/templates/my-template.template.html',
            scope: {},
            link: function (scope) {
            }
        }
    }]);

我的 karma conf 看起来像这样：

module.exports = function (config) {
config.set({

    basePath: '../../',

    frameworks: ['jasmine'],


    files: [
        //some omitted like angular and so on...
        'main/resources/static/**/*.js',
        '**/*.html',
        'test/js/**/*Spec.js'
    ],

    preprocessors: {
        '**/*.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
        moduleName: 'templates'
    }
... (more default stuff omitted)
}

和 mySpec.js 这样的：

describe('directive', function () {
    'use strict';

    beforeEach(module('myapp'));
    beforeEach(module('templates'));

    var elm,
        scope;

    beforeEach(inject(function ($rootScope, $compile) {
        elm = angular.element(
        '<my-directive>' +
        '</my-directive>');

        scope = $rootScope.$new();

        $compile(elm)(scope);
        scope.$digest();
    }));

    describe('Does something', function () {
        console.log('test');
        expect(true).toBe(true);
    });
});

【问题讨论】：

标签： angularjs jasmine karma-runner karma-jasmine ng-html2js

【解决方案1】：

在你的 beforeEach 函数中为你的指令的 html 模板添加一个模拟模板。使用$templateCache：

describe('directive', function () {
    'use strict';

    beforeEach(module('myapp'));
    beforeEach(module('templates'));

    var elm,
        scope;

    beforeEach(inject(function ($rootScope, $compile, $templateCache) {


        $templateCache.put('js/templates/my-template.template.html','HTML_OF_YOUR_DIRECTIVE');

        elm = angular.element(
        '<my-directive>' +
        '</my-directive>');

        scope = $rootScope.$new();

        $compile(elm)(scope);
        scope.$digest();
    }));

    describe('Does something', function () {
        console.log('test');
        expect(true).toBe(true);
    });
});

【讨论】：

难道 ng-html2js 不应该在那里以避免这样做吗？我的意思是，我的指令 html 可能相当大，我不想把它全部粘贴到那里
ng-html2js生成的文件在哪个文件夹？
这就是我一直在问自己的问题。我怎样才能找到它？
顺便说一句，如果我按照您所说的进行操作，它会起作用。但正如我所说，我希望 ng-html2js 通过 karma conf 为我做到这一点
我以为你的项目中已经生成了template.html.js。您应该将此文件添加到 files 属性中的 karma.conf.js。

【解决方案2】：

我想我明白了。解决方案在 karma.conf.js 中：

ngHtml2JsPreprocessor: {
    cacheIdFromPath: function (filepath) {
        //The suggested filepath.strip would through an error
        var cacheId = filepath.replace('main/resources/static/', '');
        return cacheId;
    },
    moduleName: 'templates'
}

【讨论】：