So you’ve built a fascinating, interactive addition to your ActionText page. How do you test that interactivity?

You can use System Test, a feature built into Rails to run apps and test them in a web browser. This simulates real usage, especially since the browser supports CSS and Javascript. Since the Rich Text Tables tutorial uses Javascript to install the button into the Trix editor, and uses a Stimulus controller to handle editing the table, testing Javascript and Rails interaction is necessary. System test uses Capybara internally, and is set up to use Selenium to click through pages and test the interactivity of page in a browser.

You may need to setup the test environment to run.

rails db:migrate RAILS_ENV=test
rails test

Create the system test. This is going to test adding a table to a post, so post_tables seems like a good name.

rails generate system_test post_tables

Run the test, and make sure all the dependencies, such as Chrome or Firefox are present.

rails test test/system/post_tables_test.rb

If everything goes well, a browser window should have popped up, and then closed without any issues.

Writing the test

System testing is an approximation for someone clicking through the app. It’s not going to replace a dedicated QA tester, who will put letters when the input asks for numbers, and will find every bug imaginable. System testing is going to give you confidence that nothing out of the ordinary breaks as you make changes.

This test was written by using byebug to pause the test, and let me look at elements on the page through the Chrome devtools.

The first part of the test loads the new_post_url, which has the Trix editor and Table interactivity.

test "Test table creation" do
  visit new_post_url

Since Javascript is available, the test will click the “Attach Table” button.

  click_on "Attach Table"

Next, test whether the table was loaded into the editor. This will be done by making sure the “Add Row” and “Add Column” buttons appeared, that a table element with an input field is present, and that an input field with a data-key exists matching the empty table.

  assert_text "Add Row"
  assert_text "Add Column"
  assert page.has_selector?('table tbody tr td input')
  assert page.has_selector?('input[data-key="0-0"]')

Next, test adding a column by clicking “Add Column” and verifying a new column is present in the input field:

  click_on "Add Column"
  assert page.has_selector?('input[data-key="0-1"]')

Test adding a row in a similar way:

  click_on "Add Row"
  assert page.has_selector?('input[data-key="1-0"]')

Test adding data and saving the data:

  fill_in "1-0", with: "Test entry"
  click_on "Create Post"
  assert_text "Test entry"
end

This test has now verified your Stimulus controllers load, and that the Javascript controllers interact correctly with the Rails controllers.

Peace of mind

System testing isn’t going to find bugs. But it will give you confidence as you make changes that you aren’t breaking functionality elsewhere in your app. It’s part of a well rounded Quality Assurance process, so you and your customers won’t worry about every change taking down your site.

Comments or Questions? Let me know how your experience went below.

You can see all the code on Github at https://github.com/OnRailsBlog/actiontext-table

Want To Learn More?

Try out some more of my Stimulus.js Tutorials.