Help us understand the problem. What is going on with this article?

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

こんな人におすすめ

  • プログラミング初心者でポートフォリオの作り方が分からない
  • Rails Tutorialをやってみたが理解することが難しい

前回:#3 Bootstrap4, jQueryプラグイン導入編
次回:#5 Userモデル編

今回の流れ

  1. 完成のイメージを理解する
  2. System specを導入する
  3. トップページのブラウザテストを書く

※ この記事は、ポートフォリオを作る理由をweb系自社開発企業に転職するためとします。
※ 2020年3月30日、記事を大幅に更新しました。

完成のイメージを理解する

#3では、トップページを仕上げました。
今回は、トップページのブラウザテストを行います。
その際、System specを使うのでいくつか設定を変更します。
設定後、ブラウザテストの処理を書きます。

以上です。

System specを導入する

#2でちらっと紹介した、System specを導入します。
はじめに、必要なGemを追加します。

Gemfile
group :test do
  gem 'capybara', '>= 2.15'
- gem 'selenium-webdriver'
- gem 'chromedriver-helper'
+ gem 'webdrivers'
end
shell
$ bundle install

古い記事では、chromedriver-helperを追加するように書かれています。
しかしchromedriver-helperがサポート終了のため、webdriversを使います。
webdriversを使う際、selenium-webdriverも不要です。

次に、RSpecの設定を変更します。
これにより、ブラウザテストが機能します。

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

参考になりました↓
サポートが終了したchromedriver-helperからwebdrivers gemに移行する手順
【Rails】『RSpec + FactoryBot + Capybara + Webdrivers』の導入&初期設定からテストの書き方まで
rspec-rails 3.7の新機能!System Specを使ってみた

トップページのブラウザテストを書く

Rails Tutorial 5.3.4 リンクのテストにならって、テストを作ります。
まずはファイルを作ります。ジェネレーターがないので手動で作ります。

shell
$ mkdir ./spec/systems/
$ touch ./spec/systems/site_layout_spec.rb

テストする内容は以下の通りです。

  • ロゴ画像とロゴテキストに、root_pathのリンクが2つある
  • Loginボタンに、login_pathのリンクが1つある

ポートフォリオのトップページについては#3をご覧ください。
Rails 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 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=?]", login_path
  end
end

System specの構文がわからない方はこちらをご覧ください↓
使えるRSpec入門・その4「どんなブラウザ操作も自由自在!逆引きCapybara大辞典」

コードの記述は以上です。あとはテストを走らせます。
テストを走らせるには、以下のようにします。

shell
$ rails spec

無事テストが成功したら、今回は以上です。


前回:#3 Bootstrap4, jQueryプラグイン導入編
次回:#5 Userモデル編

aokyo17
rails tutorial → ポートフォリオing. 誰もが経験した初心びくびく20代1年目.. フォローはすぐ返したい厨。
https://komucha.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away