Ember 翻译——教程二：设置测试

设置测试

这一个章节将通过构建一个名叫“超级租赁”的房屋租赁网站来验证 Ember 应用的基础设置和处理。一开始它将自带一个首页、一个关于页和一个联系页。

在开始之前，先让我们看一下我们所期望的应用。

让我们想一想我们希望在我们的超级租赁的首页上做些什么。
我们希望我们的应用：
- 罗列可查看的租赁信息。
- 连接到关于本公司的信息。
- 连接到本公司的联系信息。
- 按城市过滤租赁信息。

我们可以以 Ember 验收测试 的形式来展示这些目标。验收测试可以像一个真人一样自动和我们的 app 进行交互，以此来确保我们的 app 以后不会崩溃。

我们将通过 Ember CLI 生成一个新的验收测试开始：

ember g acceptance-test list-rentals

这条命令将生成如下的输出，它表示创建了一个名叫 list-rentals-test。

installing acceptance-test  create tests/acceptance/list-rentals-test.js

打开最新的测试文件，我们可以看到一些示例代码，它将尝试访问 list-rentals 路由，并且验证那个路由被正确加载了。这份示例代码是为了引导你进行你的第一个验收测试。既然我们要测试我们的 index 路由，而它是 /，所以我们将用用 / 替代 /list-rentals。

/tests/acceptance/list-rentals-test.js

import { test } from 'qunit';import moduleForAcceptance from 'super-rentals/tests/helpers/module-for-acceptance';moduleForAcceptance('Acceptance | list-rentals');test('visiting /', function(assert) {    visit('/');    andThen(function() {        assert.equal(currentURL(), '/');    });});

现在从一个新的命令行窗口通过 ember test --server 来运行你的测试套件，稍后你将看到一个成功的验收测试（伴随着若干 JSHint 测试）。

正如之前提到过的那样，这个测试示例只是为了检测运行环境，所以现在让我们结合我们的测试目的来修改这份代码。

/tests/acceptance/list-rentals-test.js

import { test } from 'qunit';import moduleForAcceptance from 'super-rentals/tests/helpers/module-for-acceptance';moduleForAcceptance('Acceptance | list-rentals');test('should redirect to rentals route', function (assert) {});test('should list available rentals.', function (assert) {});test('should link to information about the company.', function (assert) {});test('should link to contact information.', function (assert) {});test('should filter the list of rentals by city.', function (assert) {});test('should show details for a specific rental', function (assert) {});

运行 ember test --server 将显示 6 次错误的测试。如果我们没有测试任何东西（术语叫 assertion，断言），每一次测试都将失败。既然我们知道我们的应用长什么样子，我们可以为这份测试添加一些细节内容。

Ember 提供测试 helper，我们可以通过使用它来执行验收测试中的常见任务，例如访问路由，填写表单，点击元素和等待页面渲染等。

我们希望网站最值得注意的一点是选择元素，因此我们计划重定向到根路径 / 到我们的 rentals 路由。我们可以使用我们的测试 helper 创建一个简单的测试来验证它：

/tests/acceptance/list-rentals-test.js

test('should redirect to rentals route', function (assert) {  visit('/');  andThen(function() {    assert.equal(currentURL(), '/rentals', 'should redirect automatically');  });});

这个测试中展示了一些 helper：
- visit helper 加载给定的了 URL 的特定路由。
- andThen helper 会在运行你所提供的函数之前，等所有曾经调用的测试 helper 完成。在以上情形中，我们需要等到在 visit 之后页面加载完成，以便于我们能够确定所有的列表加载完成。
- currentURL 会返回测试应用正访问的 URL。

为了确保租赁信息被正确罗列，我们将首先访问 index 路由并且确保正确显示列表：

/tests/acceptance/list-rentals-test.js

test('should list available rentals.', function (assert) {  visit('/');  andThen(function () {    assert.equal(find('.listing').length, 3, 'should see 3 listings');  });});

测试假设每一条租赁信息中都有一个名叫 list 的 CSS 类。

接下来两个测试，我们想要验证点击关于页和联系也链接将成功加载适当的 URL。我们将使用 click helper 来模拟一个用户来点击这些链接。在新的页面被加载之后，我们可以使用 currentURL 来验证新的 URL 是否匹配我们的期望值。

/tests/acceptance/list-rentals-test.js

test('should link to information about the company.', function (assert) {  visit('/');  click('a:contains("About")');  andThen(function () {    assert.equal(currentURL(), '/about', 'should navigate to about');  });});test('should link to contact information', function (assert) {  visit('/');  click('a:contains("Contact")');  andThen(function () {    assert.equal(currentURL(), '/contact', 'should navigate to contact');  });});

注意我们可以直接在同一行中同时调用两个异步测试 helper，而不必使用 andThen 或者 promise。这是因为每一个异步测试 helper 都得等待其它的测试 helper 完成。

测试完 URL 之后，我们将深入了解我们的租赁主页面，便于测试我们是否能以城市作为搜索条件来过滤列表。我们预计在一个类名为 list-filter 的容器中会有一个输入框。我们将在那个输入框中填写 “Seattle” 作为搜索条件，然后发送一个按键松开事件来触发我们的搜索行为。既然我们控制了我们的数据，我们知道只有一个城市属于 “Seattle”，所以我们确信列表中属于 “Seattle” 的数据条数是一。

/tests/acceptance/list-rentals-test.js

test('should filter the list of rentals by city.', function (assert) {  visit('/');  fillIn('.list-filter input', 'seattle');  keyEvent('.list-filter input', 'keyup', 69);  andThen(function () {    assert.equal(find('.listing').length, 1, 'should show 1 listing');    assert.equal(find('.listing .location:contains("Seattle")').length, 1, 'should contain 1 listing with location Seattle');  });});

最后，我们想要验证我们是否能点击一条特定的租赁信息然后为页面加载详情。我们将点击标题和验证租赁信息的扩展描述被显示。

/tests/acceptance/list-rentals-test.js

test('should show details for a specific rental', function (assert) {  visit('/rentals');  click('a:contains("Grand Old Mansion")');  andThen(function() {    assert.equal(currentURL(), '/rentals/grand-old-mansion', 'should navigate to show route');    assert.equal(find('.show-listing h2').text(), "Grand Old Mansion", 'should list rental title');    assert.equal(find('.description').length, 1, 'should list a description of the property');  });});

当然，因为到目前为止我们还没有使用这些功能，我们的测试都将失败。所以，当你运行 ember test --server 的时候，你的测试输出将现目前都将失败，它也会给我们一本教程剩余部分的任务列表。

当我们浏览教程的时候，我们将使用我们的验收测试作为一个待验证功能列表。当所有都变成绿色的时候，我们就较好地达成了我们目标。

---

原文地址