[Rails] Test involving JavaScript

Introduction

In the test with Capybara, if you want to process JavaScript to work, you need to change the setting a little. This time, as a simple example, let's test the process of changing the text when clicked.

The rails version is using 5.2.3.

Setting

First of all, you need to install Capybara, but if you do not understand, please refer to the this article that I wrote in the past.

Then add it to the helper file.

spec_helper.rb

#Add to last line
ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
Capybara.javascript_driver = :selenium_chrome_headless

• For some reason, using webkit for javascript_driver didn't work ... If you are familiar with it, please comment.

Test file

Prepare the file under spec / features.

sample_spec.rb

require 'rails_helper'

feature 'post', type: :feature do

  scenario 'js works', js: true do
    #There is a click display
    visit root_path
    expect(page).to have_content('click')

    #Click the click character and it will be OK
    find('.js-class').click
    expect(page).to have_text("OK")
  end
end

If you want js to work, you need to add js: true to the scenario line as described above.

Just in case, I also put the view file and js file. (I use Haml and jQuery)

haml:index.html.haml

.header
  = link_to "top page", root_path
.js-class
click

sample.js

$(function(){
  $(".js-class").on("click", function() {
    $(this).text("OK");
  })
})

Test run

All you have to do is run it from the terminal.

Terminal

$ bundle exec rspec spec/features/sample_spec.rb