【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은 개발자 도구에서 확인할 수 있습니다.)


이번에는 2개의 테스트를 실시하고 있습니다.

첫 번째는 이미지가 업로드되면 컨트롤러에 지정된 리디렉션 대상에 이미지 데이터가 있는지 확인하는 것입니다.
have_selector를 사용하여 img 태그의 src 속성에 test.jpg 이미지 데이터가 포함되어 있는지 확인합니다.

둘째로 하는 일은 거의 같습니다. 같은 이미지가 게시 세부 정보 페이지에서도 사용되므로 게시 세부 정보 페이지로 이동하여 have_selector를 사용하여 img 태그의 src 속성에 test.jpg 이미지 데이터가 포함되어 있는지 확인합니다.

끝까지 읽어 주셔서 감사합니다!

매일 학습한 것을 출력하고 있습니다! ! 감상이나 지적 있으면 댓글 주시면 기쁩니다! !