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
18. More typing, and hitting specific keyboard keys

Episodes

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

Transcript

00:00
So once again let's go ahead and build out all of the functionality to go ahead and enter a new task title in here. Go ahead and hit enter and have this actually updated in the database. So if we head over to our task item, when we submit this form let's go ahead and do something. So let's
00:15
pull these down to a new line here and let's say v on submit. We want to prevent the default behavior and go ahead and make a request. So we can either do this in line or we could create a method out for this. So let's actually create a method out here. So let's call this edit task and we will go ahead and just invoke edit task when this gets submitted. So let's fill this out now and then
00:43
we'll go ahead and create out the route that we need for this. So we're going to go ahead and say edit form and we want to patch through to a specific route. This is going to break out front but we can go ahead and update this and create the route out for it. We need to provide the task in here so that's props and task and then on success of this what do we want to happen? Well we want to
01:07
set editing back to false once we've gone ahead and edited this. So let's just have a look here editing that needs to be editing dot value and we should be good. Let's go ahead and fill this in our task controller we'll bring everything together and then of course we will write our test. So let's call this patch we know that we need a task in here to actually update. Let's go
01:31
ahead and bring our request in here like so. We'll add in some validation rules but we won't test for them like I said it's probably best kept to feature tests but let's go ahead and make sure that this title is required and has a max of 255 and of course you could bring that into a form request if you wanted to as well. So now that we've got this let's say task update and we will say request
01:59
or we could say yeah let's set that data there and let's update this with that data that's been validated and then we'll go ahead and return back. Okay so this should work let's go ahead and create our route out for this and that's going to be a route patch through to that task hit that patch method and we'll call that patch. Okay let's make sure that we have this all hooked
02:22
up properly so we've called that update so let's change the name to update for everything here just to keep a little bit of consistency over in our task controller we will do that as well. Okay let's go straight over to the front end and try this out so task one updated I'm going to hit the enter key and yeah let's just make sure we say request validate and let's try this again so task one
02:52
updated and let's have a look again here and yeah let's get rid of that so I'm looking at the old way of doing it in Laravel whereas now we do it via the request. Okay third time lucky let's go ahead and say task one updated hit enter and there we go great so our functionality is working this is pretty complex because what we need to do is we need to hit edit we need to somehow either add to
03:18
this task title or we need to completely get rid of it and then type something in here so we need to see how that interacts within Dusk in our end-to-end test then we need to press the enter key on our keyboard because I've specifically set this up so we don't have a button that we can click we've covered that a million times already so we need to be able to hit enter on our keyboard
03:38
with Dusk let's go over now and see how we do this so over in our task patch test let's create out another test it updates a task title and we can pretty much grab everything that we've got here and then just get rid of it and start fresh so we've got a task that we want to update here we've got that in scope we log in as the user we visit the task index and from there we're not
04:02
really sure what we need to do in fact we are we want to press the edit button and let's run this and then go ahead and fill in the rest so php artisan pest dusk filter this down and let's see what happens okay great that's passed let's see what we need to do so another thing that we could do here is we've created a specific test out to see the toggle for the edit
04:27
state of course what we could do is combine these two things together obviously what we don't want to do is get into the habit of writing too many individual end-to-end tests just because of how long each of these takes so i'm going to leave this in here because i wanted to just cover it in a completely separate episode but what we could do is we could take the assert value we could add
04:48
it to this test here and what that means is we've pretty much covered that same assertion just in two tests remember with end-to-end tests we want to cover the entire flow it's not like a unit or a feature test where we just pick at certain points of this so if we were to include this here we could get rid of this entire test because it just basically does the same thing and this is going
05:10
to shave off a couple of seconds of our total testing time so i'll leave this in here anyway and i will leave this in here but you kind of get the idea you want to kind of group as many assertions together as possible okay what do we need to do now well we need to type into this input a new title or we need to add to it so let's go over to our task item here and just make sure
05:34
that we have a dusk input so we yeah we do task edit input so we can go ahead and type something into this so let's say a new task title and let's go and just take a screenshot of this just to see what's actually happened so i'm just going to call that abc again okay now that's run let's go back over to our screenshot and have a look so yeah basically this is just completely
06:02
replaced out the title that we already had within there just while we're here what you can also do is you can append to this if you want to so let's say append edited with a space what that's going to do if we just run that test again and then check our screenshot out you can see that we've got the original task title in there plus edited being appended on so it depends on what you're
06:28
testing i'm just going to go ahead and leave this to type but you can use append here as well okay so now that we've typed this in what do we then need to do well we need to press the enter key because like i said before i've purposely left off a button that we need to click because we've seen that before so how do we press an enter key within dusk well we can use the keys method now this can
06:56
get pretty complex depending on the types of interactions that your keys need for example you can do things like hold down shift buttons and all that good stuff and we will probably cover that later but let's go ahead and just look at the most basic and that is hitting the enter key where do we want to hit the enter key that's the main thing where do we want this action or
07:17
javascript event to be targeted at well it's going to be within the task edit input because that's going to go ahead and submit the form and as long as the cursor is within this and we actually hit the enter key within this it will work so with the keys that you want to use these are just javascript named keys they need to be surrounded by curly braces and in our case it is the enter
07:40
key so by doing this this will go ahead and hit the enter key for us okay so following on from this what's the next logical step let's just go back over to the ui and see the thing that we kind of need to wait for so let's say abc edited when i hit the enter key what's the next thing well i kind of want to know that the input here is missing the input should be gone now so that's
08:06
a good next step we're going to say wait until missing so let's say wait until and just missing because we need a selector in here and we want to make sure the task edit input has disappeared then we can go ahead and make an assertion so in our case we're just going to assert that we see the new value that we have provided so i'm just going to assign this a value here
08:31
and change that over to there and of course we may do a database assertion as well in which case we'll need to pull the title out of here and then we can just have one place in our test where we can update it okay let's run this test to make sure that this all looks good and there we go it passes so with these kind of tests obviously not that complex but as things start to get a little
08:52
bit more complicated i like to go ahead and add in the browse option here so i can actually see this happening in the browser so it might just flicker in but let's go ahead and have a look and yeah it did so let's add some pauses here just so we can sort of see what's going on so let's add a pause in here of one second and we'll do the same thing for typing
09:15
same thing after keys and that should be just about it so let's go ahead and browse on this one and you can see that changes the title hits enter and there we go the test passes so another thing that we can do which we'll probably covering uh be covering a little bit later is you can also type slowly so this will allow you to type something in but also go ahead
09:39
and provide in if we just have a look at the method here an optional pause so we can say well i want to pause for a second between typing let's take a look at what this actually does and we'll cover it in a bit more detail later and why it's actually useful you can see here we get a one second pause between each character that is typed in the browser now one thing about the browse
10:02
option when we have this stuck in this slow state here how do we cancel our tests off while this is working well let's go ahead and run this again and i'll show you how because this is another useful piece of information so we've got a really slow running test here all i'm going to do is head straight back over to my console here which is longer running and i'm just going to cancel this
10:22
off and that's just going to cancel test off for us okay so let's go back to the actual test itself and let's go ahead and assert that this is changed in the database so we could either take this title and put it up here somewhere so we know what the new title is i'm not going to do that let's go ahead and just get rid of the title here and say a new task title sometimes these things tend to
10:47
like clutter the tests up so let's say assert database has inside of the tasks table what do we need here well we need the id so we know that the correct task has been updated that is going to be the task id and we want to know that the title has been changed to a new task title let's run this test one final time and make sure everything looks good and yeah we're slowly
11:13
typing here so we can go ahead and get rid of that of course so let's just say type get rid of that timeout and let's go ahead and try that one more time okay great so that passes we know that it's been edited in the database the entire flow of clicking on this typing something in and hitting enter is done

Episode summary

In this episode, we tackle the process of editing a task's title within our application, focusing specifically on how to update the database by entering a new title and hitting the Enter key (rather than clicking a button).

We start by fleshing out the backend functionality needed to update a task when the form is submitted. This includes handling the route, controller logic, and validation for title updates—making sure our new title meets requirements before getting saved.

Moving to the frontend, we wire up the form so users can type a new task title and simply hit Enter to submit. Then, we dive into our end-to-end tests using Laravel Dusk, demonstrating how to interact with form inputs, type text, and simulate pressing the Enter key (with some tips on using Dusk's keys method). There's also some discussion of best practices for writing efficient and comprehensive end-to-end tests, including grouping related assertions and minimizing redundant tests to save time.

We also show how you can type text either by replacing the existing input value or appending to it, and explore Dusk's ability to control typing speed for debugging and visualizing test runs. Plus, there's a quick tip for canceling slow-running Dusk tests directly from your terminal.

Finally, we verify that the title update is reflected in the database and clean up our test code for a smooth flow. By the end of this episode, you’ll be comfortable handling edits that involve keyboard interactions and have a solid pattern for asserting the results both visibly and in your data.

Episode discussion

No comments, yet. Be the first!