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
10
Help us understand the problem. What is going on with this article?
@tegnike

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

More than 1 year has passed since last update.

Action Text とは?

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

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

ことの発端

早速試してみようと、以前練習で作成していたRailsチュートリアルのリポジトリを使いまわしてMicropostのcontentの箇所に導入してみました。
スクリーンショット 2019-08-24 22.03.33.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

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

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が認識できなくなってしまったんですね。。。
スクリーンショット 2019-08-24 22.17.05.png

解決方法

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

以下のようにファイルを追加してから、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

いけましたね!!

10
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
tegnike
ポーランドでフルリモートエンジニア。使用言語はJava、Ruby on Rails。ゲームする感覚でプログラミングできるようになりたい。

Comments

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