如何测试角度指令的templateUrl指向的HTML？ [英] How do I test the HTML pointed to by the templateUrl of an angular directive?
问题描述
我有一个指令：
app / controllers / battle.js
angular.module('myModule')
.controller('myController',
['$scope',
function($scope){
$scope.sayHello = function(){console.log('hello');};
}])
.directive('myDirective', function(){
return {
templateUrl: '../views/testView.html'
}
});
该指令的调用如下：
app / views / routeOne.html
<my-directive ng-controller='myController'></my-directive>
指令templateUrl指向一个看起来像这样的文件：
The directive templateUrl points to a file that looks like:
app / views / testView.html
<div id='testView'>Hello</div>
<div id='eggs'>Here are some eggs.</div>
如何使用karma / jasmine进行单元测试以确保testView.html中的div id存在？
How do I unit test with karma/jasmine to ensure that the div id in testView.html exists?
尝试的方法：
-
使用ngHtml2Js 根据此stackoverflow答案。原因失败：不清楚如何访问创建的模块，新创建的模块如何帮助访问/查询testView.html文件中的DOM元素，不清楚在必须指向的4个地方的每个地方使用哪个路径。
Using ngHtml2Js as per this stackoverflow answer. Reason failed: Unclear on how to access the created module, how the newly created module helps access/query the DOM elements in the testView.html file, unclear what path to use in each of the 4 places testView.html must be pointed to.
使用Html2Js 按此博客帖子。原因失败：类似于（1）。
Using Html2Js as per this blogpost. Reason failed: Similar to (1).
按照访问模板/ 01 / unit-test-your-angularjs-views /rel =nofollow noreferrer>这篇文章。原因失败：角度路由器阻止我直接查询文件，虽然我可以直接通过curl或我的浏览器访问它。许多尝试路线失败。可能不仅是角度路由器阻止这种方法工作。
Accessing the template with jquery.ajax as per this article. Reason failed: angular router prevented me from simply querying straight to the file, though I could access it directly via curl or my browser. Failed on many attempted routes. Probably not only angular router preventing this method from working.
根据 rel =nofollow noreferrer>有角度的文档。原因失败：找不到$ compile，或者找不到指令，或者编译指令没有返回任何内容。
Using $compile as per the angular docs. Reason failed: $compile not found, or, directive not found, or, compiling the directive not returning anything.
在互联网上搜索如何测试作为角度指令模板的HTML文件会产生许多不同的方法，我没有成功地完成工作。我很高兴使用上述任何一种方法，但我还没有找到一个指南，可以从整体上把我从头到尾，并覆盖足够的实际回答我的问题。那么：我如何测试我的指令使用的HTML？
Trawling across the internet for how to test an HTML file that's the template for an angular directive yields many different methods, none of which I've managed to make work. I'm happy to use any of the above methods, but I've yet to find a guide that can take me from start to finish in a holistic manner and cover enough of what's happening to actually answer my question. So: how can I test the HTML used by my directive?
推荐答案
我建议解决方案1进行一些更改。
I would suggest solution 1 with some changes.
A指令的微小变化。
angular.module('myModule')
.controller('myController',['$scope',function($scope){
$scope.sayHello = function(){console.log('hello');};
}])
directive('myDirective', function(){
return {
templateUrl: '../views/testView.html',
controller: 'myController'
}
});
在karma.conf.js
In karma.conf.js
plugins: [
// some other plugins as well
'karma-ng-html2js-preprocessor'
],
preprocessors: {
"path/to/templates/**/*.html": ["ng-html2js"]
},
ngHtml2JsPreprocessor: {
// If your build process changes the path to your templates,
// use stripPrefix and prependPrefix to adjust it.
stripPrefix: "app",
prependPrefix: "..",
// the name of the Angular module to create
moduleName: "templates"
},
现在在battel.spec.js //测试文件
Now in battel.spec.js //test file
describe('Directive Tests', function () {
beforeEach(module('templates'));
beforeEach(module('myModule'));
var $compile, $rootScope;
beforeEach(inject(function (_$compile_, _$rootScope_) {
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Some test', function(){
var element = $compile("<my-directive></my-directive>")($rootScope);
$rootScope.$apply();
expect(element.html()).toContain('Here are some eggs');
});
});
这篇关于如何测试角度指令的templateUrl指向的HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
