24/05/2019 Railsチュートリアル Ruby on Rails 学習メモ

らくだ🐫にもできるRailsチュートリアル｜3.4

3.4 少しだけ動的なページ

Home、Help、Aboutそれぞれのページタイトルが表示されるようにしていく
準備として元々用意されているレイアウトのファイルを一時的に無効に

#ファイルの移動（＆リネーム）
#app/views/layoutsにあるapplication.html.erbを　ルート直下に移動＆ファイル名をlayout_fileに
$ mv app/views/layouts/application.html.erb layout_file

#ファイルの移動（＆リネーム）

#app/views/layoutsにあるapplication.html.erbを　ルート直下に移動＆ファイル名をlayout_fileに

$ mv app/views/layouts/application.html.erb layout_file

3.4.1 タイトルをテストする (Red)

HTMLの構造についてのおさらい

assert_selectメソッド　→　特定のHTMLタグが存在するかテストするメソッド
<title>タグ内に「Home | Ruby on RailsTutorial Sample App」が存在するかと言う1文をそれぞれのテストに追加

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | Ruby on RailsTutorial Sample App" 
  end

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

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

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

test "should get home" do

get static_pages_home_url

assert_response :success

assert_select "title", "Home | Ruby on RailsTutorial Sample App"

end

test "should get help" do

get static_pages_help_url

assert_response :success

assert_select "title", "Help | Ruby on RailsTutorial Sample App"

end

test "should get about" do

get static_pages_about_url

assert_response :success

assert_select "title", "About | Ruby on Rails Tutorial Sample App"

end

アサーションメソッドとは何ぞ

assert（assert_○○）なメソッド
テストの判定をしてくれる便利で重要な物。いろいろな種類がある。
Rails テスティングガイド　2.6 利用可能なアサーション

テストスイートとは何ぞ

何を調べるのか
test　～　do
・
・
・
end
この固まりがテストケース
で、テストケースの固まりがテストスイート

で、この状態でテストをするとRED

3.4.2 タイトルを追加する (Green)

本文ママ

演習

指示通りにテストコードを更新してテストもGREEN

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  #setupメソッド
  def setup
    #変数@base_titleにRuby on Rails Tutorial Sample Appを代入
    @base_title = "Ruby on Rails Tutorial Sample App"
  end

  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | #{@base_title}"
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | #{@base_title}"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | #{@base_title}"
  end
end

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

#setupメソッド

def setup

#変数@base_titleにRuby on Rails Tutorial Sample Appを代入

@base_title = "Ruby on Rails Tutorial Sample App"

end

test "should get home" do

get static_pages_home_url

assert_response :success

assert_select "title", "Home | #{@base_title}"

end

test "should get help" do

get static_pages_help_url

assert_response :success

assert_select "title", "Help | #{@base_title}"

end

test "should get about" do

get static_pages_about_url

assert_response :success

assert_select "title", "About | #{@base_title}"

end

setupという特別なメソッド (各テストが実行される直前で実行されるメソッド)

いまいちわかりずらいのですが前提条件って感じでしょうか。
この中で設定した変数は以降スコープ内のテストケースで使用できる。的な。

で、「@base_title = “Ruby on Rails Tutorial Sample App”」と設定してあるので
「”Home | #{@base_title}”」→変数展開→「”Home | Ruby on Rails Tutorial Sample App”」となる訳です（よね？）

表記は変わっているけどやっている内容は変わらないのでテストはGREEN

3.4.3 レイアウトと埋め込みRuby (Refactor)

重複したコードを整理してすっきりさせる

provideメソッドとは何ぞ

template（view）間で値を渡すためのメソッド
受け取るメソッドのyieldとセットで使われる

#ラベル:title,文字列Homeが引数のprovideメソットを呼び出している
#埋め込みRuby→「<% ・・・ >」で囲まれたコードはHTMLに出力されない
<% provide(:title, "Home") %>
<!DOCTYPE html>
<html>
  <head>
    #引数にラベル:titleが付いたprovideメソッドの文字列をyieldメソッドで参照している
    #埋め込みRuby→「<%= ・・・ >」で囲まれたコードはHTMLに出力される
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    <h1>Sample App</h1>
    <p>
      This is the home page for the
      <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
      sample application.
    </p>
  </body>
</html>

#ラベル:title,文字列Homeが引数のprovideメソットを呼び出している

#埋め込みRuby→「<% ・・・ >」で囲まれたコードはHTMLに出力されない

<% provide(:title, "Home") %>

<!DOCTYPE html>

<html>

<head>

#引数にラベル:titleが付いたprovideメソッドの文字列をyieldメソッドで参照している

#埋め込みRuby→「<%= ・・・ >」で囲まれたコードはHTMLに出力される

<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>

</head>

<body>

<h1>Sample App</h1>

<p>

This is the home page for the

<a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>

