So what's a little bit funny is we have here a lot of tests for our Livewire component and we're using all the tools that Livewire provided us. And if we run the tests, you can see all of them are working and that's good. But yeah, it's a little bit funny, as I said, because let's go to a specific one. It marks video as completed. So what we're doing here is we're going to make a call to a specific method and then we make sure that the output is as we expected it. And this part is working. But when we take a look at our template file, you will see that the user has no chance to trigger those methods because there is no button connected to them.

But when we take a look at our template file, you will see that the User has no chance to trigger those methods because there is no button connected to them. But our tests are telling us that this is working, mark video as completed. And here also mark video as not completed. If we take a look, we have those methods, but we have no buttons connected to those methods. And this is something very interesting to know when you're testing a Livewire component, because we're testing that the function of the component itself are working, of the class are working, but we don't test that there is even a button that is connected to this method. And that's also something that I discovered myself and I created a package to help you here. So say hello to my package called missing-livewire-assertions.

And that's also something that I discovered myself and I created a package to help you here. So say hello to my package called missing-livewire-assertions. And if we go a little bit down here, let's check it out. This package adds some nice new Livewire assertions, which I was missing while testing my application using Livewire. Okay, let's see what can we do here. So with this package, we have some new assertions like assertPropertyBy. So this now makes sure that inside the template of our Livewire component, a property like email is being used. And the same we can do here for a specific method. So this is what we are going to need. And we also can do this if you're using a form for Livewire, and there is a little bit more that this package can do.

So this is what we are going to need. And we also can do this if you're using a form for Livewire, and there is a little bit more that this package can do. But what we are mostly interested in is assert that the method is wired to a specific button or HTML element. All right, let's bring this in. composer require. And this is my package. Here we go. And with this, now we have some new assertion, which we can use now inside our test for testing our Livewire components. And let's go directly to the one it marks video as completed. And I see we have a typo here.

And let's go directly to the one it marks video as completed. And I see we have a typo here. Let's fix this. Yep. All right, so here we're making sure that we call this method. But now before that, I want to make sure that this method is even wired to a specific element on our template. And it's called assertMethod wire. We don't have auto-completion for this for now. And then we're using the same string, the name of the method itself. And if we run this, we're going to see our new assertion will fail because now we're trying to look for a button which is connected to our method.

And then we're using the same string, the name of the method itself. And if we run this, we're going to see our new assertion will fail because now we're trying to look for a button which is connected to our method. Which is not given here. But yeah, this is not given on our template. And even that our tests are working doesn't mean that this is really working for the user. So that's why we need to test it. And that's also why we need to fix this. So let's add this to our template here beneath the video description. And let's say we're making a button. And when we click it, we want to call our method markViewAsCompleted.

And let's say we're making a button. And when we click it, we want to call our method markViewAsCompleted. And let's also call this markAsCompleted like this. If we run the test now again, now this is working. So let's go back to the test here. So now we've made sure that there is a method connected to a specific HTML element. And only then we are going to call this method. And similar to this, we now want to also make sure that after that, so after a video is marked as completed, that now another method is being wired. And that's now the method where we want to make sure we can mark a button as not completed.

that now another method is being wired. And that's now the markVideoAsNotCompleted method where we want to make sure we can mark a button as not completed. Assert method wired. And let's also copy this from down here like this. Yes, so this will now fail again because now also this markVideoAsNotCompleted is not there yet. So let's also add another button here. markVideoAsNotCompleted. And now you can see this is also working. So now we've made sure that both of the methods which we're going to use here are now wired to a specific element thanks to the little package that I created.

So now we've made sure that both of the methods which we're going to use here are now wired to a specific element thanks to the little package that I created. So this also means if we go down here to our test, we want to make sure it marks a video as not completed. We want to do the same before we call the method. We want to make sure that a specific method is wired to an element. And let's just copy this again here. And since we already did this, this should also pass. Yes, it does. But of course, when we think about it, we don't want to show always both buttons because only after we have marked one as completed, we only want to show the other one and the other way around.

But of course, when we think about it, we don't want to show always both buttons because only after we have marked one as completed, we only want to show the other one and the other way around. And by the way, markAsNotCompleted is what the text should be here. Okay, what can we do about that? So there's also now the opposite method here, a certain method not wired. So after we have marked the video as not completed, we now also want to make sure that this method is now a certain method not wired. Because with Livewire, again, the template is going to refresh after our call to this method. And then the new template is shown. And then on this new template part, we don't want to see the button for the same call here. But this will now fail because we don't do anything about that.

And then on this new template part, we don't want to see the button for the same call here. But this will now fail because we don't do anything about that. But we're going to fix this right now. So let's switch this one up here. And here I want to make sure if our User has already watched the Video. So we can do this by grabbing the current User, then the videos. And I think we renamed this to watchedVideos. Yes, right. And then on this relationship, we want to look now for a specific one where the video_id equals the current video_id, which we already have on this page. And we can use the counter to just see if there is one of those videos.

And then on this relationship, we want to look now for a specific one where the videoId equals the currentVideoId, which we already have on this page. And we can use the counter to just see if there is one of those videos. And if the User has already watched the video, we want to show the markAsNotCompleted. And other way, we want to show markAsCompleted. And let's also end our if statement here. I think that's correct. Let's run our test again. OK, this is now passing. Let's go back here. So we have now made sure after calling markVideoAsNotCompleted, we don't want to see any method, any element wired to this method.

Let's go back here. So we have now made sure after calling markVideoAsNotCompleted, we don't want to see any method, any element wired to this method. And actually, the same we want to do for the other test here. So let's go back here. After we have clicked markVideoAsCompleted, we want to make sure that we don't see this method anymore connected to one of our HTML tags. But still, we want to make sure that we see here markAsNotCompleted. OK, let's run the test again. And I think we can also do this now for the other test here as well. So when we're making a call to markVideoAsNotCompleted, we want to make sure that we don't see this method anymore connected to an element. But what we still want to make sure is that we now see the other one, markVideoAsCompleted.

So when we're making a call to markVideoAsNotCompleted, we want to make sure that we don't see this method anymore connected to an element. But what we still want to make sure is that we now see the other one, markVideoAsCompleted. And this also works perfect. And now with a little bit of help from my package, MissingLivewireAssertions, we just made sure that not only the methods of our component are working. I'm talking about these ones here, but also that they are now connected to HTML elements inside our view file. And this way we can make sure it really works.