Instructor: In the last section,
we spoke about why our test suite is still failing.
So in this section,
after we issue that request
by simulating a click event on our button,
we're going to try to introduce a tiny little pause
before we actually make our expectation.
So back over inside of my test, the integration test file,
I'm gonna find all the test code we had,
that we had written out.
I'm gonna first get started
by cleaning up the comments inside of here,
'cause I think that the purpose
of every line of code in here is pretty clear
and I want to have the space available
'cause we're going to very quickly adding
a pretty good amount of code.
Okay, so that's better.
So now, essentially right here,
we want to introduce a tiny little pause.
So after we stimulate the click, tiny pause
and then we're going to go ahead
and try to look at the number of ally elements.
Now as you might know,
JavaScript has no idea of like a pause.
There is no pause, there's no sleep function
but there's something very close to it,
something called the setTimeout function.
With setTimeout, we can have a function that gets invoked
or executed at some point in the future
and we could designate the delay
before that invocation occurs.
So we're gonna take our expectation right here,
and we're gonna wrap it inside a set-timeout.
So set, setTimeout.
I'm gonna pass setTimeout a function.
I'm gonna move the expectation into the set timeout.
And then after the error function
that gets passed to setTimeout,
I'm gonna put the millisecond delay
that I want to have inside of here.
And so I'm gonna start off with a millisecond delay
of just 100.
We'll start nice and
tiny little pause that might be enough
to allow Moxios to kind of kick in and do its stuff.
Now with the setTimeout inside of here,
there's just one little thing to be aware of,
whenever just executes a test,
so like this arrow function right here,
it's going to execute that function.
It's gonna run all the code inside of it,
and then it's gonna check to see if any error was thrown
or any expectation failed.
If either of those occur,
then Jest marks this test as a failure.
But the important thing to keep in mind
is that Jest runs this function from start to finish
without any consideration of delayed events.
So in other words, Jest is gonna run this line
and then this line,
and then it's gonna instantly check to see
if any errors occurred,
and if nothing bad happened,
then it says, "Okay, I guess the test passed."
So the issue with that approach
is that it doesn't handle set-timeouts like this very well
because Jest is just gonna run through this thing
and then as quick as it possibly can say,
"All right, that's it, I'm done."
So in addition to introducing this little delay
of executing the expectation right here,
we also need to tell Jest to just hold on for a second
after it runs this test.
We need to make sure we tell Jest to just wait for a moment
for this set timeout to complete
before it considers the entire test to be done.
So to tell Jest to just wait around,
it offers a callback to this error function
that we pass to it right here.
The callback is the first argument
and we refer to it as done.
By getting a reference to done right here,
we can then call that function
from somewhere inside of our test file.
As soon as we start to reference this done function,
Jest says, "Oh I see you're trying to make use of done.
Well in that case, I'm gonna run all the code
inside of your test file or this test right here
but I'm not going to assume that it's complete
until you the developer invoke this function."
So only when we invoke this function done right here,
does Jest say, "Okay, I guess they're all done.
They did everything they need to do.
Let's go ahead and consider this test to be complete."
So in order to tell Jest to just hold on for a second
and not consider the test to be complete
until the setTimeout executes,
we're gonna add a call to done inside of it like so.
So now, Jest runs this line, this line,
this line and cues up the setTimeout
and then it's gonna sit around and twiddle its thumbs
until you and I call the done function.
So a hundred milliseconds later,
our inner function right here gets executed.
We run the expectation and then we call done.
And that's the signal to Jest
that, "Yep, that's it,
we have nothing else going on inside this test."
Okay, so one more small thing here.
This is almost the solution.
We're gonna come up with one more very small thing.
Recall way back long ago,
we spoke about the wrapper.update function
that we can use to force an update of a component.
So after we call or simulate the click right here
and we go through that entire process
of calling the action creator
and Moxios returns some data,
and the reducer picks up that list of comments
and everything flows back
with that list of comments into our comment list.
We have to explicitly tell this wrapped thing right here
that it needs to update the components inside of it
so that we get the latest version
of all the components in there.
So to do that right before we do our expectation,
we're gonna call wrapped.update like so,
and that's pretty much it.
So now let's do one quick run through here.
We initialize our component,
we call simulate.
That's gonna kick off the action creator,
the request, Axios is gonna make the request.
Moxios is gonna intercept it and instantly respond.
We then do a tiny little pause to let Moxios do its thing.
We then explicitly tell our application to update itself
and then we finally do our actual expectation right here,
and then we tell Jest,
"that's it, we're done,
nothing else inside this test."
So let's flip back over to our terminal
and see how our test is doing now.
So back over here,
it looks like at long last,
we're good to go.
So we should be able to say,
flip this out to say,
three allies just to make this thing fail.
Remember that's one piece of cleanup that we want to do
or one piece of little fact checking just to make sure
that our tests are working the way we expect.
So we'll run that
and I'll give this thing just a second to run through.
While that's running, there's one other thing
that we need to take care of inside of here.
We have created the, oh, you know what?
Nevermind.
I was gonna say we have to,
Oh yes, we do.
My, (laughing)
my mistake.
So we created wrapped right here,
remember we always have to do that little bit of cleanup
after we create a element with the mount function.
So inside the setTimeout,
after we call done,
let's just do wrapped.unmount
to clean that thing up.
Okay, so snap back over here.
I'm gonna let my test run.
I won't make you watch it,
so we'll take a quick break
and come back the next section and wrap up our test suite.
So quick break and I'll see you in just a minute.