1
00:00:00,810 --> 00:00:02,580
-: Alright. Hopefully you had some success

2
00:00:02,580 --> 00:00:04,920
in the last section, putting a test together to make sure

3
00:00:04,920 --> 00:00:06,750
that that input gets emptied.

4
00:00:06,750 --> 00:00:09,420
So in this section, we'll go over a solution together.

5
00:00:09,420 --> 00:00:10,443
So, let's get to it.

6
00:00:11,490 --> 00:00:14,370
I'm gonna flip back over to my comment box dot test file

7
00:00:14,370 --> 00:00:17,880
and I'll first get started by adding in a new it statement.

8
00:00:17,880 --> 00:00:20,710
So, I'll say 'when form is submitted

9
00:00:21,990 --> 00:00:24,153
text area gets emptied'

10
00:00:25,860 --> 00:00:26,693
like so.

11
00:00:29,190 --> 00:00:30,060
So, now inside of here

12
00:00:30,060 --> 00:00:31,710
the first thing we need to do is make sure

13
00:00:31,710 --> 00:00:34,770
that the text area starts off with some text inside of it.

14
00:00:34,770 --> 00:00:37,230
If we try to submit the form when there's no text

15
00:00:37,230 --> 00:00:40,680
inside there, well we're not really doing a very great test.

16
00:00:40,680 --> 00:00:43,920
So to enter in some fake text to the text area

17
00:00:43,920 --> 00:00:45,510
we're gonna run the same line of code

18
00:00:45,510 --> 00:00:48,690
that we executed up here in the previous test.

19
00:00:48,690 --> 00:00:51,663
So, we're going to attempt to find the text area.

20
00:00:52,560 --> 00:00:55,530
I'll then simulate a change event on it

21
00:00:55,530 --> 00:00:59,460
and I'll pass in the mocked out or the fake event object.

22
00:00:59,460 --> 00:01:02,250
So, the fake event object will have a target property

23
00:01:02,250 --> 00:01:06,180
that has a object of its own that has a value property

24
00:01:06,180 --> 00:01:08,970
and I'll give that text area some text of, again

25
00:01:08,970 --> 00:01:11,320
we'll just say 'new comment' to keep it simple.

26
00:01:13,200 --> 00:01:15,330
After that, we'll then force our component to

27
00:01:15,330 --> 00:01:17,520
update to make sure that the text area

28
00:01:17,520 --> 00:01:20,790
gets the brand new value of this dot state dot comment

29
00:01:20,790 --> 00:01:22,050
assigned to it.

30
00:01:22,050 --> 00:01:24,573
So, I'll say wrapped dot update.

31
00:01:25,830 --> 00:01:28,980
So now in theory, the text area has the correct value

32
00:01:28,980 --> 00:01:32,190
or a value, I should say, inside of it.

33
00:01:32,190 --> 00:01:35,220
So, now we're going to attempt to submit the form itself

34
00:01:35,220 --> 00:01:36,840
and we should then be able to verify

35
00:01:36,840 --> 00:01:40,080
that the text area gets completely emptied out.

36
00:01:40,080 --> 00:01:42,930
So, to actually submit the form, I'm going to

37
00:01:42,930 --> 00:01:47,370
find the form element within our wrapped component.

38
00:01:47,370 --> 00:01:50,590
So, I'll say wrapped dot find form

39
00:01:51,750 --> 00:01:55,380
and then I'll simulate the submit event.

40
00:01:55,380 --> 00:01:57,780
So again, when we simulate an event

41
00:01:57,780 --> 00:02:01,140
we use the normal HTML name of the event

42
00:02:01,140 --> 00:02:03,510
which in this case is simply submit.

43
00:02:03,510 --> 00:02:06,810
We do not try to say simulate 'on submit'.

44
00:02:06,810 --> 00:02:08,820
'On submit' is the name of the prop

45
00:02:08,820 --> 00:02:11,343
that is used to assign event handlers

46
00:02:11,343 --> 00:02:13,290
to the form element right here.

47
00:02:13,290 --> 00:02:14,850
So, we're not trying to simulate 'on submit'

