Okay, let's write tests for the functionality that we did in the last video. So we set up our database for our votes, and we also added the votes count on the index page and also on the show page. So I'm going to create two test classes here, one for the show page and one for the index page. Now, they're mostly going to be the same, but there are going to be some differences. So let's make those tests. php artisan make:test. Let's call it VoteShowPageTest, and we'll make one for the index page, VoteIndexPageTest. Okay, so let's start with the one on the show page.

Let's call it VoteShowPageTest, and we'll make one for the index page, VoteIndexPageTest. Okay, so let's start with the one on the show page. And as always with Livewire components, let's do the existence test first. So let's go to the VoteShowPageTest. Let's go ahead and remove this one, UseRefreshDatabase, and let's write our first test. So say ShowPageContainsIdeaShowLivewireComponent, okay? And I'm just going to paste in some setup here, so you don't have to watch me type all of this. So we are creating a User, so import that. We are creating, we only need one Category, so import this as well.

So we are creating a User, so import that. We are creating, we only need one category, so import this as well. And we are creating a status, and then we are creating an Idea based on all of those. And now we just have to visit the show page. So say get, say Route::ideaShow, and we'll pass in that idea, okay? And we can just assert, see the Livewire component, and we named it IdeaShow. So if I did that correctly, this should pass, and it does. And it's the same for our index page test. So we can basically just copy this and make a few changes. So say index, or sorry, VoteIndexPageTest, let's get rid of this, and we can use RefreshDatabase,

So we can basically just copy this and make a few changes. So say index, or sorry, VoteIndexPageTest, let's get rid of this, and we can use RefreshDatabase, and let's paste that in. Change the name to IndexPage, shows Idea Index Livewire component, and let's make sure to import all of this stuff, okay? And Idea Index, and we don't have to pass anything in, and the name of the component is Idea Index. So let's see if this works. Forgot a closing bracket here. Okay, let's run this test, and it does pass.

Forgot a closing bracket here. Okay, let's run this test, and it does pass. Okay, let's write our second test. So back to the show test here. Let's just duplicate this, and let's change the title or the name. So let's say ShowPage, and say, Correctly Receives votesCount. So if you remember, if you go into our IdeaController for the show method, we're just testing that this works correctly. So remember, we're passing this into the actual Livewire component on the show plate, okay? So let's test this out.

So remember, we're passing this into the actual Livewire component on the show blade, okay? So let's test this out. So I'm going to make a second User here, because I'm going to have both of these users vote on this Idea down here. So let's say User B. So instead of this, let's say, Assert that the view has a variable named votesCount, again, from here, and let's say 2. So right now, this should fail, because there are no votes. It's going to say something like 2 does not equal 0, right there. So now let's go ahead and create those votes. So we can use VoteFactory, or we can just create it without the factory, but I'll stick

So now let's go ahead and create those votes. So we can use VoteFactory, or we can just create it without the factory, but I'll stick to using factories here. create, and like I said, we will just create those two votes. So let's make sure to import Vote, and the ideaId is our idea here. So ideaId, and the userId is UserId. So that's one vote. And let's duplicate this, and let's just change the user. So UserBId. So now this idea should have two votes.

So User BID. So now this Idea should have two votes. Same Idea here, but it has two votes on it, so this should pass. So let's run that again, and it does pass. Cool. Okay. So let's copy this, and let's do it for the index page test. Okay. Let's paste it in here. Change the name.

Let's paste it in here. Change the name. Index page correctly receives votes count. Let's make sure to import Vote. And now here, if we go back to our controller, we don't have a votes count directly, because we have a collection of ideas. So here's the collection of ideas. So we just want to inspect that collection and make sure it does have an Idea with a vote count of two. So how do we do that?

vote count of two. So how do we do that? So again, we're passing in the ideas. So instead of votes count, it's ideas. And to inspect the ideas, we can pass in a function as the second parameter here. So function ideas, and then we can inspect it in here. So let's just say return ideas first. So there's only one, because that's what we set up here, only this idea here. And that should have a field named votes count, and it should equal two. So votes count is going to return a string.

