1
00:00:00,990 --> 00:00:01,823
Instructor: In the last section,

2
00:00:01,823 --> 00:00:04,230
we went and took a look at the Enzyme documentation

3
00:00:04,230 --> 00:00:05,520
and we've now got a better idea

4
00:00:05,520 --> 00:00:06,960
of how we're gonna use Enzyme

5
00:00:06,960 --> 00:00:09,300
to test out our app component.

6
00:00:09,300 --> 00:00:11,640
So, in this section we're gonna do a big refactor

7
00:00:11,640 --> 00:00:13,920
of this app.test file.

8
00:00:13,920 --> 00:00:16,470
I'm gonna first get started by finding all the code

9
00:00:16,470 --> 00:00:18,210
inside of this it statement right here

10
00:00:18,210 --> 00:00:19,860
and removing all of it.

11
00:00:19,860 --> 00:00:22,830
So no longer are you and I going to manually create divs

12
00:00:22,830 --> 00:00:25,140
and then render our app component inside of it,

13
00:00:25,140 --> 00:00:27,990
we're instead gonna rely upon one of those three renders

14
00:00:27,990 --> 00:00:31,440
that are implemented by Enzyme.

15
00:00:31,440 --> 00:00:34,770
So, I'm gonna highlight all that stuff and delete it.

16
00:00:34,770 --> 00:00:37,050
I now no longer need react-dom

17
00:00:37,050 --> 00:00:39,350
so I'm gonna clean that up at the top as well.

18
00:00:40,620 --> 00:00:43,500
Then at the top, I will import Enzyme

19
00:00:43,500 --> 00:00:48,030
or more specifically one function off the Enzyme library.

20
00:00:48,030 --> 00:00:53,030
So I'm going to import shallow from Enzyme like so.

21
00:00:54,630 --> 00:00:56,190
Shallow right here is a function

22
00:00:56,190 --> 00:00:57,870
that we're going to use to render out

23
00:00:57,870 --> 00:01:00,030
a instance of our app component

24
00:01:00,030 --> 00:01:01,980
and none of its children.

25
00:01:01,980 --> 00:01:03,870
So, the shallow function right here

26
00:01:03,870 --> 00:01:05,790
is exactly the same thing

27
00:01:05,790 --> 00:01:07,770
as what we spoke about just a moment ago

28
00:01:07,770 --> 00:01:10,350
with this shallow render that renders just the component

29
00:01:10,350 --> 00:01:11,850
and none of its children.

30
00:01:11,850 --> 00:01:13,710
And one thing I want to clarify is that

31
00:01:13,710 --> 00:01:15,300
the component that we render

32
00:01:15,300 --> 00:01:17,730
if it has vanilla dom elements inside of it

33
00:01:17,730 --> 00:01:19,800
like say a div

34
00:01:19,800 --> 00:01:22,530
or a header tag or a text input,

35
00:01:22,530 --> 00:01:23,970
those will all be rendered.

36
00:01:23,970 --> 00:01:26,670
It's specifically react child components

37
00:01:26,670 --> 00:01:27,970
that will not be rendered.

38
00:01:29,730 --> 00:01:32,130
So, now inside of our it statement,

39
00:01:32,130 --> 00:01:34,950
we can attempt to render an instance of app

40
00:01:34,950 --> 00:01:37,110
using the shallow function.

41
00:01:37,110 --> 00:01:41,880
So we'll say const wrapped equals shallow

42
00:01:41,880 --> 00:01:45,030
and then we'll place our app component inside of a JS tag,

43
00:01:45,030 --> 00:01:47,490
excuse me, JSX tag like so.

44
00:01:47,490 --> 00:01:49,290
Now one quick thing I wanna mention here,

45
00:01:49,290 --> 00:01:51,480
we're using the terminology wrapped

46
00:01:51,480 --> 00:01:52,470
just to kind of indicate

47
00:01:52,470 --> 00:01:54,390
that the object that we got back from this

48
00:01:54,390 --> 00:01:57,720
is a wrapped version of our app component.

49
00:01:57,720 --> 00:01:59,190
Wrap specifically means that

50
00:01:59,190 --> 00:02:00,480
this is a component that has

51
00:02:00,480 --> 00:02:03,990
some additional functionality loaded on top.

52
00:02:03,990 --> 00:02:07,200
I personally don't really care for the term wrapped.

53
00:02:07,200 --> 00:02:09,960
I would love to instead use the term component

54
00:02:09,960 --> 00:02:11,340
'cause I think that's a little bit more clear

55
00:02:11,340 --> 00:02:12,600
what's going on here

56
00:02:12,600 --> 00:02:16,140
but all the documentation around Enzyme calls it wrapped,

57
00:02:16,140 --> 00:02:18,060
so we're gonna stick with the documentation

58
00:02:18,060 --> 00:02:18,893
but just so you know,

59
00:02:18,893 --> 00:02:20,460
on my own personal projects,

60
00:02:20,460 --> 00:02:22,020
I always call this component because

