-: In this section we're going to
continue working on our integration test.
So the next thing we're gonna do is attempt to find
that fetch comments button and simulate a click event on it.
Let's very quickly open up our comment box component file
and just take a look at that button that we had added.
Okay, so here's my comment box component.
I'll go down to the render method,
and here's that button for fetching the list of comments.
So we want to select or find this button
inside of our component
and then simulate a click event on it.
In order to make finding this button
inside of our component hierarchy a little bit more easy,
I'm going to add a class name
of fetch dash comments, like so.
The reason I'm adding this class name right here
is that we have one button tag right here,
and another one right here.
And so just to make our lives easier
for selecting specifically this button,
that's why I added on the class name.
So now back over inside of our test file
we can add on wrapped dot find, and then the selector
for that class name that we just added.
Which would be dot, which indicates a class,
fetch dash comments.
So this will find that button component,
or find that button element,
and then we want to simulate a click event on it.
So this line of code right here is what's gonna kick
off the entire data fetching process.
Get that request, or that action, over to our reducer.
The reducer is going to pick up the list of comments,
and then eventually the comment list component
will rerender itself.
So down here we should now be able to write out
an expectation and say that we expect to see
some number of LIs displayed on the screen.
So for that, let's try something simple.
Let's try something like,
expect wrapped dot find, LI dot length.
And you know, you know what, that thing said that was
gonna return us 500 comments,
so let's say to equal 500.
Let's get it, just give it a shot and see how we do.
So I'm gonna save this file,
and then we'll see how our test suite is doing.
Now just to very quickly walk through this file
in it's current state, up here at the top,
we are rendering out our entire application.
We click on that fetch comments button.
That should kick off the entire data fetching process,
update our application,
and then we should be able to see those 500 LIs.
All right, so that's what we want to have happen.
Let's flip back over to the terminal,
and just see what happens.
So when I flip back over, you might notice on your computer
that the entire test suite has completely failed.
If you see that, that's totally fine.
If you don't see that, you might see something like this.
You might see something that says,
we expected to see 500 LIs but there were actually zero.
So no, given either case that you fall in,
either your entire test suite failed
or you found zero LIs.
Clearly something is going wrong here.
So let's take a quick pause.
We'll come back in the next section,
and we'll try to figure out exactly why these tests
are not working the way we expect.