2015.04.12 2022.10.26

rspecでCKEditorのテスト

mmmuser

セブで英語を学びに行きましたが英語力が全然上がっていない前田です。

現在開発しているwebアプリケーションで、ckeditor gemを使用してCKEditorを実装しています。
そのfeatureテストを実装する際に、CapybaraでCKEditorのテキストフィールドに値を入力するテストで詰まってしまったので、どのように実装したか書いていきます。

適当にRailsアプリを作成し、featureテストを書いていきます。

用意したのはこんな画面です。

Capybaraを使って書くと普通はこんな感じで書いていきますよね。

require 'rails_helper'

describe Admin::BooksController, type: :feature do

  describe '#create' do
    scenario 'should create book', js: true do

      visit '/books/new'

      fill_in 'タイトル', with: 'タイトル'
      fill_in 'コンテンツ', with: 'コンテンツ'

      click_link 'Create Book'
    end
  end
end

ただし、fill_inメソッドは普通のフィールドやテキストエリアなどは文字を入力してくれますが、CKEditorを使用した部分は入力してくれません。

そこで、spec/support/配下に下記ファイルを準備し、specファイルからメソッドを使えるようにしました。

# Ckeditor
module Ckeditor
  def fill_in_ckeditor(locator, opts)
    content = opts.fetch(:with).to_json
    page.execute_script <<-SCRIPT
      CKEDITOR.instances['#{locator}'].setData(#{content});
      $('textarea##{locator}').text(#{content});
    SCRIPT
  end
end

spec/rails_helper.rbに下記一文を加えます。

~ 略 ~

 RSpec.configure do |config|
   include Ckeditor

~ 略 ~

そうすると、下記のようにfill_inメソッドのように使うことが出来ました。

require 'rails_helper'

describe Admin::BooksController, type: :feature do

  describe '#create' do
    scenario 'should create book', js: true do

      visit '/books/new'

      fill_in 'タイトル', with: 'タイトル'
      fill_in_ckeditor :book_content, with: 'コンテンツ'
      # :book_contentはckeditorが使用されているtextarea id

      click_link 'Create Book'
    end
  end
end

fill_in_ckeditorメソッドについては下記のStack Overflowページを参考にさせて頂きました。
How to fill ckeditor from capybara with webkit or selenium driver

今まではRailsでAPIを主に作成しておりましたので、画面操作には日々悪戦苦闘しております。
少しづつでも積み重ねていき、一日でも早くRailsマスターになりたいと思います。

Ruby on Railsを活用したWebサービスや業務システム開発をご検討の企業様は、是非MMMにご相談下さいませ！

#Ruby on Rails

AUTHOR