1
00:00:00,750 --> 00:00:01,800
Narrator: In the last section,

2
00:00:01,800 --> 00:00:04,260
we went over the testing report that MOCA gave us

3
00:00:04,260 --> 00:00:05,939
from the command line.

4
00:00:05,939 --> 00:00:09,780
We saw that we had a single spec app that contained

5
00:00:09,780 --> 00:00:12,120
or, excuse me, a single describe of app

6
00:00:12,120 --> 00:00:15,270
that contained one spec, just "shows the correct text".

7
00:00:15,270 --> 00:00:18,720
And we also saw what it looked like when it failed as well.

8
00:00:18,720 --> 00:00:21,360
We also saw that these specs automatically rerun

9
00:00:21,360 --> 00:00:23,700
whenever we change a file inside of our project,

10
00:00:23,700 --> 00:00:25,920
which is really, really handy.

11
00:00:25,920 --> 00:00:27,330
So the next step to move forward

12
00:00:27,330 --> 00:00:29,010
in learning a lot more about testing

13
00:00:29,010 --> 00:00:31,260
is to build an actual feature and build it

14
00:00:31,260 --> 00:00:33,930
with a kind of test driven development approach

15
00:00:33,930 --> 00:00:36,090
where we're gonna first write our specs out,

16
00:00:36,090 --> 00:00:37,680
and then we're gonna write our component

17
00:00:37,680 --> 00:00:42,030
and watch the specs go green or pass over time.

18
00:00:42,030 --> 00:00:42,930
So let's talk a little bit more

19
00:00:42,930 --> 00:00:44,580
about the feature that we're gonna build.

20
00:00:44,580 --> 00:00:47,400
I'm gonna pull a mock-up onto the screen,

21
00:00:47,400 --> 00:00:49,110
and I know it's a little bit blurry.

22
00:00:49,110 --> 00:00:52,350
I took a screenshot of this one, very small

23
00:00:52,350 --> 00:00:54,570
but hopefully it's legible right here.

24
00:00:54,570 --> 00:00:57,840
So we're gonna be building a comment box of sorts.

25
00:00:57,840 --> 00:01:00,270
This section is a lot more about testing

26
00:01:00,270 --> 00:01:01,590
and not necessarily about

27
00:01:01,590 --> 00:01:03,390
super interesting react components.

28
00:01:03,390 --> 00:01:06,690
And so my goal here was to make a simple react component

29
00:01:06,690 --> 00:01:09,600
that we can reasonably just learn about testing right now

30
00:01:09,600 --> 00:01:11,070
as opposed to have to worry about

31
00:01:11,070 --> 00:01:14,280
some really crazy new feature or something like that.

32
00:01:14,280 --> 00:01:16,950
So the goal was to have a fairly simple application

33
00:01:16,950 --> 00:01:18,060
that we were putting together

34
00:01:18,060 --> 00:01:20,610
and focus a lot more on the testing side.

35
00:01:20,610 --> 00:01:23,550
Let's look at the comment box a little bit.

36
00:01:23,550 --> 00:01:25,800
The comment box is gonna have at the top some text

37
00:01:25,800 --> 00:01:27,120
that just says, "Add a comment,"

38
00:01:27,120 --> 00:01:29,070
or, you know, something similar.

39
00:01:29,070 --> 00:01:32,610
It'll have a text area where a user can enter some text

40
00:01:32,610 --> 00:01:35,403
and then a button to just submit the, the comment.

41
00:01:36,720 --> 00:01:38,070
When a user submits a comment,

42
00:01:38,070 --> 00:01:43,050
it will be appended onto a list underneath the comment box.

43
00:01:43,050 --> 00:01:44,550
We're not going to use Ajax

44
00:01:44,550 --> 00:01:46,230
or anything like that to save these requests.

45
00:01:46,230 --> 00:01:47,490
Again, our goal is just to

46
00:01:47,490 --> 00:01:49,980
test react components in this exercise.

47
00:01:49,980 --> 00:01:53,100
So we're going to hold these comments in local state

48
00:01:53,100 --> 00:01:55,290
in a redux store, and not worry too much

49
00:01:55,290 --> 00:01:57,930
about saving them to a server or anything like that.

50
00:01:57,930 --> 00:01:59,430
We can worry about that stuff later

51
00:01:59,430 --> 00:02:00,420
when we've got a better idea

52
00:02:00,420 --> 00:02:02,520
of how to write specs in the first place.

