1
00:00:00,900 --> 00:00:01,733
Instructor: In this section,

2
00:00:01,733 --> 00:00:02,790
we're gonna work on our last test

3
00:00:02,790 --> 00:00:04,170
around the comment box.

4
00:00:04,170 --> 00:00:06,540
So, in this last test, we want to enter some text

5
00:00:06,540 --> 00:00:09,183
into the text area, submit the form,

6
00:00:09,183 --> 00:00:11,070
and then make sure that the text area

7
00:00:11,070 --> 00:00:14,010
gets emptied out completely.

8
00:00:14,010 --> 00:00:16,110
So, for this test, we're gonna end up with some code,

9
00:00:16,110 --> 00:00:18,090
that looks pretty darn similar,

10
00:00:18,090 --> 00:00:20,189
to the test we just put together right here.

11
00:00:20,189 --> 00:00:22,860
It's gonna have one or two extra steps inside of it

12
00:00:22,860 --> 00:00:25,200
to verify that we actually submit that form.

13
00:00:25,200 --> 00:00:27,630
But in general, it's gonna look pretty darn similar.

14
00:00:27,630 --> 00:00:29,820
So, with that in mind, I would like you to give a shot

15
00:00:29,820 --> 00:00:31,770
at putting this test together.

16
00:00:31,770 --> 00:00:34,230
So, I would like you to try to write a test,

17
00:00:34,230 --> 00:00:37,650
that enters some text into the text area,

18
00:00:37,650 --> 00:00:38,670
submits the form,

19
00:00:38,670 --> 00:00:42,210
and then verifies that the text area is completely empty,

20
00:00:42,210 --> 00:00:45,270
or has an empty string as its value.

21
00:00:45,270 --> 00:00:47,069
Now, I'm gonna give you one quick tip here,

22
00:00:47,069 --> 00:00:49,920
when you're putting this together, you might be thinking,

23
00:00:49,920 --> 00:00:51,983
that to submit the form, we want to trigger

24
00:00:51,983 --> 00:00:55,680
some kind of click event on this button right here.

25
00:00:55,680 --> 00:00:58,440
Unfortunately, that's not quite what we want to do.

26
00:00:58,440 --> 00:01:02,580
You see, when we simulate events, that causes enzyme

27
00:01:02,580 --> 00:01:05,580
to look at every JSX tag,

28
00:01:05,580 --> 00:01:07,770
that we had added to our component,

29
00:01:07,770 --> 00:01:10,830
and try to find if that component had an event,

30
00:01:10,830 --> 00:01:13,893
callback, related to the event that we're simulating.

31
00:01:13,893 --> 00:01:16,316
So, in this case, our button element right here,

32
00:01:16,316 --> 00:01:19,920
does not actually have an onClick or onSubmit,

33
00:01:19,920 --> 00:01:23,370
or any type of event handler like that.

34
00:01:23,370 --> 00:01:25,470
It is solely, the browser itself,

35
00:01:25,470 --> 00:01:28,800
and the way the browser works of handling button clicks

36
00:01:28,800 --> 00:01:32,010
inside a form elements that makes a click on the button,

37
00:01:32,010 --> 00:01:34,470
button right here, submit the form.

38
00:01:34,470 --> 00:01:35,303
So, in other words,

39
00:01:35,303 --> 00:01:38,220
in order to trick our component into thinking,

40
00:01:38,220 --> 00:01:41,460
that our form element or our form tag has been submitted.

41
00:01:41,460 --> 00:01:45,333
We need to simulate a submit event on the form itself.

42
00:01:46,260 --> 00:01:47,970
Okay, so that's kind of the trick behind this,

43
00:01:47,970 --> 00:01:50,820
is to make sure that you attempt to submit the submit event,

44
00:01:50,820 --> 00:01:53,790
or excuse me, simulate the submit event on the form

45
00:01:53,790 --> 00:01:56,624
rather than trying to simulate a click on the button.

46
00:01:56,624 --> 00:01:59,040
So, I'd like you to give a shot at this test.

47
00:01:59,040 --> 00:02:00,540
Give it the best shot you can,

48
00:02:00,540 --> 00:02:01,373
if you get stuck.

49
00:02:01,373 --> 00:02:02,206
Hey, don't sweat it.

50
00:02:02,206 --> 00:02:03,508
Just continue on to the next section,

51
00:02:03,508 --> 00:02:05,940
and we'll go over the solution together.

52
00:02:05,940 --> 00:02:08,440
So, quick break and I'll see you in just a minute.