در حال بارگذاری ...

Creating Dusk Test0:00

Okay, let's actually start writing tests for our blog here. So the first thing I'm going to do is turn headless mode back on, just so our tests run a bit faster. In reality, I actually like to leave it off and see the browser running. So let's go ahead and make a new test. So php artisan dusk make. Let's call it PostTest. Okay, and let's grab one of these tests. And let's go to PostTest right here. And let's replace this.

Testing Posts Index0:33

And let's go to Post test right here. And let's replace this. And let's also use database migrations. And the first test I want to write is that we can view the index page. So can view index of posts. So we are going to go to the main page. And we just want to assert that we see a bunch of posts. So let me just re-indent this. And we just need to have a Post before we start. So let's go ahead and do that.

And we just need to have a Post before we start. So let's go ahead and do that. So I'm going to say $post equals, and I'll use factories here, Post::factory(). And let's go ahead and assign a user_id here. And let's also make a new User here. So we'll use User::factory()->create() and $id, okay. And let's make sure to call create() here. And we have to use $post here. And now we can assert that we see the post title, because that appears here, and also the post author.

And now we can assert that we see the post title, because that appears here, and also the post author. So let's assert that we see the post title, okay. And let's assert that we see by, and a space. And then let's append postUserName. Okay, so if I did all of that correctly, this should pass. So let's run our post test here. And it should run a bit quicker, because we are in headless mode. And I did not import Post and User, so let's do that. And make sure to import Post as well.

And I did not import Post and User, so let's do that. And make sure to import Post as well. And let's try that again. User ID, this should not be a method. Try again. And that is passing. So maybe we can have more than one Post. So let's say postA here. And we'll make another one here. So let's say postB.

And we'll make another one here. So let's say Post B. We can do this. Post B. And this will create a new User. And we can assert the same thing, but for the new Post here. Let's change this to Post A. Post A, okay. And Post B for this other one here. And this should still work, hopefully. Let's run our tests. And everything is still passing.

Testing Single Post View3:35

Let's run our tests. And everything is still passing. Cool. Now let's write a test for the single blog page or the single post page. So if we click into this, let's make sure that this works. So let me duplicate this. And let's name it canViewSinglePost. And we only need one post here. So let's just name it post. We don't need this.

So let's just name it post. We don't need this. And we are going to the single page. So we'll use the route helper here because I have a route name for that. And it is post.show. And we have to pass in the post. And let's make sure to only use the post that we need. And we can assert that we see the post title. And on the single page, it's almost the same, but we have by: and then the post author. So let's say by: and then the post author.

And on the single page, it's almost the same, but we have by colon and then the post author. So let's say by colon and then the post author. Okay. And we also have the post content. Okay. So I think that should be good enough. And I think this should pass. Let's run that again. Okay, cool. Okay.

Testing Post Creation5:04

Okay, cool. Okay. Now let's test creating a Post. So the way I have it here is you have to be logged in to create a Post and a create Post button shows if you're logged in. So let's go ahead and log in. I believe I have a User here. Okay. And if I go to the main page, you'll see that create Post button. So let's start with that.

And if I go to the main page, you'll see that create post button. So let's start with that. Let's assert that we can see the create post button if we're logged in. So I'm just going to put this in one test, although you can separate it out if you want. So I'm going to duplicate this. And let's say canCreateAPost. Okay. And we want to go to the home page. So let's change this. And like you saw, you have to be logged in.

So let's change this. And like you saw, you have to be logged in. So we can either go through the whole Auth flow to log in, or we can use the loginAs method. So if you look for loginAs we can just use this method and pass in a User, and that would be the same as that User logging in. So let's do that instead. Say loginAs before the visit. Oops. Just put that down there and say loginAs.

So let's try it again. Log in as like this. And we can grab the user from the post. So post user. So visit the home page, and it's asserted that we can see the text create post because it should only be visible after we log in. So let's see if this works. Okay. And after that, we can click the link, then we can fill out this form. And my app is not working.

