错误：意外请求：即使在 karma/jasmine 单元测试中使用 html2js 时，也可以获取嵌套指令的视图/部分/*

Question

我正在使用 Karma 和 Jasmine 对我的 angularjs 应用程序进行单元测试。 我有一个指令（比如指令 A）模板，其中正在呈现另一个指令（比如指令 B），尽管它在应用程序中运行良好，但测试用例无法呈现指令 B 的模板。 以下是我得到的错误：-

    Error: Unexpected request: GET views/partials/directiveb.html
Expected GET https://my-sandbox.app.com/123456

下面是指令A的代码：-

angular.module('myApp')
  .directive('directiveA', function (myservices, myOtherServices) {
    return {
        controller: function(){
        /* ... controller function ... */
        },
        templateUrl: '/views/partials/directivea.html',
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
        /* ...link function... */
        }
    };
  });

指令A的模板：-

<div>
    <div class="col-md-12">
        <h4>We <strong>Need</strong></h4>
        <div directive-b some-attribute=="true"></div>
    </div>
    <div directive-b some-attribute=="false"></div>
</div>

指令A的测试用例：-

'use strict';

describe('Directive: directiveA', function () {

    // load the directive's module
    beforeEach(module('myApp'));
    beforeEach(module('template-module'));

    var element, appId, reqResponse, scope, dscope, reqUrl, $httpBackend, $compile;
    beforeEach(inject(function ($rootScope, _$httpBackend_) {
        scope = $rootScope.$new();
        $httpBackend = _$httpBackend_;
        appId = "123456";
        reqUrl = "https://my-sandbox.app.com/" + appId;
        reqResponse = {}
    }));

    it('should Pass', inject(function (_$compile_) {

        $httpBackend.expect('GET', reqUrl).respond(reqResponse);
        $compile = _$compile_;
        element = angular.element('<directive-a/>');
        element = $compile(element)(scope);
        scope.$digest();
        $httpBackend.flush();

        dscope = element.scope();

        expect(dscope.myVar).toBe(true);
    }));

});

Karma 配置文件：-

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// generator-karma 0.8.2

module.exports = function(config) {
  config.set({
    autoWatch: true,
    basePath: '../',
    frameworks: ['jasmine'],
    preprocessors: {
        'app/views/**/*.html': 'html2js'
    },
    ngHtml2JsPreprocessor: {
        stripPrefix: "app",
        moduleName: "template-module"
      },

    // list of files / patterns to load in the browser
    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/angular-strap/dist/angular-strap.min.js',
      'bower_components/angular-strap/dist/angular-strap.tpl.min.js',
      'bower_components/ng-file-upload/angular-file-upload-shim.min.js',
      'bower_components/ng-file-upload/angular-file-upload.js',
      'bower_components/jquery/dist/jquery.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js',
      'app/views/**/*.html'
    ],

    // list of files / patterns to exclude
    exclude: ['test/spec/e2e/*'],

    // web server port
    port: 8080,

    browsers: ['PhantomJS'],

    // Which plugins to enable
    plugins: [
     // 'karma-chrome-launcher',
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO

    // Uncomment the following lines if you are using grunt's server to run the tests
    //proxies: {
    //  '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

注意：我已经将 html2js 用于 $templateCache，但我仍然遇到这个问题。

Answer 1

指令 A 的模板 URL 是 /views/partials/directivea.html。这不会导致执行 HTTP GET，因为模板由预处理器存储在缓存中：

  ngHtml2JsPreprocessor: {
    stripPrefix: "app",
    moduleName: "template-module"
  }

但是对views/partials/directiveb.html 执行了一个GET 请求。请注意与第一个 URL 的区别：它没有前导 /。模板缓存有一个部分的条目，但它在缓存中的 URL 是/views/partials/directiveb.html，而不是views/partials/directiveb.html。

确保始终使用绝对路径或相对路径，并根据您的选择，在预处理器配置中去除 app 前缀或 app/ 前缀。