1
00:00:00,930 --> 00:00:01,763
Instructor: In the last section,

2
00:00:01,763 --> 00:00:04,140
we added some specs around our comment box

3
00:00:04,140 --> 00:00:05,160
and we were just asserting

4
00:00:05,160 --> 00:00:08,340
that it was indeed a controlled component

5
00:00:08,340 --> 00:00:09,870
where the value of the text area

6
00:00:09,870 --> 00:00:10,710
was being assigned

7
00:00:10,710 --> 00:00:12,813
from this dot state dot comment.

8
00:00:13,650 --> 00:00:15,990
Our specs are now all green across the board

9
00:00:15,990 --> 00:00:17,280
and if we go check out

10
00:00:17,280 --> 00:00:19,390
our application inside the browser

11
00:00:20,940 --> 00:00:22,260
we'll see that we can successfully

12
00:00:22,260 --> 00:00:24,030
enter some text in here

13
00:00:24,030 --> 00:00:25,290
and we can click the button all day,

14
00:00:25,290 --> 00:00:26,880
but nothing happens.

15
00:00:26,880 --> 00:00:28,470
So I think the next step

16
00:00:28,470 --> 00:00:30,390
for us is going to be to make sure

17
00:00:30,390 --> 00:00:33,090
that when a user clicks submit comment,

18
00:00:33,090 --> 00:00:35,280
the input should be cleared.

19
00:00:35,280 --> 00:00:37,080
Now, we don't have any functionality right now

20
00:00:37,080 --> 00:00:39,420
for kind of handling this saved comment.

21
00:00:39,420 --> 00:00:40,770
So we're just going to implement

22
00:00:40,770 --> 00:00:42,540
the comment box clearing

23
00:00:42,540 --> 00:00:43,860
and then later on we'll come back

24
00:00:43,860 --> 00:00:45,150
and figure out a way that we're going

25
00:00:45,150 --> 00:00:46,890
to save this comment.

26
00:00:46,890 --> 00:00:48,510
So right now our only priority

27
00:00:48,510 --> 00:00:51,420
is to make sure that when a user

28
00:00:51,420 --> 00:00:54,810
submits the box, the comment box,

29
00:00:54,810 --> 00:00:56,823
the text area gets cleared.

30
00:00:57,690 --> 00:00:59,430
Let's start off by writing a spec

31
00:00:59,430 --> 00:01:03,120
for this inside of our comment box test file.

32
00:01:03,120 --> 00:01:04,530
So we already kind of stubbed out

33
00:01:04,530 --> 00:01:06,660
the it statement here where we said

34
00:01:06,660 --> 00:01:08,850
when a user is entering some text.

35
00:01:08,850 --> 00:01:09,750
When it's submitted,

36
00:01:09,750 --> 00:01:11,150
we're gonna clear the input.

37
00:01:12,060 --> 00:01:13,440
And we've already kind of rigged

38
00:01:13,440 --> 00:01:15,300
up our input up here

39
00:01:15,300 --> 00:01:17,670
by simulating a change event.

40
00:01:17,670 --> 00:01:19,290
So now all we need to do

41
00:01:19,290 --> 00:01:21,000
is figure out a way

42
00:01:21,000 --> 00:01:23,913
to submit our form or the comment box.

43
00:01:26,700 --> 00:01:27,730
Let's go ahead

44
00:01:28,950 --> 00:01:31,020
and write out our spec here.

45
00:01:31,020 --> 00:01:33,240
We're gonna say that we expect,

46
00:01:33,240 --> 00:01:34,950
let's just kind of jump to the very end

47
00:01:34,950 --> 00:01:36,330
where we expect the text area

48
00:01:36,330 --> 00:01:37,920
to be totally empty.

49
00:01:37,920 --> 00:01:39,600
So we're going to expect

50
00:01:39,600 --> 00:01:42,070
component dot find text area

51
00:01:44,340 --> 00:01:45,173
to,

52
00:01:45,173 --> 00:01:46,006
oops.