And after that, we can click the link, then we can fill out this form. And my app is not working. I think it's just the order of the routes file. So yeah, this has to be underneath all of this. So let's move this down. And this should be working now. Okay. So after we see createPost, let's click that link. Let's fill out the form. Let's create a Post.

Let's fill out the form. Let's create a Post. Actually, let me do it here. Say hi there. Content for hi there. So we're going to click this, and then we can assert that we see this success message. And then we can also assert that we see that new Post. So let's continue our test. Back to PostTest. Again, you can separate this out if you want, but I'm just going to do it all in one here.

Back to post test. Again, you can separate this out if you want, but I'm just going to do it all in one here. So let's click the link that says create post. So this is actually a link. It looks like a button, but it's actually a link. So we can do that. And then once we do that, we want to type into these fields. So let's say type. And the first field is the title. And let's say my first post.

And the first field is the title. And let's say my first Post. And the second field is the content. Let's say my first Post content. And after that, we want to click on this submit button. And we can do what we've been doing before like this. So click. We can do button type="submit". And I'll stick with this way for now, and then I'll show you the dusk selector after. And now we can assert against the success message.

And I'll stick with this way for now, and then I'll show you the dusk selector after. And now we can assert against the success message. So assertSee post was successfully added or created. And it's assert that we see the actual post because we should be on the index page now. So my first post and still one more. Let's just assert that the path is the homepage. Okay. So if I did everything correctly here, this should work. Let's run our test again. And everything is passing.

Using Dusk Selectors9:57

Let's run our test again. And everything is passing. So let's take a look at using dusk selectors instead. So you can use HTML attributes and say dusk equals and give it a name. And instead of giving it a selector, we can use at and then whatever you named this. So let's try this for this right here. So this would be the submit button for creating a Post for this. So let's look for that in our create.blade.php and look for the submit button. There it is.

button. There it is. Dusk equals let's name it createPost. And now we can refer to it as createPost instead of this createPost. And this should still work, hopefully. And it does. Cool. Okay. Now let's work on editing a post. So it's pretty much the same as creating a post.

Testing Edit and Delete11:05

Now let's work on editing a Post. So it's pretty much the same as creating a Post. So where's the edit button? So if I go into a Post and I'm the one that made the Post, then you'll see an edit button here and you can edit it as much as you like. So hi there. Edit content for hi there edit and update Post and you can see that it was edited. Okay. So let's write that test to get this say canEditPost. So we are on the home page.

So let's write that test to get this say can edit Post. So we are on the home page. We click on the link, which is the title of the Post. So let's do that. Click link. That's going to be postTitle. Okay. So that should be this. And let's assert that we see editPost. And let's see if this works.

And let's assert that we see editPost. And let's see if this works. Okay. Let's run our tests. Okay. And now we can click that link. So again, it's clicking this link here. And that is a link, even though it looks like a button. Click link, editPost, and then we're going to type in the title and the content. So pretty much the same as this.

Click link, edit Post, and then we're going to type in the title and the content. So pretty much the same as this. And let's just say edit at the end. And we're going to click the submit button. So click and again, it's going to do button type="submit". And let's assert that we see the success message and the new title of the Post. And let's see if we edit it. So this Post was updated successfully is the update message. And let's see if we can see the new title. So my first Post edit.

And let's see if we can see the new title. So my first Post edit. Okay. So let's see if this works. Okay, so it does work. And let's write one more test for deleting, which is almost the same as editing. So let's duplicate this, say, can delete a Post. And this is the same. We're going to assert that we see delete Post again. He didn't see that you can delete a Post as well right here.

We're going to assert that we see delete post again. He didn't see that you can delete a post as well right here. And we can't click the link because it's not a link. It's a submit button. So we can do pretty much the same as this. Let's grab this. And let's click that delete button. And then we can assert against the success message. So that's going to be post was deleted successfully. And instead of assertSee, we can assertDontSee because it's now gone.

So that's going to be post was deleted successfully. And instead of assertSeeing, we can assertDontSee because it's now gone. And we can just say the post title here. Okay, so this should work. If I did everything correctly, run our test again. And everything is now passing.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