Now do we have a nice dusk test suite? I want to refactor it a little bit because we have a lot of code repetition and I think it could be a little bit neater. So first I'm going to extract this part because we are grabbing the first User in every test. So what I'm gonna do is add a function and let's call it firstUser, which is gonna return a User. And I'm just gonna grab this and return it. And then I'm gonna replace all of these manual calls.

And I'm just gonna grab this and return it. And then I'm gonna replace all of these manual calls with first User. And then you'll see that in every test we are logging in, we are visiting some base route, we are waiting for the table, we press edit User, and then we wait for the modal content. So I also want to extract this part out. So let's create a new function below here, which is gonna be openEditModal.

So let's create a new function below here, which is gonna be openEditModel. And we are gonna accept the browser instance. Uh, we want a User model that we are gonna edit. And let's also make the baseRoute, um, dynamic. So string baseURL. And this is gonna return the browser again, so return and then this whole thing. Uh, browser is fine, user is fine, but instead of waiting for this specific users index,

Uh, browser is fine, User is fine, but instead of waiting for this specific users index, I'm gonna replace this with base URL. And then again, we are not really sure if every base URL has a table, but we do know that every base URL that we're accessing must have this added user button 'cause that's what we are testing. So we're gonna replace the table with this selector. So we are visiting the base route, we are waiting for the edit button to appear and then we're gonna press it.

So we are visiting the base route, we are waiting for the edit button to appear and then we're gonna press it. So now we can replace this stuff with uh, this call. So open edit model with the browser, with the User and with our users.index route. Let's save it and let's copy this one and paste it into the other tests. So from here till here, we're fine. And again, from here until here, hit save.

So from here till here, we're fine. And again, from here until here, hit save. Go to the terminal and run php artisan dusk with browse again and see if everything still works and everything is green. So we didn't break anything. That's great. Uh, let's see what more I want to update. I actually don't like this within modal content because now I need to repeat this modal selector every time. I just wanna do something like within modal

because now I need to repeat this modal selector every time. I just wanna do something like within modal and then directly pass it that callback. So we could do that with a macro on this browser instance, but we could also introduce our own browser and let's do that. So in this tests directory I'm going to introduce our own Browser class. So namespace tests; class Browser. And this is gonna extend the DuskBrowser.

So namespace tests, Browser. And this is gonna extend the DuskBrowser. So we need to alias this maybe as a base Browser. And then we need to tell Dusk to use this Browser clause instead of the default one. And we can do that within DuskTestCase maybe below here we need to introduce a new browser function, public function newBrowser, which accepts a driver and that's gonna return our new browser, our custom browser.

which accepts a driver and that's gonna return our new browser, our custom browser. So let's import it from the test directory and let's pass that driver. You don't really need to know what this does, um, but this is how it's uh, done. So let's go back to our test and then I'm gonna replace the dusk browser with our own browser. Then in here within modal,

with our own browser. Then in here within modal, I want this syntax. So let's add this public function within modal, which is gonna accept that callable and it's gonna return the browser itself. And in here we just want to call within with that selector. So modalContent and pass that colorBall.

And in here we just want to call within with that selector. So modal content and pass that color ball. So it's just a little wrapper without within, but just make sure we don't have to repeat that selector all the time. Then we can actually use this short syntax, which is really nice. Let's change the others as well. So instead of this, we can do within modal and here as well.

So instead of this, we can do within modal and here as well. And remove this one. Let's see if everything still works. And that still works. And we could do the same with uh, closing the modal. So here we are calling waitUntilMissingModalWrapper. Let's do the same here. So here we can do waitUntilMissingModal.

So here we can do waitUntilMissing modal. That's added to the browser. Plus public function waitUntilMissing, uh, not browser modal return this, waitUntilMissing the modal wrapper. Let's hit safe and try again. Yeah, still seems to work. And then the last thing, we can also do this for wait

Yeah, still seems to work. And then the last thing, we can also do this for waitForModal content to appear. So instead of waitForThisSelector, let's call it waitForMod and then call it as a function. So in browser we also can add function, waitForModal, which is gonna return itself, return this, waitForModalContent. Yeah, that seems nice. Let's try again. Still green.

return this, wait for modal content. Yeah, that seems nice. Let's try again. Still green. So we didn't break anything. And then I want to do one last thing. You know in our demo application we have the add button on the index page as well as on the profile page. And I wanna make sure that all of these tests run both on the index page as well as the User profile test. And without duplicating all these tests, uh,

as the User profile test. And without duplicating all these tests, uh, we can introduce a data provider or a data set in base to make sure that all these tests run on both pages. So let's do that. Let's go to the editor and we're gonna introduce a data set. And I'm gonna call this one. Let's scroll a little bit. I'm gonna call this one baseURLs and that's gonna be an array.

I'm gonna call this one baseURLs and that's gonna be an array. Let's call the first one baseURL users index. That's gonna be callback to this route users index and we need to pass it as a callback and not directly as a route because at this point the Laravel framework has not been booted yet. And if you do it as a callback, then pass notes to call this method after Laravel framework has been booted.

And if you do it as a callback, then pass notes to call this method after Laravel framework has been booted. So let's do it like this. And then base URL users show again a callback to users.show. And that's gonna be the first User that we want to edit. Now I can use this base URL as a data provider with a with method. So I'm gonna pass base URL in here. And then this test will accept our base.

So I'm gonna pass baseURL in here. And then this test will accept our base route as an argument. So now we have baseURL in here. Let's pass it on to the next gullible. And then instead of calling this usersIndex, uh, absolute route, I'm gonna replace it with this dynamic baseURL. And also in here we want to make sure that we are redirected back to the baseURL.

And also in here we want to make sure that we are redirected back to the base URL. Now one thing we don't need to forget is to add the dusk selector to the profile page as well. So let's go to show the few and then the added button in here. Here we also need to add that dusk attribute, so added user and then user do id. Let's see if this works. So let's go to the terminal, let's clear this out.

Let's see if this works. So let's go to the terminal, let's clear this out. And let's do dusk. I think we can do dusk close. So again, uh, this is my shortcut to only run one test dusk close. So now you've seen that it works on the users index page and on the users.show page. And I'm gonna introduce a little pause so that you really can see that it works. So maybe after we've opened the mod, yeah, maybe here

that you really can see that it works. So maybe after we've opened the mod, yeah, maybe here I'm gonna introduce a little pause of maybe three seconds and run it again so that you can see that it works. So here we are on the index page with the model on top of it, and here we are on the User profile with the model on top of it. So again, we didn't have to duplicate the test, we just introduced a data provider or a data set in past and it all works really great.

we just introduced a data provider or a data set in past and it all works really great. So let's remove the pause again and let's use the dataProvider in the other tests as well. So in this test I'm gonna use baseURL, pass it on, oops. And then again, use it in here instead of the users.index page. Let's copy this to the next one, the validation errors baseURL, use baseURL.

Let's copy this to the next one, the validation errors base URL, use base, URL. Again, same mistake, let's replace it. And then we are gonna run the whole dusk test suite and now with two routes. So let's see if it works. So now we went from three tests to six tests without almost no duplication. So we only need to duplicate this dataProvider. So that's a really clean way to run multiple tests.

So we only need to duplicate this data provider. So that's a really clean way to run multiple tests or run your test multiple times with different arguments. So I think we've really cleaned up our test suite. Now we are ready to refactor our actual Modal component and our whole modal backend stuff. See you in the next one.