1
00:00:00,900 --> 00:00:02,400
Instructor: In the last section, we stubbed out

2
00:00:02,400 --> 00:00:04,890
our CommentList component

3
00:00:04,890 --> 00:00:08,700
and we also created our comment_list_test file as well.

4
00:00:08,700 --> 00:00:09,780
As a quick reminder,

5
00:00:09,780 --> 00:00:11,700
remember that whenever we add specs,

6
00:00:11,700 --> 00:00:13,200
we need to restart Mocha.

7
00:00:13,200 --> 00:00:15,690
So I'll flip back over to my terminal,

8
00:00:15,690 --> 00:00:19,050
I'll hit Control + C to end the process,

9
00:00:19,050 --> 00:00:20,250
and then we'll start it back up

10
00:00:20,250 --> 00:00:23,583
with npm run test:watch.

11
00:00:26,700 --> 00:00:29,223
And it's gonna do its thing, warm up,

12
00:00:31,110 --> 00:00:33,003
and there's our specs good to go.

13
00:00:34,380 --> 00:00:36,600
Okay, so we need to, as usual,

14
00:00:36,600 --> 00:00:38,430
ask ourselves what behavior

15
00:00:38,430 --> 00:00:40,620
do we expect CommentList to display,

16
00:00:40,620 --> 00:00:42,540
why we wanna test here, why we wanna make sure

17
00:00:42,540 --> 00:00:44,493
that it is not gonna break over time?

18
00:00:45,720 --> 00:00:49,113
So, I'm gonna pull our mockup back on the page.

19
00:00:50,670 --> 00:00:52,290
And what we kind of discussed earlier,

20
00:00:52,290 --> 00:00:54,060
what we agreed on was that we wanna make sure

21
00:00:54,060 --> 00:00:56,223
that it shows a comment in an LI,

22
00:00:57,390 --> 00:00:58,320
and we also wanna make sure

23
00:00:58,320 --> 00:01:00,270
that if we give it a list of comments

24
00:01:00,270 --> 00:01:01,950
it's gonna show all the different comments

25
00:01:01,950 --> 00:01:04,110
that we pass to the component.

26
00:01:04,110 --> 00:01:05,069
So we should probably end up

27
00:01:05,069 --> 00:01:08,580
with just two simple specs here.

28
00:01:08,580 --> 00:01:10,280
Let's go ahead and give it a shot.

29
00:01:12,960 --> 00:01:16,140
We're gonna do our initial setup of the component variable.

30
00:01:16,140 --> 00:01:18,580
So we'll let component

31
00:01:19,650 --> 00:01:23,283
and then we'll render our component in a beforeEach.

32
00:01:24,471 --> 00:01:28,380
So we'll say component renderComponent

33
00:01:28,380 --> 00:01:31,563
and we're making a CommentList.

34
00:01:33,000 --> 00:01:34,170
Now for our first it,

35
00:01:34,170 --> 00:01:35,500
we'll say it 'shows an LI

36
00:01:37,870 --> 00:01:41,287
(keyboard keys clicking)

37
00:01:44,730 --> 00:01:46,470
for each comment',

38
00:01:46,470 --> 00:01:47,820
we'll say very explicitly,

39
00:01:47,820 --> 00:01:50,370
it 'shows an LI for each comment'.

40
00:01:50,370 --> 00:01:55,370
And then we'll also say it shows the comment...

41
00:01:56,940 --> 00:02:00,660
Actually we'll say it 'shows each comment that is provided'.

42
00:02:00,660 --> 00:02:02,613
Let's be nice and very direct.

43
00:02:04,080 --> 00:02:05,760
Okay, so this is kind of asserting

44
00:02:05,760 --> 00:02:08,070
that we've got the correct HTML structure

45
00:02:08,070 --> 00:02:08,940
and it's asserting

46
00:02:08,940 --> 00:02:11,820
that we've got the correct content as well.

47
00:02:11,820 --> 00:02:14,490
There's just one little problem here.

48
00:02:14,490 --> 00:02:16,260
We don't really have any idea yet

49
00:02:16,260 --> 00:02:19,593
on how we pass any configuration to CommentList here.

50
00:02:21,650 --> 00:02:23,910
CommentList is probably gonna end up receiving

51
00:02:23,910 --> 00:02:27,390
this list of comments as its props, right?

52
00:02:27,390 --> 00:02:28,770
This is a Redux application.

53
00:02:28,770 --> 00:02:31,380
So we're gonna turn CommentList into a container

54
00:02:31,380 --> 00:02:33,780
and it's gonna receive the list of comments

55
00:02:33,780 --> 00:02:36,723
inside of our entire application as props.

56
00:02:37,950 --> 00:02:39,150
So we need some fashion,

57
00:02:39,150 --> 00:02:41,640
some method of pushing some props

58
00:02:41,640 --> 00:02:44,190
into this CommentList right here.

