1
00:00:00,844 --> 00:00:02,280
Instructor: In the last two sections,

2
00:00:02,280 --> 00:00:04,800
we put our comment box component together.

3
00:00:04,800 --> 00:00:05,670
Let's now take a look

4
00:00:05,670 --> 00:00:06,537
at some of the different tests that we want

5
00:00:06,537 --> 00:00:08,403
to write around this component.

6
00:00:09,300 --> 00:00:11,040
So back over here, we want to make sure

7
00:00:11,040 --> 00:00:12,420
that we have a test that confirms

8
00:00:12,420 --> 00:00:14,280
that there is a visible text area

9
00:00:14,280 --> 00:00:17,130
and a button that the user can interact with.

10
00:00:17,130 --> 00:00:19,650
We wanna make sure that the user can enter some text

11
00:00:19,650 --> 00:00:21,809
into that text area and submit it.

12
00:00:21,809 --> 00:00:23,520
And then finally, we want to make sure

13
00:00:23,520 --> 00:00:25,428
that any time that the input gets submitted

14
00:00:25,428 --> 00:00:27,720
or the form gets submitted for that matter,

15
00:00:27,720 --> 00:00:30,060
the text area itself should be emptied.

16
00:00:30,060 --> 00:00:32,460
So no more text inside there.

17
00:00:32,460 --> 00:00:33,293
So with that in mind,

18
00:00:33,293 --> 00:00:35,130
one of the first things that we need to decide

19
00:00:35,130 --> 00:00:37,050
and we'll get around to making our test file here

20
00:00:37,050 --> 00:00:38,640
in just a moment, but before we do that

21
00:00:38,640 --> 00:00:40,024
we need to decide which

22
00:00:40,024 --> 00:00:43,710
of these three enzyme handlers

23
00:00:43,710 --> 00:00:46,200
right here we're going to use to actually test out

24
00:00:46,200 --> 00:00:47,550
this application.

25
00:00:47,550 --> 00:00:49,770
So remember, these three methods right here

26
00:00:49,770 --> 00:00:51,870
or these three renderers of sorts

27
00:00:51,870 --> 00:00:53,430
are the three different ways that we have

28
00:00:53,430 --> 00:00:54,960
of testing a component

29
00:00:54,960 --> 00:00:57,180
when we're making use of enzyme.

30
00:00:57,180 --> 00:01:01,170
We can render out that entire component as static html.

31
00:01:01,170 --> 00:01:02,790
We can render out just that component

32
00:01:02,790 --> 00:01:05,400
by itself and no children underneath it.

33
00:01:05,400 --> 00:01:07,140
And we can also do the full DOM

34
00:01:07,140 --> 00:01:08,910
which will attempt to render that component

35
00:01:08,910 --> 00:01:10,803
on all of its children as well.

36
00:01:11,790 --> 00:01:14,070
Now, this is another time where, well, you know what?

37
00:01:14,070 --> 00:01:16,485
We don't really have any other components

38
00:01:16,485 --> 00:01:18,990
underneath this comment box.

39
00:01:18,990 --> 00:01:21,630
The comment box has no children whatsoever

40
00:01:21,630 --> 00:01:22,830
so I think we could definitely get away

41
00:01:22,830 --> 00:01:25,260
with using the shallow render here.

42
00:01:25,260 --> 00:01:27,090
However, just to get some variety

43
00:01:27,090 --> 00:01:29,340
of experience, we're going to arbitrarily

44
00:01:29,340 --> 00:01:33,210
decide to use that full DOM render here instead.

45
00:01:33,210 --> 00:01:36,300
Now, the only reason we're doing this is just to show you

46
00:01:36,300 --> 00:01:37,590
as you're taking this course and learning

47
00:01:37,590 --> 00:01:40,200
about testing how the full DOM render works.

48
00:01:40,200 --> 00:01:42,544
But if I was doing this testing of this application

49
00:01:42,544 --> 00:01:45,750
by myself as a personal or professional project,

50
00:01:45,750 --> 00:01:48,450
I might use the shallow render because I only care

51
00:01:48,450 --> 00:01:50,340
about testing this current component

52
00:01:50,340 --> 00:01:52,530
and no children underneath it.

53
00:01:52,530 --> 00:01:54,930
But again, I want to make sure that you get a good idea

54
00:01:54,930 --> 00:01:56,010
of how this thing works.

55
00:01:56,010 --> 00:01:57,840
So we're gonna take this alternate approach

56
00:01:57,840 --> 00:01:59,490
this time around.

57
00:01:59,490 --> 00:02:01,800
So with that in mind, we're gonna flip back over

58
00:02:01,800 --> 00:02:03,750
to our code editor and we'll get started

59
00:02:03,750 --> 00:02:06,093
by creating a new test file.

60
00:02:07,470 --> 00:02:10,288
So inside of my underscore, underscore test directory,

61
00:02:10,288 --> 00:02:12,780
I'm gonna make a new file

62
00:02:12,780 --> 00:02:17,223
called CommentBox.test.js.

63
00:02:18,540 --> 00:02:20,940
So inside of here, we're gonna have all the code related

64
00:02:20,940 --> 00:02:23,760
to testing our comment box component.

65
00:02:23,760 --> 00:02:27,010
To get started, we'll import react at the very top

66
00:02:28,050 --> 00:02:31,533
and I'll import the comment box component as well.

67
00:02:33,570 --> 00:02:35,640
And oops, I'm using a relative path right here.

68
00:02:35,640 --> 00:02:39,090
Remember, we have enabled absolute paths, so I can write

69
00:02:39,090 --> 00:02:41,793
out components/CommentBox like so.

70
00:02:43,740 --> 00:02:45,210
All right, so that looks good.

71
00:02:45,210 --> 00:02:49,260
Now, our first test, as we were just talking about it.

72
00:02:49,260 --> 00:02:50,093
Where is it?

73
00:02:50,093 --> 00:02:50,926
Right here.

74
00:02:50,926 --> 00:02:52,410
We want to write a test that makes sure that

75
00:02:52,410 --> 00:02:56,460
we get a text area and a button inside of our component.

76
00:02:56,460 --> 00:02:59,130
So for my very first it statement that I'm gonna write out,

77
00:02:59,130 --> 00:03:02,520
I'll say, it and then I'll pass in my string description

78
00:03:02,520 --> 00:03:06,250
and I'll say it has a text area

79
00:03:07,230 --> 00:03:08,614
and a button.

80
00:03:08,614 --> 00:03:09,510
That's it.

81
00:03:09,510 --> 00:03:10,470
That's all I care

82
00:03:10,470 --> 00:03:13,200
about telling anyone who's reading this test.

83
00:03:13,200 --> 00:03:15,533
'Cause that's all we're trying to test inside of here.

84
00:03:16,410 --> 00:03:17,850
So let's take a quick pause right here.

85
00:03:17,850 --> 00:03:19,110
When we come back, the next section,

86
00:03:19,110 --> 00:03:21,910
we'll start filling out the implementation of this test.