-: Alright, let's look back to our mockup really quick,
and just think
about where we are and where we're headed right now.
So we just finished
up putting together our comment box on top.
We tested that it has a text area,
it has a button,
And we also tested,
that when a user types something in,
the text area is properly updated.
And we also added on a kind
of bonus spec where we said when the form is submitted
the text area should clear itself out.
And so we added four specs in there for that.
Actually I think five,
because we added
in one for the class as well.
So it's now time to start working
on our comment list down here.
One quick thing that I wanna mention is
that we're gonna build this as a full redux application.
So we are going to build an action creator,
to save submitted comments.
And we're also gonna build a reducer,
that's going to
keep application level state that consists
of an array of all the comments that get submitted.
So as we're building this comment list right here
we're going to assume that we're going to use react redux
as helper connect,
to hook into our application level state,
to get our list of comments.
So let's go ahead and just start working
on the comment list and we'll see how it progresses
Once we put the comment list together
we'll go back and start working
on our comment reducer and our ad comment action creator,
and we're gonna write specs for those as well.
Alright, so I think
that we're pretty good with our comment box here.
So I'm gonna close both the comment box
and the comment box test files out.
I'm going to do just a little bit of reordering here,
and I think that the first thing I wanna do is,
I want to add another spec to app test,
to just assert,
very similar to the comment box class right here.
We wanna assert that our app contains a component
with class comment list.
And that's just going to make sure that our app is at
all times showing the component that we're about to build
which is gonna be comment list.
So let's write that spec to start.
We're gonna say
it shows
a comment list.
I encourage you at this point
in time to go ahead and pause the video,
and give a shot at the next spec on your own.
So it's gonna end up looking very similar
to the existing spec that we've got right here.
We're gonna make a new component,
that is a comment list
and we expect it to have class comment list.
So,
I encourage you to pause the video,
write the test out, and then see
if you can't do kind of a rough draft
on our comment list spec,
or excuse me,
comment list component just to make the spec go green.
So if you wanna give that a shot, go for it now.
Otherwise, we're just gonna go ahead
and charge right through.
Okay, so let's give this a shot.
We'll do our expect, where we expect our component.
If we look for something that has a class comment list
we'll expect that to exist.
I'm gonna save this and we immediately see our specs go red.
So we don't yet have our comment list.
Let's go ahead and stub out our comment list component.
So we'll make comment list dot js
and inside of here,
I'm gonna make this,
let's make this a functional component because it's probably
not gonna have any state to it or any need
for lifecycle methods.
So we'll just make this a functional component.
At the top, we'll import React from react,
and then we will make our comment
list,
which is a functional component.
And since this is definitely gonna be a list
for right now, we'll just assume that it has a UL
with a class name
of comment list.
And at the bottom we'll export default
comment list.
So we'll save this,
and our specs are still red.
So the problem here is that we're not yet showing
our comment list inside of our app.
So let's fix that up really quick.
We'll go over to our app,
at the top,
we'll import
comment list,
from comment list,
and then underneath
the comment box,
we'll show our comment list.
So now we'll save this,
and our specs go green.
Perfect.
So now we're ready to start writing some specs
around our comment list.
We need to first create our spec file, so inside
of our test components directory, We will make,
comment
list
test.
And we're good to go.
Let's put our boiler plate together really quick in here.
And it's gonna look very similar to all the specs
that we've already written so far.
So at the top,
we'll import,
render component,
and we'll also import expect
from
our test helper file.
And then we'll also import our component
comment list
from
up
into source,into components
comment list
like so.
And then we're going to describe
comment list.
Quick aside, I know
that we're doing a ton of typing in here, but unfortunately
you know the react side of things,
the assumption is that we kind of already know
what's going on here
and so we're kind of having to double up on typing duty.
Not only do we have to get through all the components
but we also have to write the specs as well.
Alright, so we've got our stubbed out test here.
Let's go ahead
and start writing some tests inside of the next section.
I'll see you there.