Angular.js使用html2js用外部模板测试指令-加载模板失败

Question

我正在尝试测试一个使用外部模板的指令。我尝试了以下所有解决方案，但没有成功：

• ng指令测试

• 如何测试使用templateUrl和控制器的指令？

• AngularJS+Karma+Ng-html2js=>未能实例化模块。。。html

我创建了一个测试指令(一个简单的div)，并使用内联"template"和外部"templateUrl"对其进行了测试。内联解决方案有效，而外部解决方案无效：

angular.module('AdUnit').directive('actionButton',function($location){
return{
scope:{
actionName: '@'
},
restrict: 'E',
//template: "<div ng-click='click()'>action button</div>",
templateUrl: '/staticfiles/adunit/html/directives/actionButtonTemplate.html',
controller: ['$scope', function($scope){
$scope.click = function(){
$scope.$emit('ACTION_CLICK', $scope.actionName);
}
}]
}
});

describe("Unit: Testing action button directive", function() {
var elm, scope, linkFn;
beforeEach(
module('AdUnit')
);
beforeEach(module('/staticfiles/adunit/html/directives/actionButtonTemplate.html'));
beforeEach(inject(function($rootScope, $compile) {
elm = angular.element('<action-button action-name="post-action-0"></action-button>');
scope = $rootScope;
linkFn = $compile(elm);
linkFn(scope);
scope.$digest(); // have to digest to bring html from templateCache
console.log('post compile',elm.html());// <== the html here still have {{}}
}));
it('should show a thumb',function() {
console.log('post link',elm.html());// <== the html is bound
expect(elm.text()).toBe("action button");
});
});

我的因果报应配置文件：

module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',

// frameworks to use
frameworks: ['jasmine'],

// list of files / patterns to load in the browser
files: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',
'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js',
'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js',
'http://code.angularjs.org/1.0.6/angular-mocks.js',
'../html/*.html',
'../html/directives/*.html',
'../js/adUnit.js',
'../js/controllers/*.js',
'../js/directives/*.js',
'../js/services/*.js',
'../*.js',
'../**.*.js',
'**/*.tests.js'
],
preprocessors : {
'../html/**/*.html': ['ng-html2js']
},
/* ngHtml2JsPreprocessor: {
'AdUnit': '/staticfiles/adunit/html/directives/actionButtonTemplate.html'
*//*moduleName: '/staticfiles/adunit/html/directives/internalPlayerTemplate.html'*//*
},*/
// list of files to exclude
exclude: [
],

// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress'],

// web server port
port: 9876,

// enable / disable colors in the output (reporters and logs)
colors: true,

// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: ['Chrome'],

// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};

我一直得到以下错误：

Failed to instantiate module /staticfiles/adunit/html/directives/actionButtonTemplate.html due to:
Error: [$injector:nomod]

任何帮助都将不胜感激！

编辑：@MK Safi的回答解决了我的问题。我错过了以下内容：

ngHtml2JsPreprocessor: {
'moduleName': 'Templates',
// Function that transforms the path to look exactly like
// you have it in templateUrl in your Angular code
//
// Mine looks like this
cacheIdFromPath: function(filepath) {
return filepath.match(//staticfiles/adunit/html/directives/.*.html/);
}
},

每次测试前：

beforeEach(module('Templates'));

正则表达式指向与指令的"templateUrl"相同的路径是很重要的，因为html2js将使用该路径缓存这些模板(有关详细信息，请参阅html2js)

Answer 1

我在测试中正确地进行了此设置，除了一些事情之外，您的设置看起来是正确的。

对Karma配置文件进行以下更改：

ngHtml2JsPreprocessor = {
'moduleName': 'Templates',
// Function that transforms the path to look exactly like 
// you have it in templateUrl in your Angular code
//
// Mine looks like this
cacheIdFromPath: function(filepath) {
return filepath.match(/views/.*/)[0]
}
}

然后在你的测试的beforeEach中包括你在上面的Karma配置中指定的Templates模块：module('Templates')

beforeEach(function() {
module('Templates')
})