-: In the last section
we created our comment list.test.js file.
And we spoke about how we're kind of
in a rough spot right now.
We need to somehow get some data into our Redux store
so that it can be shared with our comment list component.
And we really want to do this
without having to try to invoke or render the CommentBox
inside this test and then like add a comment
and click on the button or something crazy like that.
So in this section I'm gonna suggest one possible fix, okay?
One possible fix.
And it's all gonna revolve around that route.js file
that we had created inside of our src directory.
So inside of this component right here
we had created a Redux store
and passed it directly to that provider tag.
Now, when we called createStore right here
we kind of brush over its actual implementation.
To be clear, createStore is a function provided by Redux
and it is the way in which we create an instance
of the Redux store to use inside of our application.
When we made use of createStore
we had passed in a first argument of our reducers
and then a second argument of an empty object.
And it's this empty object right here
that's going to be our savior.
It's gonna be the way that we're going to
get this comment list test to actually work.
So remember, we use this store provided by Redux
to store all this state of our application.
So when our application first boots up
we have a completely empty state.
Every reducer inside of our application runs one time
during that boot up.
We get some initial state assembled by the reducer,
which in our case is just an empty array
for that comments key.
And then Redux uses that to say like, okay
like here's my initial state, I'm good to go.
Now if we want to, we can actually pass some initial state
for our application into this object right here.
So what you and I are going to do
is we're going to slightly customize
the way this root component works
and we're gonna say that any of our test files
that want to make use of root
can optionally pass in an additional argument
to the root component right here or
an additional prop to it.
And that prop will be used to initialize the state
within our Redux store.
And maybe the best way to go about this is to give you
some of the code that we're gonna actually write here.
And then once we have the code on the screen
it might make a little bit more sense.
So here's what we're gonna do.
Inside of our beforeEach,
I'm gonna define a new variable right here,
called initialState.
InitialState is going to be an object
with a property of comments
and it's gonna have an array that has
about comment one and comment two, like so.
I'm gonna take this initial state object right here
and pass it as a prop
into the root component we just created.
So I'll say initialState is initialState.
So I'll now flip over to the route.js file.
And now rather than passing in an empty object right here
we're going to try to take that props initial state.
So that initial state prop that we just passed in
it's gonna show up inside this props object
and we're gonna take it
and pass it in as this second argument.
So right here, I'm gonna first give myself
a little bit of space to work with just so you can see
this entire line of code more clearly.
And then as a second argument to create store
I'll pass in props.initialState.
So now when our redux store boots up
or when we create the store
we can optionally provide some initial starting state
for our application and for us
for our comment list that is,
the initial starting state will be a list of comments
that has two comments inside of it.
So now when we call mount on root
with comment list right here,
root is gonna boot up.
It's going to render itself and create the Redux store.
And it's gonna have an initial state
with comments equal to these two comments right here.
Comment list will then attempt to render itself.
It'll run its map state to props function
and it's gonna pull those two initial comments
that we initialized our store with
through that mapStateToProps function.
And then comment list is going to render
those two comments on the screen.
So that's how we're gonna solve this whole issue
of getting some data into our comment list
so it can actually render out
some meaningful information on the screen.
We're going to make use of this idea of initial state.
Now, before we actually try to test this all the way through
we're gonna do one quick little fix here.
None of the other tests we've written so far
or even our index.js file
inside of our root project directory,
have any idea about that initial props, prop that we can,
or initial state prop,
so prop that we can pass to the root component right here.
So if we try to run this code as is
Redux is probably gonna complain and say,
hey, you're trying to pass in an initial state of undefined
and you can't do that.
So to just solve the fact or fix the fact that
none of our other uses of the root component
are trying to pass in an initial state,
we're gonna just modify his function a little bit.
So rather than receiving
the entire props argument right here
I'm gonna do a little bit of ES6 destructuring.
So I'm gonna try to pull off the children property
which is used inside the component.
So now I can do just children by itself.
And then I'll also try to pull off initialState.
And now I don't have to refer to props.initialState.
I can say just initialState.
And now the benefit of doing this destructuring
is that I can set a default argument or a default value
on the initialState property.
So if someone calls our root component right here
and they don't pass in an initial state,
we can default that value to be an empty object.
And now a root component is backwards compatible
with all of the previous uses.
So you can render the root component now,
and you don't have to pass in any initial state.
If you don't, we're just gonna sign it an empty object.
But if you do, fantastic.
We'll use that initial state when we make our Redux store.
Okay, so that's pretty much it.
Now I'm gonna save this file
and I'll change back over to my
comment list.test.js file over here.
So over here we're creating the initial state.
We pass it into the root component
and then the comment list is going to try to
pull that initial state through mapStateToProps.
So now down inside of our actual test, for right now,
let's just try to render this thing out
and get a better sense of what's going on
with our comment list.
So I'm gonna do, how about a console.log
of wrap.find li, and we'll get the length.
So we'll try to find the number of li elements
that have been created
inside of our entire wrapped component.
So I'm gonna save this
and then we should be able to flip back over
to our terminal.
And I have created two comments right here inside the array.
So I will expect to find two li's
with this console log once this test actually runs.
So let's flip back over.
Looks like I've got a couple tests still running here.
So I've got a couple passes
which means that I have not broken any existing tests.
And then right here you'll see a console log
from our comment list.test.js file of two,
which means our component has successfully
found two li's inside there.
So what that means is
we are successfully initializing our redux store
with some initial state
which the comment list can then make use of
when it's initially rendering itself.
So that's pretty much it. That's the entire story.
So our component test is looking pretty good now.
Let's take a quick pause right here.
When we come back the next section
we'll finish the rest of this test off.
So quick break and I'll see you in just a minute.