使用externalUrl进行Karma单元测试Angular JS指令

Question

我正在尝试测试具有外部模板的Angular指令，但无法使其正常工作。 这是我第一次尝试使用Karma。 我已经用Google搜索了一个解决方案，并尝试了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",

库存规范.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中“文件”下的路径正确-所有“ non-templateUrl”测试都可以正常工作。

帮助还可以，尽管我还剩下一些头发！

Answer 1

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

关键是路径相对于DISK根！

为了说明，我将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
    });
  });
});