Codecast: Getting Started with Rails 7 27: Add a Stimulus Controller for Client-Side Interaction
Channel: Stateless Code
Date: 2022-03-04

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.

This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE.  Stateless Code denies the concept of "intellectual property". Copying is not stealing.