Creating Livewire Test 0:00Okay, let's go ahead and test our contact form component. So another awesome thing about Livewire is that it makes testing really easy. Let's go ahead and make a new test here. So let's say php artisan make test. Let's call it contact form test. And let's go into that. Contact form test. And the first test I usually write for Livewire tests is testing the existence of the actual component. So if you look at the docs here and scroll down, you'll see that we have testing component Asserting Component Presence 0:30component. So if you look at the docs here and scroll down, you'll see that we have testing component presence, and we have this assertion here that lets you do that. So just grab the page it's supposed to be on and check if it exists. So let's do that. So let's remove this and write a new one, say test. So let's say main page contains contact form Livewire component. And let's go ahead and grab the main page because that's where the component is supposed to live. So let's use get and say the main page, and we can do the assert C Livewire and then theto live. So let's use get and say the main page, and we can do the assert C Livewire and then the name of the components or contact form. Okay, let's see if this works. Let's run our tests. And it does pass. Cool. And let's make sure it fails if it doesn't see the component. So let's go to our examples page here. And let's comment this out. Testing Email Send Path 1:34So let's go to our examples page here. And let's comment this out. And let's run the test again. And it does fail. Cool. So let me just put that back. Put this back, okay. And let's go ahead and test the happy path of our contact form. So that would be that the email does get sent out when the form fields are filled out correctly. So let's make a new test here.So that would be that the email does get sent out when the form fields are filled out correctly. So let's make a new test here. Let's say contact form sends out an email. And to test Livewire components, we can make use of Livewire test. So if we do Livewire test, and then give it the class or the component we want to test. So in our case, it's contact form. Okay. And let's make sure to import these. So Livewire and contact form. And you can see it imported up here.So Livewire and contact form. And you can see it imported up here. So now let's go ahead and interact with this component. So like I said, we want to just fill out the form and take the happy path to see if the email does get sent out. So we want to fill out these fields. So if you look at the class, that would correspond to filling out these fields here. So we can use the set method to do that. So let's say set, and we want to set the name to me. And we can do the same for the other fields.So let's say set, and we want to set the name to me. And we can do the same for the other fields. So let's say email. And this is the email that is from the person filling out the form. So let's say some guy, that's some guy.com. And the same for the other fields. So let's say phone, just say 1, 2, 3, 4, 5. And the same for the message, message, and say, this is my message. So that sets the variables. Now we want to call the submit form method.So that sets the variables. Now we want to call the submit form method. So to do that, we would say call and the name of the method, so submit form. And again, if you look at the class, we should get a success message if everything went smoothly. So let's grab this message, and let's assert that we see that. So let's say assert C, and let's put that message in there. And hopefully this works. So let's run our test, and it does work. So since this is supposed to send out an email, we probably want to make assertions about that email being sent as well. Faking and Asserting Mail 4:13So since this is supposed to send out an email, we probably want to make assertions about that email being sent as well. So let's quickly fake the mail and make assertions about it. So mail fake, and it's impart mail. And after this, we can make some assertions about that mail. So mail assert sent, and let's say function contact form mailable. Let's grab the mail here, and let's open that up. So we want to assert a few things, but before we assert, we have to call the build method. So the from and the subject gets attached. So let's say mail build.So the from and the subject gets attached. So let's say mail build. And now we can make some assertions. So let's say return mail. We have has to, so I'm just hard coding the email here. So you can see this in, I believe, our class. So yeah, I'm just sending it here or sending it here. So we can just hard code that in. And if this were real, I'd put this in like an environment variable or something. And what else do we want to assert?And if this were real, I'd put this in like an environment variable or something. And what else do we want to assert? Say mail has from. So this is the person filling out the form. So in this case, it should be some guy at some guy.com. And let's assert one more thing. Let's assert the subject here. Okay. And it's contact form submission. Okay, let's see if this works. Testing Validation Errors 5:48And it's contact form submission. Okay, let's see if this works. What is this complaining about? So yeah, we just need a semicolon here. And let's run this test again. And hopefully it passes. And it does. Cool. So now let's test the validation. So let's make another test here.So now let's test the validation. So let's make another test here. Let's say contact form name field is required. And let's just grab some of this here. And let's paste it in. And let's not set the name field. And let's see if we get an error message. So Livewire has this handy assert has errors. I believe it's specific to Livewire. And we can check for the validation errors.I believe it's specific to Livewire. And we can check for the validation errors. So in this case, we want to check if there's an error for name, because it should be required like this. Okay. So let's see if this works. Let's run our test. And it does work. Cool. So you can do the same for the other fields for email, phone, and message, since they'reCool. So you can do the same for the other fields for email, phone, and message, since they're all required. But I'm not going to do that here. So one more validation error message is the message should have at least five characters. So let's test that. So pretty similar to this. Let's say message field has minimum characters. Minimum characters, okay. And let's just set something less than five.Minimum characters, okay. And let's just set something less than five. So let's say ABC, call submit form. And let's just say the message should have the min error message. So let's try this out. And hopefully this passes. And it does. So let's run our whole test suite here. And everything should pass. So there you have it.And everything should pass. So there you have it. Testing Livewire components is very easy. And it's just using PHP unit. So you can easily test your components.
