Analyze How Components Respond to Fixed Events with the Interactions Addon

[00:00] The Storybook interactions add on can reliably replay user events atop your components, putting them into states that props alone couldn't. Let's jump to the page logged out story. Make sure that we see the add ons panel by clicking on the show add ons panel in the settings cog [00:20] and click the interactions pane. Here we have no interactions, just the base story for this entire page. When we click on logged in, we see a totally different story. We see 4 interactions that were played on top of this component. If we jump back to the beginning using [00:40] the debugger, we see that it starts in the same state as the logged out component with the login and sign up options. We can then play individual steps interacting with the document to generate changes. You may have even noticed that not all of these are events, but some of them are just expectations. [01:00] Let's open an editor to peep this code. Find the page stories where you'll find the logged out and logged in stories respectively. The logged out story for this page renders without any additional ARGs or interactions. However, the logged in story includes an asynchronous play function. This [01:20] function takes a canvas element and sets it up using testing library, finding the login button with a testing library query. Our first interaction is the expectation that this login button is in the document, followed by clicking that button and expecting that it is no longer in the document. We then query for a logged out button [01:40] and assert that it is in the document. Here we use Testing Library to create a queryable canvas. Once we have our elements, we can make assertions and interact with the document using Testing Library. So here we just assert that the login button is in the document. Next, we click that [02:00] button, putting it into a logged in state and assert that the login button is no longer there. Finally, querying for the logged out button and ensuring that it too is in the document now. Plate functions can include very complex sequences of events, making [02:19] them perfect for testing simple atomic components like text inputs and forms or validating user flows like login. They make it possible to create discrete component states even for components that don't have prop interfaces.