All right, you are in for a treat. If you haven't seen pest version four's, browser testing stuff, your mind is gonna be blown. Um, and livewire four ships with support for it so that you can easily write browser tests for your livewire components and know that if your test passes something actually opened a browser and type stuff in and hit submit and it's in the database and it doesn't get any more confident than that.

and it's in the database and it doesn't get any more confident than that. Uh, so let's take a look. This is our unit test and we're gonna convert this to a browser test. But first you have to install pests browser testing features, and you do that. Uh, I have a little guide on the live wire documentation under testing. Uh, so we're gonna do that. We're gonna composer require

wire documentation under testing. Uh, so we're gonna do that. We're gonna composer require pest, uh, plugin browser, and that's the PHP part. And now the JavaScript part. So under the Hood Pest is using playwright. It's a fantastic JavaScript testing utility. We use it for flux. So we're gonna install playwright into our app. This normally takes like a minute. I already did it on this computer,

This normally takes like a minute. I already did it on this computer, but it'll take a little bit to download like, you know, Chrome and everything. Okay, so that stuff's installed and we're ready to go now. We can just test and how you test browser stuff is that basically instead of test you type visit, and now you're in pest browser land. So all this stuff's not gonna work, so that's not gonna work.

So all this stuff's not gonna work, so that's not gonna work. Call assert redirect, none of that's gonna work. You're now using Pest assertion. So I link to that right here. Pest has an entire docs page that has all sorts of info about browser testing and all of the assertions you can make and all of the things you can do type and click and scroll and things like that.

and all of the things you can do type and click and scroll and things like that. Um, so let's go back here and we'll open up the components so that we can see it over here. And we're gonna start, uh, doing some things. So instead of setting title, we're now gonna type into title, but what is title? That's, that's a property name. We need to type into an element.

That's, that's a property name. We need to type into an element. So you can do things like data test equals title, and then put the data attribute on the element. And that's fine. But what I like to do in Livewire is say wire model title, because I already have wire model for one specific element on the page. So let's just use that so we don't muddy up our component with data test attributes everywhere.

So let's just use that so we don't muddy up our component with data test attributes everywhere. So wire model title, test title, and then this one is gonna be test content. Okay? And then instead of call save, we're now just pressing a button. So we say call save or press save the button. And assert, redirect does not exist in PEs uh, pests assertions instead it's assert path is, so you're just asserting the state of the URL bar.

pests assertions instead it's assert path is, so you're just asserting the state of the URL bar. So we say press save and assert that the path is the root path. Okay, so we did that and let's see if we can one shot it. I'm gonna run this test file and it passed and it was so fast, you almost don't believe it. It took 0.76 seconds to boot up an entire browser, do all that stuff and assert it all and then close it back down. That's crazy to me.

that stuff and assert it all and then close it back down. That's crazy to me. If you've ever tried any other browser testing thing before, you know it's, they're great, but they're, they're more involved in this and slower and harder to manage. So that's pretty great. But like I said, I, I don't even believe that it worked, you know, so how do we actually see that browser page? Well, there's a few things we can do.

how do we actually see that browser page? Well, there's a few things we can do. One is inside pest, we can use their headed. Uh, it's a little utility. So if I look for debugging tests, there's a little thing called headed. It tells you to put it in pest PHP. And now instead of a headless browser, which is what it is right now, a browser running in your computer's mind and not showing your face at all.

what it is right now, a browser running in your computer's mind and not showing your face at all. So pest browser headed, and now all our tests are gonna run in headed mode. We'll actually see the browser as it does its thing. So let's try this again. And now a browser window pops up. So you saw it for a second, but then it just disappeared 'cause it was too fast. So we can make it slower, actually see it by using debug. So you can drop debug in any pest test

So we can make it slower, actually see it by using debug. So you can drop debug in any pest test and it's gonna pause execution and open the browser window for you so that you can manipulate anything you want, which is incredibly useful. So you have some error in a test. You don't know why you add debug, you open it up, you look in your console, you do whatever you gotta do. You interact with the page,

you look in your console, you do whatever you gotta do. You interact with the page, you test stuff, validation works. Okay? So debug is awesome. Here's something surprising that just happened when I loaded this page. It had no CSS styles at all. No sidebar even like, what's up with that? And if you think about it, If you think about it, what we're actually specifying the test

And if you think about it, If you think about it, what we're actually specifying the test to test is the component itself, not the whole page. So this is useful for isolated browser tests, for individual components. Um, but again, sometimes maybe you want to test the entire page, you want the styles in your test, and in those cases you can just drop down to normal pest. So pest has this visit function and it's just available to you.

So pest has this visit function and it's just available to you. And instead of testing a live wire component by name, you test an endpoint like post slash Create. And now we run this test and you'll see all the styles. Well, it also said no test found. Let me show you. It's just gonna show up for a second. You ready? And did you see it? It had the sidebar, it had everything else. That's really nice. So that's an

It had the sidebar, it had everything else. That's really nice. So that's an important thing to be aware of. Um, but yeah, browser testing and pest is incredible. V four, you know, has, uh, utilities for it. And yeah, we're, we're sitting pretty here, so I got one more testing thing to show you. I'll see you in the next video.