![](/img/trans.png)
[英]Unit testing of Angular directives with templateUrl and WITHOUT Karma
[英]karma directives templateUrl
经过几天的研究并尝试了许多示例,我无法获得带有templateUrl的指令以在业力测试中运行(该指令的行为符合我在常规应用程序中的预期)。
这是我所拥有的:
karma.conf.js :
...
// list of files / patterns to load in the browser
files: [
'js/vendor/angular/angular.min.js',
'js/vendor/angular/angular-mocks.js',
'js/common/module.js',
'js/common/*Service.js',
'js/common/*Factory.js',
'moduleToTest/js/module.js',
'moduleToTest/js/controller.js',
'moduleToTest/js/directive.js',
'moduleToTest/index.html',
'test/*tests.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
// karma-ng-html2js-preprocessor for templates in directives
'moduleToTest/index.html': 'ng-html2js'
},
...
业力测试 :
describe('Directive Tests',function(){
var $compile, $rootScope, $scope, element;
//beforeEach(module('./moduleToTest/index.html')); // ???
beforeEach(inject(
['$compile','$rootScope',function($c,$r){
$compile = $c;
$rootScope = $r;
$scope = $r.$new();
element = angular.element('<module-to-test-dir></module-to-test-dir>');
$compile(element)($scope);
//$r.$digest(); // Load the template ???
}]
));
it('should have N inputs',function(){
expect(element.html()).not.toBe([]); //element.html()===[] right now
});
});
moduleToTest / js / directive.js
angular.module('ModuleToTest').directive('moduleToTestDir',moduleToTestDir);
function moduleToTestDir(){
return {
restrict: 'E',
controller: 'moduleToTestCtrl',
templateUrl: 'moduleToTest/index.html'
};
};
欢迎任何建议,问题,澄清或答案!
好的,我在回答自己的问题,但是我希望这对下一个尝试学习业力的人有所帮助。
karma.conf.js-错误的文件顺序:
// list of files / patterns to load in the browser
files: [
'js/vendor/angular/angular.min.js',
'js/vendor/angular/angular-mocks.js',
'js/common/module.js',
'js/common/*Service.js',
'js/common/*Factory.js',
'moduleToTest/index.html', // --> Needs to come before .js files <--
'moduleToTest/js/module.js',
'moduleToTest/js/controller.js',
'moduleToTest/js/directive.js',
'test/*tests.js'
],
业力测试 :
describe('module testing', function(){
beforeEach(module('ModuleToTest'));
... // Other component tests on module
describe('Directive Tests',function(){
var $compile, $rootScope, $scope, element;
beforeEach(module('moduleToTest/index.html'));
beforeEach(inject(
['$compile','$rootScope',function($c,$r){
$compile = $c;
$rootScope = $r;
$scope = $r.$new();
element = angular.element('<module-to-test-dir></module-to-test-dir>');
$compile(element)($scope);
$r.$digest(); // Load the template
}]
));
it('should not be empty',function(){
expect(element.html()).not.toBe('');
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.