# 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 ``` 有了針對布局中鏈接的測試，我們就能使用測試組件快速捕捉回歸。