LoginSignup
5

More than 3 years have passed since last update.

【Rails】JavaScriptが絡むテスト

Posted at

はじめに

Capybaraでのテストで、JavaScriptが作動する処理をする場合には少し設定を変える必要があります。
今回は簡単な例としてクリックするとテキストが変わる処理についてテストしてみます。

36a2e16cd12c7ebb3b25be633051a96a.gif
railsのバージョンは5.2.3を使用しています。

設定

まずはCapybaraを導入する必要がありますが、わからない方は過去に書いたこちらの記事を参照してください。

続いてhelperファイルに追記します。

spec_helper.rb
# 最後の行に追加
ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
Capybara.javascript_driver = :selenium_chrome_headless

※ なぜかjavascript_driverにwebkitを使うとうまくいきませんでした…
 詳しい方いたらコメントいただけると助かります。

テストファイル

spec/featuresの下にファイルを用意します。

sample_spec.rb
require 'rails_helper'

feature 'post', type: :feature do

  scenario 'jsが動作すること', js: true do
    # クリックの表示が存在する
    visit root_path
    expect(page).to have_content('クリック')

    # クリックの文字をクリックするとOKになる
    find('.js-class').click
    expect(page).to have_text("OK")
  end
end

jsを動作させたい場合は上述のようにscenarioの行にjs: trueを追記する必要があります。

念のためviewファイルとjsファイルも載せておきます。
(HamlとjQueryを使ってます)

index.html.haml
.header
  = link_to "トップページ", root_path
.js-class
  クリック
sample.js
$(function(){
  $(".js-class").on("click", function() {
    $(this).text("OK");
  })
})

テスト実行

あとはターミナルから実行するだけです。

ターミナル
$ bundle exec rspec spec/features/sample_spec.rb

fcbc5bed345b38c37a9394684c68513a.png
うまくテストが通ってます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5