Edited at

Rails Tutorialの知識から【ポートフォリオ】を作って勉強する話 #2 RSpec導入編


こんな人におすすめ


  • プログラミング初心者でポートフォリオの作り方が分からない

  • Rails Tutorialをやってみたが理解することが難しい

  • ポートフォリオを作成しながら勉強したい

前回:#1 準備編

次回:#3 Bootstrap4, jQueryプラグイン導入編


こんなことが分かる


  • RSpecの導入法

  • RSpecで書くTutorialのテストの書き方

  • Controller/Request/System specの違い

一緒に勉強しましょう:bow:

<追記:2019年8月16日>

#10.5にて、テスト見直しのため記事を書き直しました。


MinitestをRSpecに

Tutorial3章ではいよいよアプリケーションを作成する。

それにあたりテストを書くわけだけど、、え、、、テストって種類があるの。

一概には言えないけれど、テストの主流はTutorialで使用しているMinitestではなくRSpecというものらしい。

参考にさせていただきました↓

RSpecとMinitest、使うならどっち?

では導入をば。


Gemfile

group :development, :test do

+ gem 'rspec-rails'
end


bash

$ bundle install

$ rails g rspec:install


.rspec

--require spec_helper

--format documentation


bash

$ rails spec



  1. Gemfileからrspec-railsを導入する。

  2. インストール。必要なファイルも生成する。

  3. テストの表示をドキュメント形式に。

  4. テストが動くかとりあえずテスト。

ここまでできたらひとまず導入完了。

大いに助かりました↓

RailsでRSpecテストを実行するまで


TutorialのテストをRSpecで確認する

StaticPagesコントローラを生成しビューを整える。

(手順は同じです。Tutorial3章をご覧ください。)

すると初めてのテストにたどり着く。

Tutorialと自動生成されたテストに違いがあるので確認する。

(一部改変)


static_pages_controller_test.rb(Minitest:Tutorial)

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

test "should get home" do
get static_pages_home_url
assert_response :success
end

test "should get about" do
get static_pages_about_url
assert_response :success
end
end



static_pages_controller_spec.rb(RSpec:ポートフォリオ)

require 'rails_helper'

RSpec.describe StaticPagesController, type: :controller do

describe "GET #home" do
it "returns http success" do
get :home
expect(response).to have_http_status(:success)
end
end

describe "GET #about" do
it "returns http success" do
get :about
expect(response).to have_http_status(:success)
end
end
end


RSpecの構文についてはこちらが参考になります↓

使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」

ここで簡単に各Rspecの種類を確認する。


  • 単体テスト → Model/Controller/ specなど

  • 統合テスト → Request spec

  • ブラウザテスト → System spec(Feature specは非推奨)

このあたりのRSpecに対する理解を助けてくれます↓

Ruby on Rails のテストフレームワーク RSpec 事始め


full_titleヘルパーのテスト


Helper specでのテスト

続いて動的なタイトルを生成するfull_titleヘルパーのテストを追加する。

Tutorial 4.1.2 カスタムヘルパーではこのテストをコントローラテスト内に書いている。

しかしヘルパーに依存するテストをController Specに書くことは好まれない。

参考になりました↓

Rails5でコントローラのテストをController specからRequest specに移行する

よってHelper specを生成する。


bash

$ rails g rspec:helper application



application_helper_spec.rb

require 'rails_helper'

RSpec.describe ApplicationHelper, type: :helper do

describe "#full_title" do
context "page_title is empty" do
it "removes symbol" do
expect(helper.full_title).to eq('Lantern Lantern')
end
end

context "page_title is not empty" do
before do
assign(:title, 'hoge')
end

it "returns title and application name where contains symbol" do
expect(helper.full_title).to eq('hoge | Lantern Lantern')
end
end
end
end


その後full_titleヘルパーを導入し動作したけど、テストは失敗。


bash

$ rails spec

# 中略
1) ApplicationHelper#full_title page_title is not empty returns title and application name where contains symbol
Failure/Error: expect(helper.full_title).to eq('hoge | Lantern Lantern')

expected: "hoge | Lantern Lantern"
got: "Lantern Lantern"


これだとassignで存在しないインスタンス変数titleに値'hoge'を入れている?

インスタンス変数を参照するヘルパーメソッドのSpecを書く

もっと単純に変更。


application_helper_spec.rb

require 'rails_helper'

RSpec.describe ApplicationHelper, type: :helper do

describe "#full_title" do
context "page_title is empty" do
it "removes symbol" do
expect(helper.full_title).to eq('Lantern Lantern')
end
end

context "page_title is not empty" do
it "returns title and application name where contains symbol" do
expect(helper.full_title('hoge')).to eq('hoge | Lantern Lantern')
end
end
end
end


テストグリーン。

(full_titleヘルパー確認のためaboutアクションを追加しています。)

動的なタイトルのヘルパーの書き方↓

Ruby on Rails 5の上手な使い方 現場のエンジニアが教えるRailsアプリケーション開発の実践手法


Request specでのテスト

ヘルパーの正しい動作が確認できたら、実際のアプリのリンク先でも正しく表示されているか確認してみる。

そのためにはRequest specを使用する。

<追記>

ここのテストはSystem specのsite_layout_spec.rbに移行しました。

System specを使用するにはセットアップが必要です。

詳しくは#4 System spec導入編をご覧ください。

ここにセットアップ後のテストコードのみ載せます。


spec/systems/site_layout_spec.rb

require 'rails_helper'

RSpec.describe "SiteLayouts", type: :system do

describe "home layout" do
it "returns title with 'Lantern Lantern'" do
visit root_path
expect(page).to have_title 'Lantern Lantern'
end
end

describe "about layout" do
it "returns title with 'About | Lantern Lantern'" do
visit about_path
expect(page).to have_title 'About | Lantern Lantern'
end
end
end


(full_titleヘルパー確認のためaboutアクションを追加しています。)

あとはコミット&マージ&プッシュ&デプロイして寝よう。

気づけば3章から始まったTutorialは4章を終えていた。

おそらく次回はBootstrapでRailsと揉めるだろう:blush:


追記

[2019年8月16日]

内容改編しました。

内容改編のため、2019年8月14日更新分は削除しました。

前回:#1 準備編

次回:#3 Bootstrap4, jQueryプラグイン導入編