Actions

[00:00:00]
>> So just a couple more add ons that we're gonna use, these ones are pretty quick, they're not gonna be as heavy duty. So the first one is actions, and actions are gonna allow you to simulate different events in your UI. So we have buttons, let's go ahead and add a couple of options to those.

[00:00:16]
Inside main.js you can see add on actions is actually already installed with storybook so that's really good we don't need to add that. What we can do now let's go into our Button Stories and on Primary button first of all first we need to import it or else it's not gonna work.

[00:00:31]
So import { action } from "@storybook" also if you're getting errors make sure all your story books haven't at sign before them, I did make that mistake already. And it's going to import from add on actions with an S, And, now we can actually go and simulate a click, so unclick.

[00:00:55]
Let's simulate an action and let's say let's simulate a button click a button, click [LAUGH] a button click, Okay? So on our primary button, anytime you click it, lets simulate that, And if you look down here, we've got our little Actions panel, and if you click our primary button, we can simulate those clicks.

[00:01:15]
There's not much going on in here, it's simulating a DOM event, but you can use this to test the functionality of your different components. So like if you have a text field for example, with an on change that actually validates the data being passed in you can do that.

[00:01:29]
Like if you have the error state depicted as a red border, this is a great way to check that.