Create Category Filter Test0:00
Let's go ahead and test the category filter that we implemented in the last video. So let's make a new test, make test, let's call it CategoryFiltersTest, okay? And let's go to that, CategoryFiltersTest, let's get rid of this one. Let's use refreshDatabase, and let's make our first test. So let's say selecting a category filters correctly. So this would be the equivalent of selecting a category here, and we're just verifying that we get the correct data based on what we selected here. So as always, I'm going to paste in some setups, so you don't have to watch me do that. So as always, I have a User, a few categories here, a status, and let's see, we have three ideas here.
So as always, I have a User, a few categories here, a status, and let's see, we have three Ideas here. So one and two are the same category, category one, and then I believe idea three is category two. Okay. So let's go ahead and test this based on our setup here. So LiveWireTest, we are testing the ideas index component, okay? And we just move this up. Let's say, let's set the category to category one. So there should be two Ideas here.
Let's say, let's set the category to category one. So there should be two Ideas here. And the only assertion I'm going to make is to verify that the ideas variable is correct. So it did filter correctly. So I'm going to use the assertViewHas assertion. So we're checking the ideas variable, and we're going to verify that it has the correct filtered Ideas. So let's do this. And let's return, let's start with the count. So there should be two.
And let's return, let's start with the count. So there should be two. Return ideasCount equals two. So let's look at that again. So Idea one and two are of Category one, but Idea three is Category two. So when I set the variable category to Category one, there should only be two. So that should verify that the filters are correct. Let's go ahead and run this test. I think I have to import Livewire and IdeasIndex. OK.
I think I have to import Livewire and ideas/index. Okay. Let's run that test. And it does pass. So for example, if this were category1 as well, then this should fail because there are three ideas. So let's run that. And it does fail. Cool. So let's put that back.
Cool. So let's put that back. And I'm going to add one more condition here. I'm just going to inspect the first Idea. So let's say, and ideas. Let's grab the first one and let's take a look at the category of the first one and the name of that. It should be category one. Okay. So this should work as well.
Okay. So this should work as well. And it does. Cool. Now, if you want to be extremely thorough with your tests, you can write a test for each category here. So one, four, one, two, three, and four, and even all categories to make sure that it does get the correct data. But if writing one test gives you enough confidence, then that's fine as well. So to save time, I'm just going to leave it at one test.
Test Query String Filtering4:09
So that would be the equivalent of just going to this URL with this category selected in the query string. Okay. So the setup is exactly the same. We just have to make use of the query string in Livewire when testing. So I believe there is a section here for testing and there's something here for the query string right here. So we just have to say with query string params and give it the correct params. So instead of setting it manually, we're going to use that instead. So let's do that.
So instead of setting it manually, we're going to use that instead. So let's do that. Put this arrow back and the params are category and we're testing against category one. And the assertions should be the same. Let's check if this works. I'm going to change the name. Let's say the category query string filters correctly. Okay. Save that. And let's run this test.
Test Combined Status Category5:16
Save that. And let's run this test. And it does pass. Cool. Okay. What's next here? Next, I'm going to test if the status works along with the category. So I want to make sure that it is filtering for both the selected status and the selected category. So I'm going to grab the first test.
category. So I'm going to grab the first test. And let's put it down here. And let's change the name. Selecting a status and a category filters correctly. So let's make another status here. Let's say status considering. And let's change this to considering. Okay. And let's make one more Idea here.
Okay. And let's make one more Idea here. So Idea two, three, and let's make one more called Idea four. And let's change the statuses and categories for each of these. So for the first one, this is fine. Let's change this one to considering. Let's change the category for this one. It's category two. Okay. And status open is fine.
Okay. And status open is fine. And for this one, category two and status considering. Okay. So now let's set both the category and the status. So let's say status. Say open. And category is category one. So there should only be one where the status is open and the category is category one. So that should be the first one.
So there should only be one where the status is open and the category is category one. So that should be the first one. Open and category one. Okay. So let's go ahead and change this. So the count should be 1. If I filtered that correctly. So let's try that first. Okay. So that's correct.
Okay. So that's correct. And let's add a few more conditions here. So the categoryName should be categoryOne. Let's add one more here. The status. So let's change this to status. Should be open. Okay. So let's try that out.
Okay. So let's try that out. Should pass. And it does. Cool. So again, if you want, you can write another test to test the same thing, but for the query string. So it's pretty much the same thing, but we are focusing on the query string. So what did I name the first one? So I named it the category query string filters correctly.
So what did I name the first one? So I named it the category query string filters correctly. So let's name it similarly. Let's say this with status and category. And again, we just have to change this. We're not setting it anymore. We are using the query params. So status was open and open. And category is category1.
So status was open and open. And category is category one. category one. Okay. So everything else should be the same. Hopefully I did this right. And it is passing. And maybe one more test for selecting all categories, because this is sort of an edge case. It's supposed to be an edge case, but it doesn't belong to the database.
Handle All Categories Case8:46
case. It's supposed to be an edge case, but it doesn't belong to the database. So we have to make sure that it doesn't filter if all categories is selected. So we can just copy what we have for the first test and just use that as setup and just rename it. Okay. And obviously change the assertions. So let's name it selecting all categories. And you can do the query string version as well, but I'm just going to stick to the version where we set the variable.
And you can do the query string version as well, but I'm just going to stick to the version where we set the $category to be all categories. And since we have three ideas here, one, two, three, you want to assert that we have three. And the first one should be, I believe, this one, say my third idea, because it's filtering by the latest first. And a second idea for this one, just to make sure. So instead of the category name, we can just check the name or title of the idea. Actually we don't even need this condition. I'm okay with just testing the count here.
Refactor Status Tests Livewire9:58
Actually we don't even need this condition. I'm okay with just testing the count here. So just make sure that there are three Ideas, meaning nothing was filtered. So let's test this. And we are good. So I want to make a change in our statusFiltersTest to make use of the Livewire component instead of testing the response directly. Now this is fine. But like I said before, when you do assertSee and give it a block of HTML, this can easily fail if you change the markup or how it looks in this case for the badge.
But like I said before, when you do assert C and give it a block of HTML, this can easily fail if you change the markup or how it looks in this case for the badge. So again, this is fine, but it's less brittle if you use, or if you don't assert against HTML. So we can't always do that. Sometimes we just have to inspect the response directly, but in this case we can use the Livewire testing like I've been doing for the other tests. So Livewire. Let me just copy one of our tests here. So I'm going to copy the one with the query string.
Let me just copy one of our tests here. So I'm going to copy the one with the query string. So let's copy this one. Space that in. So in this case, I was testing the in progress status. So let's get rid of one of these. This one is in progress. Okay. And we are testing the ideas index and we can do something similar. So what do I have here for setup?
And we are testing the Idea index and we can do something similar. So what do I have here for setup? I have four Ideas here and two of them are in progress. So these two are in progress. So let's make some assertions based on that. So the count should be 2. And let's check the first Idea. And let's check if it's in progress. And this should pass. And it doesn't.
Run Suite and Commit12:15
If you want to inspect the response directly or if it's difficult to test, then go ahead and do it this way. But if you can avoid asserting against HTML, then it might be less brittle when you change the markup. So yeah, let's go ahead and run the entire test suite to make sure everything is still working correctly. And it looks like it is. So as always, let's go ahead and make another commit. This is episode 28, git add, git commit, episode 28, category filters, test.
This is episode 28, git add, git commit, episode 28, category filters, test.
