5.3 布局中的链接

我们已经为网站的布局定义了看起来不错的样式，下面要把链接中使用的占位符 # 换成真正的链接地址。当然，我们可以像下面这样硬编码链接：

<a href="/static_pages/about">About</a>

不过这样不太符合 Rails 之道。一者，“关于”页面的地址如果是 /about 而不是 /static_pages/about 就好了；再者，Rails 习惯使用具名路由指定链接地址，如下面的代码所示：

<%= link_to "About", about_path %>

使用这种方式，代码的意图更明确，而且也更灵活，如果修改了 about_path 对应的 URL，其他使用 about_path 的地方都会自动使用新的 URL。

我们计划添加的链接如表 5.1 所示，表中还列出了 URL 和路由的对应关系。第一个路由在 3.4.4 节已经设定，本章结束时，我们会定义好除最后一个之外的所有路由。最后一个路由在第 8 章定义。

表 5.1：网站中链接的路由和 URL 地址的映射关系

5.3.1 “联系”页面

继续之前，我们要先添加一个“联系”页面（3.6 节的练习题），测试如代码清单 5.16 所示，形式和代码清单 3.22 差不多。（如果你做了3.6 节的练习，测试中可能会使用 @base_title 变量，你可以在代码清单 5.16 中使用。）

代码清单 5.16：“联系”页面的测试 RED

test/controllers/static_pages_controller_test.rb

require 'test_helper'

class StaticPagesControllerTest < ActionController::TestCase

  test "should get home" do
    get :home
    assert_response :success
    assert_select "title", "Ruby on Rails Tutorial Sample App"
  end

  test "should get help" do
    get :help
    assert_response :success
    assert_select "title", "Help | Ruby on Rails Tutorial Sample App"
  end

  test "should get about" do
    get :about
    assert_response :success
    assert_select "title", "About | Ruby on Rails Tutorial Sample App"
  end

 test "should get contact" do get :contact assert_response :success assert_select "title", "Contact | Ruby on Rails Tutorial Sample App" end end

现在，代码清单 5.16 中的测试应该失败：

代码清单 5.17：RED

$ bundle exec rake test

我们按照 3.3 节的做法添加“联系”页面：首先更新路由（代码清单 5.18），然后在静态页面控制器中添加一个 contact 动作（代码清单 5.19），最后创建“联系”页面的视图（代码清单 5.20）。

代码清单 5.18：添加“联系”页面的路由 RED

config/routes.rb

Rails.application.routes.draw do
  root 'static_pages#home'
  get  'static_pages/help'
  get  'static_pages/about'
 get  'static_pages/contact' end

代码清单 5.19：添加“联系”页面的动作 RED

app/controllers/static_pages_controller.rb

class StaticPagesController < ApplicationController
  .
  .
  .
  def contact
  end
end

代码清单 5.20：“联系”页面的视图 GREEN

app/views/static_pages/contact.html.erb

<% provide(:title, 'Contact') %>
<h1>Contact</h1>
<p>
 Contact the Ruby on Rails Tutorial about the sample app at the
 <a href="http://www.railstutorial.org/#contact">contact page</a>.
</p>

现在，确认测试可以通过：

代码清单 5.21：GREEN

$ bundle exec rake test

5.3.2 Rails 路由

为了添加演示应用中静态页面的具名路由，我们要修改 Rails 用来定义 URL 映射的路由文件，即 config/routes.rb。我们先分析一下特殊的首页路由（3.4.4 节定义），然后定义其他静态页面的路由。

目前，我们见到了三种定义根路由的方式，首先是 hello_app 中的（代码清单 1.10）

root 'application#hello'

然后是 toy_app 中的（代码清单 2.3）

root 'users#index'

最后是 sample_app 中的（代码清单 3.37）

root 'static_pages#home'

不管哪一种方式，我们都把根路径 / 指向一个控制器和动作。像这样定义根路由有个重要的好处——创建了具名路由，可以使用名字而不是原始的 URL 指代路由。对根路由来说，创建的具名路由是 root_path 和 root_url，二者之间唯一的区别是，后者是完整的 URL：

root_path -> '/'
root_url  -> 'http://www.example.com/'

本书遵守一个约定，只有重定向使用 _url 形式，其余都使用 _path 形式。（因为 HTTP 标准严格要求重定向的 URL 必须完整。不过在大多数浏览器中，两种形式都可以正常使用。）

为了定义“帮助”页面、“关于”页面和“联系”页面的具名路由，我们要把代码清单 5.18 中的 get 规则

get 'static_pages/help'

改成

get 'help' => 'static_pages#help'

后一种形式把发给 /help 的 GET 请求交给静态页面控制器中的 help 动作处理，所以我们可以把 /static_pages/help 简化成 /help。和根路由一样，这个规则也会定义两个具名路由，分别是 help_path 和 help_url：