53
00:01:46,006 --> 00:01:48,903
To have value empty string.

54
00:01:50,010 --> 00:01:51,000
And so immediately you can see

55
00:01:51,000 --> 00:01:53,820
that we've got kind of a difference in specs here.

56
00:01:53,820 --> 00:01:55,350
We've got the spec above

57
00:01:55,350 --> 00:01:57,900
it expects it to have value new comment,

58
00:01:57,900 --> 00:01:58,860
but then this one beneath

59
00:01:58,860 --> 00:02:01,020
it expects there to be no string at all.

60
00:02:01,020 --> 00:02:03,420
So I bet if we save this

61
00:02:03,420 --> 00:02:05,430
and then look at our output, sure enough,

62
00:02:05,430 --> 00:02:08,340
we expected it to have a value of empty string,

63
00:02:08,340 --> 00:02:11,370
but the value was new comment.

64
00:02:11,370 --> 00:02:12,960
So we need to do something right here,

65
00:02:12,960 --> 00:02:14,220
right above this it statement,

66
00:02:14,220 --> 00:02:15,660
right above the expectation

67
00:02:15,660 --> 00:02:17,760
where we try to submit the form

68
00:02:17,760 --> 00:02:20,640
or somehow trigger some behavior

69
00:02:20,640 --> 00:02:22,830
that should cause the comment box

70
00:02:22,830 --> 00:02:24,333
to clear out the input.

71
00:02:25,590 --> 00:02:27,720
So what we're gonna do to make this work

72
00:02:27,720 --> 00:02:29,130
is we're going to assume

73
00:02:29,130 --> 00:02:31,830
that we're going to refactor our comment box

74
00:02:31,830 --> 00:02:33,210
from being just a div

75
00:02:33,210 --> 00:02:34,860
to an actual form element

76
00:02:34,860 --> 00:02:36,120
because that's what we're really doing here.

77
00:02:36,120 --> 00:02:38,010
We're building a form.

78
00:02:38,010 --> 00:02:39,280
So I want to

79
00:02:40,500 --> 00:02:41,590
take our component

80
00:02:43,110 --> 00:02:45,930
which is going to contain a form

81
00:02:45,930 --> 00:02:49,290
and we're going to simulate a submit event.

82
00:02:49,290 --> 00:02:51,090
So this is gonna make the component think

83
00:02:51,090 --> 00:02:53,220
that it's getting submitted.

84
00:02:53,220 --> 00:02:54,930
So let's save this.

85
00:02:54,930 --> 00:02:56,520
We still have the failing specs

86
00:02:56,520 --> 00:02:58,470
so let's go work on the implementation.

87
00:03:01,080 --> 00:03:04,380
I'm going to replace my div with a form.

88
00:03:04,380 --> 00:03:05,640
And basically the only reason

89
00:03:05,640 --> 00:03:07,080
that we're doing this right here

90
00:03:07,080 --> 00:03:10,020
is because a form responds to the submit event,

91
00:03:10,020 --> 00:03:12,510
whereas a div does not.

92
00:03:12,510 --> 00:03:13,680
So this is just gonna make sure

93
00:03:13,680 --> 00:03:17,070
that whenever a user clicks on our button,

94
00:03:17,070 --> 00:03:18,480
it'll just go to try to submit

95
00:03:18,480 --> 00:03:19,680
the form right here.

96
00:03:19,680 --> 00:03:22,830
So this is just some for free HTML default behavior

97
00:03:22,830 --> 00:03:24,450
that we're taking advantage of.

98
00:03:24,450 --> 00:03:26,820
This isn't something that's necessarily a React.

99
00:03:26,820 --> 00:03:28,800
We've got a form, it has a button.

100
00:03:28,800 --> 00:03:29,910
When we click the button,

101
00:03:29,910 --> 00:03:31,440
the form is gonna be submitted.

102
00:03:31,440 --> 00:03:32,880
And so that's how we're gonna detect

103
00:03:32,880 --> 00:03:34,170
that, "hey, it's time to clear out

