Page 287 - AngularJS权威教程

19.14 测试一个应用 267

令放到一个待创建的元素中（在某种意义上与Angular第一次放置指令类似）。 19

describe('Unit: Directives', function() {
var ele, scope;
// 加载应用 20
beforeEach(module('myApp'));
// 我们的测试代码放在这里
}); 21
现在，为了把指令加载到视图中，我们需要编译HTML内容，并且实施绑定，在生产中Angular
会自动帮我们做这些。 22

describe('Unit: Directives', function() {
var ele, scope; 23
//加载应用
beforeEach(module('myApp'));
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope; 24
ele = angular.element(
'<div notification message="note"></div>'
); 25
$compile(ele)(scope);
scope.$apply();
}));
26
// 我们的测试代码放在这里
});
27
注意，我们在创建一个元素，这个元素调用了指令，就像我们直接把它放在DOM里那样。
然后，需要编译这个元素，运行digest循环把它放在我们的假DOM上并且生效。
28
要测试这个指令，要做的就是与它交互，就好像它是在我们的DOM中一样。为了使指令上
的绑定产生变化，需要强制运行一个digest循环。
29
在指令中，我们添加了一个到scope的message属性的绑定，所以当我们改变它时，需要在
$apply()中调用：
30
// ……测试应用
it('should display the welcome text', function() {
scope.$apply(function() {
scope.note = "Notification message"; 31
});

expect( 32
ele.html()
).toContain("Notification message");
});
33
那么，不直接把HTML嵌入到指令的定义中，而是使用templateUrl选项来测试指令，又会
怎样呢？在单元测试中，我们并不想建立真正的XHR请求来获取远程的模板。（Angular也根本就 34
没有一个用于在测试中获取远程服务的方法。）建立真正的XHR请求会减慢我们的单元测试，并
且让单元测试依赖于外部数据。如果外部数据源介入了测试功能，我们就没法知道测试在哪出错
了。是外部数据源出错了吗？还是我们的功能出错了？ 35

既然我们知道了XHR测试不能建立请求，一切需要通过templateUrl从远程地址加载模板的指
令都会失败，除非在开始测试指令之前就先处理请求。幸好，Angular包含了$templateCache服务。 36