61
00:02:22,020 --> 00:02:24,370
it's a little bit more obvious what's going on.

62
00:02:25,652 --> 00:02:29,430
Okay, so now that we've got our wrapped component back

63
00:02:29,430 --> 00:02:31,080
we're going to then import

64
00:02:31,080 --> 00:02:34,770
our comment box component into this file

65
00:02:34,770 --> 00:02:37,230
and then we can attempt to find that component

66
00:02:37,230 --> 00:02:38,820
inside this wrapped object

67
00:02:38,820 --> 00:02:41,313
just as we saw in the documentation a moment ago.

68
00:02:42,180 --> 00:02:47,180
So at the top, I will import comment box from,

69
00:02:47,280 --> 00:02:50,760
notice we are now inside the __test directory.

70
00:02:50,760 --> 00:02:54,180
So we're gonna go up into the components folder

71
00:02:54,180 --> 00:02:56,973
and then get the comment box file.

72
00:02:58,410 --> 00:03:00,870
Now we can write out the actual expectation.

73
00:03:00,870 --> 00:03:04,260
So I'll write out the expect function,

74
00:03:04,260 --> 00:03:06,450
inside of here is going to be the thing

75
00:03:06,450 --> 00:03:09,330
or the value that we're trying to make an assertion about

76
00:03:09,330 --> 00:03:11,220
or an expectation about.

77
00:03:11,220 --> 00:03:13,980
So in this case, I want to look at this wrapped object

78
00:03:13,980 --> 00:03:16,110
in attempt to find all instances

79
00:03:16,110 --> 00:03:18,480
of the comment box component inside.

80
00:03:18,480 --> 00:03:23,480
So to do so, I'll write out wrapped.find CommentBox.

81
00:03:25,410 --> 00:03:27,720
So we're gonna look at the component that we just created

82
00:03:27,720 --> 00:03:32,010
and we're gonna find every copy of comment box inside of it.

83
00:03:32,010 --> 00:03:33,540
Now, when we call find right here

84
00:03:33,540 --> 00:03:35,940
it returns back to us in array.

85
00:03:35,940 --> 00:03:38,790
That array contains every instance of comment box

86
00:03:38,790 --> 00:03:40,050
that was found.

87
00:03:40,050 --> 00:03:41,550
Now, you and I don't actually care about

88
00:03:41,550 --> 00:03:44,220
the real instance of comment box that was found,

89
00:03:44,220 --> 00:03:48,390
all we care about is saying there's exactly one copy

90
00:03:48,390 --> 00:03:50,550
of comment box that was created.

91
00:03:50,550 --> 00:03:52,590
So, because this returns an array,

92
00:03:52,590 --> 00:03:55,413
I'm gonna pull off the .length property.

93
00:03:56,520 --> 00:04:01,200
So now wrapped.find CommentBox .length right here

94
00:04:01,200 --> 00:04:03,360
in theory is going to be either one

95
00:04:03,360 --> 00:04:06,090
indicating we've got one copy of comment box

96
00:04:06,090 --> 00:04:10,200
or zero indicating no comment boxes were found.

97
00:04:10,200 --> 00:04:11,580
So then the last thing we have to do

98
00:04:11,580 --> 00:04:13,800
is to write out an expectation.

99
00:04:13,800 --> 00:04:14,633
So this is gonna be the part

100
00:04:14,633 --> 00:04:16,980
where we write out the actual matcher on the end

101
00:04:16,980 --> 00:04:21,300
and say what we expect this value right here to be.

102
00:04:21,300 --> 00:04:22,132
So in this case

103
00:04:22,132 --> 00:04:25,200
we want there to be exactly one comment box.

104
00:04:25,200 --> 00:04:26,910
So this entire expression right here

105
00:04:26,910 --> 00:04:28,560
will return the number one.

106
00:04:28,560 --> 00:04:30,970
So I'm gonna put it on a matcher of toEqual

107
00:04:32,250 --> 00:04:35,100
and I'll pass it one like so.

108
00:04:35,100 --> 00:04:36,720
So, this is yet another matcher.

109
00:04:36,720 --> 00:04:38,370
It's very similar to the one that we just saw

110
00:04:38,370 --> 00:04:40,140
of toContain,

111
00:04:40,140 --> 00:04:43,110
toEqual is gonna look at the value that we provided

112
00:04:43,110 --> 00:04:45,990
and make sure that that value is exactly equal

113
00:04:45,990 --> 00:04:48,030
to the number right here.

114
00:04:48,030 --> 00:04:49,680
And that's it, that's all we have to write.

115
00:04:49,680 --> 00:04:52,230
So this is gonna make sure that there is one comment box

116
00:04:52,230 --> 00:04:54,270
inside of our app component.

117
00:04:54,270 --> 00:04:55,623
So let's test this out.

118
00:04:56,580 --> 00:04:59,100
I'm gonna make sure that I start my test,

119
00:04:59,100 --> 00:05:00,390
my test suite back up.

