1
00:00:01,020 --> 00:00:01,853
Instructor: In the last section

2
00:00:01,853 --> 00:00:04,440
we created our comment box test file.

3
00:00:04,440 --> 00:00:06,210
We're going to write out our first test right here

4
00:00:06,210 --> 00:00:07,043
in just a moment.

5
00:00:07,043 --> 00:00:09,540
But before we do, I want to show you some documentation

6
00:00:09,540 --> 00:00:12,780
around this full DOM rendering process

7
00:00:12,780 --> 00:00:14,910
that enzyme provides to us.

8
00:00:14,910 --> 00:00:17,070
I'm gonna very quickly pull up the documentation

9
00:00:17,070 --> 00:00:22,020
on enzyme's homepage, which is at airbnb.io/enzyme.

10
00:00:22,020 --> 00:00:23,903
And then on the left hand side I'll find the

11
00:00:23,903 --> 00:00:26,490
full DOM rendering section.

12
00:00:26,490 --> 00:00:27,630
So there's one thing inside

13
00:00:27,630 --> 00:00:29,880
of here that I want to pull your attention to.

14
00:00:29,880 --> 00:00:31,680
Notice this note right here.

15
00:00:31,680 --> 00:00:34,620
So the note essentially says that anytime we make use

16
00:00:34,620 --> 00:00:39,210
of this full DOM rendering, we are sharing the same fake DOM

17
00:00:39,210 --> 00:00:42,360
that it's been implemented by that JS DOM library.

18
00:00:42,360 --> 00:00:44,010
And that means that these different components

19
00:00:44,010 --> 00:00:46,740
that we are creating can potentially interact

20
00:00:46,740 --> 00:00:50,820
with each other and cause issues across our different tests.

21
00:00:50,820 --> 00:00:53,130
So after every single test that you and I write

22
00:00:53,130 --> 00:00:56,730
we're going to make sure that we do a little bit of cleanup.

23
00:00:56,730 --> 00:00:57,563
We're gonna make sure

24
00:00:57,563 --> 00:00:59,499
that we take the component that we created

25
00:00:59,499 --> 00:01:02,670
and got mounted into that virtual DOM

26
00:01:02,670 --> 00:01:05,280
and we're going to attempt to un-mount it so

27
00:01:05,280 --> 00:01:08,340
that that component we created does not somehow interfere

28
00:01:08,340 --> 00:01:10,560
with other components that are being created inside

29
00:01:10,560 --> 00:01:12,120
of other tests.

30
00:01:12,120 --> 00:01:15,120
So that's just one quick thing to keep in mind.

31
00:01:15,120 --> 00:01:16,050
Now, to actually make use

32
00:01:16,050 --> 00:01:19,120
of this full DOM rendering function

33
00:01:20,250 --> 00:01:21,083
we're going to make sure

34
00:01:21,083 --> 00:01:23,403
that we import enzyme at the top of this file.

35
00:01:24,300 --> 00:01:25,133
Remember that

36
00:01:25,133 --> 00:01:28,350
before we imported the shallow function from enzyme.

37
00:01:28,350 --> 00:01:30,840
But this full DOM rendering functionality comes

38
00:01:30,840 --> 00:01:33,573
from a different function called simply mount.

39
00:01:34,620 --> 00:01:36,390
This is one function of many

40
00:01:36,390 --> 00:01:39,090
that is exported from the enzyme library.

41
00:01:39,090 --> 00:01:42,630
So remember to get the curly braces on here as well.

42
00:01:42,630 --> 00:01:46,503
And we're going to import that from enzyme like so.

43
00:01:47,490 --> 00:01:50,130
So now inside of our actual it statement right here

44
00:01:50,130 --> 00:01:53,040
we can attempt to render our comment box component

45
00:01:53,040 --> 00:01:56,340
and then write out an actual expectation about it.

46
00:01:56,340 --> 00:01:58,080
So I'm going to create a new variable inside

47
00:01:58,080 --> 00:02:01,560
of here called wrapped, and that's going to be

48
00:02:01,560 --> 00:02:05,433
mount comment box like so.

49
00:02:06,870 --> 00:02:08,940
So almost identical to what we wrote inside

50
00:02:08,940 --> 00:02:10,350
of our app test.

51
00:02:10,350 --> 00:02:11,670
Right here we create an instance

52
00:02:11,670 --> 00:02:13,320
of the comment box component

