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
ApplicationSystemTestCaseto test theWelcomeControllerStimulus functionality and write failing test for our initial functionality - 00:11:46 Add the
data-controllerattribute 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 quotebutton that replaces the two target elements with new text and makes theResetbutton 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.