But when we check now the page again, there's also this mark as completed button. And if we take a look at this, yeah, it seems like nothing is happening here. Let's also check out our DevTools here. And I'm interested in the network tab. And here we're looking for HX requests. So normally, if we have some interactions with Livewire component, there must be a request being sent to our backend. But yeah, we see nothing is happening here. Okay, so this means this is not working as expected. So what is happening?

Okay, so this means this is not working as expected. So what is happening? Do you know already what it is about? Maybe you already have guessed it. So the issue is that we have not included Livewire here. So let's check our course videos page. And yeah, it's because inside our course videos page, we only provide here the Livewire component, but nothing else. So this means no assets are being provided here for making use of Livewire itself. But there is an easy way to fix this by already using the given app layout, which comes with

So this means no assets are being provided here for making use of Livewire itself. But there is an easy way to fix this by already using the given app layout, which comes with Chatstream. If we try this now again, let's take a look. You can see already that we now have the navigation bar here again. And also the styling is a little bit different. And we don't see the button quite good, but here it is. And if we try this now, you can see that it is working now. And now we should also see inside our network tab, the requests which are being made to Livewire.

And now we should also see inside our network tab, the requests which are being made to Livewire. Yeah, here they are. Okay, perfect. But still we can clean this a little bit more up here. And let's go to the dashboard because here we are using this as well. You can see the app layout and here we also have a slot for some kind of header, which we can also use here. So let's bring this in and we're going to name this now. Maybe let's just go for videos.

So let's bring this in and we're going to name this now. Maybe let's just go for videos. And now you can see we also have here this little header provided by Chatstream. All right, so far so good. There is only one thing left, which I noticed while checking the browser. And we have a test which is working, but not exactly for the correct reason. Let's go directly to the test, which is called PageCourseVideosTest. And first, what I can see is that we haven't refactored this like we have done it with other tasks because we're still using the static text. So let's get rid of the state method here.

other tasks because we're still using the static text. So let's get rid of the state method here. Let's try to write the test now without the static method. And we can do this by providing the course videos and we're interested in the first one. Let's use the relationship method here. So I think this should still work. No, it does not because we're not interested in the first video, but in the title of the first video. Okay, good. So this is working again and this now looks a little bit cleaner.

Okay, good. So this is working again and this now looks a little bit cleaner. But when we take a look at what we're testing here is that we see the title of the first video and I want to make sure it shows the first video by default. So let's check this in the browser. Let's go back to our dashboard and again to the videos. So by default, we're showing this video welcome to this new course and the video is called intro. And then we're making sure that we see this title on the page. But what we're also going to provide here is a list of all the given videos.

And then we're making sure that we see this title on the page. But what we're also going to provide here is a list of all the given videos. So this means the name of the first video is of course also inside this list here. And this also means if I'm now going to the second page, of course, this name of the first video is also on the page. So yeah, this test is working, but actually it's not working as we expected. So actually we're interested in that we only see the title here for the first video, which is only given once here just beneath the video. So let's take a look at the markup and think about how we can check only for this. So where do we have it here?

So let's take a look at the markup and think about how we can check only for this. So where do we have it here? Here we have the video title. We have it already with the duration together. And then later down here, we have the list where we're providing all the titles. So the main difference that I see here is that we're using here an h3 element and we're using the getReadableDuration here. So this means what we can do instead of just looking for text, we can look for some HTML by using the assertSee method. And now we're making sure that we see the h3 element as well, because this is the main

by using the assert method. And now we're making sure that we see the H3 element as well, because this is the main difference. So I'm now checking if there is an H3 element and I'm going to wrap now the whole title inside the curly braces so that it works inside the double quotes. And I think this should do it. Let's try it again. And it's failing. Yes, because we need to also provide here what is by default, let's check this again. The second parameter to escape is by default true and we want it to be false because let

Yes, because we need to also provide here what is by default, let's check this again. The second parameter to escape is by default true and we want it to be false because let me show you again. I just saw it here that we're looking for the escaped version, but we don't want to do that. We want to check it as it was. And now this is working because now we're checking for this h3 element inside the HTML. And this is something that's going to happen multiple times. If you're using TDD, that you're writing a test, it works and later on it still works, but sometimes for the wrong reasons, because you changed the code.

If you're using TDD, that you're writing a test, it works and later on it still works, but sometimes for the wrong reasons, because you changed the code. Now you have new markup on the page. Now we have the title twice on the page, and then you have to sometimes go back to some tests and try to adapt them to make them work with the current version of your app. All right. So this was the first look into our application through the browser. And we have found a few things which weren't working as expected yet. So it's always a good idea to check over the browser, but still, I think it's very cool how much you can already build without checking the browser and without getting distracted.

So it's always a good idea to check over the browser, but still, I think it's very cool how much you can already build without checking the browser and without getting distracted by how you're going to design something.