javascript - Karma 使用 externalUrl 单元测试 Angular JS 指令

Question

我正在尝试测试具有外部模板的 Angular 指令，但无法使其正常工作。这是我第一次尝试使用 Karma。我用谷歌搜索了一个解决方案，并尝试对 karma.conf.js 文件进行各种更改，但仍然不断得到这个:

Error: [$injector:modulerr] Failed to instantiate module app/inventory/itemDetails.html due to:
Error: [$injector:nomod] Module 'app/inventory/itemDetails.html' is not available! You     either misspelled the module name or forgot to load it. 

文件夹结构:

app
  inventory
    itemDetails.html
    itemDetailsDirective.js  (templateUrl: "app/inventory/itemDetails.html")


UnitTest
  karma.conf.js
    specs
      inventorySpec.js

karma .conf.js

  // list of files / patterns to load in the browser
files: [
  '../scripts/jquery.min.js',
  'scripts/angular.js',
  'scripts/angular-mocks.js',
  '../app/*.js',
  '../app/**/*.js',
  '../app/inventory/itemDetails.html',
  'specs/*.js'
  ],


preprocessors: {
    '../app/inventory/itemDetails.html':['ng-html2js'] // Is this supposed to be the path relative to the karma.conf.js file?
  },

ngHtml2JsPreprocessor: {
    stripPrefix: '../',
  },

itemDetailsDirective.js

templateUrl: "app/inventory/itemDetails.html",

inventorySpec.js(大多数内容出于调试目的被注释掉)

describe("itemDetailsDirective", function () {
    var element, $scope;

    beforeEach(module("app/inventory/itemDetails.html"));

    beforeEach(inject(function ($compile, $rootScope) {
        console.log("itemDetailsDirective");
        //element = angular.element('<item-details></item-details>');
        //$scope = $rootScope.$new();
        //$compile(element)($scope);
        //$scope.$digest();
    }));

    it('should display', function () {
    //    var isolatedScope = element.isolateScope();
    //    //expect(isolatedScope.condition).toEqual("Fair");
    });

});

所以我有一个与 app 文件夹平行的 UnitTest 文件夹(VS 2013 项目)。 karma.conf.js 中"file"下的路径是正确的——所有“非 templateUrl”测试都可以正常工作。

帮助会很好，虽然我还有一些头发!

Answer 1

多亏了我刚刚看到的这篇文章，我才开始工作:http://willemmulder.net/post/63827986070/unit-testing-angular-modules-and-directives-with

关键是路径是相对于磁盘根目录的!

为了说明，我更改了 karma.conf.js 文件以使用 cahceIdFromPath:

ngHtml2JsPreprocessor: {
    cacheIdFromPath : function(filepath) {
        console.log("karma, cacheIdFromPath " + filepath);
        var templateFile = filepath.substr(filepath.indexOf("/app/") + 1 );
        console.log("karma, templateFile: " + templateFile);
    return templateFile;
  },
},

输出:

karma, cacheIdFromPath C:/Dev/BcCom/app/inventory/itemDetails.html
karma, templateFile: app/inventory/itemDetails.html

有了上面的内容，它现在可以正常工作了!