1
00:00:00,870 --> 00:00:01,702
Instructor: In the last section,

2
00:00:01,702 --> 00:00:03,870
we spoke about why our test suite is still failing.

3
00:00:03,870 --> 00:00:04,703
So in this section,

4
00:00:04,703 --> 00:00:06,210
after we issue that request

5
00:00:06,210 --> 00:00:08,580
by simulating a click event on our button,

6
00:00:08,580 --> 00:00:11,580
we're going to try to introduce a tiny little pause

7
00:00:11,580 --> 00:00:14,730
before we actually make our expectation.

8
00:00:14,730 --> 00:00:18,000
So back over inside of my test, the integration test file,

9
00:00:18,000 --> 00:00:20,280
I'm gonna find all the test code we had,

10
00:00:20,280 --> 00:00:21,840
that we had written out.

11
00:00:21,840 --> 00:00:22,830
I'm gonna first get started

12
00:00:22,830 --> 00:00:25,050
by cleaning up the comments inside of here,

13
00:00:25,050 --> 00:00:26,340
'cause I think that the purpose

14
00:00:26,340 --> 00:00:29,490
of every line of code in here is pretty clear

15
00:00:29,490 --> 00:00:31,290
and I want to have the space available

16
00:00:31,290 --> 00:00:33,000
'cause we're going to very quickly adding

17
00:00:33,000 --> 00:00:34,923
a pretty good amount of code.

18
00:00:36,060 --> 00:00:38,010
Okay, so that's better.

19
00:00:38,010 --> 00:00:39,720
So now, essentially right here,

20
00:00:39,720 --> 00:00:44,580
we want to introduce a tiny little pause.

21
00:00:44,580 --> 00:00:47,010
So after we stimulate the click, tiny pause

22
00:00:47,010 --> 00:00:48,540
and then we're going to go ahead

23
00:00:48,540 --> 00:00:51,300
and try to look at the number of ally elements.

24
00:00:51,300 --> 00:00:52,140
Now as you might know,

25
00:00:52,140 --> 00:00:54,780
JavaScript has no idea of like a pause.

26
00:00:54,780 --> 00:00:57,420
There is no pause, there's no sleep function

27
00:00:57,420 --> 00:00:59,010
but there's something very close to it,

28
00:00:59,010 --> 00:01:02,430
something called the setTimeout function.

29
00:01:02,430 --> 00:01:06,780
With setTimeout, we can have a function that gets invoked

30
00:01:06,780 --> 00:01:09,390
or executed at some point in the future

31
00:01:09,390 --> 00:01:11,040
and we could designate the delay

32
00:01:11,040 --> 00:01:13,920
before that invocation occurs.

33
00:01:13,920 --> 00:01:16,590
So we're gonna take our expectation right here,

34
00:01:16,590 --> 00:01:19,890
and we're gonna wrap it inside a set-timeout.

35
00:01:19,890 --> 00:01:21,643
So set, setTimeout.

36
00:01:22,590 --> 00:01:25,560
I'm gonna pass setTimeout a function.

37
00:01:25,560 --> 00:01:28,743
I'm gonna move the expectation into the set timeout.

38
00:01:29,730 --> 00:01:31,200
And then after the error function

39
00:01:31,200 --> 00:01:33,270
that gets passed to setTimeout,

40
00:01:33,270 --> 00:01:34,860
I'm gonna put the millisecond delay

41
00:01:34,860 --> 00:01:36,510
that I want to have inside of here.

42
00:01:36,510 --> 00:01:38,130
And so I'm gonna start off with a millisecond delay

43
00:01:38,130 --> 00:01:39,810
of just 100.

44
00:01:39,810 --> 00:01:41,130
We'll start nice and

45
00:01:41,130 --> 00:01:42,990
tiny little pause that might be enough

46
00:01:42,990 --> 00:01:46,323
to allow Moxios to kind of kick in and do its stuff.

47
00:01:48,360 --> 00:01:50,100
Now with the setTimeout inside of here,

48
00:01:50,100 --> 00:01:52,560
there's just one little thing to be aware of,

49
00:01:52,560 --> 00:01:54,720
whenever just executes a test,

50
00:01:54,720 --> 00:01:57,330
so like this arrow function right here,

51
00:01:57,330 --> 00:01:59,670
it's going to execute that function.

52
00:01:59,670 --> 00:02:01,380
It's gonna run all the code inside of it,

53
00:02:01,380 --> 00:02:04,470
and then it's gonna check to see if any error was thrown

54
00:02:04,470 --> 00:02:07,350
or any expectation failed.

55
00:02:07,350 --> 00:02:08,639
If either of those occur,

56
00:02:08,639 --> 00:02:11,700
then Jest marks this test as a failure.

57
00:02:11,700 --> 00:02:13,020
But the important thing to keep in mind

58
00:02:13,020 --> 00:02:15,930
is that Jest runs this function from start to finish

59
00:02:15,930 --> 00:02:19,380
without any consideration of delayed events.

