Manipulate Story State with Play Functions and Testing Library Events

[00:00] Let's build stories for the page component that utilize user events. Start by creating a new component story file. And this page dot stories dot js. Start by importing the page component, then export default, and supply that page component [00:20] as the component in component meta. And finally, write a story. Export const. We'll call this story logged out because that's the default state of our page component. Save and refresh and we should see this in the tree. Here we go. We can interact with this page component by clicking the buttons. When we [00:39] click log in, we we get this logged in state. We can log out again, etcetera. But when we open the add ons panel, we see that there aren't any controls for manipulating this state. So anytime we navigate away and come back, we'll see this logged out state. Now if you've been testing UI as long as I have, [00:59] you know that getting your page into a state to verify it or test it is a recipe for bugs. Fortunately, Storybook has a way to simulate user events. So let's say that we want to create a logged in story. We don't have props, but we can use user events by providing a play function. It's a lot of code, so I'm gonna [01:19] paste it in and we'll talk about it. Play functions give us a way to interact with the stories that we render. They all start with an async function, they take context from Storybook, and inside of the body we can use testing library functions like within, get by role, and user event click to set up our [01:39] story. Storybook makes these all available through the at storybook test package. Now everything's set up to use a play function to create a story from a login button press. Let's save it and check it out. Visit the logged in story and here we are in our logged in state. In the add ons panel, we'll [01:59] see one interaction which is our user event click. We can use the step through controls to go back to the beginning where we have not interacted with components and play through each event. Storybook test also includes an expect function, which we can use to make assertions about the new state of the DOM. Here, I'm looking for a resulting [02:20] log out button and ensuring that that is inside the document. Hit save and we see this inside of our interactions panel. Storybook Play functions make it really easy to test simple interactions like this or complex user workflows. It's an incredible way to bring your UI narratives to life and protect real world user [02:39] experiences.