All right, so here's what I'd like to do for this video. At the moment, we have an attractive and functional modal for creating a new idea, but it's not currently automated, which means if I break anything, which is not impossible, uh, well, I'm not gonna know that it's broken until I manually test the form. Let's fix that. Now, before I even write a test, I first want to visit the index page

before I even write a test, I first want to visit the index page and figure out programmatically what needs to be done. Well, I would load the page or visit the page. I would click on the button that says, what's the idea? Okay, so without in mind, I'm gonna give it a data test attribute so that I can target it by this value rather than a label that's a little bit brittle. Maybe something like create idea button. All right.

that's a little bit brittle. Maybe something like create idea button. All right. At that point, if I scroll down, this will open up the modal. Uh, eventually we'll extract this into its own modal component, like an idea modal, but for now it lives here. And then at this point, I would fill out the form. So I would say, all right, uh, fill title with some generic title. Um, I can fill out the status

with some generic title. Um, I can fill out the status and let's see what we would need to do here. Well, we have a list of buttons, right? And that would be pending and progress and completed. So again, I can click it by the label, but it might again, just be helpful to do something like this data test. And why don't we call it maybe button status? And then we will echo out the status value, right?

And why don't we call it maybe button status? And then we will echo out the status value, right? So that would be button status, dash button status, dash pending button status, dash in progress. You get the idea again. Now I have a way to click that button programmatically. Cool. Um, what else? Uh, fill out a description again, I can use that. Alright, this looks fine. And then finally, I need to, uh, click the submit button.

Alright, this looks fine. And then finally, I need to, uh, click the submit button. And maybe I'll just call it by the value in this case. Okay, I feel pretty good. So now I'm gonna open up my test directory. And within browser, let's create a new file, create idea test. And again, maybe later, this goes within its own idea folder in the test directory. Um, whatever you wanna do there.

folder in the test directory. Um, whatever you wanna do there. No, describe block currently. And we'll say it creates a new idea. Let's do the happy path. All right, so like I said, we're gonna visit the, uh, that homepage or really it's the ideas page. All right, next, I'm gonna click on that button. So click by the data attributes and it's create idea button.

So click by the data attributes and it's create idea button. And let's just debug right here and see, okay, is this working? Are we on the right path? Okay, so I'm gonna give it a run. Now remember, if you do it manually, you would do tests, uh, b browsers, create idea test. Or again, if you have an extension installed like I do, I can just press command T to run the test under the cursor. And yep, we forgot about this.

I can just press command T to run the test under the cursor. And yep, we forgot about this. We need to be signed in in order to access that page. Got it. So let's begin by saying this, acting As, and let's create a user, user factory create. Alright, one more time. There we go. So again, it happens so fast you don't even see the action, but it is taking place and I can see the modal. Cool, let's get to work. Alright, so let's fill out the title,

Cool, let's get to work. Alright, so let's fill out the title, like we discussed some example title. Let's click one of the statuses. And again, let's see what it was called. Scroll up, we gave it button status, and then the name of the status. So I'm gonna say click at symbol, and then button, status dash completed, something like that.

and then button, status dash completed, something like that. Next, let's fill out the description, uh, and example description. And once again, I'm just gonna debug sanity check. Did this work and looks like it. So title, status, description. Now I just have to press that create button. Perfect. So let's click on create. Okay, so let's think about it. What should happen at that point?

So let's click on create. Okay, so let's think about it. What should happen at that point? Well, a new idea should be inserted into the database and the user should be redirected back to the main indexes page. So I could say at this point, at the very least, assert path is, um, ideas. Or again, I can use the names route there and then I could do my own expectations, like expect idea count to be one.

and then I could do my own expectations, like expect idea count to be one. Um, pretty generic, but that's valid. So I'm gonna give this a run. And we get green, it passes. Cool. Now, I might wanna be a little more specific. Let's make sure that an idea that matches these values actually exists in the database. So I could do this expect idea first to match array, like we learned about in the, in a previous episode.

to match array, like we learned about in the, in a previous episode. So I want this one to match up with some example. Title. I want the status to be equal to completed. Of course, we can store these values and variables and then reference them and as variables rather than duplicating, but it doesn't really matter here. It's so simple. And then what do we have? Description is an example. Description.

It's so simple. And then what do we have? Description is an example. Description. All right, so now if I run it, I should get green and I do. But yeah, now I have just a little more assurance that if I fill out the form with these exact values, then those exact values will get inserted into the database. It works. Now, if we even want it to be a little more targeted, I could say, all right, save this as a user variable and then access the user's ideas.

save this as a user variable and then access the user's ideas. So I could say users ideas first, um, and then that's gonna gimme the same thing. But now, yeah, just have a little more assurance that this idea is created for that user and not for somebody else. Alright, so again, I don't want to get lost in the weeds writing tests. There are some more we should write here,

to get lost in the weeds writing tests. There are some more we should write here, but at the very least we know our modal is working and that's what I care about. Okay, so in the next episode, here's what we're doing. We've decided that an idea may include links, but within our modal, there's no way to offer that. So this is actually a little bit tricky because a user can add one or more links. So we need a way to dynamically, um, append new inputs

because a user can add one or more links. So we need a way to dynamically, um, append new inputs that get saved to the database. A little bit tricky. I'll show you how to do it in the next episode.