53
00:02:13,320 --> 00:02:15,870
and then we pass it off to the mount function provided

54
00:02:15,870 --> 00:02:17,160
by enzyme.

55
00:02:17,160 --> 00:02:20,190
Enzyme is going to take our component instance,

56
00:02:20,190 --> 00:02:22,830
it's going to attempt to render it into that fake DOM

57
00:02:22,830 --> 00:02:25,980
that is created by JS DOM and then it returns this object

58
00:02:25,980 --> 00:02:28,860
right here that we usually refer to as wrapped.

59
00:02:28,860 --> 00:02:30,810
And again, the idea behind that variable name is

60
00:02:30,810 --> 00:02:33,660
that this is kind of like a wrapped version of our component

61
00:02:33,660 --> 00:02:35,730
and it has some additional functionality tied

62
00:02:35,730 --> 00:02:38,790
to it that allows us to make assertions about the component

63
00:02:38,790 --> 00:02:39,663
that was created.

64
00:02:40,770 --> 00:02:42,870
So now we're going to look through the component

65
00:02:42,870 --> 00:02:46,320
that was created, and attempt to find a text area

66
00:02:46,320 --> 00:02:50,010
element inside there and a button as well.

67
00:02:50,010 --> 00:02:52,318
You'll recall that we did something very similar back

68
00:02:52,318 --> 00:02:55,050
on the very first test we put together when

69
00:02:55,050 --> 00:02:59,520
we kind of used that contains or should contain matcher

70
00:02:59,520 --> 00:03:01,800
and looked at the raw HTML that was coming out of

71
00:03:01,800 --> 00:03:03,930
that div that we were making use of.

72
00:03:03,930 --> 00:03:06,750
So Enzyme has a very similar function available

73
00:03:06,750 --> 00:03:08,910
to us and in fact we actually used it inside

74
00:03:08,910 --> 00:03:11,010
of the app test file as well.

75
00:03:11,010 --> 00:03:12,693
So find right here.

76
00:03:13,980 --> 00:03:15,930
That find helper can be used not only

77
00:03:15,930 --> 00:03:18,540
for finding component instances but also

78
00:03:18,540 --> 00:03:22,020
for finding normal HTML elements as well.

79
00:03:22,020 --> 00:03:22,890
So if I go back over

80
00:03:22,890 --> 00:03:26,940
to my documentation and find the method find right here

81
00:03:26,940 --> 00:03:30,810
we can see that we can find not only component instances

82
00:03:30,810 --> 00:03:32,430
as we did just a moment ago

83
00:03:32,430 --> 00:03:37,080
but we can also attempt to find raw HTML elements as well.

84
00:03:37,080 --> 00:03:38,820
And so in this case we're going to attempt to

85
00:03:38,820 --> 00:03:40,800
find a text area

86
00:03:40,800 --> 00:03:44,073
and a button inside of our wrapped component.

87
00:03:45,540 --> 00:03:46,373
So back over here

88
00:03:46,373 --> 00:03:49,057
let's first just do a simple console log just to make sure

89
00:03:49,057 --> 00:03:51,210
that we're going down the right path.

90
00:03:51,210 --> 00:03:53,670
I'll say wrapped dot find

91
00:03:53,670 --> 00:03:56,490
and I'm going to try to find a text area.

92
00:03:56,490 --> 00:03:58,977
And then right underneath that I'll do the same thing.

93
00:03:58,977 --> 00:04:02,470
And I'll try to find a button, in this case instead

94
00:04:03,660 --> 00:04:05,700
and I'll save this file and we'll flip back over

95
00:04:05,700 --> 00:04:08,613
to our test suite and see what console logs we get.

96
00:04:10,200 --> 00:04:13,800
So back over here you'll notice that our comment

97
00:04:13,800 --> 00:04:16,920
box dot test dot JS file has been automatically picked up

98
00:04:16,920 --> 00:04:20,550
by jest so I did not have to restart my jest runner

99
00:04:20,550 --> 00:04:23,040
in order to get it to pick up this new test file.

100
00:04:23,040 --> 00:04:24,900
Jest has just automatically seen

101
00:04:24,900 --> 00:04:28,320
that we created a new file and ran the test inside of it.

102
00:04:28,320 --> 00:04:31,200
Now if jest does not automatically find that new test file

103
00:04:31,200 --> 00:04:34,563
for you, no big deal, just restart your jest test runner.

