Railsチュートリアル第5章で学んだこと

第5章は最初レイアウトをやりました。

だんだんコードの量が多くなると紛らわしくなるのでパーシャルを使ってどんどん分割していくのがいいらしい。

例えば

<%= full_title(yield(:title)) %> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= link_to "sample app", '#', id: "logo" %>

• <%= link_to "Home", '#' %>
• <%= link_to "Help", '#' %>
• <%= link_to "Log in", '#' %>

<%= yield %>

みたいに長くなるので

<%= render 'layouts/head' %> <%= render 'layouts/header' %>

<%= yield %>

みたいにコードを分割することができるパーシャルのファイル名は_header.html.erbみたいにアンダーバーを付けるといいらしい

そしてRailsではリンクタグを作るときには

<%= link_to "Home", '#' %>
と記入するとHTMLで
Home
という風に変換してくれる

さらに画像は
<%= image_tag("rails.svg", alt: "Rails logo") %>
を使うと

みたいに変換してくれる

あと最近のCSSは便利なものでBootstrapを使えば誰でも気軽にきれいなCSSをつけれれるのでお得
さらにRailsにはgemがあるので導入も簡単

さらにSassを使うとCSSを見やすく簡素化して書くことも可能

#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}

#logo:hover {
color: #fff;
text-decoration: none;
}

↓

#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: #fff;
text-decoration: none;
}
}

便利だなー

そして今回のレイアウト作っていくなかのリンクで

今まではURLを使ってたがRailsでは名前付きリンクを使うのが風習らしい

root_path: /
root_url: https://www.example.com/

前者はルートURL以下の文字列を、後者は完全なURLの文字列を返す。

これにするとルーティングの値も変わり

get 'static_pages/help'

と書いてたものが

get '/help', to: 'static_pages#help'

と書くことによって名前付きリンクが使えるようになる。

そして今回はリンクを作ったのでそれが正しく動くのかというテストを書きました。
これは統合テストと言ってアプリケーションの動作を端から端までシミュレートしてテストするものです

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

このテストは

１．ルートURL（Homeページ）にGETリクエストを送る.
２．正しいページテンプレートが描画されているかどうか確かめる.
３．Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる.

assert_templeteで正確なビューページを読み込んでるかテストしてます。

そして

assert_selectで指定したタグとその個数など合ってるか調べられます。

Code 　　　　マッチするHTML
assert_select 　"div"　

foobar

assert_select 　"div", "foobar"

foobar

assert_select 　"div.nav"

foobar

assert_select 　"div#profile"

foobar

assert_select 　"div[name=yo]"

hey

assert_select 　"a[href=?]", '/', count: 1 foo
assert_select 　"a[href=?]", '/', text: "foo" foo

assert_selectはホント便利ですね

そしてヘルパーもちゃんと動くかテストするためにはべつに単体テスト書くのもいいらしい

require 'test_helper'

class ApplicationHelperTest < ActionView::TestCase
test "full title helper" do
assert_equal full_title, （コードを書き込む）
assert_equal full_title("Help"), （コードを書き込む）
end
end

assert_equalは期待される値を先に書いてその後に実際の値を書くとテストできる。

今回から結構内容が濃くなってきた。