Page 285 - AngularJS权威教程

19.14 测试一个应用 265

请求，并且执行一个视图的变更来验证它是不是真的加载了。 19

describe('Unit: Templates', function() {
var $httpBackend,
location, 20
route,
rootScope;
21
beforeEach(module('myApp'));
beforeEach(inject(
function(_$rootScope_, _$route_, _$httpBackend_, _$location_){
location = _$location_; 22
rootScope = _$rootScope_;
route = _$route_;
$httpBackend = _$httpBackend_; 23
}));

afterEach(function() { 24
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
25
// 我们的测试代码放在这里
});
现在，可以建立测试来反映导航到应用不同部分时的预期。 26

it('loads the home template at /', function() {
$httpBackend.expectGET('templates/home.html') 27
.respond(200);
location.path('/');
rootScope.$digest(); // 调用digest循环 28
$httpBackend.flush();
});

it('loads the dashboard template at /dashboard', function() { 29
$httpBackend.expectGET('templates/dashboard.html')
.respond(200);
location.path('/dashboard'); 30
rootScope.$digest(); // 调用digest循环
$httpBackend.flush();
});
31
注意，我们并未在测试中返回一个模板（是.respond(200)，而不是.respond(200, "\<div\>
\</div\>")）。鉴于我们只是在验证模板是否在请求中加载了，没有必要担心到底显示了什么。
32
端到端测试才是我们要验证视图外观是否与预期相符的地方。
2. 端到端测试模板 33

当在端到端测试中测试视图时，相比模板是否加载了，我们更加关注视图上加载的真实数据。
通过这些测试，我们能够更好地了解用户在视图加载时看到的实际内容。
34
当它在用户的视图中时，我们将测试视图的内容。
为了测试模板，我们将测试视图包含了期望的HTML，还有它并未加载应用的其他部分。 35

describe('E2E: Views', function() {
beforeEach(function() { 36
browser().navigateTo('#/');