1
00:00:01,110 --> 00:00:02,818
Instructor: In the last section,

2
00:00:02,818 --> 00:00:04,214
we spoke about the series of events

3
00:00:04,214 --> 00:00:05,939
that we're going to do to try to trick our text area

4
00:00:05,939 --> 00:00:08,189
into thinking someone just typed in it.

5
00:00:08,189 --> 00:00:09,870
So let's get started.

6
00:00:09,870 --> 00:00:13,110
I'm gonna flip back over to my comment box.test file,

7
00:00:13,110 --> 00:00:14,640
and then at the very bottom of the file,

8
00:00:14,640 --> 00:00:18,870
I'll add on a new it statement to implement this new test.

9
00:00:18,870 --> 00:00:21,558
I'll give this a description of something

10
00:00:21,558 --> 00:00:26,550
like it has a text area that users can type in.

11
00:00:26,550 --> 00:00:27,600
So the goal of this test

12
00:00:27,600 --> 00:00:29,700
is to make sure that if user types in it,

13
00:00:29,700 --> 00:00:32,463
the actual new text appears in the text area.

14
00:00:33,360 --> 00:00:35,010
So now inside of here,

15
00:00:35,010 --> 00:00:37,050
we're gonna go through this series of steps.

16
00:00:37,050 --> 00:00:38,950
The first thing we have to do

17
00:00:38,950 --> 00:00:41,050
is attempt to find that text area element.

18
00:00:42,450 --> 00:00:45,120
So our wrapped component has already been defined

19
00:00:45,120 --> 00:00:47,730
up here inside of our before each.

20
00:00:47,730 --> 00:00:49,500
So to find our text area,

21
00:00:49,500 --> 00:00:52,120
we're gonna do the same thing that we just did

22
00:00:52,120 --> 00:00:53,379
inside the last test.

23
00:00:53,379 --> 00:00:56,553
We can write out wrapped.find text area.

24
00:00:57,660 --> 00:00:59,520
So that right there returns a reference

25
00:00:59,520 --> 00:01:03,570
to our text area element inside of our component.

26
00:01:03,570 --> 00:01:05,559
The next thing we have to do

27
00:01:05,559 --> 00:01:09,060
is to simulate a change event on that element.

28
00:01:09,060 --> 00:01:10,770
Now to simulate a change event,

29
00:01:10,770 --> 00:01:12,660
we're going to use a method

30
00:01:12,660 --> 00:01:15,600
that is a part of the enzyme library.

31
00:01:15,600 --> 00:01:17,459
I'm gonna very quickly,

32
00:01:17,459 --> 00:01:18,630
open up the enzyme documentation again,

33
00:01:18,630 --> 00:01:20,180
and I'm gonna show you a method

34
00:01:21,140 --> 00:01:23,578
that we're going to use to make that text area think

35
00:01:23,578 --> 00:01:26,220
that a change event just occurred to it.

36
00:01:26,220 --> 00:01:29,670
So back over on my documentation on enzyme,

37
00:01:29,670 --> 00:01:33,090
I can find underneath the full dom rendering section,

38
00:01:33,090 --> 00:01:37,263
a method called as you might guess, simulate, right here.

39
00:01:38,910 --> 00:01:42,090
So the simulate method is tied to every element

40
00:01:42,090 --> 00:01:44,610
that we find within a component.

41
00:01:44,610 --> 00:01:47,283
We can simulate a given event.

42
00:01:48,390 --> 00:01:49,710
Notice that the documentation

43
00:01:49,710 --> 00:01:51,570
lists out the types of arguments here.

44
00:01:51,570 --> 00:01:54,030
So the first argument is going to be a string

45
00:01:54,030 --> 00:01:56,020
that represents the name of the event

46
00:01:56,858 --> 00:01:57,691
that we're trying to simulate.

47
00:01:58,554 --> 00:02:01,618
So in this case, we are trying to simulate a change event

48
00:02:01,618 --> 00:02:03,868
like a user changing the value of that input.

49
00:02:05,430 --> 00:02:08,340
So to do so, we'll go back over to our test,

50
00:02:08,340 --> 00:02:10,530
and we'll write out .simulate,

