Up And Running with Pest
Playing
28. Building the friend page

Episodes

0%
Your progress
  • Total: 4h 19m
  • Played: 0m
  • Remaining: 4h 19m
Join or sign in to track your progress

Transcript

00:00
Okay, so we're now going to go ahead and build out the friends page and we're going to test that we can see on this page every type of friend status, whether that is friends that we have requested, friends that are requesting friend status with us, and a list of friends that we have which have been accepted either way.
00:21
So let's start out with a rough template just to get a feel of how we want this to look and then we will dive into our feature tests to test every single part of this. Okay, so what do we want to do here? Well, we've already got a very similar structure over, for example, in our books which are
00:39
actually on the homepage. So let's go over to our homepage here and let's go ahead and just grab all of this in here. In fact, let's grab the whole thing and just copy it over to a new page.
00:51
So let's start out with the controller, so let's say phpArt and make controller friend index controller. Let's go ahead and hook this up in our web routes. So we'll just have a get request to friends, reference the friend index controller, and
01:13
let's open up the friend index controller. Let's go ahead and create out an invoke magic method, return a view, we'll say friends index, and let's create this out. So down to views and let's create friends and index.blade.php.
01:31
Okay, I'm going to paste all of that homepage stuff in, get rid of this guest here because that's not relevant. We also don't need the auth directives in there because we always need to be authenticated to access this page.
01:45
And let's just go ahead and re-indent this and change the title to friends. We're going to have our form up here, but we pretty much want the same structure. So I'm just going to get rid of the for each loop here and of course go ahead and pull that in.
01:59
And then this is going to be, say, a list of our accepted friends either way. And then here is going to be a list of all of them friends. So let's just say Alex for now and let's come over to slash friends and have a look. There we go.
02:15
So that's fine. We'll just have a really simple list in here. Okay, so before we go any further with our UI, let's start to write our first test so we can write this, understand what we want to see on this page, set everything up, and
02:29
then we'll come back and fill this in to make it pass. So we're going to go ahead and create out a test just called friend test or friend index test, whatever you want to call this, and let's remember to pass in our pest flag. So once again, I'm going to come over to say the login test, grab the refresh database
02:47
trait and we can head over to that friend test under feature. Go ahead and just pop this in and we'll want to go ahead and use get in here. So we'll keep that helper in here. So the first thing is it does not allow users in that are not authenticated.
03:03
Now we know that we've already done this elsewhere and let's pull up say book put test and this is pretty much what we want to redirect unauthenticated users. So let's just start out with this as our first one. Now we know this is a get request so we can get rid of this and we can go ahead and just
03:21
say slash friends. So expect a guest to be redirected when they hit this friends page. Let's run this test and see what we get. So tests and feature and friend test.
03:35
Okay, it doesn't work. That is because we don't have any middleware. So let's go over to our friend index controller, create our constructor and let's add in that middleware.
03:49
So we need to be authenticated and we should get green. Great, that's working. So let's start out with it showing pending friend requests because that's pretty much what we want to focus on.
04:00
So shows a list of the users pending friends and let's start to create this out again before we write the functionality just so we know. So let's go ahead and create out a user in here with our factory and let's create out multiple friends that we want to add.
04:23
So let's go and create two friends in here that we want to eventually add. So we're going to say factory, but we're going to use the times method to create two users from this. So we end up with two users in this and then basically for each of these friends.
04:39
So we could just do an each on here and we could create a shorthand function and for each of them friends, we want to go ahead and say user add friend and add that friend. So basically acting as this user, add these two friends and then we should see them in a pending list somewhere.
05:01
So let's say acting as, we'll use that shorthand user. We want to go ahead and make a get request to friends and what do we want to see? Well we want to see both of these friends names that we have added. So first thing we'll just say assert okay and then assert c text in order and we want
05:26
to see pending friend request as the header and then onto this we want to see both of them users names. So let's just add onto this array just to sort of merge this in and we'll say friends, we'll pluck out the name of each of them friends and cast that to an array so we can
05:46
effectively merge this in. So just if that doesn't make sense, let's just die dump on that just to see what we're expecting to see. So let's run our test again and that's what we want to see, pending friend request and
06:01
then this user in here. Now that's only showing us one at the moment, maybe an array merge here would be better. We could even separate this out but let's go ahead and just do an array merge on them two things and there we go, yes.
06:19
So that must be just the way that we bind that array in. So let's just grab that, put that in there and let's go ahead and run our test. Okay so it can't see in order of course because we've not outputted anything to this page just yet.
06:35
But over in the friend index controller, let's pass down the pending friend requests. So we already know what this is from our tests earlier, we have pending friends of mine, so people that we have added. So let's say pending friends and from our request which we've not pulled in just yet,
06:58
let's go ahead and grab the user and pending friends of mine. So now we can iterate through this over in friends index just here. So this is going to be pending friend requests and then we want to iterate over this here. So let's just do this really basically first and then we can style it up when we get to
07:21
looking at our UI. So pending friends as pending friend and that for each and let's just dump the name out here for now. So pending friend name and that should be enough.
07:38
Let's run our test, we get green. Great. So it can see pending friend request and then immediately after it sees them two names. That's why we did this in order.
07:49
So if we go over to our test again, we did this in order because we want to know that these two come underneath this pending friend request header. So over in that index here, ideally what we want to do is wrap these in a div because we want them to not be immediately next to each other.
08:06
Let's just go ahead and do that now. What we'll do is we'll focus on the styling of this when we get to actually looking at our UI but that's still passing. So we know that we're now outputting pending friend requests.
08:18
Next thing we want to test for are friend requests that are coming into us. So let's go over to our friend test and let's build out a test for this. So let's say it shows a list of the user's friend requests. So this is people who are adding us as friends.
08:39
So this is going to be pretty similar. So let's just grab the two lines here, paste this in. The difference now is that when we iterate through each of the friends, it's the friends that are adding the user.
08:52
So it's the other way around. And again, we could probably grab this expectation here, pop it in there, acting as this user, go over to friends, check everything's okay, and we want to see friend requests from them to friends.
09:11
Let's just try this out and it fails. Great. So we know that that's not implemented. Let's go over to the friend index controller and say, what could we call this, requesting
09:22
friends? That may make sense. And let's say pending friends of. So not the ones we've added, the ones that have added us.
09:33
And we can pretty much just come over to here and duplicate this down and say friend requests and requesting friends as requesting friend and then requesting friend name. Let's go over and run our test. We get green.
09:56
So we know that we can now see them on the page. The last thing we want to do is test that we can see accepted friend requests, regardless of which direction that is in. So let's go ahead and create one more test.
10:07
That should be just about enough. Then we can start fiddling with the UI. So shows a list of the user's accepted friends, we'll say. Let's create our closure out.
10:19
And again, it's going to be pretty similar, but this time we actually want to accept the friend request. So let's go ahead and just paste this in. And let's go ahead and change this to a closure.
10:30
Makes a little bit more sense because we're going to be doing a couple of things in here. We'll get each of the friends in here and we're going to need to bring the user into scope. And then for each of these, we want to go ahead and add that friend.
10:43
And then the friend needs to accept us. So accept friend user. So we now should have two people that we have added as a friend and then two people that have accepted us as a friend as well.
10:57
And once again, this should be pretty similar. So let's paste this down here. We want to go over to the friends page and we want to see a list of actual friends. Let's go over, run our test.
11:10
Of course, we get failure here because we've not done anything with this. So let's again pull this up or I think we'll put this as the first one. And let's say friends for each friends as friend, friend name. Now we haven't done that over in our controller yet, but we can do that in here.
11:35
Friends request user and we've already tested that friends relationship. So we know that should work. It's pretty straightforward at this point. And we get green.
11:45
Great. So now we have a page where we can see all of these different requests. Now we haven't written a test for this, but we don't really want to see these if they're not relevant.
11:55
So we might just want to attach some if statements around these just to make it make a little bit more sense. Let's just do that in our UI and not necessarily test for that. So let's say if friends count, and let's pull that in.
12:11
And that if statement there, pull that in. And this one is pending friend requests. So we can do pretty much the same thing. If pending friends count, and that if statement there.
12:26
And then we've got requesting friends count, and again, and that if there. And we should see nothing on this page. Let's just double check our test just to make sure that didn't break anything. And it looks good.

Episode summary

In this episode, we dive into building the Friends page for our app, making sure it can handle and display all the different friend statuses a user might have. We're talking about: the friends you've sent requests to (pending), the ones who've sent requests to you, and finally, your accepted friends.

We start by creating a quick scaffold for the Friends page interface, just copying over an existing template from our homepage to get things moving quickly. Then, we wire up a controller and set up a route for /friends, making sure it's only accessible to authenticated users by adding the appropriate middleware.

Before fleshing out the UI, we focus on testing. We write feature tests step by step to ensure each piece of the friend status logic works as expected:

  • Unauthenticated users are blocked from seeing the page.
  • We see a list of friends we've invited (pending requests).
  • We see a list of friend requests others have sent us.
  • We see confirmed friendships.

For each of these, we set up some example users, manipulate their friendship statuses, and make sure the correct information appears on the page in the right order. As we pass each test, we update our controller and Blade view to make the tests green.

Once all the tests pass, we add some basic UI polish: showing or hiding each section only if there’s something to show. The episode is both about building out the actual page and making sure every little detail is covered by automated tests. Perfect if you want rock-solid social features in your app!

Episode discussion

No comments, yet. Be the first!