104
00:03:34,170 --> 00:03:35,907
the input or the text area."

105
00:03:36,750 --> 00:03:39,000
So we'll add an event handler in here.

106
00:03:39,000 --> 00:03:40,870
We'll say on submit

107
00:03:41,790 --> 00:03:44,700
call this dot handle submit

108
00:03:44,700 --> 00:03:46,533
and we'll bind this as well.

109
00:03:48,360 --> 00:03:51,693
So let's define that handle submit method.

110
00:03:54,750 --> 00:03:57,060
This is a form submittal

111
00:03:57,060 --> 00:03:59,190
and whenever a form tries to submit itself

112
00:03:59,190 --> 00:04:01,920
it's going to make a get request to our server,

113
00:04:01,920 --> 00:04:03,390
whatever's hosting this webpage.

114
00:04:03,390 --> 00:04:04,500
And so the first thing we wanna do

115
00:04:04,500 --> 00:04:06,450
is make sure that the form doesn't actually try

116
00:04:06,450 --> 00:04:08,460
to submit itself to the backend.

117
00:04:08,460 --> 00:04:10,140
That's not the behavior we want here.

118
00:04:10,140 --> 00:04:13,350
We're building a single page application

119
00:04:13,350 --> 00:04:14,183
in JavaScript.

120
00:04:14,183 --> 00:04:17,070
We're not building vanilla HTML pages.

121
00:04:17,070 --> 00:04:20,730
So we'll call event dot prevent default

122
00:04:20,730 --> 00:04:23,403
to keep the form from trying to submit itself.

123
00:04:25,080 --> 00:04:27,480
Okay, now the second thing we need to do here

124
00:04:27,480 --> 00:04:30,480
is try to satisfy our test.

125
00:04:30,480 --> 00:04:32,220
We're in the place where, you know,

126
00:04:32,220 --> 00:04:33,840
we're trying to submit the form here.

127
00:04:33,840 --> 00:04:35,010
All we need to do now

128
00:04:35,010 --> 00:04:36,690
is clear out the comment.

129
00:04:36,690 --> 00:04:39,483
So we'll do that by setting our state.

130
00:04:40,410 --> 00:04:42,513
Comment to an empty string.

131
00:04:44,280 --> 00:04:46,260
Let's go ahead and save this.

132
00:04:46,260 --> 00:04:48,120
And we're passing.

133
00:04:48,120 --> 00:04:50,040
So it looks like our change

134
00:04:50,040 --> 00:04:52,740
simulate event here is working just fine.

135
00:04:52,740 --> 00:04:55,530
You'll notice that in the before each

136
00:04:55,530 --> 00:04:57,600
we've found the text area

137
00:04:57,600 --> 00:04:59,220
and then we simulated the change.

138
00:04:59,220 --> 00:05:00,240
And so you might be asking

139
00:05:00,240 --> 00:05:02,610
why didn't we do like find form

140
00:05:02,610 --> 00:05:04,500
and simulate submit?

141
00:05:04,500 --> 00:05:05,700
And the reason for that is

142
00:05:05,700 --> 00:05:07,980
just that the form is the component.

143
00:05:07,980 --> 00:05:10,410
The form is our top level element.

144
00:05:10,410 --> 00:05:11,920
Let's try console logging

145
00:05:12,900 --> 00:05:13,733
the component.

146
00:05:15,600 --> 00:05:16,433
So when we do that,

147
00:05:16,433 --> 00:05:17,880
you'll see that we console log

148
00:05:17,880 --> 00:05:20,280
and we get immediately back the form.

149
00:05:20,280 --> 00:05:24,330
So by just calling component dot simulate submit,

150
00:05:24,330 --> 00:05:26,730
we're simulating the submit event

151
00:05:26,730 --> 00:05:28,290
on the form itself.

152
00:05:28,290 --> 00:05:29,673
Very top level element.

153
00:05:31,770 --> 00:05:32,970
Okay, there's one more thing

154
00:05:32,970 --> 00:05:33,870
that we need to do