53
00:02:02,520 --> 00:02:04,370
We'll take things one step at a time.

54
00:02:05,340 --> 00:02:06,660
Okay, so this is more

55
00:02:06,660 --> 00:02:07,920
or less the feature we're gonna build right here.

56
00:02:07,920 --> 00:02:09,150
Pretty straightforward.

57
00:02:09,150 --> 00:02:11,220
Let's do a little bit of thinking about,

58
00:02:11,220 --> 00:02:13,080
you know, how are we gonna put this thing together

59
00:02:13,080 --> 00:02:14,940
with different react components?

60
00:02:14,940 --> 00:02:16,500
And as we're writing tests

61
00:02:16,500 --> 00:02:19,140
what do we really want to test at all, right?

62
00:02:19,140 --> 00:02:19,973
That's the goal here.

63
00:02:19,973 --> 00:02:22,413
We gotta figure out what we want to test.

64
00:02:23,940 --> 00:02:26,853
I'm gonna pull another mock-up onto the screen.

65
00:02:28,980 --> 00:02:29,813
Here we go.

66
00:02:29,813 --> 00:02:32,160
So this one is much better sized.

67
00:02:32,160 --> 00:02:34,410
So I'm gonna suggest that we are going to separate

68
00:02:34,410 --> 00:02:37,350
our feature into two separate components.

69
00:02:37,350 --> 00:02:39,690
The kind of yellow,

70
00:02:39,690 --> 00:02:41,490
I dunno, I guess that's yellowish,

71
00:02:41,490 --> 00:02:44,430
component on the top and the blue one on the bottom.

72
00:02:44,430 --> 00:02:47,640
So the yellow one on the top will call a comment box

73
00:02:47,640 --> 00:02:48,780
or a comment adder,

74
00:02:48,780 --> 00:02:52,140
or something to just indicate we use this component

75
00:02:52,140 --> 00:02:54,273
right here to add comments.

76
00:02:55,530 --> 00:02:57,180
Then we'll have a separate component

77
00:02:57,180 --> 00:02:59,310
which we'll call a comment list.

78
00:02:59,310 --> 00:03:00,960
It's the blue one here at the bottom.

79
00:03:00,960 --> 00:03:04,230
That's just responsible for showing a list of posts.

80
00:03:04,230 --> 00:03:07,080
And so before we ever do test driven development

81
00:03:07,080 --> 00:03:08,700
before we ever start putting pen to paper

82
00:03:08,700 --> 00:03:11,010
and write any code or any test like that,

83
00:03:11,010 --> 00:03:13,327
we have to always ask ourselves first,

84
00:03:13,327 --> 00:03:15,900
"What do we care about when we're writing tests?"

85
00:03:15,900 --> 00:03:17,370
What do we wanna write a test about?

86
00:03:17,370 --> 00:03:18,690
What do we wanna make sure that

87
00:03:18,690 --> 00:03:20,610
when another developer comes through here

88
00:03:20,610 --> 00:03:22,920
and starts fiddling with some code?

89
00:03:22,920 --> 00:03:24,780
What do we wanna make sure that we are testing

90
00:03:24,780 --> 00:03:27,660
to make sure that they're not breaking anything?

91
00:03:27,660 --> 00:03:29,850
So I've put a couple of ideas over here

92
00:03:29,850 --> 00:03:31,140
on the right hand side.

93
00:03:31,140 --> 00:03:32,910
If you have other ideas, totally fine,

94
00:03:32,910 --> 00:03:35,910
we can, you know, try wiring those in over time,

95
00:03:35,910 --> 00:03:38,070
but we'll start with these simple assertions

96
00:03:38,070 --> 00:03:39,870
on the right hand side.

97
00:03:39,870 --> 00:03:44,010
So on the top level component, the comment box,

98
00:03:44,010 --> 00:03:45,630
we really care about the fact

99
00:03:45,630 --> 00:03:48,030
that it has a text area and a button.

100
00:03:48,030 --> 00:03:50,550
And we also care about when we enter some text

101
00:03:50,550 --> 00:03:52,890
into the input right here, we should see the text

102
00:03:52,890 --> 00:03:55,020
like actually input on the screen, right?

103
00:03:55,020 --> 00:03:57,060
Actually update on the text area.

104
00:03:57,060 --> 00:03:58,770
And that's gonna be really relevant since

105
00:03:58,770 --> 00:04:02,190
we're gonna end up making this into a controlled input.