51
00:02:10,530 --> 00:02:13,080
and then add in the name of the event.

52
00:02:13,080 --> 00:02:16,293
So it's going to be simulate change.

53
00:02:17,730 --> 00:02:19,914
Now, one thing I wanna point out right here,

54
00:02:19,914 --> 00:02:21,378
'cause the name of the event

55
00:02:21,378 --> 00:02:22,740
might be a little bit confusing.

56
00:02:22,740 --> 00:02:25,050
When we trigger or simulate an event,

57
00:02:25,050 --> 00:02:28,770
we want to use the real HTML name of that event,

58
00:02:28,770 --> 00:02:30,780
not the react name.

59
00:02:30,780 --> 00:02:32,160
What I'm trying to refer to here

60
00:02:32,160 --> 00:02:35,250
is if you go back over to your comment box component

61
00:02:35,250 --> 00:02:38,190
and then find the text area element inside there,

62
00:02:38,190 --> 00:02:39,630
you'll notice that to bind

63
00:02:39,630 --> 00:02:42,360
a callback function to an event on an element,

64
00:02:42,360 --> 00:02:45,540
we always use the nomenclature of on,

65
00:02:45,540 --> 00:02:48,120
and then the name of the event itself.

66
00:02:48,120 --> 00:02:49,920
So when we simulate an event,

67
00:02:49,920 --> 00:02:52,800
we are not simulating on change.

68
00:02:52,800 --> 00:02:55,020
On change is the name of the callback

69
00:02:55,020 --> 00:02:57,480
that we are passing to the text area.

70
00:02:57,480 --> 00:03:00,457
Instead, we are simulating just the name

71
00:03:00,457 --> 00:03:03,150
of the event by itself, which is simply change

72
00:03:03,150 --> 00:03:04,443
not on change.

73
00:03:06,570 --> 00:03:08,938
Okay, so that's why we are putting

74
00:03:08,938 --> 00:03:10,440
the string of change right here.

75
00:03:10,440 --> 00:03:12,816
Now the second argument to this

76
00:03:12,816 --> 00:03:14,880
is gonna be just a little bit more confusing.

77
00:03:14,880 --> 00:03:17,670
So back here, inside of our checklist of steps,

78
00:03:17,670 --> 00:03:20,450
I had said that you and I need to provide

79
00:03:20,450 --> 00:03:21,660
a fake event object.

80
00:03:21,660 --> 00:03:23,360
So what I meant by this right here

81
00:03:24,298 --> 00:03:26,130
is if you go back over to our component definition

82
00:03:26,130 --> 00:03:28,658
inside the comment box file,

83
00:03:28,658 --> 00:03:30,510
let's do that right now very quickly.

84
00:03:30,510 --> 00:03:33,543
So here's my comment box file right here.

85
00:03:34,860 --> 00:03:38,190
If we look at our event handler, handle change,

86
00:03:38,190 --> 00:03:41,670
you'll recall that it gets called with an event argument.

87
00:03:41,670 --> 00:03:43,200
And inside of this method,

88
00:03:43,200 --> 00:03:45,660
you and I look at that event argument

89
00:03:45,660 --> 00:03:49,980
and we reference the event.target.value property.

90
00:03:49,980 --> 00:03:53,400
So whatever is right here inside this object

91
00:03:53,400 --> 00:03:55,590
is what we use as the new value

92
00:03:55,590 --> 00:03:57,160
of the comment piece of state

93
00:03:58,076 --> 00:04:00,026
inside of our comment or our component.

94
00:04:01,530 --> 00:04:03,510
So if you and I want to somehow trick

95
00:04:03,510 --> 00:04:06,930
our comment box component into using some new value

96
00:04:06,930 --> 00:04:08,730
for the value of comment right here,

97
00:04:09,698 --> 00:04:11,255
we need to essentially,

98
00:04:11,255 --> 00:04:14,283
modify the value of event.target.value.

99
00:04:15,810 --> 00:04:18,000
So to do so, we're going to be making use

100
00:04:18,000 --> 00:04:21,000
of the second argument to that simulate function.

101
00:04:21,000 --> 00:04:23,580
If we go back over to the simulate documentation,

102
00:04:23,580 --> 00:04:25,320
you'll see that the second argument

