Instructor: In the last section,
we put together our new fetch comments action creator,
and wired it up to our comment box.
So now inside of our browser,
we're able to fetch a list of comments from that remote API.
So, now we need to think
about how we're going to test this new functionality.
Well, if we follow the same pattern that we have
throughout the course, we might have to open up
our action creator's test file,
because we created a new action creator.
We might have to go into our comment box test file
because we modify that component,
and we might have to write an additional test around
our comments reducer as well.
So, that's definitely one approach we could take.
We can go into each of those test files, find every
piece of code that we've modified, and write
a new test around it.
Throughout this entire course,
we've been writing tests known as unit tests,
where we try to isolate some very
small piece of functionality within our code base,
and test it in isolation.
So this time around,
as we start thinking about writing these tests,
we're gonna take a slightly different approach than that.
Let's take a look at the diagram, that's gonna help give you
a better sense of what we're gonna do.
Okay.
So, this is a kind of a complicated diagram.
On the very bottom axis down here,
I'm trying to indicate the number of pieces
that any single test inside of our application is touching.
So essentially, the amount of code being tested
by a single test.
Up to this point, we've been writing unit tests,
and these unit tests have been trying to isolate
one part of our application, and make sure that
exactly one part is working the way we expect.
So, for example, we've been trying to make sure
that the comment box shows a button.
Or that the comment list
shows a list of Li elements,
or the action creators that we put together
returns an object with some given type.
For each of these tests, we've been essentially
answering one question, does exactly this
part of our code base work the way we expect?
Now that we have to add in some additional tests here,
we're gonna take a slightly different approach
for testing out this fetch comments functionality.
So, we're gonna try to write what's called
an integration test instead.
With an integration test, we're going to try
to simultaneously test many
different parts of our application.
So in this case, we're gonna try to answer the question,
does clicking on that fetch comments button eventually
show a list of allies on the screen?
When we start
thinking about what is covered by that test,
well over here, back with our unit test, we were all
testing one thing at a time.
But with this integration test, we're actually testing many,
many, many different parts of our application
in one go.
Worth one single test.
So by testing to make sure that clicking on that button
shows a list of Li's, we are asserting to make sure
that the comment box has a button, we're making sure
it's wired up to an action creator.
We're making sure the action creator
can make an AJAX request.
We're making sure Redux can parse the response that is
tied to that action through that Redux promise middleware.
We're making sure the reducer catches
the list of comments correctly, and then we're making sure
that the list of comments shows up
in the comment list component.
So, over here with our unit test,
we were just isolating one thing at a time,
but with a single integration test,
we can touch the entire scope of our application
with one chunk of code or one test.
So, that's what we're gonna try to do this time around.
We're gonna try to write an integration test
that tests out the entire flow, or a big chunk
or big segment of our entire application.
So, let's take a quick break right here.
We'll come back to the next section,
and we're gonna get started working on
this integration test.