So this is wrapped in a setTimeout, so it takes a bit longer to show, and if I click it again, we'll get another joke. I have a button here, if I double-click it, it will show a message, and that will toggle on and off, same with right-click here. And this is an input box, but if I press Command-B, we'll get a message. And for all of this, I'm just making use of Alpine.js. Let's go ahead and make use of Dusk to test this out. Let's make a new test, php artisan dusk:make, let's call it jsTest. And let's go to that, jsTest. And let's just grab a test from our componentsTest, and let's just copy that.

And let's go to that, jsTest. And let's just grab a test from our componentsTest, and let's just copy that. And we need database migrations as well. And let's just paste that in and replace this one. So let's start with the dad joke. So say dad joke works. And we don't need a User, and let's get rid of this. Okay, so we visit the homepage, we don't need this. And we want to click the getDadJoke button. So let's take a look at that.

And we want to click the getDadJoke button. So let's take a look at that. getDadJoke. So there's the code that fetches the dad joke from the API, just making use of Axios here, and just displaying it when it comes back. So the button has a dusk attribute on it, so we can make use of that. So let's say click, and I named it dad-joke. And usually we would use assertC here, but we don't know the joke that's going to come back, so we can't use that. So we can make use of assertVisible, and just assert that the container is visible.

back, so we can't use that. So we can make use of assertVisible, and just assert that the container is visible. So the container that the joke is in is this dad-joke-container. So let's grab that, and let's say dad-joke-container, okay? So if you run this, it's not going to work because it takes some time for the API to respond. So let's run it and see that error message. So let's run js test, and see what we get here. And it says the dad-joke-container is not visible. So again, let's take a look at the screenshot here.

And it says the dad joke container is not visible. So again, let's take a look at the screenshot here. And we see that the dad joke does not show. So what we have to do is wait for that container. So we can do that in a few ways. We can use the pause command, and just wait for an arbitrary amount of time. So in this case, it's one second, and that would work, or two seconds. We can also make use of the waitFor method, which will wait for a certain element in the DOM to show up. So I'm going to use that instead.

And if you take a look at our page here, so right click is right here. And we're going to assert against this message after we right click. So let's do that. And to right click, there is a rightClick method like this. So let's do that. So the button is rightClick right here. So let's say click, rightClick, sorry, rightClick. And it's assert that we see rightClicked, like this, rightClicked, and this should pass. So let's run our tests.

pass. So let's run our tests. Okay, so that passes. And let's go ahead and take a look at doubleClick. So it's pretty much the same thing. So I duplicate this. And there is a method for doubleClick. So if you search for doubleClick here, there it is. But for some reason, it doesn't take a selector if you look at here. So let's say doubleClick works.

But for some reason, it doesn't take a selector if you look at here. So let's say doubleClick works. And it's a doubleClick here. And I believe I have a dusk attribute called doubleClick as well. Let's see. There it is. And it's assert that we see doubleClicked. Now, like I said, doubleClick does not take a selector for some reason. So if we go into this, you'll see that there is no selector param here. So this is not going to work.

So if we go into this, you'll see that there is no selector param here. So this is not going to work. So if you take a look at rightClick, there is a selector and it handles both cases. And the only difference is this doubleClick method. And for the rightClick, it's contextClick. So if you actually just take this and accept a selector, it's going to work. So let's paste this in and replace it with doubleClick. Oops, I copied it, copy this whole thing, paste it in here. And let's change this to doubleClick. And let's grab the selector in here.

And let's change this to double click. And let's grab the selector in here. And it's defaulted to null. So yeah, this should work. I'm not sure why that's not the default. I'll probably put a PR into Dusk, but let's see if this works. So let's run our test again. And I believe I spelled selector wrong. Sorry about that. Okay.

So if I hit command B, it will show that message. So if you look at the docs here, there is a section for keys or using the keyboard. And here is how we do shortcut keys. So let's make use of this. So back to our test. Let's duplicate this. Let's say shortcutKeys work. And it's assert that we see command plus B pressed. And let's grab that keys method. So we want this.

And let's grab that keys method. So we want this. And the shortcut that we're listening for is command and B. And this is the selector. And I believe I have a dusk attribute on that as well. Let's take a look down here, right here. So it's called multipleKeys. So let's use that. So at multipleKeys. And let's see if this works.

So at multiple keys. And let's see if this works. Let's run our tests. And that does pass. So yeah, definitely consider using dusk to test your JavaScript components. As you can see that it's very easy to interact with different elements in the DOM.