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

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

[ゼロから10分でブログが作れる！Rails 6の新機能「Action Text」を試してみた](https://tech.libinc.co.jp/entry/rails6_action_text)

## ことの発端
早速試してみようと、以前練習で作成していたRailsチュートリアルのリポジトリを使いまわしてMicropostのcontentの箇所に導入してみました。
<img width="680" alt="スクリーンショット 2019-08-24 22.03.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473251/c55e34c6-ff2f-7511-b47f-fbc4df1b13b8.png">
上手くいっているようですね。
では、念の為テストをしておきましょう。ちなみにこのリポジトリではテストを`mini test`から`RSpec`に変更して実行していました。
Micropostのテキストエリアをかっこ良くしただけだし、別に問題ないよね？。。と高をくくっていたのですが。。。

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

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

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

```ruby: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が認識できなくなってしまったんですね。。。
<img width="758" alt="スクリーンショット 2019-08-24 22.17.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473251/34714f53-8296-0d25-6d01-65278133c84d.png">

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

https://edgeapi.rubyonrails.org/classes/ActionText/SystemTestHelper.html#method-i-fill_in_rich_text_area

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

```ruby: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
```

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

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

```ruby: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
```

いけましたね！！