So you’ve built a fascinating, interactive addition to your ActionText page. How do you test that interactivity?
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
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
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.
One comment on “Testing Tables in ActionText Using System Test”