Angular.js UNITEST使用html2js外部模板的指令 - 加载失败模板 [英] Angular.js unitest a Directive with external template using html2js - Fail to load templates
问题描述
我想测试它使用外部模板的指令。我尝试了所有没有运气以下解决方案：
I am trying to test a Directive which uses external template. I tried all the following solutions with no luck:
-
<一个href=\"http://stackoverflow.com/questions/19360083/angularjs-karma-ng-html2js-failed-to-instantiate-module-html\">ng-directive-testing
<一个href=\"http://stackoverflow.com/questions/17223850/how-to-test-directives-that-use-templateurl-and-controllers\">How测试使用templateUrl和控制器指令？
<一个href=\"http://stackoverflow.com/questions/19360083/angularjs-karma-ng-html2js-failed-to-instantiate-module-html\">AngularJS + +噶吴-html2js =＆GT;无法实例化模块... HTML
我创建了一个测试指令（一个简单的div），并使用内联模板和外部templateUrl进行了测试。内联解决方案的工作，而外部不：
I created a test directive (a simple div) and tested it using an inline 'template' and external 'templateUrl'. The inline solution works while the external doesn't:
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
});
};
我不断收到以下错误：
I keep getting the following error:
Failed to instantiate module /staticfiles/adunit/html/directives/actionButtonTemplate.html due to:
Error: [$injector:nomod]
任何帮助将AP preciated！
Any help will be appreciated!
修改：@MK萨菲的回答解决了我的问题。我错过以下内容：
EDIT: @MK Safi's answer solved my problem. I was missing the following:
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'));
这是常规的前pression指向的指令的templateUrl相同的路径很重要，因为html2js将使用此路径缓存的模板（见的 html2js 有关的更多详细信息）
推荐答案
我在我的测试中正确地使用这种设置，和您的设置看起来正确，除了几件事情。
I have this setup correctly in my tests and your setup looks right, except for a few things.
请在以下更改噶配置文件：
Make the following changes to your Karma config file:
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 包含在上面你噶配置中指定的模板模块：模块（'模板'）
Then in your test's beforeEach include the Templates module that you specified in your Karma config above: module('Templates')
beforeEach(function() {
module('Templates')
})
这篇关于Angular.js UNITEST使用html2js外部模板的指令 - 加载失败模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
