Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@Kiyo_Karl2

【RSpec】プロフィール画像のアップロードのテストを書いてみました。

現在個人開発しているRailsアプリにはユーザーがプロフィール画像を設定できる機能があります。今回はその機能がちゃんと正しく機能しているかテストを書いてみたので、良ければ参考にしてみてください!

【環境】

  • windows10 Pro
  • Rails: 6.0.3.2
  • ruby: 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux]
  • Docker for windows
  • RSpec 3.9

テストコード

システムスペックでテストを行っております。

spec/system/upload_avatar_spec.rb

require 'rails_helper'

RSpec.describe'UploadImage', type: :system do
  let(:user) { FactoryBot.create(:user) }
  let(:item) { FactoryBot.create(:item, user_id: user.id) }

  #画像をアップロードして保存する
  def upload_user_avatar(user)
    valid_login(user)
    visit edit_user_path(user)
    attach_file 'user_avatar', "#{Rails.root}/spec/fixtures/images/test.jpg"
    click_on '保存する'
  end

  it 'user successfully upload image user#show' do
    upload_user_avatar(user)
    expect(page).to have_selector("img[src$='test.jpg']")
  end

  it 'user successfully upload image on item#show' do
    upload_user_avatar(user)
    visit item_path(item)
    expect(page).to have_selector("img[src$='test.jpg']")
  end
end

valid_loginメソッドはspec/support/login_support.rbに定義してます。
このフォルダに定義したメソッドはテスト時に呼び出すことができます。
私のアプリではログインした状態じゃないと、edit_user_pathにアクセスできないようになっているため、このコードを書いています。書かないと失敗します。(失敗しないといけない)

spec/support/login_support.rb

module LoginSupport
  def valid_login(user)
    visit root_path
    click_link 'ログイン'
    fill_in 'session[email]', with: user.email
    fill_in 'session[password]', with: user.password
    click_button 'ログイン'
  end
end

順番に解説していきます。
まず、FactoryBotでuserとitemのテストデータを生成します。
(あらかじめspec/factries/にテストデータを定義する必要があります。ここでは割愛させていただきます。)

画像をアップロードするという行為はどのブロックでも共通して行われるので、upload_user_avatarメソッドとしてまとめて定義してます。
このメソッドでは、ログインしてユーザーの編集ページにいき、attach_fileメソッドを使いテスト用の画像データをアップロードして保存しています。
あらかじめ/spec/fixtures/images/にテスト画像を用意する必要があります。
また、attach_fileメソッドの引数には f.file_fieldで生成されるinputタグのidを指定したらうまくいきました!(画像参照ください。生成されるHTMLはデベロッパツールから確認できます。)
スクリーンショット 2020-10-05 231134.png

今回は2つのテストを行っております。

1つ目は、画像がアップロードされたら、コントローラで指定されたリダイレクト先に画像データがあるか調べています。
have_selectorを使い、imgタグのsrc属性にtest.jpgの画像データが入っているか調べています。

2つ目もやっていることはほぼ同じです。同じ画像が投稿詳細ページでも使われているので、投稿詳細ページに移動して、have_selectorを使い、imgタグのsrc属性にtest.jpgの画像データが入っているか調べています。

最後まで読んでいただきありがとうございます!

日々学習したことをアウトプットしてます!!感想やご指摘ありましたらコメントいただけると嬉しいです!!

5
Help us understand the problem. What is going on with this article?
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
Kiyo_Karl2
11歳でポケモンのWebサービス作ろうとプログラミングを始めるもあまりの難しさに挫折→16年の時を経て、去年の2月に突然スイッチが入りプログラミングを再開→退職してフリーターになり、プログラミング学習にフルコミット→昨年12月にWeb系エンジニアへ転職成功 アウトプットの場として日々学習したことや感じたことを投稿してます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?