120
00:05:00,390 --> 00:05:02,310
Now, I already started my test suite

121
00:05:02,310 --> 00:05:04,560
just so you don't have to sit and watch mine boot up.

122
00:05:04,560 --> 00:05:06,270
But remember you can start your test suite

123
00:05:06,270 --> 00:05:08,400
by running NPN run test.

124
00:05:08,400 --> 00:05:09,750
So once you get that going,

125
00:05:09,750 --> 00:05:11,430
I'll then flip back over here.

126
00:05:11,430 --> 00:05:13,500
I'm gonna save this file

127
00:05:13,500 --> 00:05:16,560
and then I should be able to see my test running

128
00:05:16,560 --> 00:05:21,123
and hopefully after this completes,

129
00:05:22,620 --> 00:05:24,750
boy, this has just taken forever.

130
00:05:24,750 --> 00:05:27,240
I'm gonna do some work on this, I promise you,

131
00:05:27,240 --> 00:05:28,263
I'm gonna get these,

132
00:05:29,310 --> 00:05:31,170
the duration of these tests runs down

133
00:05:31,170 --> 00:05:32,880
because right now it's way too long.

134
00:05:32,880 --> 00:05:34,380
Okay, so very good.

135
00:05:34,380 --> 00:05:37,410
Took my test forever, but it did in fact pass.

136
00:05:37,410 --> 00:05:39,360
So now I feel pretty confident

137
00:05:39,360 --> 00:05:41,430
that I'm showing exactly one instance

138
00:05:41,430 --> 00:05:44,430
of the comment box inside my app component.

139
00:05:44,430 --> 00:05:45,870
Now, one thing that I like to do,

140
00:05:45,870 --> 00:05:47,100
and this is highly recommended

141
00:05:47,100 --> 00:05:49,110
whenever you're getting started with testing,

142
00:05:49,110 --> 00:05:51,750
is after you make the test work one time,

143
00:05:51,750 --> 00:05:53,370
try to make it break.

144
00:05:53,370 --> 00:05:55,050
The idea behind this is that you're gonna make sure

145
00:05:55,050 --> 00:05:57,930
that you're not getting an erroneous pass your tests

146
00:05:57,930 --> 00:05:59,760
and that's something that we're gonna be doing quite a bit

147
00:05:59,760 --> 00:06:00,660
throughout this course.

148
00:06:00,660 --> 00:06:02,160
We're gonna be making sure that our tests break

149
00:06:02,160 --> 00:06:04,020
at least one time to say that yeah,

150
00:06:04,020 --> 00:06:06,180
our tests are doing the right thing.

151
00:06:06,180 --> 00:06:08,130
So I'm gonna go back over to my test file

152
00:06:08,130 --> 00:06:10,410
and I'm gonna change the toEqual over here

153
00:06:10,410 --> 00:06:12,450
to be any other number.

154
00:06:12,450 --> 00:06:13,920
So I'll say nine.

155
00:06:13,920 --> 00:06:15,810
All I wanna do right now is make sure that

156
00:06:15,810 --> 00:06:18,060
if I put in the incorrect value right here,

157
00:06:18,060 --> 00:06:19,620
I see my test break

158
00:06:19,620 --> 00:06:21,180
and that's gonna just make me feel

159
00:06:21,180 --> 00:06:22,770
a little bit more confident

160
00:06:22,770 --> 00:06:25,560
that my test is behaving the way I expect.

161
00:06:25,560 --> 00:06:28,233
So, I'll then save the file, I'll flip back over,

162
00:06:29,640 --> 00:06:31,500
and then hopefully less than 12 seconds,

163
00:06:31,500 --> 00:06:33,690
thank goodness, a little bit faster this time.

164
00:06:33,690 --> 00:06:36,120
So you can see that the test failed.

165
00:06:36,120 --> 00:06:38,130
I thought that we were gonna get back a value of nine

166
00:06:38,130 --> 00:06:39,600
but we actually got one.

167
00:06:39,600 --> 00:06:42,243
So clearly the test is working as we expect.

168
00:06:43,080 --> 00:06:44,370
And then so the very last step,

169
00:06:44,370 --> 00:06:45,510
once we've made it break,

170
00:06:45,510 --> 00:06:47,730
we'll then make it work one more time.

171
00:06:47,730 --> 00:06:48,630
We'll save the file

172
00:06:48,630 --> 00:06:50,850
and we should be able to see it go back to green,

173
00:06:50,850 --> 00:06:54,000
which means our test is passing, awesome.

174
00:06:54,000 --> 00:06:56,460
Okay, so this right here is much more in line

175
00:06:56,460 --> 00:06:58,110
with the test that you and I are going to be writing

176
00:06:58,110 --> 00:06:59,820
throughout the rest of this application.

177
00:06:59,820 --> 00:07:00,990
So, with that in mind,

178
00:07:00,990 --> 00:07:02,280
let's continue the next section

179
00:07:02,280 --> 00:07:05,193
and we'll write out the other test for our app component.