00:00 We have this feature where users can upload and change and delete their profile photo, and we want to make sure that they don't accidentally delete their photo just by accidentally clicking on the button. So we're going to kind of double check and make sure that they know what they're about to do.

00:18 And because it's a destructive operation, it'd be a pain for them to have to go find their profile photo again and upload it. And often what people will do is they'll have this big modal that pops up, and that works, especially if it's a very destructive operation. But a simple little double check for something like this, I think, is pretty reasonable.

00:36 So what we have is when you click on Delete, it asks, Are you sure? And then you click on it again, then it will actually delete. If you blur out of the button or click somewhere else, then it goes back to its original state.

00:50 And then finally, if you do click on it again, it will proceed and let the action take hold. So how does this work? Now, we've got this hook called UseDoubleCheck. You get back this object, and then down wherever you need to use this, you have this GetButtonProps.

01:08 This is a function that returns all of the props that you want to apply to whatever button you want to add this double check to. So this is going to be doing like prevent default and stuff like that on click. And then you also provide any other props that you want to add that should also be applied to the button.

01:27 And so these will just be merged by the GetButtonProps into all of the props that are going to be applied, all the button props that will be applied. And then you also have this DoubleCheck variable. And based on the value of DoubleCheck, if it's true, then we can say, oh, okay, so we are double checking with them.

01:47 If it's not, then we'll delete or we'll, you know, say the action that they're going to take. So the way that this is implemented, and I'm explaining all this because you need to test this. The way this is implemented is we have some state to manage the double check state.

02:04 Then we have this GetButtonProps that defines an onBlur and an onClick and an onKeyUp. And with all of those, those will be applied to our button. It has this handy callAll function that allows us to call the onBlur or onClick or onKeyUp of our users.

02:22 So if I had an onClick right here, then I could handle my click but not disrupt the functionality of DoubleCheck. So that's what that's all about. I teach all about that in Epic React. If you want to learn how to build these types of hooks, pretty cool.

02:38 And yeah, then we return the DoubleCheck and GetButtonProps for them to be used. This is called a prop getter, if you want to look that up. So anyway, the implementation, you're not going to be changing at all. We're actually just concerned about the testing of this functionality.

02:56 And what's interesting about this is that it's a hook. And so a lot of people wonder, OK, well, so how do you test custom hooks? And there are actually a couple of ways that you can go about doing this.

03:08 And the first way that we're going to be doing this is with the RenderHook utility from React Testing Library. And this is going to necessitate using Act because some of the actions that we're going to be taking are going to end up calling a state setter,

03:26 which is going to trigger a re-render and we have the whole useEffect flushing and all of that stuff. And so we have to use Act whenever we trigger one of these events.

03:37 So that we can wait for that to happen and then we flush out all of those side effects that happen after that state is set and then you can proceed with your test. So this is a little bit different from testing a regular component and we're going to kind of explore the different options that you have.

03:54 So for this step, we're going to be focusing on using the RenderHook and then we'll move on from that. So have a good time with this and we'll see you when you're done.