[英]Trouble unit-testing directives that use templateUrl
I'm having trouble unit-testing directives that make use of templateUrl
. 我在使用templateUrl
单元测试指令时遇到了麻烦。
There's this awesome tutorial about AngularJS testing [1] and it even has a Github repo that goes with it [2] 有关于AngularJS测试的这个很棒的教程[1],它甚至还有一个与之配合的Github回购[2]
So I forked it [3] and made the following changes: 所以我分叉了它[3]并进行了以下更改:
On directives.js
I created two new directives: 在directives.js
我创建了两个新指令:
.directive('helloWorld', function() {
return {
restrict: 'E',
replace: true,
scope:{},
template: '<div>hello world!</div>',
controller: ['$scope', function ($scope) {}]
}
})
.directive('helloWorld2', function() {
return {
restrict: 'E',
replace: true,
scope:{},
templateUrl: 'mytemplate.html',
controller: ['$scope', function ($scope) {}]
}
})
and I changed test/unit/directives/directivesSpecs.js
so that it loads a template into $templateCache and then added two more tests for the new directives: 并且我更改了test/unit/directives/directivesSpecs.js
以便将模板加载到$ templateCache中,然后为新指令添加另外两个测试:
//
// test/unit/directives/directivesSpec.js
//
describe("Unit: Testing Directives", function() {
var $compile, $rootScope, $templateCache;
beforeEach(angular.mock.module('App'));
beforeEach(inject(
['$compile','$rootScope', '$templateCache', function($c, $r, $tc) {
$compile = $c;
$rootScope = $r;
//Added $templateCache and mytemplate
$templateCache = $tc;
$templateCache.put('mytemplate.html', '<div>hello world 2!</div>');
}]
));
//This was already here
it("should display the welcome text properly", function() {
var element = $compile('<div data-app-welcome>User</div>')($rootScope);
expect(element.html()).to.match(/Welcome/i);
});
//Added this test - it passes
it("should render inline templates", function() {
var element = $compile('<hello-world></hello-world>')($rootScope);
expect(element.text()).equal("hello world!");
});
//Added this test - it fails
it("should render cached templates", function() {
var element = $compile('<hello-world2></hello-world2>')($rootScope);
expect(element.text()).equal("hello world 2!");
});
});
The last test fails because Angular won't compile the template like it should. 最后一次测试失败,因为Angular不会像它应该那样编译模板。
$ grunt test:unit
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 35.0.1916 (Linux)]: Connected on socket ChISVr0ZABZ1fusdyv3m
Chrome 35.0.1916 (Linux) Unit: Testing Directives should render cached templates FAILED
expected '' to equal 'hello world 2!'
AssertionError: expected '' to equal 'hello world 2!'
Chrome 35.0.1916 (Linux): Executed 18 of 18 (1 FAILED) (0.441 secs / 0.116 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
I'm pretty sure this was supposed to work. 我很确定这应该有效。 At least, it's very similar with the solution proposed by @SleepyMurth on [4]. 至少,它与@SleepyMurth在[4]提出的解决方案非常相似。
But I feel I reached the limit of understanding what's going wrong with my current knowledge of AngularJS. 但是我觉得我已经达到了解我目前AngularJS知识出了什么问题的极限。
HELP! 救命! :-) :-)
[1] http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html [1] http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html
[2] https://github.com/yearofmoo-articles/AngularJS-Testing-Article/ [2] https://github.com/yearofmoo-articles/AngularJS-Testing-Article/
[3] https://github.com/tonylampada/AngularJS-Testing-Article [3] https://github.com/tonylampada/AngularJS-Testing-Article
[4] Unit Testing AngularJS directive with templateUrl [4] 单元测试带有templateUrl的AngularJS指令
When templateUrl
is specified, templates are fetched using $http
(even for cached templates, which $http
serves from the $templateCache
). 当templateUrl
指定,模板使用被取出$http
(即使是缓存的模板, $http
从供应$templateCache
)。 For that reason, there needs to be a $digest cycle for the $http
's promise to be resolved with the template content and processed by the directive. 出于这个原因, $http
的承诺需要有一个$ digest循环,用模板内容解析并由指令处理。
Since promises get resolved during a $digest cycle (and since we are outside of an "Angular context"), we need to manually invoke $rootScope.$digest()
before evaluating our assertions. 由于promises在$ digest循环期间得到解决(并且因为我们在“Angular context”之外),我们需要在评估断言之前手动调用$rootScope.$digest()
。
Thus, the last test should be modified like this: 因此,最后一次测试应该像这样修改:
it("should render cached templates", function() {
var element = $compile('<hello-world2></hello-world2>')($rootScope);
$rootScope.$digest(); // <-- manually force a $digest cycle
expect(element.text()).toBe(tmplText);
});
See, also, this short demo . 另见这个简短的演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.