1
00:00:00,940 --> 00:00:01,773
-: (Narrator) In the last section,

2
00:00:01,773 --> 00:00:03,840
we installed Enzyme into our project

3
00:00:03,840 --> 00:00:04,860
which is going to allow us

4
00:00:04,860 --> 00:00:06,660
to do a little bit of a refactor

5
00:00:06,660 --> 00:00:07,770
to this test right here

6
00:00:07,770 --> 00:00:09,928
and make it work just a little bit more nicely.

7
00:00:09,928 --> 00:00:11,280
We're gonna first get started

8
00:00:11,280 --> 00:00:14,370
with a quick discussion of how we make use of Enzyme.

9
00:00:14,370 --> 00:00:16,079
We'll then take a look at some documentation

10
00:00:16,079 --> 00:00:18,480
and then do our actual refactor.

11
00:00:18,480 --> 00:00:21,720
So first, how do we really make use of Enzyme?

12
00:00:21,720 --> 00:00:22,699
Well, at a top level

13
00:00:22,699 --> 00:00:26,370
Enzyme really gives us three additional capabilities

14
00:00:26,370 --> 00:00:28,140
for writing our tests.

15
00:00:28,140 --> 00:00:29,850
You'll notice that back over here

16
00:00:29,850 --> 00:00:31,590
inside of our test file right now,

17
00:00:31,590 --> 00:00:33,150
we created a 'div,'

18
00:00:33,150 --> 00:00:36,150
then we rendered our app component into that 'div'

19
00:00:36,150 --> 00:00:38,340
and then that made us, or that gave us access

20
00:00:38,340 --> 00:00:40,410
to that kind of magic 'div' that we could

21
00:00:40,410 --> 00:00:42,540
interact with and inspect

22
00:00:42,540 --> 00:00:45,180
and write a expectation around it.

23
00:00:45,180 --> 00:00:46,770
So when we make use of Enzyme

24
00:00:46,770 --> 00:00:50,190
we skip that entire process where we render our component

25
00:00:50,190 --> 00:00:53,040
into a 'div,' after creating the 'div.'

26
00:00:53,040 --> 00:00:54,780
Instead, we're going to be making use

27
00:00:54,780 --> 00:00:56,640
of three general methods

28
00:00:56,640 --> 00:00:58,903
for creating instances of our components

29
00:00:58,903 --> 00:01:01,890
and then writing expectations around them.

30
00:01:01,890 --> 00:01:02,850
So the three ways

31
00:01:02,850 --> 00:01:05,459
in which we're going to be interacting with Enzyme

32
00:01:05,459 --> 00:01:09,750
is by using a 'Static' render, a 'Shallow' render

33
00:01:09,750 --> 00:01:12,180
and a 'Full DOM' renderer.

34
00:01:12,180 --> 00:01:15,029
So each of these different render functions

35
00:01:15,029 --> 00:01:18,870
are essentially going to take an instance of our components.

36
00:01:18,870 --> 00:01:20,370
It's going to kind of treat them

37
00:01:20,370 --> 00:01:23,092
or attempt to render them in a slightly different fashion

38
00:01:23,092 --> 00:01:25,440
and then it will return back to us

39
00:01:25,440 --> 00:01:28,161
an object that we can use to write our tests around.

40
00:01:28,161 --> 00:01:31,514
So let's very quickly talk about the three different ways.

41
00:01:31,514 --> 00:01:34,530
First off is the 'Static' render.

42
00:01:34,530 --> 00:01:37,606
So this is a function that we can pass a component to.

43
00:01:37,606 --> 00:01:40,050
When we pass a component to 'Static,'

44
00:01:40,050 --> 00:01:42,240
it's going to take our component,

45
00:01:42,240 --> 00:01:44,070
it'll render the component,

46
00:01:44,070 --> 00:01:46,200
take all the HTML that's generated,

47
00:01:46,200 --> 00:01:48,150
and then return to us an object

48
00:01:48,150 --> 00:01:50,759
that just contains that HTML.

49
00:01:50,759 --> 00:01:52,110
The key thing here,

50
00:01:52,110 --> 00:01:53,580
is that we don't have any ability

51
00:01:53,580 --> 00:01:56,910
to like interact with that HTML that's generated.

52
00:01:56,910 --> 00:01:58,860
We can't simulate clicking on something

53
00:01:58,860 --> 00:02:00,420
or entering any text.

