【rails】RSpecを用いた統合テスト

フューチャスペックを利用して、ブラウザ上の操作を再現し、期待する動作が行われることを確認する統合テストを行う。

フューチャスペック

RSpecを使って統合テストを行うためのスペック。
テスト環境の仮装ブラウザを操作し、ボタンを押したときの挙動をテストできる。

gem Capybaraを導入し、フィーチャスペックを書く。

capybara

ブラウザの操作を再現するのに必要なgem。
特定の要素をクリックした利、フォームから値を入力したり、表示状態を確認したりできる。

準備

capybaraを導入する

Gemfile

group :test, :development do 
  gem 'capybara'
end

terminal

bundle install

spec/rails_helper.rb

require 'capybara/rspec' #追記

テスト対象のビューにIDを付加

app/views/tweets/_form.html.erb

<%= form.text_field :image, placeholder: "Image Url", id: "image" %>
<%= form.text_area :text, placeholder: "text" , rows: "10", id: "text" %>
<%= form.submit "SEND" %>

フォルダspec/featuresを作成する。
ファイルspec/features/tweet_spec.rbを作成する。

テストコード

を書く。

spec/features/tweet_spec.rb

require 'rails_helper'

feature 'tweet', type: :feature do
  let(:user) { create(:user) }
  scenario 'ユーザー情報が更新されていること' do
    #ログイン前には投稿ボタンがない
    visit root_path
    # 投稿ボタンがないことを確認
    expect(page).to have_no_content('投稿する')

    # ログイン処理
    # ログインフォームのあるページに移動する
    visit new_user_session_path
    # emailを入力する
    fill_in 'user_email', with: user.email
    # パスワードを入力する
    fill_in 'user_password', with: user.password
    # ログインボタンをおす
    find('input[name="commit"]').click
    expect(current_path).to eq root_path
    expect(page).to have_content('投稿する')

    # ツイートの投稿
    expect {
      click_link('投稿する')
      expect(current_path).to eq new_tweet_path
      fill_in 'image', with: 'https://s.eximg.jp/expub/feed/Papimami/2016/Papimami_83279/Papimami_83279_1.png'
      fill_in 'text', with: 'フューチャースペックのテスト'
      find('input[type="submit"]').click
    }.to change(Tweet, :count).by(1)
  end
end

visitメソッド

引数にURLまたはプレフィックスを指定することで、そのページに移動することができる。

example

# "/tweets"に移動する
visit("/tweets")

# tweet_pathに移動する
visit tweet_path

click_onメソッド

HTML要素をクリックすることができる。
引数にHTML要素のvalue属性を指定する。

fill_inメソッド

第一引数にHTMLのIDを、第二引数に　with：入力値をとることで、指定したフォームに値が入力される。
find('input[name="commit"]').clickでログインボタンのクリックを再現する。

example

# <input type="submit" name="commit" value="こんにちは">という要素をクリック
click_on("こんにちは")

# <a href="/users/new">会員登録する</a>という要素をクリック
click_on("会員登録する")

フィーチャスペックの特製

・記法が単体テストと異なる

フィーチャスペック	単体テスト
scenario	it
background	before
feature	describe
given	let

・複数のexpectが同一テスト内に記述される。
１つの動作の結果として、期待する複数のexpectがある場合は、その通り書く。

テスト

terminal

$ bundle exec rspec spec/features/tweet_spec.rb
2020-05-17 12:00:08 WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead.

tweet
  ユーザー情報が更新されていること

Finished in 0.43572 seconds (files took 1.54 seconds to load)
1 example, 0 failures

期待する通り動作することが確認できた。