26 videos in and we already implemented a lot by following TDD, and we haven't checked the browser yet, not even once. Isn't it cool how much we can already build without thinking about what it will look like? I think that's pretty amazing. Still, this doesn't mean we shouldn't check the browser at some point to see what we have really built. And I think it's a good idea to do this right now. I have here a little snippet to open up the page and here we are. This is our current homepage and you can see we see all the courses which we already have. We have already added them to the database.

This is our current homepage and you can see we see all the courses which we already have. We have already added them to the database. These are our test courses. We also see a button to log in and we see a little description of every course. Of course, everything looks pretty basic for now because we haven't tackled the design yet, but that's okay for now. Let's give the log in button a try. This already looks pretty nice because this comes from chat stream itself. And also in the last video, we already added a local test user. So I think I can just log in now with my test account and yes, it works.

And also in the last video, we already added a local test User. So I think I can just log in now with my test account and yes, it works. But since I already know we're going to need this log in form a lot, because we often have to change some data and then we refresh the database and then we need to log in again. I want to help ourself here, I want to help myself here by using a little package to make this a little bit easier. And of course there is a sparsely package for this called level-login-link. And the way that this works is that we're going to add a little bit of code to our form here and then we're going to have some links here on top of our form so that we can directly log in just by clicking the link.

here and then we're going to have some links here on top of our form so that we can directly log in just by clicking the link. This doesn't sound like much, but this will help you a lot on the way and you're going to love this little feature, I can promise you. So we need to install it. Let's copy this inside our application. Let's see if there's anything else we need to do. We can publish the config file, but I don't think that we really need it right now. So let's see what else is there. We now need to add a little check here.

So let's see what else is there. We now need to add a little check here. If we are locally working, then we want to provide here this component. Okay, let's give this a try. And we need to add this to the login.blade.php file, which comes with our chat stream. And then right above our form, I'm going to bring in now this new check here. And since I already know that we have a specific User in the database, which we want to use for testing, I want to provide here the email so that this package then always uses this exact user to log us in. Okay, back on our login page, we now see this new link here to log us in.

exact user to log us in. Okay, back on our login page, we now see this new link here to log us in. And you can see it already works. Let's try it again. Logging out. We want to log in. Developer login is the name by default. And yeah, you can see it works. I think maybe we can give this a better name. There is now also a field here for the name.

I think maybe we can give this a better name. There is now also a field here for the name. Oh no, it's not name, it's label. Yes. So let's call it log in as test user. I think this is even better. We're going to log in again. Yeah, we still have the link. And we are logged in. Pretty cool.

And we are logged in. Pretty cool. And we can now use this every time we need to log in. Okay, what is next? We probably want to look at some videos as well, right? But as you've seen after logging in, we now don't get redirected anymore to our dashboard. Because this is actually where we want to go after logging in. So this means we need to take care of that. And we can do this by also providing here, let's clean this up a little bit. We have the email, we have the label.

And we can do this by also providing here, let's clean this up a little bit. We have the email, we have the label. And now what we're also going to provide is a redirect URL. And we are using the one from the dashboard. Okay, one last time, dashboard is not defined. Okay, let's check. We probably have given this a different name. Yes, pages.dashboard is what we need. And now this works again. And now we're going to log in as a testUser.

And now this works again. And now we're going to log in as a test User. And we also get redirected to the dashboard. All right, cool. And then we also want to make sure that we see our purchase courses, which we do see here. So we see here the title, and then we see here a link to the videos. So let's give this a try as well. And yeah, we really do already see some videos here. And this is because of the Vimeo ID, which we provided for our videos.

And yeah, we really do already see some videos here. And this is because of the Vimeo ID, which we provided for our videos. So this is a real Vimeo ID from a real video. And we can also watch this, of course, this now has nothing to do with this dummy course, but it is a video which we are showing here. So this already works pretty well. But you will see just in a minute that not everything is working as expected already. Because when we try to check now a different video, we will get a 404 Not Found error. And when we take a look, we can see that the URL is not correct here where we have the videos and the name of the video itself.

And when we take a look, we can see that the URL is not correct here where we have the videos and the name of the video itself. Routes are your friends, yes. But the video route, which we have defined, let's check this here together. And yeah, here we can see that our route also requires the course lock, which we're missing and which led to the bug. Okay, we could now go directly to the code and fix it. But of course, we're using TDD. So what we want to do is we want to make sure where is the test because the test must be wrong.

So what we want to do is we want to make sure where is the test because the test must be wrong. Then we're going to fix the test, it will fail, then we're going to fix the code, and then our test will pass. And that's actually every time when you find some kind of bug, it's a good idea to try to find the test which is not working. Or if there was not a test yet given, then you're going to create a failing test, then you're going to fix the code. And then also the test will tell you that everything is working. So that's what we're going to do now.

And then also the test will tell you that everything is working. So that's what we're going to do now. So it must be this one, it shows list of all course videos. So here we are creating a Course with three videos. And then we're making sure that inside the HTML, we're going to see those two routes. And yeah, here exactly is also the issue because we're only providing one parameter, which is the video itself and not the course. So let's try to fix this. So now that we have two parameters, we can use some keys. So the course is the course which we already have.

So now that we have two parameters, we can use some keys. So the course is the course which we already have. And then we have a video. And the video is now what we get here. And then we also need to close the new array. All right, like this. So now we are creating a new route with the course slug and with the video slug because that's how we have defined the URL here. And when we try to run the test now, it should fail now. Because yeah, inside the HTML here, we don't see this link with also the course slug in.

And when we try to run the test now, it should fail now. Because yeah, inside the HTML here, we don't see this link with also the course slack in it. All right, so let's check out our video player view file. Here we have it. And somewhere here we are creating a list. Yes, we do. And the route which we provide is also one only with the video itself and not with the course. And now we need to get the course through the course video.

course. And now we need to get the course through the course video. And then the video we already have here. And we still need to close the array. I think this should do it. Let's try our test again. And now it's passing. Okay, good. Now that we fixed it, it's a good idea to go back to the browser. Let's refresh the page and let's check our links here.

Now that we fixed it, it's a good idea to go back to the browser. Let's refresh the page and let's check our links here. Now I can already see that now the course slack is inside the URL. And so this means this should work and it does. So we can now also switch the videos. And this is also something that you should remember for your applications that are already live. So remember, if you have already a lot of tests, or if you haven't written any tests, if you find a bug inside your live application, try to write a test first that shows you that this specific behavior is failing.

if you find a bug inside your live application, try to write a test first that shows you that this specific behavior is failing. And then you can go to the code, try to fix the bug, and then your test will also pass. So this is a great idea to introduce new tests for your application, even if you don't have written any tests yet, because your bug will tell you what you have to test. And by the way, here's a little trick here. When we create a route like this, we can also use an array without providing the keys. So just by providing the two models, the Course model and the Video model, and this should work as well. And it does.

work as well. And it does. And we can also do this now inside the player itself. So now it gets a little bit cleaner because we have a little bit of less code. Try this again. Yes. And it is still working. Perfect.