Capture Interactions with Actions Addon

[00:00] We all do our fair share of console dot log debugging. We're just to make sure that the interface works, we'll log some kind of data, fiddle with our components, and check to make sure that something logged. This is great until you accidentally or inadvertently commit these to your code base, but they're not terribly [00:19] inclusive of the rest of your team because you have to open them in the Chrome Dev Tools. Let's use storybook actions to persist some spies on top of these components. In component meta, add an arg types option. This takes an object where we'll define on click as a property of interest, defining an object [00:39] for when that action happens logging some type of message. So we'll use on click fired. Now as I click this button we see these actions logged to the actions panel in Storybook and they don't require opening the dev tools. And because they're defined on stories instead of our code, our [00:59] codebase is nicely insulated from this demo code. Let's add actions to our header component. We don't have a stories file yet so let's add that. Header.stories.js. We have to do three things to make this work. First we need to import our header from our relative path [01:19] header component. Export default component meta. Copilot's given us a hand here and the event that we wanna check is actually on login. Now we have a valid component, but we need to add stories. Export a new story, we'll call this on logged out is our default state [01:39] and use a default object with no args. With our arg types set up we should see on login fired every time we click this button, which we do. Now what happens if we hit the sign up button? Well, we see this on create account event. We didn't set anything up for that here [01:58] specifically on our component, but by default Storybook has a configuration that captures any on prefixed events. This exists in the dot storybook/preview module. Here you'll find actions with a regex type that looks for any on prefixed property interfaces [02:18] and logs those as events. If we want to turn this off we can comment it out or delete it, refresh and we will see that that event no longer logs. Well our component level action does log. With that in mind, we can explicitly handle this by observing the on create arc. [02:38] On create account fired. On login fired.