Okay, let's take a look at pages and components in Dusk. Pages and components allow you to clean up your repeated code throughout your Dusk tests. So let's start off with pages here. And if you remember, in the last video, we have our PostTest, and some of these tests require you to log in and we're making use of Laravel's loginAs method. But let's say that this method did not exist. So we would have to manually log the User in, we'd have to go to the login page, fill out the form, and then continue the test. So let's do that. Let's first make a new test here.

So let's do that. Let's first make a new test here. So php artisan dusk make, let's call it PagesTest. And let's go to that PagesTest. And let me just grab this test here. And then we'll recreate it without the loginAs method. Let's paste that in. And we are no longer going to use loginAs. So we have to do this manually. And we already did this manually in the AuthTest.

So we have to do this manually. And we already did this manually in the AuthTest. So if you go to LoginTest here, we already have a User. So all we have to do is grab this and paste it in here. So let's remove the semicolon. And let's also make sure that we log out. And we have this functionality up here. So let's grab this and paste it at the end here. Okay, so let's go ahead and run this test to make sure that it works. And we have to import Post and User.

Okay, so let's go ahead and run this test to make sure that it works. And we have to import Post and User. And we also have to use database migrations. And let's run that test again. So I think we need to, yeah, we need to use the correct email here. And we are getting that from the post user email. And the password should be fine. Let's try this again. Okay, so now we're passing. So if we were to grab the other test here, say edit a post, let's grab this and paste.

So let's try that again. Okay, so the tests pass. But now we have repeated code. So all of this is repeated here and repeated here as well. So that's where page objects come in. So we're going to extract this logic into a Page class. So let's go ahead and do that. So let's go to the docs and say php artisan dusk page. And in our case, Login is what we're making a page for. So that's good.

And in our case, login is what we're making a page for. So that's good. And now we have this page component within pages, and we have login, and we have this URL method. So in this case, it's /login. And we have this assertion that we can just leave. We can alias some of our selectors here, which we'll do in a second, but we can also define methods which we can use. So if we scroll down, we can make use of page methods here. So let's grab this, and let's put it here.

So if we scroll down, we can make use of page methods here. So let's grab this, and let's put it here. And let's rename it to fillInLoginForm. And it takes a browser and an email and a password. So let's add those as params. And now we can take the repeated code in our pagesTest and just paste it in here. So all of this can just go in here. So let's remove this, paste that in. And we can replace this with the param coming in. So this is email.

And we can replace this with the param coming in. So this is email. And this is password. And for the selector, this will work. But to show you how to use this elements array here, we can say loginButton. And then let's grab this selector and put it in here. And now we can say loginButton here. Okay. Make sure to put a semicolon here. And let's see how we can use this in our test.

Make sure to put a semicolon here. And let's see how we can use this in our test. So back to the docs, we scroll up a bit. You can see that we can use this visit method and then pass in that class. So let's do that in our PagesTest back here. We can say visit, and then we can say new Login and make sure to import that. So that's this Login here. And then we can call that method that we made. So fill in loginForm, and we can just say $user email, and the password is password. Okay.

So fill in login form, and we can just say post user email, and the password is password. Okay. So we can grab this and replace the other one as well down here. So all of this. And let's see if I did everything correctly, and everything is passing. So now we've extracted that repeating logic into its own page object. Okay. Now let's take a look at using components which are similar to pages but are intended for pieces of UI. So I have a model here, a CreatePost model, and it appears on two pages.

for pieces of UI. So I have a model here, a CreatePost model, and it appears on two pages. So on this index page and on the show page. So as you expect, it opens up a model, and you can create a new post from here, a new post. Hello from model and create the post. And that works as expected. And there's a new post. So let me show you that in the code, just a basic bootstrap models and some using bootstrap. So it's in two parts, because that's how models work.

So let me show you that in the code, just a basic Bootstrap models and some using Bootstrap. So it's in two parts, because that's how models work. We have the button right here, and the target is this exampleModel. And that exampleModel is in the layouts file. So app.blade.php, and I just put it down here. So right here, this whole thing, and within this is the form for creating a new Post, which I basically just copied from the create page. So to save some time, I already wrote a test for it. So I have this NewComponentsTest. And I have two tests, one that tests if we can create from the index page, and one that

So I have this new ComponentsTest. And I have two tests, one that tests if we can create from the index page, and one that tests if we can create from the show page. So as with pages, we have repeated code here. So all of this clicking the model up to here is the same for both tests. So what we can do is extract to a component, same way we extract it to a page. So let's just make sure that the tests pass, I'm going to run that again, ComponentsTest. And they do pass. So let's go ahead and make a component here. So back to the docs.

So let's go ahead and make a component here. So back to the docs. Let's say php are in dusk component, and let's name it, CreatePost model. Okay. And let's open that up. And for the selector, I'm going to leave a blank, just because we have two components for a model. We have the button and we have the actual model. So the scope can be kind of confusing when we're running our test. So I'm just going to leave a blank.

And let's see how we can use this. So back to the docs for using components. We can visit a page and then use this within method and pass in the component. So let's copy this and go to our tests. So ComponentsTest. And let's get rid of this. Let's use the within method. Let's new up the CreatePost model. And I believe that imported. And from here, we can call the method that we made.

And I believe that imported. And from here, we can call the method that we made. So I named it. I didn't name it anything. So let's change the name. Let's say fillInPostDetails. And let's grab this and let's call it here. And there's no params. And I think this should work if I did everything correctly. And let me just put it in the other method as well.

And I think this should work if I did everything correctly. And let me just put it in the other method as well. So now we're visiting the show page. So we can leave it up to here and just replace this. And hopefully I did everything correctly. Let's run our tests. And everything is passing. But now we've extracted to a component. So if you find that your Dusk tests have a lot of repeated code, definitely make use of pages and components within Dusk.

So if you find that your tests have a lot of repeated code, definitely make use of pages and components within Dusk.