This is the 27th video in the Getting Started with Rails 7 series. In this video Mike adds an element with a Stimulus controller to allow for client-side interactions in the web application. Stimulus comes prepackaged in a new Rails application by default and integrates well with the “Rails Way” of building an application.

Because the interaction is client-side, we use the Rails ApplicationSystemTest case to test the functionality of the Stimulus controller using a browser.

This video covers:

• 00:00:10 Introduction to Stimulus
• 00:03:24 Resolve Dependabot alert by running bundle update
• 00:04:46 Create some HTML elements in the root route to which we will add a Stimulus controller
• 00:06:13 Examine the default hello_controller
• 00:08:01 Create an ApplicationSystemTestCase to test the WelcomeController Stimulus functionality and write failing test for our initial functionality
• 00:11:46 Add the data-controller attribute to the DOM element that contains the functionality and overwrite the default behavior
• 00:13:44 Define targets and add to the appropriate elements and modify tests. Populate initial state in connect() callback.
• 00:24:08 Add an action to the Get next quote button that replaces the two target elements with new text and makes the Reset button not disabled
• 00:28:33 Add action to the reset button that resets to initial state
• 00:30:57 Make the set of quotes an array and refactor out a method for repeated determination of button states and number of quotes remaining.
• 00:36:31 Make add new use cases to browser tests and add some helper test methods
• 00:43:06 Fix the agreement in the sentence when there is one quote left and troubleshoot error
• 00:49:18 Review changes. Commit and push code.

The code for this series is open source and available on GitHub. View the commit for this video (shared commit between this video and the previous video) here.