60
00:02:19,380 --> 00:02:22,170
So in other words, Jest is gonna run this line

61
00:02:22,170 --> 00:02:23,190
and then this line,

62
00:02:23,190 --> 00:02:24,270
and then this line,

63
00:02:24,270 --> 00:02:26,070
and then it's gonna instantly check to see

64
00:02:26,070 --> 00:02:27,570
if any errors occurred,

65
00:02:27,570 --> 00:02:28,980
and if nothing bad happened,

66
00:02:28,980 --> 00:02:31,800
then it says, "Okay, I guess the test passed."

67
00:02:31,800 --> 00:02:33,510
So the issue with that approach

68
00:02:33,510 --> 00:02:36,720
is that it doesn't handle set-timeouts like this very well

69
00:02:36,720 --> 00:02:38,610
because Jest is just gonna run through this thing

70
00:02:38,610 --> 00:02:40,597
and then as quick as it possibly can say,

71
00:02:40,597 --> 00:02:42,450
"All right, that's it, I'm done."

72
00:02:42,450 --> 00:02:46,260
So in addition to introducing this little delay

73
00:02:46,260 --> 00:02:48,330
of executing the expectation right here,

74
00:02:48,330 --> 00:02:52,200
we also need to tell Jest to just hold on for a second

75
00:02:52,200 --> 00:02:54,000
after it runs this test.

76
00:02:54,000 --> 00:02:57,270
We need to make sure we tell Jest to just wait for a moment

77
00:02:57,270 --> 00:02:59,310
for this set timeout to complete

78
00:02:59,310 --> 00:03:03,150
before it considers the entire test to be done.

79
00:03:03,150 --> 00:03:05,400
So to tell Jest to just wait around,

80
00:03:05,400 --> 00:03:08,400
it offers a callback to this error function

81
00:03:08,400 --> 00:03:10,440
that we pass to it right here.

82
00:03:10,440 --> 00:03:12,390
The callback is the first argument

83
00:03:12,390 --> 00:03:14,403
and we refer to it as done.

84
00:03:15,480 --> 00:03:17,220
By getting a reference to done right here,

85
00:03:17,220 --> 00:03:18,840
we can then call that function

86
00:03:18,840 --> 00:03:21,570
from somewhere inside of our test file.

87
00:03:21,570 --> 00:03:24,060
As soon as we start to reference this done function,

88
00:03:24,060 --> 00:03:26,880
Jest says, "Oh I see you're trying to make use of done.

89
00:03:26,880 --> 00:03:29,460
Well in that case, I'm gonna run all the code

90
00:03:29,460 --> 00:03:31,860
inside of your test file or this test right here

91
00:03:31,860 --> 00:03:34,350
but I'm not going to assume that it's complete

92
00:03:34,350 --> 00:03:38,160
until you the developer invoke this function."

93
00:03:38,160 --> 00:03:40,530
So only when we invoke this function done right here,

94
00:03:40,530 --> 00:03:42,840
does Jest say, "Okay, I guess they're all done.

95
00:03:42,840 --> 00:03:44,490
They did everything they need to do.

96
00:03:44,490 --> 00:03:47,937
Let's go ahead and consider this test to be complete."

97
00:03:49,020 --> 00:03:52,230
So in order to tell Jest to just hold on for a second

98
00:03:52,230 --> 00:03:54,120
and not consider the test to be complete

99
00:03:54,120 --> 00:03:56,400
until the setTimeout executes,

100
00:03:56,400 --> 00:04:00,483
we're gonna add a call to done inside of it like so.

101
00:04:01,410 --> 00:04:04,770
So now, Jest runs this line, this line,

102
00:04:04,770 --> 00:04:07,380
this line and cues up the setTimeout

103
00:04:07,380 --> 00:04:10,080
and then it's gonna sit around and twiddle its thumbs

104
00:04:10,080 --> 00:04:13,320
until you and I call the done function.

105
00:04:13,320 --> 00:04:15,420
So a hundred milliseconds later,

106
00:04:15,420 --> 00:04:18,180
our inner function right here gets executed.

107
00:04:18,180 --> 00:04:21,899
We run the expectation and then we call done.

108
00:04:21,899 --> 00:04:23,220
And that's the signal to Jest

109
00:04:23,220 --> 00:04:24,180
that, "Yep, that's it,

110
00:04:24,180 --> 00:04:26,580
we have nothing else going on inside this test."

111
00:04:28,080 --> 00:04:30,420
Okay, so one more small thing here.

112
00:04:30,420 --> 00:04:31,770
This is almost the solution.

113
00:04:31,770 --> 00:04:34,830
We're gonna come up with one more very small thing.

114
00:04:34,830 --> 00:04:36,810
Recall way back long ago,

115
00:04:36,810 --> 00:04:39,660
we spoke about the wrapper.update function

116
00:04:39,660 --> 00:04:43,740
that we can use to force an update of a component.

