1
00:00:01,020 --> 00:00:03,219
-: So the last two helpers that we need to put together

2
00:00:03,219 --> 00:00:05,250
is the helper for simulating

3
00:00:05,250 --> 00:00:08,610
events on a React component and a helper

4
00:00:08,610 --> 00:00:12,480
for setting up our jquery library as well.

5
00:00:12,480 --> 00:00:14,490
Let's go ahead and do the tricker of the two

6
00:00:14,490 --> 00:00:16,350
which is going to be building our helper

7
00:00:16,350 --> 00:00:18,480
for simulating events.

8
00:00:18,480 --> 00:00:19,830
So this one is gonna be

9
00:00:19,830 --> 00:00:21,360
a lot of little gotchas on here.

10
00:00:21,360 --> 00:00:23,940
It really requires some in depth knowledge of jqueries.

11
00:00:23,940 --> 00:00:24,990
So again, this is one

12
00:00:24,990 --> 00:00:26,440
of the ones where it's gonna be a lot of

13
00:00:26,440 --> 00:00:28,530
I have no idea what's going on,

14
00:00:28,530 --> 00:00:30,120
but again, the point here

15
00:00:30,120 --> 00:00:32,280
or the idea here is just to give you a taste

16
00:00:32,280 --> 00:00:33,900
of what's going on behind the scenes

17
00:00:33,900 --> 00:00:35,638
as opposed to trying to gain

18
00:00:35,638 --> 00:00:38,280
some intrinsic mastery.

19
00:00:38,280 --> 00:00:41,040
So the one place where we use this simulating events

20
00:00:41,040 --> 00:00:43,110
or this event simulator,

21
00:00:43,110 --> 00:00:45,210
was inside of the comment box test.

22
00:00:45,210 --> 00:00:46,140
So let's go ahead

23
00:00:46,140 --> 00:00:47,523
and open that file up.

24
00:00:48,990 --> 00:00:50,850
Inside of our test file,

25
00:00:50,850 --> 00:00:52,500
inside of our components file,

26
00:00:52,500 --> 00:00:54,753
I'm gonna find comment box test.

27
00:00:57,390 --> 00:00:59,040
Now inside of comment box test

28
00:00:59,040 --> 00:01:01,980
we use this down in the nested describe.

29
00:01:01,980 --> 00:01:05,850
So on a jquery element, a jquery object

30
00:01:05,850 --> 00:01:08,490
we called dot simulate,

31
00:01:08,490 --> 00:01:11,430
past the event name that we wanted to trigger.

32
00:01:11,430 --> 00:01:15,054
And then if it was a value or a change,

33
00:01:15,054 --> 00:01:16,590
that we wanted to simulate,

34
00:01:16,590 --> 00:01:18,840
we passed along the change event,

35
00:01:18,840 --> 00:01:21,810
or the new value to place on the element.

36
00:01:21,810 --> 00:01:22,643
So this is the kind

37
00:01:22,643 --> 00:01:25,290
of signature we're going, we're going for

38
00:01:25,290 --> 00:01:29,370
we should be able to chain onto any jquery object

39
00:01:29,370 --> 00:01:31,650
and then pass in the event name,

40
00:01:31,650 --> 00:01:33,990
and then a new value for the element,

41
00:01:33,990 --> 00:01:36,993
if it is a element that can hold a a value.

42
00:01:38,520 --> 00:01:41,430
So the really gotcha part, the hard part

43
00:01:41,430 --> 00:01:43,350
the part that requires you to have some knowledge

44
00:01:43,350 --> 00:01:46,620
about jquery is the part where we're gonna figure

45
00:01:46,620 --> 00:01:48,450
out how to add this method

46
00:01:48,450 --> 00:01:51,390
to every instance of jquery by default.

47
00:01:51,390 --> 00:01:53,760
And so to add a method to jquery

48
00:01:53,760 --> 00:01:56,350
we add a function

49
00:01:58,890 --> 00:02:01,890
to dollar sign.fn.

50
00:02:01,890 --> 00:02:06,890
So if we say dollar sign.fn.simulate, is a function

51
00:02:07,740 --> 00:02:09,479
then every jquery instance

52
00:02:09,479 --> 00:02:11,400
that we ever create will have access

53
00:02:11,400 --> 00:02:13,260
to this simulate function.

54
00:02:13,260 --> 00:02:14,643
And it can be called.

55
00:02:19,020 --> 00:02:19,950
We would use it like,

56
00:02:19,950 --> 00:02:21,990
so we would say go find a 'div'

