Introducing the Package0:00
The next package is made by a really nice guy, good-looking, humble, kind, expert in like everything. So let me introduce you to myself. So I'm talking about my package called Missing Livewire Assertions, and let me tell you about what you're probably already missing. We are here on the repository of Missing Livewire Assertions, my package, and here we have already a little example. Where we get some new assertion like this one, which we can use on a Livewire component while testing, for example, assert that a method was wired with a specific method name.
Why Tests Can Mislead0:32
which we can use on a Livewire component while testing, for example, assert that a method was wired with a specific method name. All right, so you might ask, why do we need this? Why this is important? So let me show you why. I do have here in this application a Livewire component called CreateUserLivewireComponent. We have some fields here, then we are going to render a few, and here is a CreateUser method, which we can use in order to create a User.
and here is a CreateUser method, which we can use in order to create a User. If we check out the test for this component, which I already have, you can see it here. We're testing that we can create a new User, and we're setting all those different fields here of this component, and then we're calling the CreateUser method, and then we want to make sure that we see something in the database, and this test is working. So this is something that I've done already myself,
and this test is working. So this is something that I've done already myself, especially while using TDD. You are creating your test, everything seems to be working, but then when you take a look at what your site looks like or what the real component looks like, let's get here to this one. You can see that here is the component, and it seems we have wired locations, one field of the ones that we have,
and it seems we have wired locations, one field of the ones that we have, but the other ones are not wired here. For all those fields here, we have not set that we want to wire those for a specific field from our component, so email, password, etc. So this is the case where our tests are working perfectly fine. Where do we have them? Like this one, so we've written nicely test,
Where do we have them? Like this one, so we've written nicely test, everything is working. We can set all those properties because we have those properties set. We can call the method because the method exists on the component. We see the use in a database, but still it wouldn't work in the real world because all those fields here are not wired.
but still it wouldn't work in the real world because all those fields here are not wired to specific properties of our Livewire component. And that is also the main reason why I created this package because now we're going to add some new assertions to the Livewire assertions, like, for example, that we can make sure that a method is wired. So this means that the method name, submit, is being used in our Blade file as well.
Installing the Package2:47
So this means that the method name, submit, is being used in our Blade file as well because this is the connection that we need from our Blade view file to our Livewire component. All right, enough talking. Let's give this a try. We're going to copy this. Let's install this package. This is version 2.2. With this version, we are already using Livewire 3,
Asserting Wired Properties3:08
This is version 2.2. With this version, we are already using Livewire 3, so make sure that you're using Livewire 3 if you're using this package. There are also some other versions for Livewire 2. All right, what else do we need? Assert that a property is wired. So this is exactly what we need for our test. So this means let's add here another assertion. By default, phpStorm does not notice this method exists,
So this means let's add here another assertion. By default, phpStorm does not notice this method exists, but if you're using Level Idea like I do, you can generate the helper methods code. And I think this should already do it. So let's see. Yeah, this is the method from my package where we're checking this. And now this test should fail because we haven't wired the email field.
And now this test should fail because we haven't wired the email field. Let's try it out. Field asserting that we see this pattern here. So this means this is not working because we haven't wired the email field. Let's go to our component, to the view file, and to the email field here. And let's say wire:model email. Let's try it now again.
And let's say wire:model email. Let's try it now again. Okay, now it's working. All right, so let's go back to our test here. And let's also add this now for the password. So this should also fail now. Yes, it does. Let's get back to the Blade file. Let's also add wire:model for our password like this. And now the test should pass and it does.
Asserting Wired Methods4:28
Let's also add wire:model for our password like this. And now the test should pass and it does. All right, so this is the new assertion method which we can use assertPropertyWired. But there is also another one which is called assertMethodWired. And our method, what is it called? Let's check it again. It's called createUser. We're using it right here.
It's called createUser. We're using it right here. So it should fail now our test because we haven't done this yet. All right, let's go not to the method, but to the component here. And here for the form, we can now use wire:submit is what we can use on a form. And it's called createUser. We have auto-completion here.
And it's called createUser. We have auto-completion here through Level Idea package for phpStorm, which is nice. And if we go back to the test now, this should now also pass and it does. So, and yeah, that's exactly what I do now for every test of my life, where components I also make sure that all the properties and all the methods that I use.
Other Assertions and Wrap-Up5:30
where components I also make sure that all the properties and all the methods that I use are being wired to the actual Blade file of this component. And this will make your tests way more valuable. So we already talked about assertProperty and assertMethod wired. Let's see what else do we have here. We also can make sure that we have something wired to a form. And we also have something for method wired to event and without modifiers, with modifiers.
And we also have something for method wired to event and without modifiers, with modifiers. So yeah, there are a bunch of other assertions, like if we contain another Livewire component and things like that. So yeah, give it a look if you haven't used this yet, because yeah, I think it's quite useful. I use it all the time. Every time I work with Livewire for making my tests even better.
Every time I work with Livewire for making my tests even better. Let's break down what we just learned. Missing Livewire assertion brings new assertions to your application so you can better test your Livewire components. I'm really proud of this package because indeed it's a very small package and has a big impact on your testing. Thank you, Christoph.
and has a big impact on your testing. Thank you, Christoph.