sample application.

</p>

</body>

</html>

HelpとAboutのページも同じ様に変更する

リファクタリングの続き

それぞれのページの構造がほぼ同じものになっているため更に整理
まず、初めに無効にしていたレイアウト用のファイルを元に戻します

>$ mv layout_file app/views/layouts/application.html.erb

1	>$ mv layout_file app/views/layouts/application.html.erb

そして編集

<!DOCTYPE html>
<html>
  <head>
    #title部分を書き換え
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    #セキュリティ関連のrailsのメソッド
    <%= csrf_meta_tags %>
    #スタイルシートを展開するためのコード
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    #JavaScriptを展開するためのコード
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    #各ページの内容を挿入するためのコード
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

#title部分を書き換え

<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>

#セキュリティ関連のrailsのメソッド

<%= csrf_meta_tags %>

#スタイルシートを展開するためのコード

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

#JavaScriptを展開するためのコード

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

<body>

<%= yield %>

#各ページの内容を挿入するためのコード

</body>

</html>

さらにHome,Help,Aboutの各ページを編集

<% provide(:title, "Home") %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    <h1>Sample App</h1>
    <p>
      This is the home page for the
      <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
      sample application.
    </p>
  </body>
</html>
#ハイライト行を削除
#Help,Aboutページも同様に

<% provide(:title, "Home") %>

<!DOCTYPE html>

<html>

<head>

<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>

</head>

<body>

<h1>Sample App</h1>

<p>

This is the home page for the

<a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>

sample application.

</p>

</body>

</html>

#ハイライト行を削除

#Help,Aboutページも同様に

テスト結果

$ rails t
・
・
・
  3/3: [<span class="green">===================================</span>] 100% Time: 00:00:00, Time: 00:00:00

Finished in 0.33430s
3 tests, 6 assertions, <span class="green">0 failures, 0 errors</span>, 0 skips

$ rails t

・

3/3: [<span class="green">===================================</span>] 100% Time: 00:00:00, Time: 00:00:00

Finished in 0.33430s

3 tests, 6 assertions, <span class="green">0 failures, 0 errors</span>, 0 skips

演習

テストを書く（現状ではRED）

・
・
・
  test "should get contact" do
    get static_pages_contact_url
    assert_response :success
    assert_select "title", "Contact | #{@base_title}"
  end

end

・

test "should get contact" do

get static_pages_contact_url

assert_response :success

assert_select "title", "Contact | #{@base_title}"

end

ルーティング

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

Rails.application.routes.draw do

get 'static_pages/home'

get 'static_pages/help'

get 'static_pages/about'

get 'static_pages/contact'

root 'application#hello'

end

アクション

・
・
・
  def contact
  end
  
end

・

def contact

end

本文に従ってcontact.html.erbを作る →　テストGREEN

3.4.4 ルーティングの設定

本文ママ

但し、ルーティングを書き換えたためstatic_pages_home_urlヘルパーが無効になってテストが通らなくなる
以下の演習で修正

演習

リスト 3.41にrootルーティングを追加したことで、root_urlというRailsヘルパーが使えるようになりました (以前、static_pages_home_urlが使えるようになったときと同じです)。リスト 3.42のFILL_INと記された部分を置き換えて、rootルーティングのテストを書いてみてください。

require 'test_helper'
class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  
  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end
  
  test "should get root" do
    get root_url
    assert_response :success
 end
・
・
・

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

def setup

@base_title = "Ruby on Rails Tutorial Sample App"

end

test "should get root" do

get root_url

assert_response :success

end

・

実はリスト 3.41のコードを書いていたので、先ほどの課題のテストは既に green になっているはずです。このような場合、テストを変更する前から成功していたのか、変更した後に成功するようになったのか、判断が難しいです。リスト 3.41のコードがテスト結果に影響を与えていることを確認するため、リスト 3.43のようにrootルーティングをコメントアウトして見て、 red になるかどうか確かめてみましょう (なおRubyのコメント機能については4.2.1で説明します)。最後に、コメントアウトした箇所を元に戻し (すなわちリスト 3.41に戻し)、テストが green になることを確認してみましょう。

該当箇所をコメントアウト　→　RED
元に戻す　→　GREEN

まとめとか感想

今更ですがあれですね。
こうやって纏めながらやり直してると理解が深まるし、新しい気付きもあっていいですね。

らくだ🐫にもできるRailsチュートリアルとは

「ド」が付く素人のらくだ🐫が勉強するRailsチュートリアルの学習記録です。
自分用に記録していますが、お役に立つことがあれば幸いです。

調べたとはいえらくだ🐫なりの解釈や説明が含まれます。間違っている部分もあるかと思います。そんな所は教えて頂けますと幸いなのですが、このブログにはコメント機能がありません💧お手数おかけしますがTwitterなどでご連絡いただければ幸いです