1
00:00:01,410 --> 00:00:02,243
Narrator: In the last section,

2
00:00:02,243 --> 00:00:05,340
we started wiring up a second nested describe here,

3
00:00:05,340 --> 00:00:07,470
that specifically was talking about what happens

4
00:00:07,470 --> 00:00:09,690
when a user enters some text.

5
00:00:09,690 --> 00:00:12,330
We set up a nested before each,

6
00:00:12,330 --> 00:00:15,570
so by the time that MOCA got to this before each right here,

7
00:00:15,570 --> 00:00:19,492
we've already defined our component up top.

8
00:00:19,492 --> 00:00:20,790
And so we've got a fresh instance

9
00:00:20,790 --> 00:00:23,130
of our component to work with right here.

10
00:00:23,130 --> 00:00:25,140
We then added this kind of weird looking

11
00:00:25,140 --> 00:00:26,010
line of code right here.

12
00:00:26,010 --> 00:00:28,713
So let's talk about this line of code in great detail.

13
00:00:29,580 --> 00:00:33,360
First, we have our fresh component, right here,

14
00:00:33,360 --> 00:00:35,700
and we kind of rooted through that component.

15
00:00:35,700 --> 00:00:38,340
We kind of dug through all the HTML that it contained,

16
00:00:38,340 --> 00:00:43,020
and we found a very specific HTML element, the text area.

17
00:00:43,020 --> 00:00:44,730
So at this point in time, right here,

18
00:00:44,730 --> 00:00:46,140
this block of code, right here,

19
00:00:46,140 --> 00:00:50,013
is essentially just fetching that very particular text area.

20
00:00:51,750 --> 00:00:53,400
Now, let's think about what we really want

21
00:00:53,400 --> 00:00:55,260
the behavior that we really wanted to test here.

22
00:00:55,260 --> 00:00:56,460
We wanted to test the case

23
00:00:56,460 --> 00:01:00,810
in which a user clicks in the text area and starts typing.

24
00:01:00,810 --> 00:01:03,420
Whenever a user types in a text area,

25
00:01:03,420 --> 00:01:06,390
they're triggering a change event,

26
00:01:06,390 --> 00:01:08,490
and that change event is called

27
00:01:08,490 --> 00:01:10,800
with whatever the new text is.

28
00:01:10,800 --> 00:01:13,140
And so that's what this simulate call is doing right here.

29
00:01:13,140 --> 00:01:17,130
Simulate is saying," I'm going to simulate an event."

30
00:01:17,130 --> 00:01:20,460
The event that we're simulating is a change event,

31
00:01:20,460 --> 00:01:22,500
and here's what the new value is

32
00:01:22,500 --> 00:01:23,820
coming from that change event.

33
00:01:23,820 --> 00:01:26,220
That's all that's happening in this line of code right here.

34
00:01:26,220 --> 00:01:30,720
This is just a tool to simulate fake events

35
00:01:30,720 --> 00:01:34,233
inside of our components html.

36
00:01:35,190 --> 00:01:37,530
So now if we are kind of like, you know,

37
00:01:37,530 --> 00:01:39,660
walking through this life cycle,

38
00:01:39,660 --> 00:01:40,920
this component that we're testing

39
00:01:40,920 --> 00:01:45,780
we've now rendered the component, we've found the text area,

40
00:01:45,780 --> 00:01:48,630
and we simulated a change to the text area

41
00:01:48,630 --> 00:01:49,680
with some new text.

42
00:01:49,680 --> 00:01:53,370
So I now expect that text area to contain the text

43
00:01:53,370 --> 00:01:57,210
that was just kind of fake entered right here.

44
00:01:57,210 --> 00:01:59,250
So at this point in time, I think that we can probably

45
00:01:59,250 --> 00:02:01,710
get away with writing expectation.

46
00:02:01,710 --> 00:02:03,180
It's probably gonna fail to start off

47
00:02:03,180 --> 00:02:05,850
because we haven't really added any

48
00:02:05,850 --> 00:02:08,039
implementation to comment box just yet,

49
00:02:08,039 --> 00:02:10,380
but we can at least write our spec.

50
00:02:10,380 --> 00:02:12,790
So we'll write, "expect(component.find('textarea))".

51
00:02:17,430 --> 00:02:19,470
And then remember, we need to think about what matcher

52
00:02:19,470 --> 00:02:22,080
we want to use here and what we're trying to test.

