Up And Running with Pest
Playing
15. Showing books grouped by status

Episodes

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

Transcript

00:00
by the end of this episode we're going to see on the home page here if the user has signed in a list of books grouped by their status what we're then going to do is write some tests for this and then we're going to refactor these tests to make them a lot clearer and this is
00:15
a really really nice feature of pest that we're going to be looking at okay so what i'm going to do is just add a couple of other books because we've got a want to read here let's just add a couple more so we've got a little bit of data to play with so we'll add one for reading
00:31
and let's say book three and author three and we'll say read so we've got one under each category which is going to mean we can see what we're doing so rather than jump in with test-driven development we're going to actually build this out
00:44
first and then we're going to write tests to it so we can focus on the pest syntax so we've already got our home controller so let's grab this information and pass it through to our home controller so we're going to say books by status because what we want to do is group
00:58
these by the status so we can show them underneath each of the headings now a user might not be signed in over on the home controller at this point so we want to be really careful to go ahead and say request user but optionally if that user doesn't
01:13
exist not do anything otherwise we're going to go ahead and grab the books relationship and we're going to group them by the status on the pivot table so we can just say pivot status let's just look at this data first of all before we start to iterate
01:26
through it so i'm going to go ahead and die dump there let's give that a refresh and you can see here that these are now grouped under the actual status so you might have three under want to read two under reading and so on so let's get rid of that and
01:39
let's go over to our home view and just start to iterate through these so we want to do this down here if we are authenticated so let's create an auth directive here and we'll go ahead and add in
01:54
a header here so let's put that in and let's say my books for example and then down here let's create out a div we'll add a class of space y maybe six just to separate these out and then inside of here we're going to have a div with a heading
02:13
so let's create that heading out now just to test this out so want to read for example add some styles to this as well so font bold let's make the text slightly smaller xl and we'll just say slate 600 and then underneath this heading
02:28
we're going to have a list of our books so this will be a container with a margin on the top just to separate that out and we'll say space y3 so we'll space out each of the books by three so this is going to be a book let's just go and duplicate that down a
02:45
couple of times and have a look at what we've got so at the moment this doesn't look like it's spacing out properly let's go over to our template here and go down to where our content is let's wrap our slot content in a div and let's just set the margin top to eight
03:03
there we go so these are the books then we're going to have another heading based on that key that we passed down and we're going to show all that information so to do this we want to iterate over this because each of the grouped by statuses
03:16
is going to be different so we'll start by creating out a for each loop and we want to say books by status as we want to grab the status out but we also want to grab the books in that collection as well so let's end that for each just there
03:34
pull this in and this is going to be the status now at the moment of course we don't have the text value of that status so we'll just add the status in there for now and then we'll iterate through each of the books inside of here so we're going to say for
03:48
each books as book and we'll end that for each there and that will be our book component so if we head over now we've got want to read reading and read because we have one book per status let's just fix up the
04:02
headings really quickly we're going to be testing that we can see them but for now let's just go ahead and grab the full namespace to our book user pivot let's grab these statuses property and pass the status in there which should
04:19
grab out the text value of each of these for us now we just need to go through and iterate each of our books so for this let's create out a component just so we don't have to reuse too much markup so let's make a component
04:35
and let's call that book let's go ahead and replace this out with x book and we can add some links in here a little bit later but let's just pass through the book into here and let's open up book.blade.php with under the components directory
04:53
and let's just output the book title just so we know this is working and then we'll style it up so if we just come over now we should see undefined variable book so let's just define that as a prop just at the top here
05:08
and that should just be book and there we go book one book two and book three so that's working all that's left to do really is just style this up and then we've got a list of our books under the correct statuses so let's just say background
05:21
slate 100 we'll give this some padding set this to rounded we'll set this to flex because we're going to have some links over this side and then the title and author and anything else that you add to that side and for that we'll just say justify between and we'll say item center
05:38
let's create out a div here with an h2 let's change that to an h2 and have the book title there and underneath that we'll just have a div with the book author and let's have a look okay that looks a little bit better let's just style this
05:55
heading up really quickly and we'll say font bold text large and we'll change the color of the text to make it look a little bit nicer and then for the author let's go ahead and say text slate 600 so a little bit lighter small text and we'll set the font to normal
06:13
although we don't need to because we didn't wrap that in anything there we go okay it looks a little bit better and we've got our link section over here if we need it that's going to be a slot if we have it set so let's say is set links and is end is set and then in here if
06:29
that's the case we will just inject that in so that means what we can do is over on our home page eventually because remember these books are going to be shown to our friends eventually we don't want an edit link for example
06:42
if it's being shown to our friends so we're going to say something like x slot and links and these are going to be the links in here so that will just put them links inside there if we need them which in our case we do but for our friends we do not
06:58
okay so we've now got a list of our books under each status if we add another one for example book four and author four under want to read we are now going to see two underneath there so hopefully that makes sense so now we're going to go ahead and
07:14
test this now effectively what we're going to have to do is write three tests because we're going to have a want to read book which we want to make sure has a want to read header we want these independent these tests independent so we can see that we have a
07:27
want to read header and the book is underneath that want to read so if we write three separate tests that's great then what we're going to do is look at refactoring this down so we only have to write technically one test which pest will run
07:40
three times if that doesn't make sense it will do very shortly let's go ahead and start to create this test out and see what we can do so we're going to go ahead and create out a new test here we could put that over in the home test but let's make a new one
07:54
out and let's call this book index test in case we decide to move it over make sure we provide the pest flag and we can get started so book index test what do we need to do well the first thing that we need is our login controller to just steal this
08:10
refresh database trait and let's put this up here because we will need to create books and that should be it so the first thing that we want to do in fact the only thing we're going to do in here is shows books with the correct status code but we don't really want to have to
08:25
write everything in here and have multiple assertions so let's split these up into three and then like i said we'll refactor this down to one test that runs three times so it shows books that user wants to read okay so what do we need to do here
08:41
well the first thing that we need to do is create out a user so let's just do this in a before each hook because we're going to be writing three separate tests so it makes a lot more sense to hook this in so let's say this user user
08:56
factory and create brilliant and now what we can do is say this user books we can go ahead and attach a book with that status that we're testing for which is want to read so in here we'll assign this at the same time as creating the book
09:13
book factory and create now we haven't adjusted our book factory just yet so we're going to need to do that in a minute but let's get this in here first the status here is going to be want to read if we can type that great so let's just first head over to our
09:31
book factory and update this with a title so for this let's just use faker to generate our sentence with five words and for the author here let's just use a name that makes sense and let's go over and we should be good so that should create out a fake book for us
09:54
and of course it will also attach to the user as well which we need to make sure we pull in okay so over in pest remember we wrote an acting as function let's just start to use that now because we hadn't previously so let's say acting as user or this user in this case let's go
10:10
ahead and make a get request to the home page the user should be signed in now so they should see this book under i want to read heading we're going to say assert c text and again this is super thorough and we want this heading so
10:24
let's just hard code this in want to read and then we should assert that we see the text with the book title we've assigned that so we can just say book title so we should see want to read and then title we could actually do this
10:39
with assert c in order if we wanted to let's just get this test working first and then we can refactor it in a moment so let's run past tests feature and book index test and let's see what we get and great it passes so we now know
10:54
we already knew that it did work but we now know that this test is confirming that that works so if you wanted to you could say assert c in order that would be a little bit more thorough and you'd want to see the text want to
11:06
read and you'd want to see the title after that now it doesn't really matter too much for ui test you'd probably use something like laravel dusk but in our case we're just making sure we can at least see the correct data on the page so we've got a
11:20
test that shows the books that the user wants to read now our first instinct would be to go ahead and copy and paste these down and pretty much just tweak them over so shows the books the user is reading let's change the status to reading
11:33
let's change this to reading in normal case and let's run our tests that passes and then we're going to do exactly the same thing again so it shows the books the user has read change this to read change this to read and run our test and we get green
11:53
now this is a little bit repetitive we're effectively writing the same code here but what we're doing is we're just changing around a few things so we're just changing around the status and we're just changing around the text
12:08
that we expect to see now there's a much cleaner way to do this in one single test now that we've got this in here and we're testing for this let's head over to the next episode so we can cover that feature on its own

Episode summary

In this episode, we focus on showing books on the homepage, grouped by their status – like "Want to Read", "Reading", and "Read". First, we set up some sample data by adding a few books with different statuses just to have something to work with in our UI.

Next, we update our controller to fetch all the user's books and group them by their status from the pivot table. We handle the case where the user might not be signed in, so everything works smoothly if they're not authenticated.

With our data ready, we then hop into the view and build out the UI sections to loop through each status and list the appropriate books under each heading. To keep things clean, we create a reusable book component for displaying each book, and style everything to look nice and tidy.

Once our homepage is displaying books grouped by status, we shift gears and dive into writing some tests. We set up three separate tests: one for "Want to Read", one for "Reading", and one for "Read" books, ensuring each status displays the correct books with the appropriate headers. Along the way, we improve our factories, use Pest's features, and discuss making our tests less repetitive, setting up for a refactor in the next episode.

By the end of this lesson, you’ll have a grouped book list on the homepage, tests confirming everything works, and a solid understanding of both the view and test side of this feature.

Episode discussion

No comments, yet. Be the first!