59
00:02:44,190 --> 00:02:46,920
Luckily, this renderComponent method

60
00:02:46,920 --> 00:02:48,060
has already been set up

61
00:02:48,060 --> 00:02:50,790
to allow a number of props to be set up

62
00:02:50,790 --> 00:02:53,640
and pushed into this CommentList.

63
00:02:53,640 --> 00:02:55,800
So the way that this renderComponent is set up,

64
00:02:55,800 --> 00:02:57,900
and again, we're gonna walk through its implementation

65
00:02:57,900 --> 00:03:00,120
just a little bit, so bear with me.

66
00:03:00,120 --> 00:03:03,720
If we pass in an object as the third argument

67
00:03:03,720 --> 00:03:08,460
to this function, it will show up as props

68
00:03:08,460 --> 00:03:10,050
inside of the renderComponent.

69
00:03:10,050 --> 00:03:11,350
So let's give this a shot.

70
00:03:12,240 --> 00:03:14,280
For the second argument we don't care about

71
00:03:14,280 --> 00:03:15,300
and we'll talk about it later,

72
00:03:15,300 --> 00:03:17,430
so we're just gonna pass in null.

73
00:03:17,430 --> 00:03:19,560
What we do care about is the third argument.

74
00:03:19,560 --> 00:03:20,970
These are gonna be the props

75
00:03:20,970 --> 00:03:23,340
that get passed into our component.

76
00:03:23,340 --> 00:03:24,990
So we're gonna assume that our component

77
00:03:24,990 --> 00:03:28,170
is gonna take props comments

78
00:03:28,170 --> 00:03:29,880
which is gonna be an array.

79
00:03:29,880 --> 00:03:33,240
So we'll pass in an object to represent our comments.

80
00:03:33,240 --> 00:03:37,353
So it'll be comments and it's gonna be an array.

81
00:03:38,610 --> 00:03:39,900
Each string in this array

82
00:03:39,900 --> 00:03:42,540
is going to represent one comment.

83
00:03:42,540 --> 00:03:46,740
So we'll put in just 'asdf' for the test comment.

84
00:03:46,740 --> 00:03:48,300
Actually, let's do something a little bit more serious.

85
00:03:48,300 --> 00:03:51,213
We'll do 'New Comment'

86
00:03:52,110 --> 00:03:56,670
and how about just 'Other New Comment'.

87
00:03:56,670 --> 00:03:57,840
You can put in any comments

88
00:03:57,840 --> 00:03:59,490
that you'd like right here.

89
00:03:59,490 --> 00:04:03,360
This is ending up as a pretty long line of code right here.

90
00:04:03,360 --> 00:04:07,320
Let's just go ahead and pull this prop definition out

91
00:04:07,320 --> 00:04:08,610
to a new line above it.

92
00:04:08,610 --> 00:04:13,610
So we'll say const props is our properties object

93
00:04:13,710 --> 00:04:14,700
and then we'll just pass

94
00:04:14,700 --> 00:04:17,130
those props directly into renderComponent.

95
00:04:17,130 --> 00:04:19,110
Again, we're gonna walk through the implementation

96
00:04:19,110 --> 00:04:20,370
of this renderComponent here,

97
00:04:20,370 --> 00:04:22,470
and I'll show you exactly how it's put together

98
00:04:22,470 --> 00:04:24,123
in a coming section very soon.

99
00:04:25,620 --> 00:04:26,880
Okay, so we're going to assume

100
00:04:26,880 --> 00:04:28,440
that these list of comments

101
00:04:28,440 --> 00:04:30,870
is now showing up inside of CommentList

102
00:04:30,870 --> 00:04:33,180
which means that we can now make an assertion

103
00:04:33,180 --> 00:04:35,430
that we have the correct number of LIs,

104
00:04:35,430 --> 00:04:37,110
and we can also make an assertion

105
00:04:37,110 --> 00:04:39,360
that the comment text is showing up

106
00:04:39,360 --> 00:04:41,580
inside the component as well.

107
00:04:41,580 --> 00:04:43,890
So for the first expectation here,

108
00:04:43,890 --> 00:04:44,820
for the first matcher,

109
00:04:44,820 --> 00:04:45,990
this is where we, again,

110
00:04:45,990 --> 00:04:48,390
we get to get a little bit creative.

111
00:04:48,390 --> 00:04:50,520
And so being a little bit creative,

112
00:04:50,520 --> 00:04:55,170
I'm gonna say that I'm going to find

113
00:04:55,170 --> 00:04:58,410
every LI on the page or in this component

114
00:04:58,410 --> 00:05:00,330
and I'm gonna get the length

115
00:05:00,330 --> 00:05:01,800
and I'm going to expect that length

116
00:05:01,800 --> 00:05:03,660
to equal the number two.

117
00:05:03,660 --> 00:05:07,440
So I expect, given two comments,