117
00:04:43,740 --> 00:04:47,370
So after we call or simulate the click right here

118
00:04:47,370 --> 00:04:49,590
and we go through that entire process

119
00:04:49,590 --> 00:04:51,300
of calling the action creator

120
00:04:51,300 --> 00:04:53,100
and Moxios returns some data,

121
00:04:53,100 --> 00:04:55,740
and the reducer picks up that list of comments

122
00:04:55,740 --> 00:04:57,450
and everything flows back

123
00:04:57,450 --> 00:05:00,090
with that list of comments into our comment list.

124
00:05:00,090 --> 00:05:03,480
We have to explicitly tell this wrapped thing right here

125
00:05:03,480 --> 00:05:05,610
that it needs to update the components inside of it

126
00:05:05,610 --> 00:05:07,380
so that we get the latest version

127
00:05:07,380 --> 00:05:09,810
of all the components in there.

128
00:05:09,810 --> 00:05:12,720
So to do that right before we do our expectation,

129
00:05:12,720 --> 00:05:15,933
we're gonna call wrapped.update like so,

130
00:05:17,490 --> 00:05:18,790
and that's pretty much it.

131
00:05:20,550 --> 00:05:23,430
So now let's do one quick run through here.

132
00:05:23,430 --> 00:05:25,080
We initialize our component,

133
00:05:25,080 --> 00:05:26,190
we call simulate.

134
00:05:26,190 --> 00:05:27,900
That's gonna kick off the action creator,

135
00:05:27,900 --> 00:05:30,600
the request, Axios is gonna make the request.

136
00:05:30,600 --> 00:05:34,140
Moxios is gonna intercept it and instantly respond.

137
00:05:34,140 --> 00:05:37,890
We then do a tiny little pause to let Moxios do its thing.

138
00:05:37,890 --> 00:05:41,670
We then explicitly tell our application to update itself

139
00:05:41,670 --> 00:05:46,170
and then we finally do our actual expectation right here,

140
00:05:46,170 --> 00:05:47,617
and then we tell Jest,

141
00:05:47,617 --> 00:05:48,690
"that's it, we're done,

142
00:05:48,690 --> 00:05:50,670
nothing else inside this test."

143
00:05:50,670 --> 00:05:52,620
So let's flip back over to our terminal

144
00:05:52,620 --> 00:05:54,870
and see how our test is doing now.

145
00:05:54,870 --> 00:05:55,703
So back over here,

146
00:05:55,703 --> 00:05:57,510
it looks like at long last,

147
00:05:57,510 --> 00:05:58,920
we're good to go.

148
00:05:58,920 --> 00:06:00,510
So we should be able to say,

149
00:06:00,510 --> 00:06:02,340
flip this out to say,

150
00:06:02,340 --> 00:06:04,440
three allies just to make this thing fail.

151
00:06:04,440 --> 00:06:07,190
Remember that's one piece of cleanup that we want to do

152
00:06:08,130 --> 00:06:10,710
or one piece of little fact checking just to make sure

153
00:06:10,710 --> 00:06:13,260
that our tests are working the way we expect.

154
00:06:13,260 --> 00:06:14,093
So we'll run that

155
00:06:14,093 --> 00:06:16,410
and I'll give this thing just a second to run through.

156
00:06:16,410 --> 00:06:18,120
While that's running, there's one other thing

157
00:06:18,120 --> 00:06:20,220
that we need to take care of inside of here.

158
00:06:20,220 --> 00:06:22,770
We have created the, oh, you know what?

159
00:06:22,770 --> 00:06:23,603
Nevermind.

160
00:06:23,603 --> 00:06:24,436
I was gonna say we have to,

161
00:06:24,436 --> 00:06:25,269
Oh yes, we do.

162
00:06:25,269 --> 00:06:26,102
My, (laughing)

163
00:06:26,102 --> 00:06:26,935
my mistake.

164
00:06:26,935 --> 00:06:28,020
So we created wrapped right here,

165
00:06:28,020 --> 00:06:30,660
remember we always have to do that little bit of cleanup

166
00:06:30,660 --> 00:06:34,380
after we create a element with the mount function.

167
00:06:34,380 --> 00:06:36,030
So inside the setTimeout,

168
00:06:36,030 --> 00:06:37,260
after we call done,

169
00:06:37,260 --> 00:06:39,490
let's just do wrapped.unmount

170
00:06:41,310 --> 00:06:42,460
to clean that thing up.

171
00:06:44,130 --> 00:06:45,390
Okay, so snap back over here.

172
00:06:45,390 --> 00:06:46,770
I'm gonna let my test run.

173
00:06:46,770 --> 00:06:47,730
I won't make you watch it,

174
00:06:47,730 --> 00:06:48,690
so we'll take a quick break

175
00:06:48,690 --> 00:06:52,680
and come back the next section and wrap up our test suite.

176
00:06:52,680 --> 00:06:55,103
So quick break and I'll see you in just a minute.