Instructor: In the last section,
we fixed a couple of our specs
or at least we got some better failures I should say.
But we've still got kind of a weird error here
where we are expecting to have two allies
but we have actually zero.
So that means that our spec is correctly running,
but it looks like our testing set up didn't quite work.
Let's go look at the test file for our comment list.
So I'm gonna open up comment list test.
If you recall when we worked on comment list,
we used render component.
And we had made this assumption
that if we passed in some props
to our render component helper,
these props right here,
they would somehow arrive on our component.
And so we haven't done any setup yet
in our version of render component
to ensure that these arguments
are actually being passed through as props to comment list.
So to fix that spec failure,
we need to implement the ability to pass these initial props
on to our component comment list.
Let's go back over to our test helper.
So by default, the original component that we,
or the original render component here
had the ability to pass in
either props to the component directly
or some initial state to our Redux store.
Again, we'll talk about what the provider is
and what the create store is in the next section.
For right now,
again let's just focus on getting these tests working.
So I'm gonna add on
two additional arguments to render component.
The first one's gonna be props.
And I know I'm kind of going a little bit out of order here
but just bear with me
and we're gonna call the next one state.
So this is where things got a little bit misleading
between the comment list test that we wrote
and the name of the arguments that we had on there.
The argument signature is intended to be
first, the component class.
Second, any props that should be placed directly
onto the component class.
And third, any application level state
that we want to inject into our Redux store.
That's what allows our component class to get access
to the data that we're expecting to get out
of the Redux store.
Now this is all, I know this is kind of confusing language,
a little bit weird stuff.
So let's do a little bit of a review
and open comment list back up.
So this is comment list.
Remember, we got access to the comments
because they were on application state.
So when we render our comment list and the test file
we're not just rendering comment list by itself.
We're not just rendering this functional component.
We're rendering the connected version of comment list.
So that means that when comment list,
our connected version of it tries to render itself,
it's going to try to reach into Redux State
and get access to the list of comments.
And so that's what's going on with this third argument here.
We called it props over in the test file over here
which was a little bit misleading, I agree.
But the intent of this third argument
is to serve as some initial data
or some data that we're going to push
into our application level state.
So enough of the description,
let's go ahead and do the implementation.
In practice, getting this data that we're passing along
to where it needs to be is really straightforward.
The second argument to this create store method
which is coming from Redux, is some initial state.
So we're just gonna pass state directly in.
So in the case where we were kind of bootstrapping
a list of comments right here
for our comment list test and we passed it into state
that was getting passed directly into create store.
And so when our Redux app booted up, it said,
"Oh okay, I've got some initial state here."
And the initial state is this list of comments.
That's all that's going on.
Next, we need to make sure
that any props from the second argument,
these are intended to be component level props
end up on top of our component class.
So this is an object right here
and we want to make sure that all the props in here
get added to component class, excuse me.
And so to do that,
instead of, we're not gonna do something like props is props
like so because then in component class
all of these properties right here
would show up kind of name spaced, so to speak,
as this dot props dot props not quite what we want.
To get these props to show up as top level properties.
We will instead use the spread operator like so.
All right, let's go ahead and give this a shot.
I'm gonna save the file.
We're gonna see our specs rerun and hot dog!
It looks like we got another spec passing.
So our comment list was failing and now it's good to go.
I like it.
I think that this is, this really puts our render component
in a pretty good place right now.
So unless I'm missing something here,
I think that in the next section
we'll be ready to move on to our helper
to simulate some events.
I'll catch you in the next section.