118
00:05:07,440 --> 00:05:09,993
I expect us to have two LIs.

119
00:05:11,220 --> 00:05:14,280
So find all the LIs in the component,

120
00:05:14,280 --> 00:05:15,720
get the length of that,

121
00:05:15,720 --> 00:05:17,433
and I expect it to equal two.

122
00:05:19,050 --> 00:05:20,790
Now the second one is a little bit easier

123
00:05:20,790 --> 00:05:23,010
only because we've done this before.

124
00:05:23,010 --> 00:05:25,230
We're going to look at the component

125
00:05:25,230 --> 00:05:28,740
and we're going to expect it to contain the text

126
00:05:28,740 --> 00:05:32,280
'New Comment' and 'Other New Comment'.

127
00:05:32,280 --> 00:05:33,300
So this is another place

128
00:05:33,300 --> 00:05:35,190
where I would encourage you to pause the video

129
00:05:35,190 --> 00:05:38,880
and give a shot at this expectation right here.

130
00:05:38,880 --> 00:05:40,650
If you're not sure what to put,

131
00:05:40,650 --> 00:05:41,850
I encourage you to look back

132
00:05:41,850 --> 00:05:44,250
at the jQuery Chai documentation,

133
00:05:44,250 --> 00:05:45,990
take a look at all the different matches here

134
00:05:45,990 --> 00:05:48,150
and see if you can find one that matches the case

135
00:05:48,150 --> 00:05:49,450
that we're trying to test.

136
00:05:54,420 --> 00:05:57,780
Okay, so let's go ahead and do the assertion here.

137
00:05:57,780 --> 00:06:01,120
I'm going to expect my component

138
00:06:02,280 --> 00:06:06,333
to contain New Comment.

139
00:06:07,170 --> 00:06:10,180
I'm also going to make a second expectation in here

140
00:06:11,880 --> 00:06:16,677
that it contains the text, 'Other New Comment'.

141
00:06:17,520 --> 00:06:18,990
So notice that I split this

142
00:06:18,990 --> 00:06:20,610
into two separate assertions.

143
00:06:20,610 --> 00:06:24,780
So if for some reason the first comment is showing up

144
00:06:24,780 --> 00:06:26,730
but the next one is not,

145
00:06:26,730 --> 00:06:29,190
this will show up in our testing report.

146
00:06:29,190 --> 00:06:31,590
Separating out expectations like this

147
00:06:31,590 --> 00:06:34,020
just makes it a little bit easier

148
00:06:34,020 --> 00:06:36,270
to figure out what's going wrong with our component

149
00:06:36,270 --> 00:06:38,340
based on our testing output.

150
00:06:38,340 --> 00:06:40,950
If the first one is not being displayed

151
00:06:40,950 --> 00:06:42,210
but the second one is,

152
00:06:42,210 --> 00:06:43,920
we'll see a distinct air message

153
00:06:43,920 --> 00:06:45,990
that says we expected the component

154
00:06:45,990 --> 00:06:48,273
to contain this text right here.

155
00:06:49,290 --> 00:06:51,630
Now, if you went ahead and do this spec yourself,

156
00:06:51,630 --> 00:06:53,160
you give it a stab,

157
00:06:53,160 --> 00:06:57,720
and you use something like say "text" right here

158
00:06:57,720 --> 00:07:00,450
or maybe you tried "html",

159
00:07:00,450 --> 00:07:02,070
those definitely work as well.

160
00:07:02,070 --> 00:07:04,590
You could have also tried to find

161
00:07:04,590 --> 00:07:06,510
a very particular LI,

162
00:07:06,510 --> 00:07:09,480
so maybe you said component.find 'li'

163
00:07:09,480 --> 00:07:12,270
and I expect that to contain new component.

164
00:07:12,270 --> 00:07:13,230
That would work as well.

165
00:07:13,230 --> 00:07:15,270
There's definitely, definitely, definitely

166
00:07:15,270 --> 00:07:17,520
more than one way to approach this,

167
00:07:17,520 --> 00:07:20,310
and it's up to you to kind of put together

168
00:07:20,310 --> 00:07:21,960
your own style of testing.

169
00:07:21,960 --> 00:07:24,570
But it's one thing that is really fun to develop,

170
00:07:24,570 --> 00:07:25,950
a skill that's really fun to develop

171
00:07:25,950 --> 00:07:27,813
as you write React applications.

172
00:07:28,680 --> 00:07:30,333
Okay, let's save this.

173
00:07:31,620 --> 00:07:32,850
We'll flip over,

174
00:07:32,850 --> 00:07:35,100
and right now our component

175
00:07:35,100 --> 00:07:37,410
is doing absolutely nothing.

176
00:07:37,410 --> 00:07:40,170
So let's go ahead and do some implementation

177
00:07:40,170 --> 00:07:42,120
and watch these specs go green.

178
00:07:42,120 --> 00:07:43,770
I'll see you in the next section.