业力单元测试 Angular JS 指令与 externalUrl

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 中“files”下的路径是正确的 - 所有“non-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

有了以上内容，它现在可以正常工作了！

Answer 2

我不确定您要测试什么，但您尝试使用 html 作为模块，我认为这是不正确的，您可能必须使用 $httpbackend 来模拟 GET 请求。我做了一个虚拟的例子：

'use strict';
describe('TestMyDirective', function() {
  var $compile, $http, $httpBackend, $rootScope, $scope, template;

  beforeEach(module('myApp'));

  beforeEach(inject(function($injector) {
    $rootScope = $injector.get('$rootScope');
    $compile = $injector.get('$compile');
    // Inject $httpBackend service
    $httpBackend = $injector.get('$httpBackend');
    // Mock request to your html
    $httpBackend.whenGET('my.html').respond("GotIT");
    $scope = $rootScope.$new();
    template = $compile("<my-directive> </my-directive>")($scope);
    $scope.$digest();
  }));

  /*
   *
   * Tests
   *
   */
  describe('Test something', function() {
    it('should test something', function() {
       // You can test that your directive add something on the $scope
    });
  });
});