We have already made sure that a User can watch a purchased course. We've also created our video player, but we are still far from done yet here. So here are the things that we are already testing for our video player, that we show the details of the given video, and that we show the video itself. But I already know that our video player should also contain a list of all the videos of the course, so that you can switch to another video. So this is something that I want to add here as well. It shows a list of all course videos. Okay, how do we do this? We're going to need a Course.

Okay, how do we do this? We're going to need a Course. And then our Course has some Videos. And we want, let's say, three Videos. And we also want to define the name of the title, so that we can test against that. I'm going to create here a new sequence. And the first title should be firstVideo. Then we're going to copy this array. We want to have three of them here. Maybe let's make this also a little bit better to read here.

We want to have three of them here. Maybe let's make this also a little bit better to read here. Like this. Yep, and then second video and our third video. And then we also need to create this, of course. So this means we're now creating a Course with three videos, and we have defined three different titles for the videos, so that we can better assert what we see on the page. Then we're going to make use of our Livewire test helper here again, providing the video player, the class from the player.

Then we're going to make use of our Livewire test helper here again, providing the video player, the class from the player. And we also need to provide a specific video. And we're just going to grab from our course. We have a relationship called videos. And we just want to get the first one. And by the way, if we're using it like this, we're going to get the first video of the collection videos. And if we use the relationship method instead like this, we're going to only get one video back.

And if we use the relationship method instead like this, we're going to only get one video back. So probably this is the one that we should prefer here. And then actually we want to make sure that we see something. And let's use an array here, because we're going to check against multiple things. So we want to make sure that we see our titles. First video, second video, and third video. All right, let's try this out. And it's going to fail because we don't see second video.

All right, let's try this out. And it's going to fail because we don't see second video. So this means we're going to see first video, because this is the current video. And we have already made sure that we see the details of the current video. But second and third video are not shown yet. So let's fix this inside our video player view file. So let's just say we want to create a list here. And what do we want to put into the list? We want to provide here all the videos of the course.

And what do we want to put into the list? We want to provide here all the videos of the course. So let's say we have some kind of variable called courseVideos. And for every video, we want to create a new list item. And let's just add here the title. CourseVideo and the title. Like this. Okay, again, always it's a good idea to think about what's going to happen next if we run the test. So think for yourself, what is going to happen now if we run the test?

what's going to happen next if we run the test. So think for yourself, what is going to happen now if we run the test? I can already tell you that it's not working. But what is the reason? And so it's a good idea to have an understanding in it. Also challenge you a little bit about to think, okay, what is going to happen next? So I assume now that this is not working because, yeah, we don't have this variable. Let's check it out.

yeah, we don't have this variable. Let's check it out. Let's see. Undefined variable, courseVideos. Okay, exactly. So this means we're inside our Livewire component. Now we need to have access to all the videos of the course. So let's check out our player. And let's see how we can get it in here. So we are getting one video object already from the outside in.

And let's see how we can get it in here. So we are getting one Video object already from the outside in. So this means we need to use now this video to get all the other videos. So normally we would do this inside of a constructor, but inside Livewire we have something different, which is called the mount method, which is, yeah, very similar to constructor. So this is only going to run the first time that we're going to create our component.

So this is only going to run the first time that we're going to create our component. We're not going to return anything, but we want to provide now something new. So let's create now this new variable. How have we called it? courseVideos, I think. And how do we get this? We're going to make already use of the video, which we already have.

We're going to make already use of the video, which we already have. Then we call a relationship called course to get the Course of the given video. And then from the course, we want to get now all the videos like this. And we also need to add the property here. Add the property here. This will be public because we want to make use of it inside our view file.

This will be public because we want to make use of it inside our view file. Property videos are null. So course is currently null. And I think that's because we haven't defined the video to course relationship yet. Inside here, inside our Video model, no, we haven't defined it yet. So let's do this. So every Video has a Course or belongs to a Course.

So let's do this. So every video has a Course or belongs to a Course. This already tells us that we need the belongsTo relationship here. And that's also what we're going to return here. This belongsTo, and this belongsTo a Course. So that's where we're going to provide the class name of our Course. All right. So we have now defined the relationship.

All right. So we have now defined the relationship. Let's try it again. And now this is working. Okay, perfect. So we now have made sure inside our test that we now see all the videos of the course on the video player page. Of course, you probably already think about some details because we already show the details.

Of course, you probably already think about some details because we already show the details of the given of the current course. So here we would also see the first video. So it's not only means that it has to be on the sidebar with all the other course videos. So of course, there are some details that we have to check on later that we don't have to forget, but it's good to have a start.

that we don't have to forget, but it's good to have a start, to have a working test and then move on from here. Another thing like that is I also want to make sure that we have some links to those other videos because on the sidebar, when we see all the videos, of course, we want to make sure that we can click one of the other videos to get there as well. So this means we not only want to make sure

to get there as well. So this means we not only want to make sure that we see the text, we also want to make sure that we see this will be now HTML because we are now checking if we see some links in the HTML. So let's also create an array here. And now we have to create some routes. And we want this for the page course videos.

And now we have to create some routes. And we want this for the page course videos. And as an argument, we need to provide the video. So there are multiple ways now to get the video. I think one of the easiest one is to check for a video where the title is a specific title because this is what we already have defined. So let's say first video and then we want to grab the first one.

So let's say first video and then we want to grab the first one. Maybe let's try it out for this first one and then we can do this for the others as well. So we already are now checking if our output contains a specific link. Okay, this already looks like it's working. So this means inside our video player, we now have to make sure that we also show a link to the videos page for this video.

we now have to make sure that we also show a link to the videos page for this video. So this will be to our course.videos route again. Now we have already here the video which we want to provide the course video. And the text will be our title. All right, let's run the test. Okay, this is passing. So this means we have now made sure that we see the route for the first video.

So this means we have now made sure that we see the route for the first video. So let's copy this and let's also do this for the other two. Second video and third one. Like this. And the other ones are also passing. Awesome. Okay, so far so good. But yeah, I think we just defined the relationship.

Okay, so far so good. But yeah, I think we just defined the relationship which we haven't tested yet. Let's check again inside our... So this is the relationship which we just have defined for a Course. I think inside our VideoTest, we haven't tested this yet. No, we haven't. So let's do this. Maybe what we can do is...

So let's do this. Maybe what we can do is... Maybe we can copy some of the tests here. Yeah, let's just go with this one from the User. And let's rename this so it has a Course. And now what we're going to do is we're going to create a new video with the VideoFactory. And this should be the same. So one Video only belongs to one Course.

And this should be the same. So one Video only belongs to one Course. And then on the Video model, when we grab the Course, then we only want to make sure that it is an instance directly because we now only get one Course back of the Course itself. And since we have already implemented this, this should already work.

And since we have already implemented this, this should already work. And it does. Yeah. Okay, but sometimes it happens we're going to forget to test something. But yeah, also by refactoring, you're probably going to see what other things that you might have forgotten. And to be clear, let's rename this.

what other things that you might have forgotten. And to be clear, let's rename this because it belongs to a Course. Yeah, I think this better reflects also the relationship which we have between a Course and the Video. All right. Back inside our VideoPlayerTest. Let's check again what we have already tested. It shows the details for a given Video

Let's check again what we have already tested. It shows the details for a given video to show the current video. It shows the given video. So here we're checking with the iframe that this is in place. And now we also want to make sure that we have some kind of list for all the other videos which we want to switch. And we've also checked that we see the routes for them.

for all the other videos which we want to switch. And we've also checked that we see the routes for them.