57
00:02:21,990 --> 00:02:24,300
and then we could say, just dot simulate.

58
00:02:24,300 --> 00:02:26,523
That's what this dot fn does right here.

59
00:02:29,460 --> 00:02:31,590
Okay, let's go ahead and put our arguments on.

60
00:02:31,590 --> 00:02:32,940
The first argument is gonna be

61
00:02:32,940 --> 00:02:35,190
the event name that we care about.

62
00:02:35,190 --> 00:02:36,840
And the second one will be a value

63
00:02:36,840 --> 00:02:39,783
if we want to set a value on the element itself.

64
00:02:41,220 --> 00:02:44,010
So the real other interesting thing

65
00:02:44,010 --> 00:02:46,230
there's probably two very challenging

66
00:02:46,230 --> 00:02:48,540
or interesting aspects about this helper right here.

67
00:02:48,540 --> 00:02:50,880
The first one is the where to put the function.

68
00:02:50,880 --> 00:02:54,030
And the second one is how to get access

69
00:02:54,030 --> 00:02:56,040
to the jquery element, right?

70
00:02:56,040 --> 00:02:57,870
We are calling the simulate helper

71
00:02:57,870 --> 00:03:00,843
by doing something like div.simulate.

72
00:03:01,680 --> 00:03:03,450
And so it stands to reason that inside

73
00:03:03,450 --> 00:03:04,560
of this function we're going

74
00:03:04,560 --> 00:03:06,170
to want to somehow get access

75
00:03:06,170 --> 00:03:09,330
to the 'div' that was selected here.

76
00:03:09,330 --> 00:03:11,190
And so the tricky part here is knowing

77
00:03:11,190 --> 00:03:13,680
that the element that was selected

78
00:03:13,680 --> 00:03:16,500
if we want to get access to it inside of this

79
00:03:16,500 --> 00:03:19,713
this function right here, we just say this.

80
00:03:20,580 --> 00:03:24,450
So if I call dollar sign div.simulate

81
00:03:24,450 --> 00:03:26,670
and I referred to this

82
00:03:26,670 --> 00:03:28,650
it would be a reference to the 'div'

83
00:03:28,650 --> 00:03:30,030
that was selected.

84
00:03:30,030 --> 00:03:30,990
And so that's our real

85
00:03:30,990 --> 00:03:33,810
it's our handle into the react element.

86
00:03:33,810 --> 00:03:36,000
It's our handle into the component

87
00:03:36,000 --> 00:03:38,010
into the components HTML to get

88
00:03:38,010 --> 00:03:39,870
out the actual element

89
00:03:39,870 --> 00:03:41,370
that we care about and make changes

90
00:03:41,370 --> 00:03:43,020
to it or simulate an event on it

91
00:03:43,020 --> 00:03:45,840
or change the value on it.

92
00:03:45,840 --> 00:03:48,183
It's by just referring to this.

93
00:03:49,170 --> 00:03:51,600
So the next thing that we'll do is make use

94
00:03:51,600 --> 00:03:54,690
of the test utils library provided by React.

95
00:03:54,690 --> 00:03:58,530
Remember, we already imported that library up at the top.

96
00:03:58,530 --> 00:04:00,480
So we brought in test utils,

97
00:04:00,480 --> 00:04:02,670
it's one of the React add-ons.

98
00:04:02,670 --> 00:04:07,383
Let's go pull open our documentation for React right now.

99
00:04:10,020 --> 00:04:11,280
So in a browser window,

100
00:04:11,280 --> 00:04:13,233
I'm gonna search for react js.

101
00:04:14,880 --> 00:04:15,796
Click on the link,

102
00:04:15,796 --> 00:04:18,603
we'll go to documentation at the top.

103
00:04:22,320 --> 00:04:24,330
And then on the left hand side, a little bit

104
00:04:24,330 --> 00:04:25,260
of ways down under

105
00:04:25,260 --> 00:04:28,200
the add-on section is the test utilities.

106
00:04:28,200 --> 00:04:30,300
Now we've already looked at this page right here

107
00:04:30,300 --> 00:04:32,640
and when we previously looked at it, I pointed

108
00:04:32,640 --> 00:04:36,667
out in particular this simulate method on test utils.

109
00:04:36,667 --> 00:04:39,791
And so as the bold text right here says very clearly

110
00:04:39,791 --> 00:04:43,500
this is possibly the most single useful utility

111
00:04:43,500 --> 00:04:45,632
in react test utils.

112
00:04:45,632 --> 00:04:48,450
And so what we're going to do is reference react

