Page 301 - AngularJS权威教程

19.23 测试输入框 281

19.23 测试输入框 19

首先，我们把目光转向测试输入框。主页加载了一个表单，带有单个输入框，仅在用户未选
20
择待搜索问题的仓库时显示，如图19-12所示。这个<input type="text">被绑定到称为repoName
的模型。用户提交了表单以后，表单自身就消失了，取而代之的是问题列表显示。
21

22

23

24

25
图19-12 主页中有一个输入框

这段HTML如下所示： 26

<div id="repoform" class="main" ng-if="!repoName">
<form ng-submit="getIssues()" class="input-group">
<div class="input-group"> 27
<input type="text" ng-model='repo.name' placeholder='Enter repo name' />
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" value="Search"> 28
</span>
</div>
</form> 29
</div>
我们在测试中所关注的功能是表单消失了，列表显示了。在一个新的测试中，我们要定位
<input>元素，并且在里面写东西。可以用sendKeys()方法在目标元素上做这个。要定位<input> 30
元素，可以使用by.input()方法找到含有ng-model绑定的输入元素。
31
it('the input box should go away on submit', function() {
element(by.input('repo.name')).sendKeys('angular/angular.js\n');
});
32
我们运行这个测试时，会发现<input>字段被填充了。因为我们还没有写预期，所以也就没
设置，但可以看到这个输入框被填入了angular/angular.js。
33
要让我们的输入框消失，需要提交表单。提交表单最简单的方法是假装按了回车按钮。在上
面的sendKeys()中，我们包含了\n字符，它假装在<input>元素中按下了回车。
34
此时，我们只需建立一个预期：repoform元素不再在这个页面上存在了（因为我们用ng-if
把它隐藏了）。可以用上面同样的方法来确认它不再存在于页面上：
35
it('the input box should go away on submit', function() {
element(by.input('repo.name')).sendKeys('angular/angular.js\n');
expect(ptor.isElementPresent(by.id('repoform'))).toBe(false); 36
});