48
00:02:14,850 --> 00:02:17,163
we're trying to simulate just 'submit'.

49
00:02:19,590 --> 00:02:20,940
So, now back over here

50
00:02:20,940 --> 00:02:24,060
we can again attempt to update the form

51
00:02:24,060 --> 00:02:26,010
cause remember when we submit the form right here

52
00:02:26,010 --> 00:02:28,260
it'll call that handle submit function.

53
00:02:28,260 --> 00:02:32,280
Handle Submit is going to attempt to change the value

54
00:02:32,280 --> 00:02:34,260
of comment right here, to be an empty string

55
00:02:34,260 --> 00:02:35,970
by calling set state.

56
00:02:35,970 --> 00:02:38,580
But calling set state is an asynchronous operation.

57
00:02:38,580 --> 00:02:41,460
So, we need to force our component to update in order

58
00:02:41,460 --> 00:02:44,973
for this new value of state dot comment to take effect.

59
00:02:46,950 --> 00:02:50,253
So back over here, I'll again call wrapped dot update.

60
00:02:51,360 --> 00:02:55,410
So, that should get the new value inside of our text area

61
00:02:55,410 --> 00:02:58,350
or at least clear it out is what I really mean to say.

62
00:02:58,350 --> 00:02:59,790
So, now after that we can go ahead

63
00:02:59,790 --> 00:03:01,560
and make our actual assertion.

64
00:03:01,560 --> 00:03:03,720
We're gonna do the same thing that we did before

65
00:03:03,720 --> 00:03:07,050
where we find the text area, we look up the value prop

66
00:03:07,050 --> 00:03:10,080
and then we assert that it's equal to some new value.

67
00:03:10,080 --> 00:03:11,670
And in this case we want it to be equal

68
00:03:11,670 --> 00:03:15,123
to empty string cause we want the text area to be empty.

69
00:03:16,170 --> 00:03:21,170
So, I'll say wrapped dot find text area dot prop value

70
00:03:25,950 --> 00:03:28,320
and then I'm gonna wrap that entire thing

71
00:03:28,320 --> 00:03:31,593
with an expect function, like so.

72
00:03:32,880 --> 00:03:35,610
So, make sure you get expect one parenthesis

73
00:03:35,610 --> 00:03:38,730
and then a closing parenthesis over here as well.

74
00:03:38,730 --> 00:03:43,293
And then we expect that to equal empty string, like so.

75
00:03:46,050 --> 00:03:47,580
Okay, so this looks pretty good.

76
00:03:47,580 --> 00:03:48,690
I'm gonna save the file

77
00:03:48,690 --> 00:03:50,823
and I'll go see if my tests are passing.

78
00:03:52,290 --> 00:03:54,767
So, there's the automatic rerun of my test suite

79
00:03:54,767 --> 00:03:57,390
and it looks like that new test is passing.

80
00:03:57,390 --> 00:04:00,750
Now as usual, we're gonna do a quick change to

81
00:04:00,750 --> 00:04:03,390
break the test and make sure it's working the way we expect.

82
00:04:03,390 --> 00:04:05,880
So, I'm going to change the to equal right here

83
00:04:05,880 --> 00:04:08,070
to some arbitrary string.

84
00:04:08,070 --> 00:04:10,320
I'll save the file and we'll verify

85
00:04:10,320 --> 00:04:12,990
that the test is in fact broken.

86
00:04:12,990 --> 00:04:15,570
Okay, so expected empty string

87
00:04:15,570 --> 00:04:17,459
which is definitely what we want right here to

88
00:04:17,459 --> 00:04:20,490
equal 1, 2, 3, 4, 5, 6.

89
00:04:20,490 --> 00:04:22,410
Now, there's one last thing I wanna mention

90
00:04:22,410 --> 00:04:23,580
about this test right here.

91
00:04:23,580 --> 00:04:26,010
What we have definitely works as is

92
00:04:26,010 --> 00:04:28,720
but one thing that's kind of a weakness in this test

93
00:04:29,850 --> 00:04:32,940
is that when we do that initial text area simulate

94
00:04:32,940 --> 00:04:36,150
change right here and then call wrap dot update

