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
14. Interacting with dialogs

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 have the ability to delete tasks and look at how we can confirm or cancel native dialogues within the browser and you can use what we learn here to later go ahead and do the same thing within modals if you wanted to add a modal to confirm something. Okay, so what are we going to do here? Well, let's go over to our task item and let's add in some links here. So I've got a task item in here. Let's just separate this into a separate component and then let's create a div out here and we'll create a space X of let's say six and then in here we're going to have a couple of buttons that are going to do something.
00:41
So one of these is going to be to delete this task. So let's go ahead and set a font of bold in here. And of course you can start that up how you like. So this is what it looks like now. Okay, so how are we going to delete the task? Well, let's add a click handler to this. Let's say be on click and let's say delete task will go ahead and create a method out up here or function out up here to handle this and let's just use a native window confirm to get this working. So we're going to say if not window dot confirm and in the text of this, we're going to say, are you sure? Then we're going to return. So if they click cancel, basically, we're going to do return. Otherwise, down here, we're going to delete the task. So now whenever we click on any of these tasks, we get a modal here when we press cancel that goes ahead and just doesn't early return. Okay, so what do we need to do? Well, let's head over to our task controller and let's add in a destroy method in here to destroy a particular task.
01:44
So let's bring the task in that we want to delete and what are we going to do? Well, let's just keep this really simple and say task delete and then return back just a really, really simple deletion here with nothing else going on. Okay, so over now web routes, let's go ahead and create out a route for this. So we want to send a delete request down to tasks, then the task itself and we'll just do that with route model binding by his ID reference task destroy and we will give this a name as well. Okay, so let's take this name and let's actually go ahead and send a request down under our task item to do this. To do this, we can just use inertia's router. So that's a router and delete and we'll go ahead and use our route helper to pass that in and the task itself. So we've got the task in here so we can just define this out as props and then we can reference it directly in here. So props dot task and that should build up for us. Let's go ahead and just make sure we import our router here and we should be good and that should send a request down.
02:49
Let's just try it out. So let's delete task five here. And yeah, sure enough, it disappears. So really simple functionality. But of course, let's go ahead and write a test for this. So let's go ahead and say PHP artisan and dusk make and let's call this task destroy test. Test and let's go over to that task destroy test test and let's do this. So it's delete the task. We basically just want to browse to this page. Go ahead and click on delete. Make sure it's out of the database, but we've got that dialogue in the browser in the way. So we'll see how we can interact with that as well. So let's say user factory and create not delete and let's go ahead and bring that user into scope here. We want to go ahead and log in as this user. So let's log in as this user and let's just leave it at that for now because we need to create some tasks for this user as well. So there's a couple of ways to do this. We could either create some tasks as we create a factory or create the user by the factory. But because we want to assert them that one of these tasks is missing, we will go ahead and create them out separately. So let's say task factory. We can continue to say for user to make this a little bit cleaner.
04:08
And we want to do this say two times. So we want two tasks and maybe we just want to delete one of these. Okay, let's go ahead and run this test. So delete a task. Let's go and run this. So PHP artisan pest dusk and we'll just filter this down to this one. And that fails for some reason. So let's have a look. Yeah, let's just make sure we pull in the correct user here. That would help. There we go. Let's run that again. And it still fails. So let's have a look here. So user ID doesn't have a default value. Okay, so I think this needs to be this way round. Pretty annoying, but let's go ahead and run that again. And yeah, great. So pass with no assertions. Okay, so what do we want to do here? Well, we want to click delete on the tasks page. So let's go and visit that page first of all.
05:04
So again, I'm going to say route tasks index to make this a little bit less prone to the URL changing. And what do we want to do? Well, in this case, what we could do is just assume we want to delete the first task in the list, we could go through and pluck out a specific task. But let's go ahead and just press delete. And again, we could assign that dusk selector if we wanted to. And we could change that over a little bit later. So let's just test this out and see if this actually works, first of all. So yeah, sure enough, it does. And remember, at this point, what you could do is go ahead and take a screenshot just to see what is on the page before you start doing things like press delete, we'll go ahead and run this test. And we'll go over to our screenshots directory and check this out. And there we go. So we know that we are pressing this one here, it will press the first instance of delete, and this is the one that we expect to be deleted. Okay, so let's go ahead and bring back the press delete. And what do we want to happen? Well, at this point, what has happened? Well, we know within the browser, this is going to launch a dialogue. So how do we accept this dialogue? Well, it's very, very straightforward. We just use accept dialogue. And of course, later, we'll look at what happens when we cancel the dialogue and see that things haven't been deleted when we press cancel.
06:24
Okay, so what do we want to do here? How do we test that this has been deleted? Well, we could go ahead and just immediately assert that this is missing from the database. Let's try this out and see what happens. So let's say assert database missing. And that needs to be in the tasks table. And what needs to be missing? Well, it needs to miss this one with a specific ID. To do this, because we know that we're deleting the first task, we've got our tasks defined up here, we can just say tasks first, and then ID. Let's go ahead and run this test and see what happens. Okay, so this fails for some reason. So let's just take a look and see. So it looks like this hasn't actually deleted it. Now we know that when we press delete, we should have that task deleted, because we are accepting the dialogue and deleting the thing. But the problem we have here is we need to wait until this text is missing before we continue to make an assertion. So let's say wait until text missing, or wait until missing text in this case, and we'll pass the first task in here and the title.
07:39
And let's just bring the tasks here into scope. And there we go. So we know now that as soon as that is physically missing from the page, we can then check this in the database. This might seem silly, because you might think, well, if it's missing from the page, and sure enough, my test is passed. But if you were, for example, using any kind of state management system that deleted this behind the scenes, and then remove this from the UI, the deletion itself might fail, but it still might be deleted from the UI. So it might end up actually not being deleted. So I'd always recommend adding in a database check in here, even if it's visually missing from the UI. Okay, we'll run that test again. And yeah, sure enough, it passes. We know that this is now working. Okay, so finally, I'm just going to fix up this delete here, because obviously, if this changes at any point, it's just not going to work. So let's go over to our task item. And let's find that delete button that we've got here. And let's assign it a dusk attribute, task delete button. And let's go ahead and swap that over before we continue. So let's go ahead and change that, run the test again. And we're all good, even if that button text changes.

Episode summary

In this episode, we dive into how to let users delete tasks in our app, and we specifically explore working with browser dialogs—the little popups that ask for confirmation when you try to delete something (like the classic "Are you sure?"). We'll build this functionality step by step, connecting the front end with the backend, and ensuring everything flows seamlessly.

First, we refactor our task item into its own component and add a "Delete" button, hooking it up with an onClick handler. When a user clicks delete, we use the browser's native window.confirm dialog to ask if they're sure. If they confirm, we send a delete request to the backend using Inertia's router, and if not, nothing happens.

On the backend, we add a simple destroy method to actually remove the task. We also set up the necessary route to handle the delete request and wire everything together.

But, that's not all! We look at how to write automated browser tests (using Laravel Dusk) to make sure this works as expected. This includes handling and interacting with browser dialogs in tests—specifically, how to accept or cancel them. We also make sure to assert that the task is really gone from both the interface and the database, so we don't end up with phantom deletions that only look successful.

To wrap up, we clean up the delete button selector in our tests to make things robust if the button text ever changes. The end result: we have a solid delete flow, everything is tested, and you know how to work with browser dialogs, whether they're native alerts or future custom modals!

Episode discussion

No comments, yet. Be the first!