噶單元測試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

回答

相關問題