So, we've already made sure that we see all of our courses on the homepage so that users can see what we provide, and we've also made sure that we have a dashboard where people can see their purchase courses, but now, of course, it's also interesting to show them how to watch their courses. That's why our next to-do will be this one, WatchPurchaseCourse, and this will also be a dedicated page. So, as always, let's start by creating a new page ResponseTest. Okay, let's do this. Inside our PagesResponseTest, we're going to add another test now for a new feature. Let's call it ItGivesSuccessfulResponseForVideosPage.

Inside our pages response test, we're going to add another test now for a new feature. Let's call it It Gives Successful Response for Videos Page. And we're going to need a Course in order to access the site. Let's create this. And it needs to have a Video to work. And then we're going to create both of those new models. Okay, let's import the namespaces. And now we're going to act and assert again. And we need to be logged in as a User. We can make use of our loginAsUser method.

And we need to be logged in as a User. We can make use of our loginAsUser method. And then we're going to make a route to our course videos page. And we need to provide the course. And then let's make sure that we get a positive response back with assertOk. And it looks good. Everything is working. And that's because we already have defined this route because we were using this array in our view file. And when we check out the controller, you can see that it is currently empty.

in our view file. And when we check out the controller, you can see that it is currently empty. But that's fine for now because we will have some dedicated tests now. So let's create a new one under the pages directory. And let's call it PageCourseVideosTest. Okay, let's start writing our first test. It cannot be accessed by a guest. And before we change now our comments here again, we're going to adapt the template itself. So there's one that comes with Pest itself, when you call it, and there's another one which I created myself, and I call this test.

So there's one that comes with Pest itself, when you call it, and there's another one which I created myself, and I call this test. And here we're going to change not a comment because like most of the time we're going to act and assert here at the same time. So let's change this here in the template and from now on we won't have to change this anymore. All right, next test is about, we want to make sure that we include a video player. I'm going to tell you more about that later. And then we also want to make sure that it shows the first course video by default. And we also want to make sure that if we provide a specific video, that it shows that one.

And then we also want to make sure that it shows the first course video by default. And we also want to make sure that if we provide a specific video, that it shows that one. So it shows provided course video, yeah, like this. Okay, so far so good. Let's start with the first one. This will be an easy one. So we need first a Course that we can access the page. Let's create a new Course, import the namespaces. And one last time, we're going to adapt this here to act and assert. And now I'm going to make a get request to our course videos page.

And one last time, we're going to adapt this here to act and assert. And now I'm going to make a get request to our course videos page. We're providing the course and now we want to make sure that we get redirected. Let's also import the get function here first. Redirect to the login route, yeah. And this should already work because of chat stream. And yeah, this works perfect. Okay, the next test will be interesting. It includes video player. So I already know that the video player, which we need in order to show the videos, I want

It includes video player. So I already know that the video player, which we need in order to show the videos, I want to build this with Livewire because there will be some interactivity like switching the videos or marking a video as completed. And this is the perfect use case for Livewire. But on this page here, on the page.test, I only want to make sure that the player is included. I don't want to test the player itself because we are going to test the player in a dedicated Livewire component test. On this page, we just want to make sure we see the player component.

livewire component test. On this page, we just want to make sure we see the player component. Okay, in order to test this, first, again, we're going to need a course. Let's create one. Then I also need to log in again. We're making get request again to our videos page and we provide our course. Then we also want to make sure we get a positive result back. And now we want to make sure we see the livewire component. And there is an assertion called assertSeeLivewire that comes with livewire itself. And now we have to think about what the component name will be.

And there is an assertion called assertSee that comes with Livewire itself. And now we have to think about what the component name will be. And let's just go with VideoPlayer and we're going to provide the class here. Of course, this component does not exist yet, but we have to start somewhere. And yeah, we cannot find this Livewire component called VideoPlayer. All right. Fair enough. Let's create a new Livewire component. And again, I'm using Laravel Idea here, which also supports creating new Livewire components. And we're going to call it VideoPlayer.

And again, I'm using Idea here, which also supports creating new Livewire components. And we're going to call it VideoPlayer. Okay, this already comes with a few. So I'm just adding here return type or maybe first let's import the class. And if we run this again, we see exact same error because from our VideoController, we are not returning anything yet. Okay. So let's return a few. This does not exist yet. Let's call it pages and course videos.

This does not exist yet. Let's call it pages and course videos. And we again can create a few directly here with again level Idea. And then inside of you, we're going to provide our new Livewire video player component without any arguments. And when we run our test, this will pass now. Perfect. So we have now made sure that we see our Livewire component on the page and all other things like showing some title or some description of the video we're going to deal with in another test.

like showing some title or some description of the video we're going to deal with in another test. Okay, let's move on here. We want to make sure that if we don't provide anything to a Livewire component, we show the first video of the course. Let's copy the course here from the test above. Then let's also copy the login and the get request. This will be the same, but this time we not only need a course, we also need a video related to the course because we want to make sure that we see this video. So let's add a video factory here to our course.