54
00:02:00,420 --> 00:02:02,850
It's really just 'Static' HTML

55
00:02:02,850 --> 00:02:04,440
that allows us to make an assertion

56
00:02:04,440 --> 00:02:06,753
about the HTML that was generated.

57
00:02:08,430 --> 00:02:10,979
Next up is the 'Shallow' render.

58
00:02:10,979 --> 00:02:13,066
The 'Shallow' render takes a component

59
00:02:13,066 --> 00:02:18,066
and renders just that component and none of its children.

60
00:02:18,180 --> 00:02:19,320
So a good example of this

61
00:02:19,320 --> 00:02:21,780
might be the 'App' component that we're working on.

62
00:02:21,780 --> 00:02:23,790
If we use this 'Shallow' render

63
00:02:23,790 --> 00:02:26,370
on the 'App' component that we just created -

64
00:02:26,370 --> 00:02:27,240
and let's really quickly

65
00:02:27,240 --> 00:02:29,760
pull up our 'App' component right here -

66
00:02:29,760 --> 00:02:31,370
So if we rendered our 'App' component

67
00:02:31,370 --> 00:02:34,170
we would essentially just get back a 'div'

68
00:02:34,170 --> 00:02:36,397
with kind of a placeholder that says,

69
00:02:36,397 --> 00:02:39,090
"Hey, a comment box should exist here,

70
00:02:39,090 --> 00:02:40,860
but it doesn't really."

71
00:02:40,860 --> 00:02:42,030
So the 'Shallow' render

72
00:02:42,030 --> 00:02:44,430
is used when we want to test one component

73
00:02:44,430 --> 00:02:46,410
by itself, in isolation

74
00:02:46,410 --> 00:02:48,120
and not try to make any assertions

75
00:02:48,120 --> 00:02:50,283
about the components underneath it.

76
00:02:51,180 --> 00:02:53,370
Finally, the 'Full DOM' render.

77
00:02:53,370 --> 00:02:55,350
This takes an instance of a component,

78
00:02:55,350 --> 00:02:58,710
renders that component and all of its children.

79
00:02:58,710 --> 00:03:00,450
It then returns an object back to us

80
00:03:00,450 --> 00:03:03,120
that we can use to kind of interact with that component.

81
00:03:03,120 --> 00:03:06,720
So we can simulate click events or entering text

82
00:03:06,720 --> 00:03:10,260
or otherwise interacting with that component.

83
00:03:10,260 --> 00:03:12,780
We can use this 'Full DOM' rendering functionality

84
00:03:12,780 --> 00:03:15,870
to essent- essentially render out a full copy

85
00:03:15,870 --> 00:03:17,760
of our entire application

86
00:03:17,760 --> 00:03:21,540
and then somehow test interactions with the entire app.

87
00:03:21,540 --> 00:03:23,850
So we're going to eventually touch on all three of these

88
00:03:23,850 --> 00:03:25,830
maybe not quite so much the 'Static' one

89
00:03:25,830 --> 00:03:27,510
but we're definitely gonna make use of 'Shallow'

90
00:03:27,510 --> 00:03:31,173
and 'Full DOM' for the purposes of testing our application.

91
00:03:32,130 --> 00:03:33,300
So now we've spoken a little bit

92
00:03:33,300 --> 00:03:35,850
about 'Shallow' and 'Full DOM' and 'Static.'

93
00:03:35,850 --> 00:03:37,470
Let's very quickly go and look

94
00:03:37,470 --> 00:03:40,693
at some documentation around this 'Shallow' render

95
00:03:40,693 --> 00:03:43,560
and we'll get a better sense of how we are going to use it

96
00:03:43,560 --> 00:03:46,620
to solve the current problem that we have right now.

97
00:03:46,620 --> 00:03:48,570
Which is, writing a test

98
00:03:48,570 --> 00:03:50,310
and making sure that the comment box

99
00:03:50,310 --> 00:03:53,040
exists inside the "App" component.

100
00:03:53,040 --> 00:03:57,480
So I'm gonna quickly pull up the documentation for Enzyme.

101
00:03:57,480 --> 00:03:58,800
If you want to follow along

102
00:03:58,800 --> 00:04:03,800
you can find the documentation at airbnb.io/enzyme.

103
00:04:05,100 --> 00:04:07,770
So I'm gonna pull up my browser

104
00:04:07,770 --> 00:04:11,703
and navigate to airbnb.io/enzyme.

