Analyze How Components Respond to Fixed Events with the Interactions Addon
The Storybook Interactions Addon can reliably replay user events atop your components, putting them into states that props alone can’t.
This is great for collecting and debugging user flows.
Page/Logged Out story in the code editor and Storybook UI.
Click the Shortcuts cog to ensure that the Addons Panel is visible. Finally, focus the Controls Addon.
Note that the Interactions panel is empty for this LoggedOut story. [Point to the story code]
Now look at the
Page/Logged In story.
First we see that the user is logged in. But how did it get into that state?
The Interecations panel tells us exactly how. And we can replay all of the interaction events that created it.
[Replay the events]
- Jump back to the beginning.
- We start in the logged out state of this page component.
expectto see a
Logged Inbutton in the document.
- We then simulate a click.
- Which puts us in the Logged in state.
- Where we
expectnot to see a
- And, instead,
expectto see a logged out button in the document.
Let’s take peak the code.
LoggedOutstory renders without any arguments.
- But the
LoggedInstory defines an async play function.
- This is what’s responsible for running our interactions.
- First, we set up our canvas using and query an element.
- We can state expectations on those elements.
- We interact with them.
- And that produces the visual state of the story!
Play functions can include complex sequences like clicking a button, entering text, or submitting a form. Making it possible to setup stories for any possible code state!