lessons/ storybook

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.

Open the 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]

Let’s take peak the code.

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!