Instructor: In the last section, we stubbed out
our CommentList component
and we also created our comment_list_test file as well.
As a quick reminder,
remember that whenever we add specs,
we need to restart Mocha.
So I'll flip back over to my terminal,
I'll hit Control + C to end the process,
and then we'll start it back up
with npm run test:watch.
And it's gonna do its thing, warm up,
and there's our specs good to go.
Okay, so we need to, as usual,
ask ourselves what behavior
do we expect CommentList to display,
why we wanna test here, why we wanna make sure
that it is not gonna break over time?
So, I'm gonna pull our mockup back on the page.
And what we kind of discussed earlier,
what we agreed on was that we wanna make sure
that it shows a comment in an LI,
and we also wanna make sure
that if we give it a list of comments
it's gonna show all the different comments
that we pass to the component.
So we should probably end up
with just two simple specs here.
Let's go ahead and give it a shot.
We're gonna do our initial setup of the component variable.
So we'll let component
and then we'll render our component in a beforeEach.
So we'll say component renderComponent
and we're making a CommentList.
Now for our first it,
we'll say it 'shows an LI
(keyboard keys clicking)
for each comment',
we'll say very explicitly,
it 'shows an LI for each comment'.
And then we'll also say it shows the comment...
Actually we'll say it 'shows each comment that is provided'.
Let's be nice and very direct.
Okay, so this is kind of asserting
that we've got the correct HTML structure
and it's asserting
that we've got the correct content as well.
There's just one little problem here.
We don't really have any idea yet
on how we pass any configuration to CommentList here.
CommentList is probably gonna end up receiving
this list of comments as its props, right?
This is a Redux application.
So we're gonna turn CommentList into a container
and it's gonna receive the list of comments
inside of our entire application as props.
So we need some fashion,
some method of pushing some props
into this CommentList right here.
Luckily, this renderComponent method
has already been set up
to allow a number of props to be set up
and pushed into this CommentList.
So the way that this renderComponent is set up,
and again, we're gonna walk through its implementation
just a little bit, so bear with me.
If we pass in an object as the third argument
to this function, it will show up as props
inside of the renderComponent.
So let's give this a shot.
For the second argument we don't care about
and we'll talk about it later,
so we're just gonna pass in null.
What we do care about is the third argument.
These are gonna be the props
that get passed into our component.
So we're gonna assume that our component
is gonna take props comments
which is gonna be an array.
So we'll pass in an object to represent our comments.
So it'll be comments and it's gonna be an array.
Each string in this array
is going to represent one comment.
So we'll put in just 'asdf' for the test comment.
Actually, let's do something a little bit more serious.
We'll do 'New Comment'
and how about just 'Other New Comment'.
You can put in any comments
that you'd like right here.
This is ending up as a pretty long line of code right here.
Let's just go ahead and pull this prop definition out
to a new line above it.
So we'll say const props is our properties object
and then we'll just pass
those props directly into renderComponent.
Again, we're gonna walk through the implementation
of this renderComponent here,
and I'll show you exactly how it's put together
in a coming section very soon.
Okay, so we're going to assume
that these list of comments
is now showing up inside of CommentList
which means that we can now make an assertion
that we have the correct number of LIs,
and we can also make an assertion
that the comment text is showing up
inside the component as well.
So for the first expectation here,
for the first matcher,
this is where we, again,
we get to get a little bit creative.
And so being a little bit creative,
I'm gonna say that I'm going to find
every LI on the page or in this component
and I'm gonna get the length
and I'm going to expect that length
to equal the number two.
So I expect, given two comments,
I expect us to have two LIs.
So find all the LIs in the component,
get the length of that,
and I expect it to equal two.
Now the second one is a little bit easier
only because we've done this before.
We're going to look at the component
and we're going to expect it to contain the text
'New Comment' and 'Other New Comment'.
So this is another place
where I would encourage you to pause the video
and give a shot at this expectation right here.
If you're not sure what to put,
I encourage you to look back
at the jQuery Chai documentation,
take a look at all the different matches here
and see if you can find one that matches the case
that we're trying to test.
Okay, so let's go ahead and do the assertion here.
I'm going to expect my component
to contain New Comment.
I'm also going to make a second expectation in here
that it contains the text, 'Other New Comment'.
So notice that I split this
into two separate assertions.
So if for some reason the first comment is showing up
but the next one is not,
this will show up in our testing report.
Separating out expectations like this
just makes it a little bit easier
to figure out what's going wrong with our component
based on our testing output.
If the first one is not being displayed
but the second one is,
we'll see a distinct air message
that says we expected the component
to contain this text right here.
Now, if you went ahead and do this spec yourself,
you give it a stab,
and you use something like say "text" right here
or maybe you tried "html",
those definitely work as well.
You could have also tried to find
a very particular LI,
so maybe you said component.find 'li'
and I expect that to contain new component.
That would work as well.
There's definitely, definitely, definitely
more than one way to approach this,
and it's up to you to kind of put together
your own style of testing.
But it's one thing that is really fun to develop,
a skill that's really fun to develop
as you write React applications.
Okay, let's save this.
We'll flip over,
and right now our component
is doing absolutely nothing.
So let's go ahead and do some implementation
and watch these specs go green.
I'll see you in the next section.