95
00:04:36,150 --> 00:04:39,030
it technically would've been kind of good form to

96
00:04:39,030 --> 00:04:42,450
write another expectation right here that says yes

97
00:04:42,450 --> 00:04:46,710
in fact the text area did have its value changed.

98
00:04:46,710 --> 00:04:49,080
In other words, it kind of would've been nice to

99
00:04:49,080 --> 00:04:52,170
put an expectation right here where we find the text area

100
00:04:52,170 --> 00:04:56,130
get the value prop and say yes the thing did get new comment

101
00:04:56,130 --> 00:04:59,130
assigned to it because otherwise our test could be

102
00:04:59,130 --> 00:05:00,840
getting a false positive.

103
00:05:00,840 --> 00:05:03,570
It could be the case that you and I wrote some faulty test

104
00:05:03,570 --> 00:05:07,260
code right here, such that our text area never

105
00:05:07,260 --> 00:05:10,230
ever got a new value in the first place.

106
00:05:10,230 --> 00:05:12,540
So, by adding on this expectation right here

107
00:05:12,540 --> 00:05:14,070
we are just saying yep,

108
00:05:14,070 --> 00:05:16,320
after we try to change the value of text area,

109
00:05:16,320 --> 00:05:18,060
it does in fact change.

110
00:05:18,060 --> 00:05:22,560
And then, after we trigger the form submit event

111
00:05:22,560 --> 00:05:25,050
it goes back to being an empty string.

112
00:05:25,050 --> 00:05:27,900
So, that would've definitely been a good approach.

113
00:05:27,900 --> 00:05:30,030
Now in this case, I don't feel like we really need to add

114
00:05:30,030 --> 00:05:33,150
in this extra expectation right here because we are already

115
00:05:33,150 --> 00:05:35,583
testing that in the test right above it.

116
00:05:36,420 --> 00:05:38,310
So, if we did not have this test right here,

117
00:05:38,310 --> 00:05:40,110
I probably would leave this line of code.

118
00:05:40,110 --> 00:05:41,760
But because we do have that test,

119
00:05:41,760 --> 00:05:43,350
I feel reasonably comfortable saying,

120
00:05:43,350 --> 00:05:44,183
you know what,

121
00:05:44,183 --> 00:05:46,710
we are setting the correct value inside that text area.

122
00:05:46,710 --> 00:05:48,810
So, I am going to delete that expectation.

123
00:05:50,340 --> 00:05:52,350
And then one other thing really quickly, I'll make sure

124
00:05:52,350 --> 00:05:54,300
that I reset the to equal right here

125
00:05:54,300 --> 00:05:57,933
from 1, 2, 3, 4, 5, 6, back to empty string as well.

126
00:05:58,950 --> 00:06:00,330
Okay, so that looks pretty good.

127
00:06:00,330 --> 00:06:02,220
We've now got our working tests

128
00:06:02,220 --> 00:06:04,143
inside of our comment box test file.

129
00:06:05,250 --> 00:06:08,040
However, there's always a however, I apologize

130
00:06:08,040 --> 00:06:08,970
there's always a however.

131
00:06:08,970 --> 00:06:10,710
One more thing I wanna point out here.

132
00:06:10,710 --> 00:06:13,380
You'll notice that inside these last two tests

133
00:06:13,380 --> 00:06:16,080
we have some identical lines of code right here.

134
00:06:16,080 --> 00:06:18,586
So in both cases we find that text area,

135
00:06:18,586 --> 00:06:20,340
we simulate a change event

136
00:06:20,340 --> 00:06:24,150
and then we call wrap dot update in both cases.

137
00:06:24,150 --> 00:06:26,730
So, this is another location where we could probably

138
00:06:26,730 --> 00:06:30,300
extract some of this set up logic into a before each.

139
00:06:30,300 --> 00:06:32,040
So, let's come back the next section and we'll talk

140
00:06:32,040 --> 00:06:34,260
about how we could possibly extract

141
00:06:34,260 --> 00:06:36,270
this little bit of configuration

142
00:06:36,270 --> 00:06:37,860
into a before each statement

143
00:06:37,860 --> 00:06:39,813
that runs before each of these tests.