104
00:04:35,700 --> 00:04:38,370
So now down here I can see the two console logs

105
00:04:38,370 --> 00:04:41,130
for the find text area and the find button.

106
00:04:41,130 --> 00:04:43,380
Again we get these wrapper objects back

107
00:04:43,380 --> 00:04:45,600
that are essentially like a race.

108
00:04:45,600 --> 00:04:47,820
They both have a length of one, which indicates that

109
00:04:47,820 --> 00:04:51,000
both those console logs or both those find statements have

110
00:04:51,000 --> 00:04:54,903
found exactly one text area and one button.

111
00:04:56,430 --> 00:04:57,930
So now that we've got those two statements

112
00:04:57,930 --> 00:05:00,630
or those two elements found inside of our test, we can write

113
00:05:00,630 --> 00:05:03,060
out our actual assertions.

114
00:05:03,060 --> 00:05:08,060
So I'll say expect wrapped dot find text area dot length.

115
00:05:10,230 --> 00:05:12,600
So length right here should return the number one.

116
00:05:12,600 --> 00:05:13,433
That's what we wanna see.

117
00:05:13,433 --> 00:05:17,490
We want to see exactly one text area being found inside

118
00:05:17,490 --> 00:05:19,320
of our comment box.

119
00:05:19,320 --> 00:05:24,320
So I will expect that that will two equal the number one

120
00:05:24,330 --> 00:05:27,080
'cause that's exactly what I want to see that equal to.

121
00:05:28,050 --> 00:05:32,109
I'll then copy paste that line down and on the second line

122
00:05:32,109 --> 00:05:35,250
I'll change text area to simply button

123
00:05:35,250 --> 00:05:36,180
'cause that's the other element

124
00:05:36,180 --> 00:05:37,350
that we definitely want to find

125
00:05:37,350 --> 00:05:39,000
within this component.

126
00:05:39,000 --> 00:05:40,440
And then the last thing I'll do is clean

127
00:05:40,440 --> 00:05:42,213
up the two console log statements.

128
00:05:43,659 --> 00:05:45,810
Okay, so this looks pretty good.

129
00:05:45,810 --> 00:05:48,360
If I go back over to my terminal, it looks

130
00:05:48,360 --> 00:05:51,127
like my new test is passing just fine.

131
00:05:51,127 --> 00:05:53,101
Okay, so that looks pretty good.

132
00:05:53,101 --> 00:05:56,730
Now inside this test you'll notice that we are again making

133
00:05:56,730 --> 00:05:58,200
use of this mount thing.

134
00:05:58,200 --> 00:05:59,850
We still have to run other tests

135
00:05:59,850 --> 00:06:02,940
inside this file and chances are every single one

136
00:06:02,940 --> 00:06:04,710
of those other tests are going to have to

137
00:06:04,710 --> 00:06:07,320
create a new component instance.

138
00:06:07,320 --> 00:06:09,600
And so just like we did two seconds ago

139
00:06:09,600 --> 00:06:11,910
inside of our app test dot JS file

140
00:06:11,910 --> 00:06:12,990
I think that we're going to have

141
00:06:12,990 --> 00:06:15,479
to create a before each statement and make sure

142
00:06:15,479 --> 00:06:18,270
that every time that we are about to run a test

143
00:06:18,270 --> 00:06:20,790
inside that file, we try to create a new instance

144
00:06:20,790 --> 00:06:23,640
of the component that we're trying to test.

145
00:06:23,640 --> 00:06:24,960
And the other thing that you'll notice inside

146
00:06:24,960 --> 00:06:26,497
of comment box right now is that we're not

147
00:06:26,497 --> 00:06:29,340
doing that cleanup that I had just mentioned

148
00:06:29,340 --> 00:06:31,410
that we saw in the documentation.

149
00:06:31,410 --> 00:06:36,360
So in the docs two seconds ago, back over here

150
00:06:36,360 --> 00:06:38,040
remember we have to do a little bit

151
00:06:38,040 --> 00:06:40,170
of cleanup of that component we just created.

152
00:06:40,170 --> 00:06:42,150
So we still have to take care of that as well.

153
00:06:42,150 --> 00:06:44,250
So I think we've got two immediate tasks we have

154
00:06:44,250 --> 00:06:45,083
to take care of.

155
00:06:45,083 --> 00:06:47,460
So let's address both those in the next section.