Instructor: In the last section, we solved an issue
with our test file by introducing a root component.
This root component is entirely responsible
for booting up our Redux store,
and place in the provider tag,
and then simply rendering any children that it is provided.
Now we've got that all fixed up,
we're gonna get back over
to the testing side of our application.
Now present, our comment box tests
are pretty well wrapped up,
so we're going to move over to the Redux side
of our testing, starting with our comments reducer.
So we had previously said
that there's gonna be probably two big tests
around our comments reducer.
We want to make sure that any time
we provide the reducer
with an action that has type SAVE_COMMENT,
it will save that comment appropriately inside of its state.
Then we're also gonna make sure
that if we pass the comments reducer
in action with some unknown type
or some random type it won't throw an error
or cause any issue for us.
So let's get to it.
I'll first get started by flipping up back over
to my code editor and inside my reducer's directory
I'm gonna make a new testing folder.
So I'm gonna make a new folder called __test__.
Again, remember two underscores in here.
And then inside that folder I'll make a new file
called comments.test.js
All right, so inside of here
we're going to import the comments reducer
with import comments from reducers/comments.
Now one thing we might wanna do here,
is give a little bit better
to the name of the reducer,
'cause comments right here,
well, it could be like the comments reducer
or it could be an actual array of comments.
It's just not super clear what's going on.
So I'm going to make kind of an arbitrary decision
to call this thing, how about comments reducer?
I think that makes it a lot more clear as to what it is.
And the only other thing that we're going
to import into this file
is our action type of SAVE_COMMENT
that we had created inside the types.js file.
So back inside of comments.test.js,
I will import SAVE_COMMENT from actions/types.
So now inside of here we'll write out
the two tests that we care about.
First off, we wanna make sure that the reducer
properly handles actions with a type of SAVE_COMMENT.
So I'll write out in it statement to handle that.
So it handles actions of type SAVE_COMMENT.
Testing a reducer is pretty darn straightforward.
All we have to do is call the reducer,
pass in some fake action and then make an assertion
or an expectation around the value that the reducer returns.
So if we go back over to the comments reducer
it really is a very simple function.
All we're gonna do is pass in an action object right here
and we're going to try to make sure
that any payload that we attach
that fake action that you and I are going to gonna fake out
or put together ourselves manually
is going to be returned inside of an array
from the overall function.
So in total, our it statement
might look a little bit something like this.
We'll first create our action object.
So we don't have to call an action creator right here,
we can just make a fake action.
I'll give it a type of SAVE_COMMENT
and a payload of New Comment.
So now I can create a new variable
that I will call about newState.
I'll call my commentsReducer.
I'll pass in an empty state.
So this first argument right here
is going to be the initial state of my reducer.
Remember that's always the first argument to a reducer.
So that's kinda my starting state object.
And then as a second argument,
I'll pass in the action that I just fabricated.
So now whatever gets returned in theory should be an array
with a single comment inside of it,
in this case the string New Comment.
So I can just make a very easy assertion or expectation
about the value of newState right here.
So in this case, I can say expect newState,
and I'll again use the two equal matcher
and I expect newState to be an array
with a string of New Comment.
One thing to double check here is to make sure
that your spelling and capitalization of New Comment up here
and New Comment down here are absolutely identical
as the reducer is gonna return
exactly this string right here.
So you need to make sure
that you have the exactly same string down here as well.
Okay, so we can now save this file
and then we should be able to flip back over to our terminal
and see this test passing.
And you'll notice that just is automatically picked up
that comments reducer test file right here.
So we should see the test running around it
in just a second.
Again, I apologize that my test run a little bit more slowly
when I'm running this recording software.
And there we go.
So we've got one test
inside the comments reducer running just fine.
Now as usual, I'm gonna make a quick change
to this thing just to make the test fail.
So I'll do a quick save here.
I'm not gonna make you watch this
so we'll take a quick pause right here,
we'll come back to the next section
and just verify that the test did fail.