# 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](#table-url-mapping) 所示，表中还列出了 URL 和路由的对应关系。第一个路由在 [3.4.4 节](chapter3.html#setting-the-root-route)已经设定，本章结束时，我们会定义好除最后一个之外的所有路由。最后一个路由在[第 8 章](chapter8.html#log-in-log-out)定义。 表 5.1：网站中链接的路由和 URL 地址的映射关系 | 页面 | URL | 具名路由 | | --- | --- | --- | | “首页” | / | `root_path` | | “关于” | /about | `about_path` | | “帮助” | /help | `help_path` | | “联系” | /contact | `contact_path` | | “注册” | /signup | `signup_path` | | “登录” | /login | `login_path` | ## 5.3.1 “联系”页面 继续之前，我们要先添加一个“联系”页面（[3.6 节](chapter3.html#mostly-static-pages-exercises)的练习题），测试如[代码清单 5.16](#listing-contact-page-test) 所示，形式和[代码清单 3.22](chapter3.html#listing-title-tests) 差不多。（如果你做了[3.6 节](chapter3.html#mostly-static-pages-exercises)的练习，测试中可能会使用 `@base_title` 变量，你可以在[代码清单 5.16](#listing-contact-page-test) 中使用。） ##### 代码清单 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](#listing-contact-page-test) 中的测试应该失败： ##### 代码清单 5.17：**RED** ``` $ bundle exec rake test ``` 我们按照 [3.3 节](chapter3.html#getting-started-with-testing)的做法添加“联系”页面：首先更新路由（[代码清单 5.18](#listing-contact-route)），然后在静态页面控制器中添加一个 `contact` 动作（[代码清单 5.19](#listing-contact-action)），最后创建“联系”页面的视图（[代码清单 5.20](#listing-contact-view)）。 ##### 代码清单 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 节](chapter3.html#setting-the-root-route)定义），然后定义其他静态页面的路由。 目前，我们见到了三种定义根路由的方式，首先是 `hello_app` 中的（[代码清单 1.10](chapter1.html#listing-hello-root-route)） ``` root 'application#hello' ``` 然后是 `toy_app` 中的（[代码清单 2.3](chapter2.html#listing-rails-routes-root-route)） ``` root 'users#index' ``` 最后是 `sample_app` 中的（[代码清单 3.37](chapter3.html#listing-home-root-route)） ``` root 'static_pages#home' ``` 不管哪一种方式，我们都把根路径 / 指向一个控制器和动作。像这样定义根路由有个重要的好处——创建了具名路由，可以使用名字而不是原始的 URL 指代路由。对根路由来说，创建的具名路由是 `root_path` 和 `root_url`，二者之间唯一的区别是，后者是完整的 URL： ``` root_path -> '/' root_url -> 'http://www.example.com/' ``` 本书遵守一个约定，只有重定向使用 `_url` 形式，其余都使用 `_path` 形式。（因为 HTTP 标准严格要求重定向的 URL 必须完整。不过在大多数浏览器中，两种形式都可以正常使用。） 为了定义“帮助”页面、“关于”页面和“联系”页面的具名路由，我们要把[代码清单 5.18](#listing-contact-route) 中的 `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](#listing-contact-route) 中的内容改成[代码清单 5.22](#listing-static-page-routes)。 ##### 代码清单 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](#listing-static-page-routes) 中的路由，我们就可以在网站的布局中使用具名路由了。我们只需在 `link_to` 函数的第二个参数中指定合适的具名路由。例如，我们要把 ``` <%= link_to "About", '#' %> ``` 改成 ``` <%= link_to "About", about_path %> ``` 以此类推。 我们先来修改头部局部视图 `_header.html.erb`，其中有指向首页和“帮助”页面的链接。同时，我们还要按照通用约定，把 LOGO 指向首页。修改后的视图如[代码清单 5.23](#listing-header-partial-links) 所示。 ##### 代码清单 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 章](chapter8.html#log-in-log-out)才会为“注册”页面设置具名路由，所以现在还用占位符 `#`。 还有一个包含链接的文件是底部局部视图 `_footer.html.erb`，有指向“关于”页面和“联系”页面的链接。修改后如[代码清单 5.24](#listing-footer-partial-links) 所示。 ##### 代码清单 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 章](chapter3.html#mostly-static-pages)创建的所有静态页面都添加到布局中了。以“关于”页面为例，访问 [/about](http://localhost:3000/about) 会打开网站的“关于”页面，如[图 5.8](#fig-about-page) 所示。 图 5.8：[/about](http://localhost:3000/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](#listing-layout-links-test) 所示。其中 `assert_template` 方法检查首页是否使用正确的视图渲染。[[13](#fn-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](#listing-layout-links-test) 使用了 `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](#listing-header-partial-links) 中定义的两个首页链接都存在。 `assert_select` 的更多用法参见[表 5.2](#table-assert-select)。虽然 `assert_select` 的用法很灵活，功能很强大（还有很多表中没介绍的用法），但经验告诉我们，最好只测试不会经常变动的 HTML 元素（例如布局中的链接）。 表 5.2：`assert_select` 的一些用法 | 代码 | 匹配的 HTML | | --- | --- | | `assert_select "div"` | `&lt;div&gt;foobar&lt;/div&gt;` | | `assert_select "div", "foobar"` | `&lt;div&gt;foobar&lt;/div&gt;` | | `assert_select "div.nav"` | `&lt;div class="nav"&gt;foobar&lt;/div&gt;` | | `assert_select "div#profile"` | `&lt;div id="profile"&gt;foobar&lt;/div&gt;` | | `assert_select "div[name=yo]"` | `&lt;div name="yo"&gt;hey&lt;/div&gt;` | | `assert_select "a[href=?]", ’/’, count: 1` | `&lt;a href="/"&gt;foo&lt;/a&gt;` | | `assert_select "a[href=?]", ’/’, text: "foo"` | `&lt;a href="/"&gt;foo&lt;/a&gt;` | 我们使用下面的 Rake 任务只运行集成测试，检查[代码清单 5.25](#listing-layout-links-test) 中的测试是否能通过： ##### 代码清单 5.26：**GREEN** ``` $ bundle exec rake test:integration ``` 如果一切顺利，你应该再运行整个测试组件，确保所有测试都能通过： ##### 代码清单 5.27：**GREEN** ``` $ bundle exec rake test ``` 有了针对布局中链接的测试，我们就能使用测试组件快速捕捉回归。