Page 304 - AngularJS权威教程

284 第 19 章 测试

it('includes a user gravatar per-element', function() {
var elems = element.all(by.repeater('d in data'));
elems.first().then(function(elm) {
elm.findElement(by.tagName('img')).then(function(img) {
img.getAttribute('src').then(function(src) {
expect(src).toMatch(/gravatar\.com\/avatar/);
});
})
});
});

19.23.2 测试路由

要测试的最后一个功能是页面导航。正如预期的那样，我们会使用页面上的元素操作来建立
测试。在本例中，我们会用CSS来定位/about链接，并且点击这个链接。

HTML代码如下所示：

<div class="header">
<ul class="nav">
<li ng-class="{
'active': isCurrentPage('')
}"><a id="homelink" ng-href="#">Home</a></li>
<li ng-class="{
'active': isCurrentPage('about')
}"><a id='aboutlink' ng-href="#/about">About</a></li>
</ul>
<h3 class="text-muted">protractorer</h3>
</div>

/about链接是header.nav列表中的第二个元素。定位这个列表最快的方法是通过by.css()
方法使用CSS选择器。

it('should navigate to the /about page when clicking', function() {
var link = element(by.css('.header ul li:nth-child(2)'))
});
因为有了这个链接，我们可以点击它，导航到新的URL。导航到/about页面后，就可以测试
页面内容显示了，或者也可以测试当前的路由包含了/about路径。既然能合理地预期到Angular路
由的工作，我们也可以默认：如果浏览器的URL匹配了about页，页面内容就会加载。
因此，我们只简单地测试当前URL包含/about。可以使用Protractor实例方法getCurrentUrl()
来获得当前的URL：

it('should navigate to the /about page when clicking', function() {
element(by.css('.header ul li:nth-child(2)')).click();
expect(ptor.getCurrentUrl()).toMatch(/\/about/);
});
最后，既然我们测试的是前端，也要期望active样式类被加到链接上。

active样式类在按钮上添加了颜色样式。
我们希望在点击/about链接时，执行和上面相同的操作。每当我们发现自己在复制测试数据
时，就把测试嵌套在它们自己的describe块中，并且把副本移动到这个块中，通常这么做会比较