105
00:04:13,815 --> 00:04:15,780
And once here, on the left hand side

106
00:04:15,780 --> 00:04:17,430
I'm gonna scroll down a little bit

107
00:04:17,430 --> 00:04:20,610
until I find the 'Shallow Rendering' section.

108
00:04:20,610 --> 00:04:21,899
And then underneath that

109
00:04:21,899 --> 00:04:25,683
I'll find the function of 'find' right here.

110
00:04:26,790 --> 00:04:27,910
So I'll click on find

111
00:04:28,770 --> 00:04:31,200
and then I will look at the documentation here.

112
00:04:31,200 --> 00:04:33,499
I'll zoom in or scroll down just a little bit more

113
00:04:33,499 --> 00:04:37,350
and I'll find the section of 'Component Constructors.'

114
00:04:37,350 --> 00:04:38,550
So this is an example

115
00:04:38,550 --> 00:04:41,348
of exactly what you and I are trying to do right now.

116
00:04:41,348 --> 00:04:43,410
You'll see that in this example

117
00:04:43,410 --> 00:04:46,890
they are trying to make a test or write an expectation

118
00:04:46,890 --> 00:04:50,100
around the component called 'My Component.'

119
00:04:50,100 --> 00:04:51,360
There is another component

120
00:04:51,360 --> 00:04:53,580
inside this application called 'Foo'

121
00:04:53,580 --> 00:04:54,840
and they want to write a test

122
00:04:54,840 --> 00:04:57,810
to make sure that an instance of the 'Foo' component

123
00:04:57,810 --> 00:05:01,110
exists inside of 'My Component.'

124
00:05:01,110 --> 00:05:03,180
So they render that 'My Component'

125
00:05:03,180 --> 00:05:04,680
using that 'Shallow' render

126
00:05:04,680 --> 00:05:06,690
that we just spoke about.

127
00:05:06,690 --> 00:05:09,810
And then they look inside of that rendered component

128
00:05:09,810 --> 00:05:12,090
and look to see if there's an instance

129
00:05:12,090 --> 00:05:14,670
of the 'Foo' component in there.

130
00:05:14,670 --> 00:05:16,530
And more specifically, they write a test

131
00:05:16,530 --> 00:05:21,060
to say there's exactly one instance of 'Foo' inside.

132
00:05:21,060 --> 00:05:22,650
Now, one thing I wanna mention here

133
00:05:22,650 --> 00:05:25,170
is that the matcher that you see right here

134
00:05:25,170 --> 00:05:28,470
of 'to' '.' 'have' '.' 'length' '.' - or excuse me,

135
00:05:28,470 --> 00:05:30,750
well no '.' at the end, but you get the idea.

136
00:05:30,750 --> 00:05:32,700
This is a matcher that you would find

137
00:05:32,700 --> 00:05:34,860
with 'Mocha' or 'Chai,' so we're gonna write

138
00:05:34,860 --> 00:05:37,530
a slightly different expectation

139
00:05:37,530 --> 00:05:39,030
since we're working with 'Jest,'

140
00:05:39,030 --> 00:05:41,700
but the overall idea here is the same.

141
00:05:41,700 --> 00:05:44,010
We want to render an instance of our 'App' component

142
00:05:44,010 --> 00:05:45,360
with that 'Shallow' render,

143
00:05:45,360 --> 00:05:46,470
and then we're gonna look at it

144
00:05:46,470 --> 00:05:48,960
and make sure that it has a single copy

145
00:05:48,960 --> 00:05:51,840
of the comment box component inside of it.

146
00:05:51,840 --> 00:05:56,340
So, at long last, that is how we're gonna tackle this issue.

147
00:05:56,340 --> 00:05:57,750
That's how we are going to attempt

148
00:05:57,750 --> 00:06:00,134
to look inside of our app component

149
00:06:00,134 --> 00:06:02,490
and make sure that it has an instance

150
00:06:02,490 --> 00:06:05,700
of the comment box without actually knowing

151
00:06:05,700 --> 00:06:08,730
about any of the implementation details

152
00:06:08,730 --> 00:06:11,370
of the comment box component itself.

153
00:06:11,370 --> 00:06:12,990
So let's take one more quick break.

154
00:06:12,990 --> 00:06:14,640
We're gonna come back the next section

155
00:06:14,640 --> 00:06:17,760
and implement that test into this test file.

156
00:06:17,760 --> 00:06:19,410
So I'll see you in just a minute.