噶单元测试Angular JS指令与externalUrl

我想测试一个Angular指令有一个外部模板，但不能得到这个工作。这是我第一次尝试使用Karma。我用Google搜索的解决方案，并试图将karma.conf.js文件的各种变化，但仍不断收到这样的：噶单元测试Angular JS指令与externalUrl

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"); 
    }); 

});

所以我有一个单元测试文件夹（VS 2013项目）平行于app文件夹。 karma.conf.js中“files”下的路径是正确的 - 所有“非templateUrl”测试都能正常工作。

帮助会很好，而我还剩下一些头发！

来源

2014-11-24 Lars335

我认为你可以使用注入服务在你的测试中注入指令，然后从那里获取templateUrl。我会试着写一个例子。 – 2014-11-24 18:54:41

我不确定你想测试什么，但是你试图使用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 
    }); 
    }); 
});

来源

2014-11-24 19:14:32

请查阅这篇关于使用外部HTML模板测试指令的文章：http：//www.bluesphereinc.com/blog/unit-testing-angularjs-directives（只是我已经结束的许多文章/文章之一，试图得到这个加工）。 – Lars335 2014-11-24 19:31:05

我得到这个工作，感谢这篇文章，我只是碰到：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

通过上述，它现在的作品，因为它应该！

来源

2014-11-24 19:48:46 Lars335

噶单元测试Angular JS指令与externalUrl

回答

相关问题