53
00:02:22,080 --> 00:02:24,330
We're trying to test that the text,

54
00:02:24,330 --> 00:02:27,510
the text area has the text that was just entered.

55
00:02:27,510 --> 00:02:31,950
So if we go back over to our docs for jquerychi,

56
00:02:31,950 --> 00:02:34,110
and we kinda root through all the different matchers

57
00:02:34,110 --> 00:02:36,150
or different assertions that we have,

58
00:02:36,150 --> 00:02:39,360
there is one that we found that was very helpful for this:

59
00:02:39,360 --> 00:02:41,640
the value assertion.

60
00:02:41,640 --> 00:02:45,370
So we expect an input to have value

61
00:02:46,290 --> 00:02:47,610
whatever we want right here.

62
00:02:47,610 --> 00:02:49,653
So let's try giving this matcher a shot.

63
00:02:52,590 --> 00:02:56,530
We expect the component with the text area

64
00:02:58,470 --> 00:03:03,470
to have value, and we know what the value is supposed to be.

65
00:03:04,110 --> 00:03:05,940
We simulated what that value,

66
00:03:05,940 --> 00:03:07,440
what that value is gonna be right here

67
00:03:07,440 --> 00:03:09,420
with the text, "new comment".

68
00:03:09,420 --> 00:03:10,740
Now this right here, this new comment,

69
00:03:10,740 --> 00:03:12,210
it could have been any text we want.

70
00:03:12,210 --> 00:03:14,850
It's just some dummy testing text.

71
00:03:14,850 --> 00:03:18,030
So it could have been "new comment 1, 2, 3", if we wanted.

72
00:03:18,030 --> 00:03:21,240
Anything we want, all we have to do is make sure

73
00:03:21,240 --> 00:03:23,250
that the value is consistent

74
00:03:23,250 --> 00:03:25,500
with what we expect it to be down here.

75
00:03:25,500 --> 00:03:30,333
So I expect my text area to have value "new comment".

76
00:03:33,270 --> 00:03:36,123
Let's save this and just watch it fail,

77
00:03:40,410 --> 00:03:42,540
and it should be failing.

78
00:03:42,540 --> 00:03:46,200
Oh, um, it's passing right now.

79
00:03:46,200 --> 00:03:47,220
Kind of a side effect

80
00:03:47,220 --> 00:03:49,110
because we haven't wired up the comment box.

81
00:03:49,110 --> 00:03:51,330
I'll show you exactly why, but we'll get there in a second.

82
00:03:51,330 --> 00:03:53,340
Just bear with me for a second.

83
00:03:53,340 --> 00:03:55,290
The next test we wanna write is just to make sure

84
00:03:55,290 --> 00:03:58,590
that when the comment box is submitted.

85
00:03:58,590 --> 00:04:00,450
the input gets cleared.

86
00:04:00,450 --> 00:04:02,340
Let's first wire up the implementation

87
00:04:02,340 --> 00:04:03,690
for this spec right here

88
00:04:03,690 --> 00:04:06,930
and then we'll implement the second one right here.

89
00:04:06,930 --> 00:04:09,210
So I'm gonna flip back over the comment box

90
00:04:09,210 --> 00:04:11,820
right now we've got a div with our text area.

91
00:04:11,820 --> 00:04:16,353
Let's go ahead and add in an on change event handler here.

92
00:04:17,820 --> 00:04:20,040
And whenever a user types in some input,

93
00:04:20,040 --> 00:04:22,617
we'll call, "this.onHandleChange",

94
00:04:25,710 --> 00:04:28,443
and we're gonna bind the context to this.

95
00:04:29,850 --> 00:04:31,920
So what we're doing here in practice

96
00:04:31,920 --> 00:04:33,780
is we're gonna set up a controlled component

97
00:04:33,780 --> 00:04:35,520
with a text area.

98
00:04:35,520 --> 00:04:37,380
Hopefully. you're familiar with controlled components.

99
00:04:37,380 --> 00:04:38,760
If you're not, no problem.

100
00:04:38,760 --> 00:04:40,890
We're gonna go through it step by step.

101
00:04:40,890 --> 00:04:42,180
So step one is to make sure

102
00:04:42,180 --> 00:04:44,520
that we've set up an event handler for it.

103
00:04:44,520 --> 00:04:46,923
Let's define that event handler now.