113
00:04:48,450 --> 00:04:50,368
test utils dot simulate

114
00:04:50,368 --> 00:04:54,390
and then call the event type that we want to call

115
00:04:54,390 --> 00:04:56,310
and pass a reference to the element

116
00:04:56,310 --> 00:04:58,650
that we wanna trigger that event on.

117
00:04:58,650 --> 00:05:00,360
And so you can see a couple more instances

118
00:05:00,360 --> 00:05:03,330
of this down here I can see react test,

119
00:05:03,330 --> 00:05:07,080
utils simulate change with node,

120
00:05:07,080 --> 00:05:09,720
and also we can do a key down.

121
00:05:09,720 --> 00:05:12,033
So it's really the method name right here.

122
00:05:13,410 --> 00:05:15,840
The method name right here is the event name

123
00:05:15,840 --> 00:05:17,490
that we want to trigger.

124
00:05:17,490 --> 00:05:20,070
So with that knowledge, we can really wrap up this,

125
00:05:20,070 --> 00:05:22,680
the first part of this event or this,

126
00:05:22,680 --> 00:05:25,023
this simulate helper right here.

127
00:05:26,460 --> 00:05:31,460
We'll say test utils dot simulate capital S.

128
00:05:32,370 --> 00:05:36,930
And then the first element is the, is the reference

129
00:05:36,930 --> 00:05:38,430
to the HTML element that we want

130
00:05:38,430 --> 00:05:40,230
to trigger this event on.

131
00:05:40,230 --> 00:05:41,580
And we're missing one part here.

132
00:05:41,580 --> 00:05:44,430
We're missing the call where we add in the event name.

133
00:05:44,430 --> 00:05:45,990
So in the documentation there was stuff

134
00:05:45,990 --> 00:05:49,260
like say.click or dot change

135
00:05:49,260 --> 00:05:51,150
but we wanna be able to pass in the event name

136
00:05:51,150 --> 00:05:53,640
on the fly and trigger different events based

137
00:05:53,640 --> 00:05:55,470
on this different event name.

138
00:05:55,470 --> 00:05:56,790
So to do that, we're going

139
00:05:56,790 --> 00:05:59,739
going to not reference a direct property like this.

140
00:05:59,739 --> 00:06:02,970
We will instead reference a object property

141
00:06:02,970 --> 00:06:04,890
by using the square brackets

142
00:06:04,890 --> 00:06:07,443
and referring to event name.

143
00:06:08,760 --> 00:06:11,030
So now if a user, if we make use

144
00:06:11,030 --> 00:06:12,210
of this helper function

145
00:06:12,210 --> 00:06:14,340
and we pass in the change event,

146
00:06:14,340 --> 00:06:19,340
we will call testutils.simulate.change,

147
00:06:20,190 --> 00:06:22,860
and then invoke that function with this,

148
00:06:22,860 --> 00:06:25,583
which is a reference to our 'div.'

149
00:06:28,110 --> 00:06:29,700
All right, there's one more gotcha in here

150
00:06:29,700 --> 00:06:32,340
and it's just that when we are making reference

151
00:06:32,340 --> 00:06:33,750
to this, I said, Hey, it's, you know

152
00:06:33,750 --> 00:06:35,160
the 'div' that we already selected

153
00:06:35,160 --> 00:06:36,640
but we specifically want to get the

154
00:06:36,640 --> 00:06:38,520
the first 'div'

155
00:06:38,520 --> 00:06:40,830
this, this selector right here is an array

156
00:06:40,830 --> 00:06:42,750
that can contain many different elements.

157
00:06:42,750 --> 00:06:44,520
And so we just wanna trigger this

158
00:06:44,520 --> 00:06:47,820
this event on the first element in the array.

159
00:06:47,820 --> 00:06:50,733
And so we're just gonna add on zero.

160
00:06:51,900 --> 00:06:53,460
Again, this is a little bit of a gotcha

161
00:06:53,460 --> 00:06:54,760
little bit of a tough one.

162
00:06:56,010 --> 00:06:57,990
Okay? So this is looking good for

163
00:06:57,990 --> 00:06:59,310
our first step right here

164
00:06:59,310 --> 00:07:01,260
but we still need to implement the value.

165
00:07:01,260 --> 00:07:02,790
We need to somehow get the value

166
00:07:02,790 --> 00:07:05,550
onto the HTML element that got selected.

167
00:07:05,550 --> 00:07:07,350
So let's go ahead and take care of that

168
00:07:07,350 --> 00:07:08,433
in the next section.