Edited at

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


こんな人におすすめ


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

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

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

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

次回:#5 Model spec, Herokuエラー編


こんなことが分かる


  • System specの導入方法

  • System specの書き方

一緒に勉強しようねえ:bow:


どうやってTutorialのE2EテストをSystem specで行う!?

Tutorialの内容的にはだいたい5.3.4 リンクのテストあたり。

E2E/インテグレーションテストを行いたいが現状System specのジェネレータがないらしい。

手動で作成する。


bash

$ mkdir ./spec/systems/

$ touch ./spec/systems/site_layout_spec.rb

そういやSystem specに必要なChromeDriverを導入するchromedriver-helperがサポートを終了した!

代わりにwebdriversを使用してとのこと。

さらにwebdriversが入る場合、selenium-webdriverも要らないらしい。


Gemfile

group :test do

gem 'capybara', '>= 2.15'
- gem 'selenium-webdriver'
- gem 'chromedriver-helper'
+ gem 'webdrivers'
end


bash

$ bundle install


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

サポートが終了したchromedriver-helperからwebdrivers gemに移行する手順

【Rails】『RSpec + FactoryBot + Capybara + Webdrivers』の導入&初期設定からテストの書き方まで

とりあえず簡単なテストを書こう。

System spec(というかCapybara)のテストの書き方は使えるRSpec入門その4(筆者より省略)が大助かり。

今回のポートフォリオで使用するホーム画面のリンクは、


  • ロゴ画像とロゴテキストにroot_pathが2つ

  • 'はじめる'ボタンにsignup_pathが1つ

  • 'Login'ボタンにlogin_pathが1つ

なので、それらのリンクが存在するかのテストを行う。

(ポートフォリオのホーム画面については#3をご覧ください)

Tutorialとの差分も表示しておく。


spec/systems/site_layout_spec.rb(RSpec:ポートフォリオ)

require 'rails_helper'

RSpec.describe "SiteLayouts", type: :system do
describe "home layout" do
it "contains root link" do
visit root_path
expect(page).to have_link nil, href: root_path, count: 2
end

it "contains signup link" do
visit root_path
expect(page).to have_link 'はじめる', href: signup_path
end

it "contains login link" do
visit root_path
expect(page).to have_link 'Login', href: login_path
end
# 中略
end
end



test/integration/site_layout_test.rb(Minitest:Tutorial)

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


んでテスト開始しようと思ったら。。。


bash

$ rails spec

# 中略
Selenium::WebDriver::Error::UnknownError:
unknown error: cannot find Chrome binary

あれ?動作しない。

Chrome自体が入っていない??(と思ってどつぼにはまりました)

・・・

半日詰んだ。

そういやこの記事の追記部分まだ試してないぞ??

rspec-rails 3.7の新機能!System Specを使ってみた


rails_helper.rb

# 中略

RSpec.configure do |config|
# 中略
# 一番下の直前に追加
config.before(:each) do |example|
if example.metadata[:type] == :system
driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]
end
end
end


bash

$ rails spec


ようやくできた.....!!!!!

多分System specを使用する際は「ブラウザ使うよ〜」っていう宣言が必要っぽい?

(間違えてたらすみません:bow:

※ このテストでは実装していない"contains login link"のみ失敗しますのでご注意を。


次回:Userモデルの実装

忘れないうちにデプロイまで済ませよう。

次回からUserモデルを実装していく。

今回の書いたテストにも若干疑問は残る。

というのも毎回visitしているのが果たして正しいかが怪しい。

そういった記法はあるのかしら。できたら冗長なのでそっちを使用したい。


追記

[2019年8月16日]

内容改編しました。

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

次回:#5 Model spec, Herokuエラー編

<プチ追記>

(RSpec調べたとき大体解決策載せてくれてる@jnchito 様神様...!)