Testing our JavaScript Functionality

Testing the functionality

Now that we have application-level functionality in JavaScript code, we are going to need to put tests in place to ensure that the function not only works as intended but continues to work as we make changes to the application.

Testing this functionality involves a lot of steps. We have to visit the store, select an item, add that item to the cart, click checkout, fill in a few fields, and select a payment type. From a testing perspective, we are also going to need both a Rails server and a browser.

To accomplish this, Rails makes use of a version of the popular Google Chrome web browser named ChromeDriver, which has been augmented to include programming interfaces to enable automation, and Capybara, which is a tool that drives this automation.

Tests that pull together a complete and integrated version of the software are called system tests, which is exactly what we will be doing. We will be testing a full end-to-end scenario with a web browser, web server, our application, and a database.

Automated generation of tests

When we created scaffolds in previous chapters, Rails created system tests for us that performed basic checks. Let’s run those now to make sure they are passing and that system testing is working. If you are using a virtual machine, you will need to make one change before running the tests. Edit test/application_system_test_case.rb and change :chrome to :headless_chrome so that the system tests use a browser that doesn’t need to pop up on the screen, like so: