Factory-Fill for Faster Testing0:00
One of the things that I find really interesting about us as developers is a lot of people will focus so much on how do I automatically test my app and focus on how fast can I get my test suite to run, how can I save time, I don't want my test suite to run for 20 seconds, I want it to run for 10, but I think developers spend much more of their time manually testing their applications instead of running those automated test suites. And so how can we make the manual testing of our application go a lot faster? Well, one way is when you need to create some data in your app from the UI, why does it take so long? Why do you have to type, you know, you've seen in my earlier videos, I'm fast forwarding a bunch of stuff because it takes me a long time to type in all those fields. But if we already have a factory that can spin up all the data we need to create a new model, why don't we just integrate that factory to the front end of our app, and when we need to create a new record, let's just hit a button and do that. So that's what I want to implement now. This is easy to do in Filament, but if you're not using Filament, this is completely framework agnostic. It doesn't matter what you're doing. I highly recommend adding this type of a button so that you can get through your forms faster when you're doing your local development. So let's go into our app and go to the conference factory.
Update Conference Factory1:09
I highly recommend adding this type of a button so that you can get through your forms faster when you're doing your local development. So let's go into our app and go to the ConferenceFactory. And we actually need to make some updates here because we've made some changes. The region is no longer a word. It's a random element from the RegionEnum. And the venueId, this is not a random number. This is an actual Venue model. So we'll pass in a factory here. The status is not a word even. So if we go back to the Conference model and take a look at what the status options we have.
The status is not a word even. So if we go back to the Conference model and take a look at what the status options we have. Now, this might be better to make into an enum. I'm not going to do that right now. But you might want to actually make this an enum. But we'll do a random element from this array. And I just want the keys, not the values. Okay, so now this should work as a factory. Let's go into Tinker and spin one up. So we're going to use make instead of create.
Let's go into Tinker Well and spin one up. So we're going to use make instead of create. And you can see that this did make one. But this is important because make means you don't persist to the database. And if we were going to create when we're trying to fill data into our form, that's not going to work because then it's going to be in the database. Anything that needs to be unique is not going to work. So we just want to make the factory model and insert that data into our form. So if we go into our Conference model again and we go to the form, now at the very bottom, what I want to do is add this button into the actual body of the form.
Add Form Action Button2:29
So if we go into our Conference model again and we go to the form, now at the very bottom, what I want to do is add this button into the actual body of the form. Now you can do this a bunch of different ways. In Filament, you've got options to add header actions, footer actions if you're in a modal. But no matter what, you always have a form. So when I want to do something like this, I want to put it inside the body of the form. So no matter whether it's in a modal or not, it will show up. And let's go to the Filament docs to make sure we understand how to do that. So I'm in the docs on the form section and I go down to actions. So this is where we are.
So I'm in the docs on the form section and I go down to actions. So this is where we are. And you can add actions on a form input, which is the beginning of these docs. But we're not trying to add the action to a specific input. It's just to the form itself. So you can see there's a render anonymous sets of actions. That's what we're going to do. And so when we come down here, you actually, you can't add a single action by itself. You have to add a group, even if you only have one. So I'm going to copy this whole thing from the document.
You have to add a group, even if you only have one. So I'm going to copy this whole thing from the document. And when we paste this in, we're going to see something like this. I'm going to delete the second action. So we're just going to have that one star. So we go back to phpStorm. And here, after my final section, I'm just going to paste this in. We need to import the classes. Make sure this is the Forms class. And then this action here, there's a lot of action classes.
Make sure this is the Forms class. And then this action here, there's a lot of action classes. So make sure you pick the right one. We are in a form, so we have to pick the Forms action. All right. And we're going to delete this. The action is called star. And we want to make a label here. So the label is going to be, you know, fill with factory data. And sure, we can have it as a star.
So the label is going to be, you know, fill with factory data. And sure, we can have it as a star. I don't want to require confirmation. And then this action method on the action class defines what actually happens. So first, let's just test and make sure it works. So we'll see if we can get Ray to say hello. And let's go back to our browser. Refresh our create conference page and scroll to the bottom. So we have this star button that says fill with factory data. If we click the button and pull up Ray, we do have hello here.
Fill Form via Livewire4:36
So we have this star button that says fill with factory data. If we click the button and pull up Ray, we do have hello here. So we can see that the action is working. It's tied to the back end. Now all we have to do when this button is clicked is generate our factory and fill the data. So to do that, the first thing we want to do within here is let's get some data. And that's going to be the ConferenceFactory. And we're going to, again, make. We don't want to persist to the database. So make versus create.
We don't want to persist to the database. So make versus create. And we'll put it into an array. And the only other thing now we have to do is find a way to fill the data in the form. Now the form exists on the Livewire component. And so what we need to do is pass in Livewire to this method. And that's going to give us access to that component where we can get the form. If we want to see what this looks like, we're going to Ray out Livewire. And let's actually get the form from there. And go back to our browser just so we can see what's actually happening.
And let's actually get the form from there. And go back to our browser just so we can see what's actually happening. Let's bring up Ray. We'll pin it. And when we click here, you can see that passing in Livewire, getting the component within that closure, and then accessing the form on it gives us access to it. And so now we can call the fill method on that form and fill it with the data that we generated. So we have the Livewire form. And we actually don't want it right here. We need to generate the data first, which we did there.
And we actually don't want it right here. We need to generate the data first, which we did there. So now we're going to fill with the data. We don't need the Ray. And it should be as simple as this. So let's go back to the browser. We're going to do a hard refresh. And when I click the button, what I'm hoping is that all of the fields will be filled in. Okay, so I'm getting an error. And in the previous videos, when we did the edit option form,
Fix Venue Factory Error6:15
Okay, so I'm getting an error. And in the previous videos, when we did the edit option form, the problem it looks like we're having here is if we go back to the conference or we see the venue, we have an edit option form. But when we make, here, let's go back to TinkerWell and see. We have this venueId. But remember, when we make, it doesn't persist the data. So it factored up a venue, but that venue doesn't actually exist. And then we're trying to create an edit option for a venue that doesn't exist. So that's the error we're getting.
And then we're trying to create an edit option for a Venue that doesn't exist. So that's the error we're getting. So there's a couple ways we can fix this. Number one, we could do something like we could unset the data. We can do that. So this should work. If we go back, give it a refresh, and come down here. Yeah, so that worked. So now you can see we filled in all these fields. We might want to actually change the dates of the factory and make it make a little more sense.
So now you can see we filled in all these fields. We might want to actually change the dates of the factory and make it make a little more sense. Obviously, we can't start in 2010 and end in 2004. So let's do that really quickly just so this is generating some real data. So instead of here, let's have the date equal now()->addMonth(9). And then we'll have an endDate. And then we'll add 2 days. So this is going to be the startDate and the endDate. So instead of just generating something completely random, we'll have the startDate here and this will be the endDate.
So instead of just generating something completely random, we'll have the start date here and this will be the end date. Okay, another thing we could do, and again, the venue is usually not, we don't know the venue when we create a Conference because we're creating it, we are planning it, we haven't chosen a venue yet. So probably a better way would be just to set the venue_id to null with the factory. And now here we don't have to unset it because it was never set in the first place. That will address our issue. If we go back one more time, we refresh. And now when I'm doing my manual testing, I scroll down right by the create button,
Restrict Button Visibility8:11
If we go back one more time, we refresh. And now when I'm doing my manual testing, I scroll down right by the create button, I can just click here and the whole form is filled out. And now the last thing we need to do is just make sure that this button does not show up if we're not in our development environment or even on the edit form because it doesn't make sense to generate a brand new model on edit form. So let's go back to the code, do that, and then we should be done. So on anything in Filament, whether it's an action or an input field or anything, we can declare when it should be visible. And so if we do that, we'll add this visible method and we'll pass in a closure.
we can declare when it should be visible. And so if we do that, we'll add this visible method and we'll pass in a closure. Now there's a couple things that we can pass into this closure here. One is a string for an operation. And this will tell you, is it an edit or a create? So we can just check really quickly if operation equals edit or does not equal create. Let's say that. And we'll return false. So we only want this to be visible if it's create. So that will return false.
So we only want this to be visible if it's create. So that will return false. And then also if our app environment, let's just check for local. And so if it's not local, we will return false. And then finally we'll return true. All right, so this should work for us. I'm not going to test. Well, we can actually test in the browser where we can go to a conference that already exists. And now here on this conference, you can see because we're editing, the button is not visible.
And now here on this conference, you can see because we're editing, the button is not visible. If we weren't in local, it also wouldn't be visible. So this looks like it's working. And now we have a really fast, easy way to spin up dummy data when we're using the UI of our application.