106
00:04:02,190 --> 00:04:03,690
If you're not familiar with controlled inputs

107
00:04:03,690 --> 00:04:06,000
and react, no problem, we'll go over it.

108
00:04:06,000 --> 00:04:07,080
But basically the tests

109
00:04:07,080 --> 00:04:08,910
that we're going to be writing here.

110
00:04:08,910 --> 00:04:09,743
It's just gonna make sure

111
00:04:09,743 --> 00:04:13,023
that our controlled component is behaving appropriately.

112
00:04:15,060 --> 00:04:17,370
For the component list at the bottom,

113
00:04:17,370 --> 00:04:18,750
what we really care about is that

114
00:04:18,750 --> 00:04:21,630
for any comment that we provide to the comment list,

115
00:04:21,630 --> 00:04:22,773
it should show one LI.

116
00:04:23,760 --> 00:04:24,900
And we also care that

117
00:04:24,900 --> 00:04:28,290
if we hand it multiple comments, so let's say three,

118
00:04:28,290 --> 00:04:31,530
we should see multiple LI's, and we should see

119
00:04:31,530 --> 00:04:34,770
the text for each comment within the component.

120
00:04:34,770 --> 00:04:36,630
And so the approach that we're taking here

121
00:04:36,630 --> 00:04:38,940
of these type of specs that we're writing

122
00:04:38,940 --> 00:04:42,330
is approach that I personally am a tremendous fan of.

123
00:04:42,330 --> 00:04:44,760
Let's think about this approach for a second.

124
00:04:44,760 --> 00:04:48,000
If we only care about writing tests that say, you know,

125
00:04:48,000 --> 00:04:49,590
we show a comment in an LI

126
00:04:49,590 --> 00:04:52,560
and given a list of comments that shows all the text,

127
00:04:52,560 --> 00:04:55,740
that means that if another developer comes through our code

128
00:04:55,740 --> 00:04:59,310
and they start changing the format significantly, right?

129
00:04:59,310 --> 00:05:01,410
They might rename some methods

130
00:05:01,410 --> 00:05:02,880
or they might turn the component

131
00:05:02,880 --> 00:05:04,350
from a class based component

132
00:05:04,350 --> 00:05:08,730
to a functional component or any number of things.

133
00:05:08,730 --> 00:05:11,220
The way that we write our specs is just going to assert

134
00:05:11,220 --> 00:05:14,340
that the end product, right, the end product

135
00:05:14,340 --> 00:05:16,950
which is the HTML that gets put on the screen

136
00:05:16,950 --> 00:05:19,110
is gonna be rendered correctly.

137
00:05:19,110 --> 00:05:20,130
And so I'm a huge fan

138
00:05:20,130 --> 00:05:22,110
of writing tests where we make assertions

139
00:05:22,110 --> 00:05:23,310
about the end product,

140
00:05:23,310 --> 00:05:25,860
about the HTML that ends up on the screen

141
00:05:25,860 --> 00:05:27,960
and not so much about our components

142
00:05:27,960 --> 00:05:30,930
say having a very specific method

143
00:05:30,930 --> 00:05:34,350
that when we call that method something happens.

144
00:05:34,350 --> 00:05:36,160
I want to make sure that my tests

145
00:05:37,170 --> 00:05:39,540
allow other developers to refactor my code

146
00:05:39,540 --> 00:05:42,510
as much as possible. I want my test to be flexible, right?

147
00:05:42,510 --> 00:05:44,730
And only when a feature starts to break

148
00:05:44,730 --> 00:05:46,710
do I want to see them fail.

149
00:05:46,710 --> 00:05:48,570
So you might find other tutorials online

150
00:05:48,570 --> 00:05:49,597
other guides where they say,

151
00:05:49,597 --> 00:05:52,080
"Oh yeah we need to do like unit testing.

152
00:05:52,080 --> 00:05:55,800
We need to test individual methods on our component."

153
00:05:55,800 --> 00:05:57,810
And I just don't think that's the right approach.

154
00:05:57,810 --> 00:06:00,720
And I really think that once we start writing some specs,

155
00:06:00,720 --> 00:06:03,150
you're gonna agree with me as well.

156
00:06:03,150 --> 00:06:05,130
So let's go ahead in the next section,

157
00:06:05,130 --> 00:06:08,100
start putting this component together along with its specs.

158
00:06:08,100 --> 00:06:09,050
I'll see you there.