to the course because we want to make sure that we see this video. So let's add a VideoFactory here to our Course. And now we want to make sure that we see some text and we want to see text from the Course through the relationship videos. Let's grab the first video and then we want to see the title. That's what we are going to expect. And if we run the test, it will pass, which is kind of interesting because here we haven't written any code for this to work. So let me show you why this is passing. Let's grab here the title and let's dd this out.

So let me show you why this is passing. Let's grab here the title and let's dump and die this out. And what we get back here, if we run a test now, we can see that this is not. And this is why our assertion is passing, because we're just looking for nothing. So a better approach, I have already told you this, is first when you write a test, make sure that you provide static data. So you want to make sure that we have a title called myVideo. And now instead of checking the title through the relationship, we're going to call it here with myVideo. Now what you can see is this is now going to fail because, yeah, we don't even have.

with my video. Now what you can see is this is now going to fail because, yeah, we don't even have a column called title for videos. Okay, let's check out our migration. Let's create here a new string for our title like this. And now let's run a test again and we see a different error. Now our view does not contain my video, which is correct because we haven't provided it to the view file. So let's check out our view. We are using our Livewire component and inside here we want to make sure that we show the

So let's check out our view. We are using our Livewire component and inside here we want to make sure that we show the title. So let's make a heading and then let's show the title of video. Of course, this video does not exist and it will fail because, yeah, this variable is not given. So this means inside our Livewire component, we want to make sure that we have some kind of video object. So let's create a public video here. And again, we see an error, but now a different one because we call title on null.

So let's create a public video here. And again, we see an error, but now a different one because we call title on now. Okay, so how do we pass in here a new Video object? Let's just imagine we do this here for a video argument and let's also imagine we have here a video object. Again, this test will fail because we haven't provided this variable to the view file. And this is what we need to do now inside our controller. Okay, but first let's check out how we have defined the route for our controller. And here we have the route videos and then we're providing the slug of a course. So this means we can get here a course back inside our controller through the route, through

And here we have the route videos and then we're providing the slack of a course. So this means we can get here a Course back inside our controller through the route, through route model binding. Now we want to make sure that we get a Video through the Course videos relationship, and then we want to get the first one. Now the only thing left is to provide this to our view. And now if we run the test, you will see that this is working. Okay, perfect. Let's do a recap here. So we are getting the Video, we are providing it to our view file.

Let's do a recap here. So we are getting the video, we are providing it to our view file. Then inside the view file, we're providing the video to our Livewire component. Here we have a public property which we have access to from our view of the Livewire component as well. All right, so this is how we have made this test work. And now the next one, we want to make sure that we can show a provided course video. So this will be similar to the first one. So let's copy the code here of this test and bring it to our new test. And now the difference here is that we want to make sure that we have two videos for a

So let's copy the code here of this test and bring it to our new test. And now the difference here is that we want to make sure that we have two videos for a specific Course. So let's call the count method to get two videos. And now we also want to make sure that we have two different titles. That's why we create a new Sequence here with the first video, which is a title, and then we will also have a second video here. So let's copy this one. Now we want to make sure that we not only provide a Course to our route, but also we want to provide a video.

Now we want to make sure that we not only provide a course to our route, but also we want to provide a video. Now we want to make sure that we see the last video. One way to do this is by getting all the videos or a relationship, and then we are calling the orderBy descending, and we're going to order by ID. And now if we get the first one, we should get the last video. Let's also format this code a little bit. And now what we want to see is now our second video. Let's call it secondVideo and let's also check how we named it. Oh yeah, we need to change this here.

Let's call it second video and let's also check how we named it. Oh yeah, we need to change this here. So second video here as well. Okay, let's run this test and the other page doesn't contain second video because here only the first video is shown. Okay, perfect. We have a failing test. We can now try to fix this. So inside our controller, we're going to only grab the first video. That's how we wrote the code.

So inside our controller, we're going to only grab the first video. That's how we wrote the code. So we want to make sure now in our route that we also accept next to the course also a video and also through the Slack. And we also want to make this optional because sometimes we don't pass any video. And now this means here we are now probably getting also a video, but now we have to check if this video exists, because it might be that this is an empty video if we don't pass it to the route. And if it does not exist, we're going to get the first video like before. And now, okay, it's still failing.

And if it does not exist, we're going to get the first video like before. And now, okay, it's still failing. We don't see the second video. Let's check again what this is about. So let's try by dumping out the title of the video to see what video we get back here. From the arrow, it should be the first one. Let's check. Yeah. So we get the first video back. Okay.

So we get the first video back. Okay. What else could this be about? I got an idea. We haven't defined our Slack yet for the video. So let's add this one. And let's run the test again. What do we see now? Integrity constraint, not null for video Slack. Okay.

Integrity constraint, not null for video Slack. Okay. That's a different thing now because we haven't set the Slack yet inside our VideoFactory. So let's get in there. By the way, this is empty for now. Let's add a Slack here through Faker. Okay. Let's run the test again and we now see a second Video. Okay. This looks better.

Okay. This looks better. So I guess if we get rid of our dump and die code here, the test should work. And yes, it does. Perfect. So this means for us, we can move on now since our page test is working. We now need to test our Livewire component as well.