help_path -> '/help'
help_url  -> 'http://www.example.com/help'

按照同样的方式修改其他静态页面的路由，把代码清单 5.18 中的内容改成代码清单 5.22。

代码清单 5.22：静态页面的路由

config/routes.rb

Rails.application.routes.draw do
  root             'static_pages#home'
  get 'help'    => 'static_pages#help'
  get 'about'   => 'static_pages#about'
  get 'contact' => 'static_pages#contact'
end

5.3.3 使用具名路由

有了代码清单 5.22 中的路由，我们就可以在网站的布局中使用具名路由了。我们只需在 link_to 函数的第二个参数中指定合适的具名路由。例如，我们要把

<%= link_to "About", '#' %>

改成

<%= link_to "About", about_path %>

以此类推。

我们先来修改头部局部视图 _header.html.erb，其中有指向首页和“帮助”页面的链接。同时，我们还要按照通用约定，把 LOGO 指向首页。修改后的视图如代码清单 5.23 所示。

代码清单 5.23：修改头部局部视图中的链接

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
 <div class="container">
  <%= link_to "sample app", root_path, id: "logo" %>
 <nav>
 <ul class="nav navbar-nav navbar-right">
 <li><%= link_to "Home",    root_path %></li>
 <li><%= link_to "Help",    help_path %></li>
 <li><%= link_to "Log in", '#' %></li>
 </ul>
 </nav>
 </div>
</header>

第 8 章才会为“注册”页面设置具名路由，所以现在还用占位符 #。

还有一个包含链接的文件是底部局部视图 _footer.html.erb，有指向“关于”页面和“联系”页面的链接。修改后如代码清单 5.24 所示。

代码清单 5.24：修改底部局部视图中的链接

app/views/layouts/_footer.html.erb

<footer class="footer">
 <small>
 The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
 by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
 </small>
 <nav>
 <ul>
 <li><%= link_to "About",   about_path %></li>
 <li><%= link_to "Contact", contact_path %></li>
 <li><a href="http://news.railstutorial.org/">News</a></li>
 </ul>
 </nav>
</footer>

如此一来，第 3 章创建的所有静态页面都添加到布局中了。以“关于”页面为例，访问 /about 会打开网站的“关于”页面，如图 5.8 所示。

图 5.8：/about 地址上的“关于”页面

5.3.4 布局中链接的测试

我们在布局中加入了几个链接，最好再编写一些测试，确保链接正常。我们可以在浏览器中手动测试，先访问首页，然后点击其他链接，不过这么做很快就会变得繁琐。所以我们要使用集成测试，编写端到端测试完成这些操作。首先，生成测试模板，名为 site_layout：

$ rails generate integration_test site_layout
      invoke  test_unit
      create    test/integration/site_layout_test.rb

注意，Rails 生成器会自动在文件名后面添加 _test。

针对布局中链接的测试，要检查网站的 HTML 结构：

1. 访问根路由（首页）；

2. 确认使用正确的模板渲染；

3. 检查指向首页、“帮助”页面、“关于”页面和“联系”页面的地址是否正确。

使用 Rails 集成测试把上述步骤转换成代码，如代码清单 5.25 所示。其中 assert_template 方法检查首页是否使用正确的视图渲染。[13]

代码清单 5.25：测试布局中的链接 GREEN

test/integration/site_layout_test.rb

require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    get root_path
    assert_template 'static_pages/home'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", help_path
    assert_select "a[href=?]", about_path
    assert_select "a[href=?]", contact_path
  end
end

代码清单 5.25 使用了 assert_select 方法的一些高级用法，同时指定标签名 a 和属性 href，检查有没有指定的链接，如下所示：

assert_select "a[href=?]", about_path

Rails 会自动把问号替换成 about_path（如果需要还会转义特殊字符），检查有没有下面这样的 HTML 元素：

<a href="/about">...</a>

注意检查首页链接的那个断言，确保页面中有两个指向首页的链接（LOGO 一个，导航条中一个）：

assert_select "a[href=?]", root_path, count: 2

以此确认代码清单 5.23 中定义的两个首页链接都存在。

assert_select 的更多用法参见表 5.2。虽然 assert_select 的用法很灵活，功能很强大（还有很多表中没介绍的用法），但经验告诉我们，最好只测试不会经常变动的 HTML 元素（例如布局中的链接）。

表 5.2：assert_select 的一些用法

我们使用下面的 Rake 任务只运行集成测试，检查代码清单 5.25 中的测试是否能通过：

代码清单 5.26：GREEN

$ bundle exec rake test:integration

如果一切顺利，你应该再运行整个测试组件，确保所有测试都能通过：

代码清单 5.27：GREEN

$ bundle exec rake test

有了针对布局中链接的测试，我们就能使用测试组件快速捕捉回归。