【Rails6】Action TextでRSpecのエラーが出たときにすること

Action Text とは？

Rails6でAction Textという素晴らしい機能が追加されました！
詳細と導入は下記の記事を見ていただければ良いのですが、端的に言うとWordとかブログ書く時みたいにボタン1つで簡単に文字の大きさ変更やファイルの添付などができちゃう優れものです。（個人的にはQiitaとかで採用されているMarkdown方式より好きです）

ゼロから10分でブログが作れる！Rails 6の新機能「Action Text」を試してみた

ことの発端

早速試してみようと、以前練習で作成していたRailsチュートリアルのリポジトリを使いまわしてMicropostのcontentの箇所に導入してみました。

上手くいっているようですね。
では、念の為テストをしておきましょう。ちなみにこのリポジトリではテストをmini testからRSpecに変更して実行していました。
Micropostのテキストエリアをかっこ良くしただけだし、別に問題ないよね？。。と高をくくっていたのですが。。。

Failure/Error: fill_in "micropost_content", with: "content"

 Capybara::ElementNotFound:
　　Unable to find field "micropost_content" that is not disabled

想定していたところでバッチリエラーが出てしまいました。ちなみにソースコードは以下のようになっています。

spec/system/micropost_interface_spec.rb

require "rails_helper"

RSpec.describe "MicropostsInterfaceTest", type: :system, js: true do
  describe "micropostのUIをテストする" do

  ##省略

    context "有効なmicropostを送信した場合" do
      before {
        fill_in "micropost_content", with: "content"
        attach_file "micropost_picture", "#{Rails.root}/spec/factories/rails.png"
        click_button "Post"
      }
      it "投稿できること" do
        expect(current_path).to eq root_path
        expect(page).to have_content content
        expect(page).to have_css ".picture"
      end
    end
  end
end

コンソールで調べてみると、なるほど。そもそもテキストエリアじゃなくなってしまったからCapybaraが認識できなくなってしまったんですね。。。

解決方法

というわけで解決策を探してみたところ、ちょうど探していた情報を見つけました。

以下のようにファイルを追加してから、fill_in の代わりに fill_in_rich_text_area を使えばいけるようです。

spec/support/action_text_helper.rb

module ActionTextHelper
  def fill_in_rich_text_area(locator = nil, with:)
    find(:rich_text_area, locator).execute_script("this.editor.loadHTML(arguments[0])", with.to_s)
  end
end


Capybara.add_selector :rich_text_area do
  label "rich-text area"
  xpath do |locator|
    if locator.nil?
      XPath.descendant(:"trix-editor")
    else
      input_located_by_name = XPath.anywhere(:input).where(XPath.attr(:name) == locator).attr(:id)

      XPath.descendant(:"trix-editor").where \
        XPath.attr(:id).equals(locator) |
        XPath.attr(:placeholder).equals(locator) |
        XPath.attr(:"aria-label").equals(locator) |
        XPath.attr(:input).equals(input_located_by_name)
    end
  end
end

spec/rails_helper.rb

RSpec.configure do |config|
  #以下の記述をこのブロック内の適当なところに入れてください。
  config.include ActionTextHelper, type: :system
end

ではspecファイルを以下のように編集しましょう！

spec/system/micropost_interface_spec.rb

require "rails_helper"

RSpec.describe "MicropostsInterfaceTest", type: :system, js: true do
  describe "micropostのUIをテストする" do

  ##省略

    context "有効なmicropostを送信した場合" do
      before {
        #ここ↓を修正
        fill_in_rich_text_area "micropost_content", with: "content"
        attach_file "micropost_picture", "#{Rails.root}/spec/factories/rails.png"
        click_button "Post"
      }
      it "投稿できること" do
        expect(current_path).to eq root_path
        expect(page).to have_content content
        expect(page).to have_css ".picture"
      end
    end
  end
end

改めてテスト結果です。

Finished in 18.57 seconds (files took 0.44536 seconds to load)
1 examples, 0 failures

いけましたね！！