Testing Inertia with Dusk
This episode is for members only

Sign up to access "Testing Inertia with Dusk" right now.

Get started
Already a member? Sign in to continue
Playing
11. Filling and submitting forms

Episodes

0%
Your progress
  • Total: 2h 53m
  • Played: 0m
  • Remaining: 2h 53m
Join or sign in to track your progress

Transcript

00:00
Let's take a second to update the styles of our task list and then we're going to move on to filling and submitting forms, which I know we have already looked at. This is going to lead
00:10
us on to a couple of additional things that we can do within Dust that are really helpful. Okay, so let's go ahead and update our task list here. So we have a task item. And let's go ahead and just make this a little bit better. So we're
00:25
going to set flex on here because we're going to have some buttons on the right hand side. Eventually, we'll set an item center to that and justify between. And we'll go ahead and set a specific height of 10 for each item. And we'll set a space
00:39
on the x axis of six here. That's going to space them out a little bit more. Let's come over to our index page. And let's space these things out a little bit more as well. So this will just set a space y of six in here and we should be good.
00:54
Okay, so we've got some nice, better looking tasks here. Let's go ahead and create this form and fill it out within a dust test. So as always, we're going to build this out all first, make sure it's working the browser will manually test it
01:08
and then we'll back it up with an end to end test to make sure that this looks good. So let's create the format inside of here. We can pretty much copy everything that we need from something like the register page. So let's go ahead and
01:21
grab the name field here. And we'll just steal all of this just to save a little bit of time, paste this in. And let's go ahead and update this. This is going to be a title. Now we'll update this to be a title and the same here for all of
01:36
these as well. So title type is going to be text, the V model is going to be form and title, we don't have that just yet. We don't need an autofocus, we don't need an autocomplete. We do want this to be required. We'll keep the validation
01:51
messages here as well and say form errors title. Let's go ahead and build our form at the top of the page here. So let's say form, use form. And let's put the title in here as an empty string by default. And then when we submit this, we're
02:07
going to go ahead and post this through. So let's go ahead and import use form. And let's go down to our form. And we'll say v on submit event form dot post and we're going to post through to a route called tasks and store. And that should be just
02:27
about it. After this action, we want to redirect the user back to their task list once they've created a task. So we can include that in our end to end test as well. Okay, so let's go over to our task controller. And we'll create out a method in
02:41
here called store, taking our request, so we can do some validation. And what do we need to do? Let's validate this first of all, so request validate. And we know here that the title is required, and we could set a max of 255 as per
03:02
our database. Then what do we want to do? Well, we can take the currently authenticated user access their tasks and create that tasks out task out using the request data that we've got all we could just say data, and we could assign that just there
03:19
which will be returned to us with the validated data. And then we can return redirect to our tasks index. Okay, so that should be good. So now that we've done this, let's just make sure that this is all hooked up on our client side, and we'll be
03:37
good to go. So let's obviously create out a button in here. So again, we could just take this from register. Let's find that primary button. Take that out. And we'll pop that over here. Just want to make this as quick as possible. And let's disable
03:54
this during form processing. That's all good. That is now not a register button. Let's call this create task button. And let's say create task. And that should be everything that we need. Now it looks a little bit funny because of that. So we can
04:12
get rid of that class. And yeah, we can space things out a little bit as well. So let's just copy what's on register. And I think it's probably Yeah, it's just a margin top of four around that. So let's put a div around here with a class of margin top four.
04:32
And now they don't get everything indented. Okay, let's go ahead and create that web route out. So let's create out a post through to tasks. And that will be store. And that's task store. So that should hook everything up. Let's go over and
04:47
create a task in here. Click Create task. And yeah, that's not work. So let's check our console task store is not in root list. Okay. It's tasks store. Let's just change the name of all of these. Kind of makes sense. Let's try that
05:07
again. Okay, so task three, create task. And yeah, we just need to adjust our mass assignment. So over in task, let's go ahead and set guarded to false. And let's try that one more time. Task three.
05:25
And yeah, we renamed our routes. Let's go back over to our task controller. tasks index. Okay, I think we should be good now. Last time lucky. And there we go. We're back over to our task list. Now we've got an error here. That's probably just
05:42
because of the task create route. But we can go ahead and very easily fix that up. So let's look for task and create. Create, switch that over. And there we go. We see task three a couple of times. Alright, so we know the flow now. So what we
05:58
don't really need to do here is go through the entire flow. So we've created a flow from the index to create task. In our test, we don't need to start at the index. Again, we can start on the Create task page, fill this in, submit it, and then we
06:13
should be good. So let's go over to our task test. In fact, we'll create a new test in here, I think. So what do we have so far? Let's have a look. So we've got task index test. Let's go ahead and create out our task store test. And let's fill this
06:36
in. So what do we want to happen? Well, we want to say it creates a task. And what do we want to do? We want to visit tasks and create, then we want to go ahead and fill this form in. We need to be authenticated. So let's go ahead and create out
06:53
a user in here. So we don't get into trouble. Let's make sure we create that, use that user, and we'll bring in login as. And we're logging as that user. And what do we want to do? Well, we want to type in that field. Now we don't have a specific
07:16
selector for that field. So remember, we can just use title. Nothing wrong with that. I tend not to give each of the fields that we're working with a dusk specific selector because they're unlikely to change. What do we want to type in here? Task
07:30
three. What do we then want to do? Well, we want to go ahead and press that submit button. So let's go over to the create and see what we call that create task button like that. And then what do we want to do? Well, we want to assert that we're
07:46
redirected, but we don't really have a redirect assertion. We want to wait for a location. If we don't end up at this location within a specified amount of time, which we can, as we've seen passing as the second argument, we know this hasn't
08:00
worked. So we know that we want to wait for the tasks location. And then we want to assert that we see that task that we've just created. So we've given the name task three. So we want to assert that we see task three. Okay, let's give it a go. And
08:15
obviously, if it hasn't worked, or we need to adjust it, we can do that. So let's say PHP artisan pest dusk, filter this down to this test and see what happens. Okay, great, that passed. So we know that that is now on the page. Okay, so now
08:33
that we've created this test, let's take a look at a different scenario in the next episode where we'd actually need to verify that this was in the database. We'll talk about why we would need to do that next.

Episode summary

In this episode, we start off by sprucing up the styles of our task list, making things look a bit cleaner and more organized using flex layout and some spacing tweaks. Once that’s out of the way, we jump into building a form that lets users create new tasks.

You'll see how to quickly put together the form by reusing some code from the register page, adapting it to collect a task title instead. We go through the process of setting up the form state, handling the submit event, and hooking it up to a route that saves the new task. There's a bit of fiddling around in the backend: we add a store method to the controller, make sure the title gets validated, and ensure new tasks are created with the authenticated user.

After the basics are working, we handle a few hiccups—like fixing route names and mass assignment issues—until everything is flowing smoothly. Once the form works (and shows up in the task list as it should!), we jump over to writing an end-to-end feature test using Laravel Dusk. The test lands on the create page, fills out the form, submits it, waits for the redirect, and checks that the new task appears.

Finally, we wrap up by prepping for the next episode, where we’ll look at testing the database directly to make sure that the tasks are actually being stored as expected. All in all, it’s a practical walkthrough of how to add a create-task form, hook it up, and verify it with automated browser tests.

Episode discussion

No comments, yet. Be the first!