104
00:04:47,841 --> 00:04:51,000
"onHandle"... Oh, you know what, actually,

105
00:04:51,000 --> 00:04:52,500
this method name here is a little bit goofy.

106
00:04:52,500 --> 00:04:56,280
Let's change it to just "handleChange" instead.

107
00:04:56,280 --> 00:04:58,073
That's a little bit more reasonable.

108
00:04:59,820 --> 00:05:02,420
And so "handleChange" is gonna be called with event.

109
00:05:04,710 --> 00:05:07,170
Now, whatever this event is right here,

110
00:05:07,170 --> 00:05:10,890
we wanna reflect it inside of our component's local state.

111
00:05:10,890 --> 00:05:13,353
So we need to initialize our state at the top,

112
00:05:14,310 --> 00:05:16,360
which we'll do inside of our constructor.

113
00:05:19,650 --> 00:05:21,450
So we'll call super with props,

114
00:05:21,450 --> 00:05:24,010
and we'll say that our initial state is

115
00:05:25,687 --> 00:05:27,717
"comment is empty string".

116
00:05:28,770 --> 00:05:32,760
So now, when a user type something into the text area,

117
00:05:32,760 --> 00:05:35,340
we'll say that we need to update our state

118
00:05:35,340 --> 00:05:39,870
with the new text that comes back from the event right here.

119
00:05:39,870 --> 00:05:44,870
So we'll say, "this.setState((comment: ))",

120
00:05:44,970 --> 00:05:47,160
and the value of the new comment

121
00:05:47,160 --> 00:05:50,517
is gonna be "event.target.value".

122
00:05:52,110 --> 00:05:53,760
And then the last thing we need to do,

123
00:05:53,760 --> 00:05:56,880
is we need to make sure that the text area gets its value

124
00:05:56,880 --> 00:05:58,680
from "this.state.comment".

125
00:05:58,680 --> 00:06:03,680
So we'll say "value=this.state.comment".

126
00:06:04,410 --> 00:06:07,950
So remember this is a controlled input.

127
00:06:07,950 --> 00:06:11,280
We are getting the value of the text area,

128
00:06:11,280 --> 00:06:13,470
whenever a user types something in there,

129
00:06:13,470 --> 00:06:16,050
we're setting our state with that new value

130
00:06:16,050 --> 00:06:18,090
that causes our component to re-render,

131
00:06:18,090 --> 00:06:20,407
and when it re-renders, we tell the text area,

132
00:06:20,407 --> 00:06:22,140
"Hey you have a new value,

133
00:06:22,140 --> 00:06:26,040
and the new value is this.state.comment."

134
00:06:26,040 --> 00:06:28,236
So taking this approach right here is

135
00:06:28,236 --> 00:06:29,220
going to make our job later on

136
00:06:29,220 --> 00:06:31,650
where we need to empty out the comment box

137
00:06:31,650 --> 00:06:34,770
after a user submits it much, much easier.

138
00:06:34,770 --> 00:06:37,953
So let's save this and see if our specs are still passing,

139
00:06:39,240 --> 00:06:41,160
and it looks like we're still good to go.

140
00:06:41,160 --> 00:06:45,990
Let's introduce a change here where the specs should fail.

141
00:06:45,990 --> 00:06:50,640
So I'm going to comment out "this.setState" line right here.

142
00:06:50,640 --> 00:06:51,570
So we're never going to

143
00:06:51,570 --> 00:06:54,750
update the value of "this.state.comment",

144
00:06:54,750 --> 00:06:57,150
which means the text area's value

145
00:06:57,150 --> 00:07:00,180
is always gonna be equal to empty string.

146
00:07:00,180 --> 00:07:02,880
So we'll flip back over now, and you can see, sure enough,

147
00:07:02,880 --> 00:07:06,510
we expected the text area to have new comment,

148
00:07:06,510 --> 00:07:08,700
but the value was empty string.

149
00:07:08,700 --> 00:07:10,863
So it looks like our spec is effective.

150
00:07:11,970 --> 00:07:14,520
We'll save this and we're back to green.

151
00:07:14,520 --> 00:07:16,080
Very good.

152
00:07:16,080 --> 00:07:18,540
Alright, this looks great. We've now got a working spec.

153
00:07:18,540 --> 00:07:20,550
Let's go ahead and wrap up our specs

154
00:07:20,550 --> 00:07:22,713
for the comment box in the next section.