1
00:00:00,840 --> 00:00:01,673
Instructor: In the last section,

2
00:00:01,673 --> 00:00:02,820
we started talking about the React

3
00:00:02,820 --> 00:00:04,950
and Redux design of our application.

4
00:00:04,950 --> 00:00:06,870
Again, at the end of that section,

5
00:00:06,870 --> 00:00:07,703
you're probably thinking,

6
00:00:07,703 --> 00:00:10,260
"Stephen, when are we getting to the testing stuff?"

7
00:00:10,260 --> 00:00:11,250
But I'm gonna make the claim

8
00:00:11,250 --> 00:00:12,840
that we've kind of already been tackling

9
00:00:12,840 --> 00:00:14,940
some of the testing stuff already.

10
00:00:14,940 --> 00:00:16,079
You see, let me tell you

11
00:00:16,079 --> 00:00:18,360
a very quick anecdote about testing,

12
00:00:18,360 --> 00:00:21,600
particularly for people who are getting started with it.

13
00:00:21,600 --> 00:00:22,830
I find personally

14
00:00:22,830 --> 00:00:25,110
that as soon as people start getting started with testing,

15
00:00:25,110 --> 00:00:28,260
they always say, "Hey, I don't know what to test.

16
00:00:28,260 --> 00:00:30,090
I don't know what I'm supposed to test.

17
00:00:30,090 --> 00:00:31,440
How am I supposed to write these tests?

18
00:00:31,440 --> 00:00:33,780
I don't even know where to get started."

19
00:00:33,780 --> 00:00:36,840
So I'm gonna give you a reproducible framework

20
00:00:36,840 --> 00:00:39,270
that you're gonna use inside this application

21
00:00:39,270 --> 00:00:42,540
to get a better idea of what tests you should write.

22
00:00:42,540 --> 00:00:45,060
All right, so here's what we're gonna do.

23
00:00:45,060 --> 00:00:46,800
Here's our flow.

24
00:00:46,800 --> 00:00:49,140
So anytime you start writing tests

25
00:00:49,140 --> 00:00:50,610
on your own personal project,

26
00:00:50,610 --> 00:00:52,020
and even on this one right here,

27
00:00:52,020 --> 00:00:53,640
this project that we're gonna get started on,

28
00:00:53,640 --> 00:00:56,490
I want you to follow these three steps.

29
00:00:56,490 --> 00:00:57,323
I want you to look

30
00:00:57,323 --> 00:00:59,880
at every individual part of your application,

31
00:00:59,880 --> 00:01:04,170
so every component, every reducer, every action creator,

32
00:01:04,170 --> 00:01:07,770
and I want you to imagine that you sit down next to a friend

33
00:01:07,770 --> 00:01:09,930
and you tell that friend the purpose

34
00:01:09,930 --> 00:01:12,540
of each of those parts of your application.

35
00:01:12,540 --> 00:01:15,000
So I want you to turn to your friend, turn to your buddy,

36
00:01:15,000 --> 00:01:17,040
you know, maybe there's someone next to you, I don't know,

37
00:01:17,040 --> 00:01:19,387
and I want you to imagine that you start telling them,

38
00:01:19,387 --> 00:01:22,470
"Hey, here's the purpose of the App Component.

39
00:01:22,470 --> 00:01:24,470
Here's the purpose of the CommentBox.

40
00:01:25,425 --> 00:01:26,831
Here's the purpose of the CommentList.

41
00:01:26,831 --> 00:01:28,530
Here's what it's supposed to do."

42
00:01:28,530 --> 00:01:30,450
And whatever you say to your buddy,

43
00:01:30,450 --> 00:01:32,970
whatever you say to your friend in that moment,

44
00:01:32,970 --> 00:01:36,420
that's what we're going to write a test for.

45
00:01:36,420 --> 00:01:38,730
So in the last section, when I started telling you

46
00:01:38,730 --> 00:01:40,710
about the different parts of this application

47
00:01:40,710 --> 00:01:43,110
and what each part of it was going to do,

48
00:01:43,110 --> 00:01:46,237
that was my description to you of me telling a friend,

49
00:01:46,237 --> 00:01:49,290
"Here's what this part of the application does."

50
00:01:49,290 --> 00:01:51,840
So we're now going to go build out that application,

51
00:01:51,840 --> 00:01:53,550
and we're going to write a test

52
00:01:53,550 --> 00:01:56,790
that's going to essentially test or verify the functionality

53
00:01:56,790 --> 00:02:00,270
of everything I just told you in the last video.

54
00:02:00,270 --> 00:02:03,660
So quick example, I just told you two seconds ago

55
00:02:03,660 --> 00:02:06,750
that our CommentList component is supposed to take

56
00:02:06,750 --> 00:02:10,770
a list of comments and render each one out on the screen.

57
00:02:10,770 --> 00:02:11,603
And so you know what?

58
00:02:11,603 --> 00:02:12,930
That's exactly what we're going to write

