Okay, let's focus on testing our app. Now our app is pretty straightforward in terms of functionality. All we have is this main page that displays different groups of games and we have a single game page that shows the information for a single game. So let's start with this since this is not using a Livewire component. So let's go into our app and let's just use the example test that comes baked into Laravel and let's just rename this to VueGameTest. And let's change this to VueGameTest. And let's make a new test and we want to test that the game page shows correct game info. So let's go into our controller and that would be the show method here. So we want to visit this route. So let's go ahead and grab the response and that would be this get. And I'm going to use

would be the show method here. So we want to visit this route. So let's go ahead and grab the response and that would be this get. And I'm going to use the route helpers here. It's going to be games.show. The second parameter is the slug for the game. So right now the slug is this. So let's grab this and let's paste that in. And let's just assert that it's successful. So response->assertOk() or I like using assertSuccessful(). And in our controller let me just dump the game here so we can see it in our test. So let's go back to our test and let's run this to see what we get. Okay so that passed and you can see the dump here in the terminal. And this is the actual response from the real server. And if you want you can assert against this real response and actually test that the real

the terminal. And this is the actual response from the real server. And if you want you can assert against this real response and actually test that the real API works. But to speed up your tests we can make use of HTTP fakes. So let me show you what I mean. If you go into the docs you'll see some documentation for faking responses. And this is what we'll do. So let's grab this and it's fake our HTTP request. So before we make that request we can fake it up here. And I paste that in. And what do we want to fake? I want to fake that endpoint. So it would be this endpoint right here. And let's go back here and let's just use it here. And let's put that in here. And this is the response that we're gonna get when we're running our tests. So if I just change this instead of a string

here. And let's put that in here. And this is the response that we're gonna get when we're running our tests. So if I just change this instead of a string we'll put an array here. Say foo, bar. And we want a 200 response and we don't need to pass headers here. Make sure to close this array. You'll see that now when we dump when you run this test and dump it you'll see that we're getting foo, bar as the response because we're faking it. And we have to import HTTP. Okay let's try this again. And there we go. We see our response here. Our test is failing because there's an error happening because we're not getting the correct data back. So now what we want to do is sort of just mimic the real response. So let's take the fake out for a second again and run the test. And what we want

data back. So now what we want to do is sort of just mimic the real response. So let's take the fake out for a second again and run the test. And what we want to do is grab this whole array and make it into a real PHP array and then assert against this data. But it won't be from the real API. It will be within our fake. So since that's the large array we can sort of clean up our code by making a helper method here and just returning the response. So I'm gonna say this fakeSingleGame and then make a method in here fakeSingleGame. It's empty. It's private. And we want to return the HTTP response and in here is where we want to paste in that array. So it'd be like that but we have to format this to a real PHP array. So this is a really cumbersome process. So I'm just gonna

paste in that array. So it'd be like that but we have to format this to a real PHP array. So this is a really cumbersome process. So I'm just gonna paste in what I have already. Okay so I formatted that array and now if I run this code it should pass. And it does. But now we're using this data and we can assert against whatever we want here based on this fake array that's coming back. So if you look at this fake array I changed the name of the game to fake animal crossing and we can assert against this data. And I believe I also changed these slugs of fake animal crossing new horizon. So let's change the slug here. And I'm also gonna paste in a bunch of assertions based on what we want to see in our show page here. So things like the score, part of the

slug here. And I'm also gonna paste in a bunch of assertions based on what we want to see in our show page here. So things like the score, part of the description, maybe the systems, the publisher, the genres, and maybe like a URL for one of the images, and maybe some similar games. Okay so I pasted in these assertions and let's see if this test passes. And it does. Cool. And now we can get rid of this dump in our controller. And that should be a passing test. Cool. So like I said earlier if you actually want to test against the real API you can do that as well just don't fake the response. And you can actually make a group here and say group AV network. And when you run php unit I believe you can do something like php unit --exclude and then name of the group. And

group here and say group AV network. And when you run phpunit I believe you can do something like phpunit --exclude and then name of the group. And then that will not run these tests. Because most of the time you don't want to hit the network. But for this I'm just gonna fake our data. Okay let's see how we can test the main page. And if you remember we are making use of Livewire here and we have four Livewire components. We have one for popular games, one for recently reviewed, one for most anticipated, and one for coming soon. So how do we test Livewire components? So if you look at the documentation there is an example here and it's pretty easy to do. We just have to use this LivewireTest. Give it the Livewire class. We can set attributes on the Livewire class and

an example here and it's pretty easy to do. We just have to use this Livewire test. Give it the Livewire class. We can set attributes on the Livewire class and then we can call methods. So let's go ahead and do that. Then you can do any assertions that you want. So let's do that in our app. We'll make a new test here called popularGamesTest.php. And we just paste this in here and change this popularGamesTest. And let's say the main page shows popular games. And again we want to fake our response. So let's say fakePopularGames. And instead of doing all this we can test the Livewire component directly. So let's say Livewire test and we are testing the PopularGames class. So let's open that up so we can see what we're doing. Okay. And the first thing we want to assert is

Livewire test and we are testing the PopularGames class. So let's open that up so we can see what we're doing. Okay. And the first thing we want to assert is let me import Livewire first. Okay. Let's assert that the popularGames instance variable is set. So by default it is an empty array. So let's assert that that's the case. So assert set popularGames and we want to make sure it's an empty array. And this should pass. So let me remove this. We don't need this. We have to add our own in a second. And let's not fake it to start. Okay. And let's dump it like we did before so we can see the actual real response. So let's dump this and let's see what we get. Okay. And back to our test and let's run this test. And I have to import popularGames. So let me import that and try again. Okay. Let's run this.

see what we get. Okay. And back to our test and let's run this test. And I have to import popularGames. So let me import that and try again. Okay. Let's run this test again. And it does pass. So we're not encountering that dump because that dump happens in the loadPopularGames method. So what we can do is call that from within our test right here. So we can do call the name of the method and now it should trigger that dump. So let's run this test again. And you can see that it does pass and we are getting information from the real API. So again same drill. We have to grab this and put it into our own fake response. And then we can change it however we like and assert against this data. Another method here fakePopularGames. And then we would return the HTTP response. And then

we can change it however we like and assert against this data. Another method here fakePopularGames. And then we would return the HTTP response. And then we can paste in the data here. And then just make sure it is an actual PHP array. And then assert against this data. So again I'm going to paste this in because it's a cumbersome process. Okay. So I pasted that in and let's put the fake back and see if this works. So let's run this. Okay. And it does pass but now we are using our fake response. So let's assert against this fake response. So we have to assert against certain popular video games that we have in that fake response. So I believe I have one called fakeFinalFantasy7Remake. And then I'm just asserting against other games as well. So again I'm going to paste that in.

I've added the other tests. Here's the one for recently reviewed. So pretty much the same thing. We're just faking a different response here. So if I run this php artisan test and the same is for most anticipated and coming soon test. So if I run my entire test suite and everything passes.