103
00:04:25,320 --> 00:04:28,440
is what is referred to as a mock object.

104
00:04:28,440 --> 00:04:32,340
So a mock event object is what we're gonna pass in here,

105
00:04:32,340 --> 00:04:34,320
and it's going to be merged

106
00:04:34,320 --> 00:04:36,450
with the real event object

107
00:04:36,450 --> 00:04:39,270
that gets passed to our event handler.

108
00:04:39,270 --> 00:04:41,801
So if you scroll down to the example right here,

109
00:04:41,801 --> 00:04:43,320
you might see a better little example.

110
00:04:43,320 --> 00:04:45,770
Oh no, they don't actually show you

111
00:04:45,770 --> 00:04:47,213
how to use that event thing.

112
00:04:47,213 --> 00:04:49,170
Kind of unfortunate, but I'll show you how to do it.

113
00:04:49,170 --> 00:04:50,380
So if we flip back over

114
00:04:51,570 --> 00:04:54,330
to our commentbox.test file,

115
00:04:54,330 --> 00:04:56,490
I'll find our simulate function

116
00:04:56,490 --> 00:04:58,740
and then as the second argument,

117
00:04:58,740 --> 00:05:00,420
we're gonna pass in an object

118
00:05:00,420 --> 00:05:03,750
that's going to be merged into the real event object

119
00:05:03,750 --> 00:05:06,720
that gets passed to our event handler.

120
00:05:06,720 --> 00:05:08,880
So I'm gonna pass in an object right here

121
00:05:08,880 --> 00:05:11,350
with a property of target

122
00:05:12,540 --> 00:05:15,000
that's gonna have a new object of its own.

123
00:05:15,000 --> 00:05:16,750
That will have a property of value.

124
00:05:17,850 --> 00:05:20,340
And to that, I'm going to assign the string

125
00:05:20,340 --> 00:05:22,623
new comment, like so.

126
00:05:24,000 --> 00:05:27,030
So now, we can imagine that this object right here,

127
00:05:27,030 --> 00:05:29,520
we can kind of imagine that this thing gets copied,

128
00:05:29,520 --> 00:05:31,651
and I'm gonna actually hit

129
00:05:31,651 --> 00:05:33,813
command C on my keyboard right now,

130
00:05:33,813 --> 00:05:36,440
and you can imagine that it essentially goes over

131
00:05:36,440 --> 00:05:38,160
to our handle change event handler right here,

132
00:05:38,160 --> 00:05:41,340
and it replaces or technically merges into

133
00:05:41,340 --> 00:05:44,160
this event object right here.

134
00:05:44,160 --> 00:05:46,650
So we can kind of imagine that the object

135
00:05:46,650 --> 00:05:48,840
that we just put in back inside of our test file,

136
00:05:48,840 --> 00:05:50,850
essentially gets dumped right here.

137
00:05:50,850 --> 00:05:52,290
So I can kind of hit paste,

138
00:05:52,290 --> 00:05:55,620
and that's kind of what's happening behind the scenes.

139
00:05:55,620 --> 00:05:59,250
So now we receive this argument right here as event,

140
00:05:59,250 --> 00:06:04,250
and then we reference the target.value property on it,

141
00:06:04,440 --> 00:06:07,620
and there's the string of new comment.

142
00:06:07,620 --> 00:06:09,758
So that's what's happening here.

143
00:06:09,758 --> 00:06:11,190
That's how we kind of trick this event handler

144
00:06:11,190 --> 00:06:15,243
with this kind of custom or fake or mock event object.

145
00:06:16,380 --> 00:06:20,190
So now when we trigger that simulate change event,

146
00:06:20,190 --> 00:06:22,230
we know that the callback handler

147
00:06:22,230 --> 00:06:25,743
is going to receive a piece of state of new comment.

148
00:06:26,730 --> 00:06:28,590
Okay, so let's take a quick pause right here.

149
00:06:28,590 --> 00:06:30,150
We'll continue in the next section,

150
00:06:30,150 --> 00:06:33,150
and we'll continue working down our list of steps.

151
00:06:33,150 --> 00:06:35,600
So quick break and I'll see you in just a minute.