59
00:02:12,930 --> 00:02:14,610
a test of it to verify.

60
00:02:14,610 --> 00:02:15,810
We're gonna write a test

61
00:02:15,810 --> 00:02:17,700
that looks at this CommentList component,

62
00:02:17,700 --> 00:02:19,890
and we're gonna verify that for every comment

63
00:02:19,890 --> 00:02:22,080
that's been created inside of our application,

64
00:02:22,080 --> 00:02:25,710
we create exactly one element on the screen.

65
00:02:25,710 --> 00:02:28,080
We'll also write a test around the CommentBox.

66
00:02:28,080 --> 00:02:29,707
Remember in the last section I said,

67
00:02:29,707 --> 00:02:31,812
"Oh yeah, the CommentBox is gonna have a text area

68
00:02:31,812 --> 00:02:33,900
and it's gonna have a button.

69
00:02:33,900 --> 00:02:36,120
Anytime the user enters some text in here

70
00:02:36,120 --> 00:02:38,820
and then clicks on the button, we will want to clear out

71
00:02:38,820 --> 00:02:41,010
that input from the text area."

72
00:02:41,010 --> 00:02:43,230
And so boom, there's two tests right there.

73
00:02:43,230 --> 00:02:46,140
We're gonna write one test to verify that the CommentBox

74
00:02:46,140 --> 00:02:48,060
produces a text area and a button,

75
00:02:48,060 --> 00:02:50,430
and we're gonna write a second test to verify

76
00:02:50,430 --> 00:02:52,800
that any time the user clicks on that button,

77
00:02:52,800 --> 00:02:56,670
the contents of the input or the text area get cleared out.

78
00:02:56,670 --> 00:02:59,550
So again, we're gonna use this framework again and again

79
00:02:59,550 --> 00:03:00,510
to get a better idea

80
00:03:00,510 --> 00:03:03,540
of what tests we write in our application.

81
00:03:03,540 --> 00:03:04,373
And so in total,

82
00:03:04,373 --> 00:03:06,930
I think that these are the different responsibilities

83
00:03:06,930 --> 00:03:09,060
or different things inside of our application

84
00:03:09,060 --> 00:03:10,470
that I would describe to you

85
00:03:10,470 --> 00:03:12,810
if I wanted to give you a walkthrough

86
00:03:12,810 --> 00:03:14,223
of every part of our app.

87
00:03:15,420 --> 00:03:18,150
So we've got some functionality tied to the App Component,

88
00:03:18,150 --> 00:03:20,490
some functionality tied to the CommentBox, CommentList,

89
00:03:20,490 --> 00:03:23,730
Comments Reducer, and SaveComment Action creator.

90
00:03:23,730 --> 00:03:26,430
Another good example would be the App Component right here.

91
00:03:26,430 --> 00:03:28,087
Just in the last section I said to you,

92
00:03:28,087 --> 00:03:30,690
"Oh yeah, the App Component doesn't do a whole lot.

93
00:03:30,690 --> 00:03:32,460
It doesn't have a lot of responsibility

94
00:03:32,460 --> 00:03:34,140
or functionality tied to it.

95
00:03:34,140 --> 00:03:36,450
The sides showing the Comment Box

96
00:03:36,450 --> 00:03:38,640
and showing the Comment List components."

97
00:03:38,640 --> 00:03:40,470
And so that's another perfect example

98
00:03:40,470 --> 00:03:43,200
of two tests that you and I are going to write.

99
00:03:43,200 --> 00:03:44,850
We'll write one test to verify

100
00:03:44,850 --> 00:03:47,700
that the App Component does show a CommentBox

101
00:03:47,700 --> 00:03:52,176
and one test to verify that it shows a CommentList.

102
00:03:52,176 --> 00:03:53,460
All right, so I think you get the idea here.

103
00:03:53,460 --> 00:03:55,140
I think you get the idea of the approach

104
00:03:55,140 --> 00:03:57,930
that we're going to use to figure out what we want to test

105
00:03:57,930 --> 00:03:59,700
inside of our application.

106
00:03:59,700 --> 00:04:02,790
So again, every white box you see on this diagram right here

107
00:04:02,790 --> 00:04:06,510
represents a test you and I are going to put together.

108
00:04:06,510 --> 00:04:08,130
So let's take a pause right here.

109
00:04:08,130 --> 00:04:09,630
We're gonna come back to the next section

110
00:04:09,630 --> 00:04:10,860
and we're going to get started

111
00:04:10,860 --> 00:04:13,470
on the React and Redux side of our application.

112
00:04:13,470 --> 00:04:15,240
And then after we get a little bit

113
00:04:15,240 --> 00:04:17,760
of functionality put together, we'll start implementing

114
00:04:17,760 --> 00:04:20,040
all these different tests inside of it.

115
00:04:20,040 --> 00:04:21,690
So let's get to it.

116
00:04:21,690 --> 00:04:24,040
Quick break, and I'll see you in just a minute.