社会のボトムズがRailsに手を出す #5 - コミュ障だから明日が僕らをよんだって返事もろくにしなかった

これまでのあらすじ

昏睡を操る魔物を倒し新たな旅路に向かうのであった……。

RailsとかいうRuby フレームワークチュートリアルやったあらすじのはずなんですけどなんなんですかね……。このふざけたあらすじは……。

レイアウトをいぢるよ!!

そんなわけで前回できなかったレイアウトのいじり方とかやっていきます。まずはGemファイルにBootstrapを書き入れてレイアウトをいじっていくとのことです。Bootstrap-sass見た感じだと、Bootstrap3系っぽいですね。さて……、これから作るアプリはIE9とかサポートする気はないし、Bootstrap4系でいじりたいのでそれの利用は避けます*1。

参考：bootstrap-sass
bootstrap-sass | RubyGems.org | your community gem host

参考：bootstrap
bootstrap | RubyGems.org | your community gem host

はい、gemファイルに適当に追加していきます

source 'https://rubygems.org'

gem 'rails', '~> 5.2.2'
### 追加：
gem 'bootstrap', '~> 4.2', '>= 4.2.1'
gem 'jquery-rails', '~> 4.3', '>= 4.3.3'
# gem 'duktape' # コメントアウト

設定したらいつもの$ bundle installで設定を反映させます。これで完成と言いたいところだけども扱うファイルを変更したことでひと手間必要になりました。

GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc

・変更点

// app/assets/stylesheets/application.scss
// @import "bootstrap-sprockets"; // 不要
@import "bootstrap";

// application.js
-- 略 --
//= require jquery3
//= require popper
//= require bootstrap

参考
ExecJS::ProgramError after adding bootstrap gem · Issue #157 · twbs/bootstrap-rubygem · GitHub

導入方法はGitHubにある通りなんですけど、duktapeコメントアウトしないとなんかエラる。競合とかしてんですかね？なぜか呼び出せないとかいうエラーだったから迷宮入りしかけた……。やっぱりWindowsはダメだな。まあ解決しましたが…。duktape何に使われるんですかね？まあ、不具合出てからそれについて考えます。とりあえずそんな感じでBootstrapが反映させられればこんな感じにきれいに表示されます。

Bootstrap4にしたことによってheaderの構造がだいぶ変わってしまった……

<!-- app/views/layouts/_header.html.erb -->
<header class="navbar fixed-top navbar-light bg-dark navbar-inverse">
<%= link_to "MY RailApp", root_path, id: "logo" %>
    <nav class="navbar navbar-light">
    <ul class="nav justify-content-end">
        <li class="nav-item ml-2"><%= link_to "Home",   root_path, class: "text-light" %></li>
        <li class="nav-item ml-2"><%= link_to "Help",     help_path , class: "text-light" %></li>
        <li class="nav-item ml-2"><%= link_to "Log in", '#', class: "text-light" %></li>
    </ul>
    </nav>
</header>

ちなみにパーシャルはこんな感じにつなげてます。

f:id:andron:20190109063820p:plain

さて、そんなわけでリンク作ったから結合テストをするってことで以下のコマンドを叩くとのこと。

$ rails generate integration_test [テスト名]

そんで、いざテストしてやるぜってコマンド叩いたらエラーになるんですけど……。

$ rails test
NoMethodError: assert_template has been extracted to a gem. To continue using it, add `gem 'rails-controller-testing'` to your Gemfile.

メッセージの通りGemに「rails-controller-testing」を追加すればOKだそうです。Rails5から別途で導入しないとだめになったそうで……。

まあ、テストの方は特に話すことない……。あ、そうだ。演習があったのでそっちの解答載せておきます。

# test/integration/site_layout_test.rb
require 'test_helper'
class ApplicationHelperTest < ActionView::TestCase
  test "full title helper" do
    assert_equal full_title,         "Ruby on Rails Tutorial Sample App"
    assert_equal full_title("Help"), "Help | Ruby on Rails Tutorial Sample App"
  end
end

こんな感じと思われ。

新たな機能をつくるよ!!

そんなわけでようやくレイアウトがなんとかなったのも矢先に、この章では更に新たな機能を実装していくらしいよ。

# $ rails generate controller [コントローラ名] [アクション]
$ rails generate controller Users new

そんで画面とか整えてこう。

f:id:andron:20190109063832p:plain

ソース載せようかと思ったけど「app/controllers/users_controller.rb」と「app/views/users/new.html.erb」、「test/controllers/users_controller_test.rb」から一～二行追加するだけだしいいやとなった。

テストコードの方はこんな感じになると思われ。

require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest
  # test "the truth" do
  #   assert true
  # end
 ### 略 ###
  test "signup links" do
    get signup_path
    assert_select "title", full_title("Sign up")
  end
end