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
17. Asserting input values

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 go ahead to build up the edit functionality of each of our tasks and go ahead and toggle an input to appear in place of the task and go ahead and of course write a test for this and see what needs to change here. Okay so if we head over to our task item let's add another button in here
00:19
and this will be our task edit button we'll just give this a name now and sort of anticipate this and we'll go ahead and create an editing ref out and we will toggle that over to the opposite of whatever value it is let's go ahead and call that edit and we'll get rid of this class so up here what I mean is we're going to have a ref in here and let's give this name editing and by default
00:44
that's going to be false that will go ahead and switch over that value we'll also make sure we pull ref in from view and when this happens we can get rid of the task title and we can instead show out a form so let's go and build out a really basic form here and I'll just put editing state and let's say v if editing and then down here we'll say v else and that should toggle
01:08
that over nicely so let's go ahead and hit edit and there we go we're switched over to an editing state this is going to be an input with the original value of the task and then we can go ahead and check within our test that this is actually switched over properly so let's go and bring in a text input in here for the model let's go ahead and bind this in this is going to be from
01:31
a form so let's just call this edit form and title and let's go ahead and give this a class with a height of 10 and a width of full and for our actual form itself let's go ahead and set a flex grow onto that okay so let's go and build out the edit form so edit form and that's going to be a use form with inertia so let's go ahead and pull that in from inertia and the title for this is
01:58
going to be the original title for the task so we just want to say props.task.title okay let's go and check this out so when I hit edit that should switch over now it hasn't actually given us that so let's just go and see why that is yeah we've bound that in and that's not its fee model okay let's try that again and there we go great okay so our toggle functionality is working for our
02:23
tasks but how do we test for this let's go ahead and create our a new test so let's say php artisan dusk make task patch test and let's go over to that task patch test and start to write this out okay so let's say it toggles the edit state for a task pretty straightforward of course we're going to need a user as usual let's pull that in create that out with our factory and go ahead and bring
02:56
that into scope here and we need to go ahead and log in as that user let's do that first of all and let's visit the tasks index page so we'll use our root helper here as we mentioned earlier that could be really useful okay so let's go ahead and run this test and then we'll fill the rest in to make sure this functionality is working as expected php artisan pest dusk and filter this
03:23
down to here okay great that is working so what do we need to do here well we want to go ahead and press that edit button so let's go back over to our task item we call that task edit button again what we're going to do is create out a task and just assume that this is the only one because we're just testing this in isolation because we have this in a component it should work in exactly
03:45
the same way so let's say task factory for user and create and let's go ahead and just press that task edit button okay i'm just going to go ahead and run this again just to make sure that's working and that's good and what do we want to assert here well we want to make sure that when we hit edit this actually has the initial text or the text that the task title has within that input
04:17
now we might assume that we want to say something like assert c for example we might want to see the task title in there and if we just bring the task into scope here let's see what happens when we use assert c with with this test you can see that it fails so it can't actually see the text anywhere on the page which is odd because we know the functionality is working similarly we
04:42
can't also use assert c in and then provide the selector so for example over in the task item we could give this a dusk name of task edit input and we could try to look within that to see if that task text is in there and again this is going to fail so instead there's a method called assert value which will assert the value of a certain component like a text input or a
05:16
text area or anything like that with the value that we provide in here so again let's go ahead and run our test now that we look inside of that input but it will actually assess the value of this we can't see this on the page because it isn't text that sits on the page it's a value of an element on the page which we can access only via javascript we don't physically see that so
05:40
anytime you're looking inside of inputs for either a default value or a value that changes based on an action you can use assert value instead okay now that we've got the foundations of this let's go over to the next episode and look at everything that we need to do to go ahead and type in a new task title maybe hit the enter key and actually have this update

Episode summary

In this episode, we're diving into adding edit functionality for our tasks. We kick things off by updating our task item component to include an "Edit" button. When you click this button, it toggles the state to show an input field instead of just the task text, allowing you to modify the task title.

We set up a reactive state (editing) to track whether we're editing or not. When the user clicks "Edit", we switch on an input form pre-filled with the current task title, using a model bound to a form object. There are some little hiccups around making sure the value is actually displayed in the input, but we sort those out along the way.

Once that's set up visually, we turn our attention to writing a test for this feature. We use Laravel Dusk to automate a browser test: log in as a user, visit the task list, create a sample task, and simulate clicking the "Edit" button for a task. The key thing we're learning here is, when testing for input values, you can't use the regular assertSee method—you have to use assertValue because the input's value isn't plain text on the page, it's tucked inside the element's value property.

By the end of this episode, you've got a task list where you can switch into edit mode for a task and verify via testing that the correct value is in the input. Up next, we'll look at updating the task title after editing and making sure those changes stick!

Episode discussion

No comments, yet. Be the first!