155
00:05:33,870 --> 00:05:35,820
that we're not explicitly testing here.

156
00:05:35,820 --> 00:05:36,720
And that's just to make sure

157
00:05:36,720 --> 00:05:39,390
that the button knows that when it's clicked,

158
00:05:39,390 --> 00:05:41,400
it should submit the form.

159
00:05:41,400 --> 00:05:43,170
So we'll just add on action submit

160
00:05:43,170 --> 00:05:44,130
and that just is gonna make

161
00:05:44,130 --> 00:05:45,120
the button try to submit

162
00:05:45,120 --> 00:05:47,013
the form whenever it gets clicked.

163
00:05:48,360 --> 00:05:49,590
All right, let's give this a shout out

164
00:05:49,590 --> 00:05:50,580
in the browser.

165
00:05:50,580 --> 00:05:52,950
I'm going to refresh the page,

166
00:05:52,950 --> 00:05:54,840
we'll enter some text,

167
00:05:54,840 --> 00:05:56,040
we click submit comment,

168
00:05:56,040 --> 00:05:58,830
and sure enough the text area empties itself out.

169
00:05:58,830 --> 00:06:02,040
That's exactly the behavior that we wanted.

170
00:06:02,040 --> 00:06:03,240
One thing that I wanna point out here is

171
00:06:03,240 --> 00:06:05,520
that we developed this whole feature right here

172
00:06:05,520 --> 00:06:06,450
without really having

173
00:06:06,450 --> 00:06:08,460
to ever flip over to the browser

174
00:06:08,460 --> 00:06:10,860
and test out our component

175
00:06:10,860 --> 00:06:12,030
in the browser as well.

176
00:06:12,030 --> 00:06:15,030
We could have done the entire feature

177
00:06:15,030 --> 00:06:17,610
from testing to implementation

178
00:06:17,610 --> 00:06:20,340
by relying only upon the tests.

179
00:06:20,340 --> 00:06:21,720
And once the tests were all green,

180
00:06:21,720 --> 00:06:24,030
we could have only then flipped over the browser

181
00:06:24,030 --> 00:06:26,040
and tested it out manually.

182
00:06:26,040 --> 00:06:28,350
Once you get more experience with writing tests,

183
00:06:28,350 --> 00:06:30,360
I think you're gonna find that more often

184
00:06:30,360 --> 00:06:32,520
you can write the entire component, you know,

185
00:06:32,520 --> 00:06:34,090
as complex as it might be

186
00:06:34,980 --> 00:06:36,600
by only writing tests

187
00:06:36,600 --> 00:06:38,010
and never actually refreshing

188
00:06:38,010 --> 00:06:40,260
the browser or testing it out manually.

189
00:06:40,260 --> 00:06:41,850
And so, although it might take some time

190
00:06:41,850 --> 00:06:42,840
to write your specs out

191
00:06:42,840 --> 00:06:43,673
and figure out you know,

192
00:06:43,673 --> 00:06:45,060
what you want to test,

193
00:06:45,060 --> 00:06:46,650
I find that at the end of the day,

194
00:06:46,650 --> 00:06:48,600
it might be just as fast

195
00:06:48,600 --> 00:06:50,130
to write your specs as it is

196
00:06:50,130 --> 00:06:52,110
to write it without specs.

197
00:06:52,110 --> 00:06:53,823
Just kinda some food for thought.

198
00:06:55,200 --> 00:06:56,910
Okay, so our comment box

199
00:06:56,910 --> 00:06:59,013
is very well tested here.

200
00:07:00,000 --> 00:07:02,610
We've got the component all put together.

201
00:07:02,610 --> 00:07:03,960
Everything is looking pretty good.

202
00:07:03,960 --> 00:07:06,000
I think that the next thing we need to do

203
00:07:06,000 --> 00:07:08,430
is start flushing out our component list,

204
00:07:08,430 --> 00:07:10,590
or excuse me, our comment list.

205
00:07:10,590 --> 00:07:13,113
So let's start tackling that in the next section.