Storybook Test Runner

[00:00:00]
>> All right, this testing is so super cool, right? Has one problem. When do my tests run? When I look at them. Which is the age old philosophical question. [LAUGH] If you write tests and you don't look at them, do they ever run? And so that's all great and wonderful, but it'd be great if we could also run through all the tests, right, and CI/CD and stuff like that.

[00:00:22]
Cuz ain't nobody going there and clicking on every single story to make sure you didn't mess something up. So that is an easily solved problem. I forget if it's installed in this repo, but one can do an npm. Let's do this in my slightly bigger terminal for those watching on smaller screens.

[00:00:45]
We can do npm install -d@storybook/test runner. Might already be installed in the script, but I forget. I was using npm just mostly cuz I use it every day. All right, it looks like it was already in there. So maybe that was my issue. We've already got test runner present in this repo, but if one didn't, one could theoretically install it like that with our favorite package manager.

[00:01:15]
I heard some people are using yarn. I use pm pm, we live in a world where there's four different package managers for JavaScript. I have muscle memory, so I stuck with what I was least likely to screw up. I don't really care. We used some features of it, whatever.

[00:01:33]
So the test runner goes to the browser and clicks stuff. So it does use Playwright. If you have never run it on a given project, you do need to do an npx playwright install, and that will download all the various browsers that Playwright uses, so on and so forth.

[00:01:57]
This is not my first time in this repo. As you can imagine, I have it installed already. And then you can either create a npm script in your package JSON, or you can do npx test-storybook. And that will do what you think it's doing, except for my failing test for the stupid.

[00:02:21]
Again, the system works theoretically for my stupid ring in there. But what it will do is also the console logs are a bit much. So let's go handle that at least. I have a little bit of self respect. I know where that one is. Here it is. And let's get rid of that one known failing test for a hot minute.

[00:02:49]
Cuz that's how you solve failing tests, right? You just delete them, [LAUGH], obviously. So you can see it'll run through, basically, all of the play functions that you have. And again, those could be tested expectations. They could also just be like, you'll click on this thing. If all of a sudden it's not there anymore, that test will fail, right?

[00:03:13]
And so you can run this in CI/CD. Either I link to it in the course website, but also there's a Github action, you copy, you paste it in there. And so you can run through all these tests. And this is gonna be useful because we can also use it for accessibility audits and other things like that.

[00:03:27]
But it basically will run through every test, put it in your CI/CD, stop thinking about it. But also being able to do in the browser is nice when you're debugging. So both are good. Use both, it's great. Life is good.