And that should have a field named votesCount, and it should equal two. So votesCount is going to return a string. So if you do ===, that's not going to work, because it's comparing the string two to the integer two. But if you just do ==, then this should work. So let's run this, and it doesn't pass. Sorry, I forgot to change this. ideas.index, or idea.index, and there's no param here. Forgot a closing bracket one more time, and it does pass. So let me show you it not working with ===.

Forgot a closing bracket one more time, and it does pass. So let me show you it not working with ===. Should fail. Because like I said, it's comparing an integer to a string. So let's put that back to ==. Or you can cast it to an integer if you want. Okay. And I'm going to write one more test here. So back to the ShowPageTest. Let's duplicate this again, and let's name this one votesCountShowsCorrectlyOnShow.

So back to the show page test. Let's duplicate this again, and let's name this one votesCountShowsCorrectlyOnShowPage Livewire component. So we're basically just testing if whatever we pass in here actually gets set in the Livewire component, and then gets rendered in the view correctly. So we don't need two Users. And down here, we can just get rid of this. We're going to be testing the actual Livewire component. We don't need the actual votes, because we're just passing in something to the Livewire component.

We don't need the actual votes, because we're just passing in something to the Livewire component. And the votes was tested on the last test. So we can do Livewire::test(IdeaShow::class). And if you remember, that takes in some parameters, takes in the idea and the votesCount. So we can set that as an array here. So the idea is the idea that we created. And the votesCount can be anything we want. So let's just say 5. Remember, the actual votesCount is tested in the last test that we wrote.

So let's just say five. Remember, the actual votesCount is tested in the last test that we wrote. So that should be fine, we can assert that that variable is set using the assertSet method. I don't know why I opened that class. So assertSet, the votesCount is equal to whatever we passed in, so five. And then if you want, you can actually assert, actually, let's just run this test for now. Let's import Livewire. And let's test this out. It's failing.

And let's test this out. It's failing. What did I do wrong? We have to import IdeaShow. Okay, run that again. Okay, it's passing. So like I said, if you want, you can assert that we see now obviously 5 is pretty generic. So we can assert that we see some HTML. So let's go to the IdeaShow. And we have these votesCount.

So let's go to the Idea show. And we have these votesCount. So there should be two of them, one for the desktop view and one for the mobile view. So if you want, you can assert against both of them, or that we see both of them. Only one is visible at a time when you actually view it in a browser. But the HTML exists for both of them. So let's paste that in. And let's change this to five. Okay, so let's just grab both. The other one is votesCount.

Okay, so let's just grab both. The other one is votesCount. Let's grab this one. Let's duplicate this. Let's remove this. Paste and five. So hopefully this works. Let's run our test. And it does work. So again, let's copy this and put it into our IndexTest.

And it does work. So again, let's copy this and put it into our index test. So let's grab this. Let's go to our index test. Paste it down here. Let's import Livewire. This should be IdeaIndex. And the HTML might be different on this page. So let's take a look at that first. Let me just run it to see a fail.

So let's take a look at that first. Let me just run it to see a fail. Yeah, so it does fail. Take a look at our Idea index page. This is take a look at the first one first. So it should be the one on top. So the HTML is different. Let's grab this. Let's put a 5 in here. Let's grab the other one.

Let's put a five in here. Let's grab the other one. Same thing. Grab a five or put a five in there. Oops. And let's see if this works now. Run the test. Still failing. I forgot to import Idea index. So let's do that.

I forgot to import Idea index. So let's do that. Run the test again. And now it's passing. So let's run this whole file. Let's run the ideaShow file or the voteShow page test. And everything is passing. And I forgot to change the name on this test. So say index page. Okay, so that looks good.

So say index page. Okay, so that looks good. Let's run the entire test suite. And everything is still working. Cool. So as always, let's make a commit. This is episode 18. Episode 18. Let's say vote, votes count test.

Let's say vote, votes count test.