Programming Journal

学習したことの整理用です。

【RSpec】画像の登録と表示についてテストする

実装したいこと

画像投稿機能について、前回実装した内容をテストしたい
画像選択の仕方と、画像の位置をどう判定するのか悩みました。

study-diary.hatenadiary.jp

前提

RSpecFactory Botは設定済みです。

Active Storageセットアップ

Active Storageのサービスはconfig/storage.ymlで宣言します。アプリケーションが使うサービスごとに、名前と必要な構成を指定します。

Active Storage の概要 - Railsガイド

# Diskサービスを使うと宣言(ローカルのディスクを使う)
test:
  service: Disk
  root: <%= Rails.root.join('tmp', 'storage') %>

他には、例えばAmazon S3サービスを使うと宣言することもできます。

System Spec

画像の選択は、attach_file 'article[eye_catch]', "#{Rails.root}/spec/fixtures/image/画像名.jpg"で指定します。
spec/fitures/imageに画像をセットしておきます。

expect(page).to have_selectorで画像の位置と画像が表示されているか判定します。

require 'rails_helper'

RSpec.describe "AdminArticlesEyecatches", type: :system do
  let!(:article) { create :article }
  let(:user) { create :user }

# 画像選択までは終えておく。
  before do
    login_as(user)
    visit articles_path
    attach_file 'article[eye_catch]', "#{Rails.root}/spec/fixtures/image/画像名.jpg"
  end

  describe 'アイキャッチ横幅調整機能' do
    context '横幅100〜700px(正常値)に指定した場合' do
      it '記事の更新に成功。プレビュー画面でアイキャッチが表示される' do
      (略)
        expect(page).to have_selector("img[src$='画像名.jpg']")
      end
    end

  describe 'アイキャッチ位置を変更' do
    context 'アイキャッチ位置を「左寄せ」に設定した場合' do
      it 'アイキャッチが左寄せで表示される' do
        choose '左寄せ'
  (略)
        expect(page).to have_selector('section.eye_catch.text-left')
      end
    end
  end
end

attach_file

#attach_file(locator = nil, paths, make_visible: nil, **options) ⇒ Capybara::Node::Element Find a descendant file field on the page and attach a file given its path.
Module: Capybara::Node::Actions — Documentation for jnicklas/capybara (master)

参考

Ruby on Rails のテストフレームワーク RSpec 事始め - Qiita