Instructor: We've just about wrapped up
testing of our very simple application,
but we're still missing one extremely critical piece.
So all the code we've tested so far
is not making a single HTTP request.
And I think you'll agree with me
that testing out network requests,
or at least some aspect of them inside of our application,
is absolutely critical.
So in this section, we're gonna get started
by adding in a little bit of network functionality
to our application,
and then we'll figure out how to test it.
So let's talk about what we're gonna add first.
Okay, so here we go.
Here's the same mock up we had before.
There's just one little change.
I've put a button in here called Fetch Comments.
So the idea behind this button
is that if we click this button,
we should make an HTTP request out to some remote API,
fetch a list of comments,
and then render them on the screen.
So a pretty basic application of Ajax request
inside of Redux, but it will teach us a lot
about how to test network requests
inside of a React and Redux application.
Let's first get started
by taking a quick look at the API
that we're going to make use of.
So inside of a new browser tab,
I'm going to do a Google search for JSONPlaceholder API.
And then one of the first results
that you're gonna see on here
is a site called JSONPlaceholder .typeicode.com
So this is a free online API.
It's a fake API
which means all the data that's going to be returned
from us is just randomly generated random garbage.
So we're going to make a request
to this API to get a list of comments.
So if you scroll
down just a little bit to resources right here
you'll see that there's an endpoint called slash comments.
So if we make a request
to this comments endpoint right here
we'll get back a list of 500 comments.
Let's click on it right now and just see what happens.
So when you click on it, it's going to make a request
to that API inside your browser.
And so we can see a list
of all the comments that get fetched appear on the screen.
Now my list of comments might appear a little bit different
than yours.
I'm running a JSON formatter that just takes all the JSON
that gets returned and prints it out very nicely
on the screen.
You'll notice that the list of comments we get back
is actually a array of objects.
So every object represents one comment.
Now, the structure of this thing right here does not quite
match the structure of comments that we're using inside
our application.
So our application says that every comment is just
a plain string.
So inside, just to make this endpoint work more nicely
with our application, as we put it together,
when we get back this response, we're gonna iterate
over this array of objects and we're gonna pull
off the name property from every comment
and we're gonna say the name property alone
constitutes the comment.
So we're just gonna pull off these strings
from every single comment.
And that's it.
We're gonna return that from our Redux store.
Okay!
So that's pretty much the plan here.
Now, before we continue, in the next section
I wanna very quickly install two library modules
that we're going to need to pull this off.
So I'm gonna flip back over to my terminal.
I'm gonna stop my running server
and I'm going to do an NPM install, and we're
going to get Axios to make the actual network request.
We're also going to get Redux Promise
which is a middleware that we're going to use to make sure
that Redux is aware of the asynchronous action
creator that we're gonna write to actually make the request.
And then we're going to grab one last other module
and we'll talk about what the purpose
of this one is in just a second.
So it's called Moxios.
Okay, Moxios.
So make sure you get that one as well.
So we'll grab all three of these
and I'll take a break right here
and I'll catch you in the next section.