1
00:00:01,170 --> 00:00:03,570
-: Alright, let's look back to our mockup really quick,

2
00:00:03,570 --> 00:00:04,530
and just think

3
00:00:04,530 --> 00:00:07,200
about where we are and where we're headed right now.

4
00:00:07,200 --> 00:00:08,039
So we just finished

5
00:00:08,039 --> 00:00:10,770
up putting together our comment box on top.

6
00:00:10,770 --> 00:00:13,080
We tested that it has a text area,

7
00:00:13,080 --> 00:00:14,070
it has a button,

8
00:00:14,070 --> 00:00:15,330
And we also tested,

9
00:00:15,330 --> 00:00:18,270
that when a user types something in,

10
00:00:18,270 --> 00:00:20,130
the text area is properly updated.

11
00:00:20,130 --> 00:00:21,270
And we also added on a kind

12
00:00:21,270 --> 00:00:24,750
of bonus spec where we said when the form is submitted

13
00:00:24,750 --> 00:00:27,720
the text area should clear itself out.

14
00:00:27,720 --> 00:00:29,850
And so we added four specs in there for that.

15
00:00:29,850 --> 00:00:30,720
Actually I think five,

16
00:00:30,720 --> 00:00:32,092
because we added

17
00:00:32,092 --> 00:00:33,750
in one for the class as well.

18
00:00:33,750 --> 00:00:35,160
So it's now time to start working

19
00:00:35,160 --> 00:00:37,770
on our comment list down here.

20
00:00:37,770 --> 00:00:39,360
One quick thing that I wanna mention is

21
00:00:39,360 --> 00:00:42,270
that we're gonna build this as a full redux application.

22
00:00:42,270 --> 00:00:44,820
So we are going to build an action creator,

23
00:00:44,820 --> 00:00:46,661
to save submitted comments.

24
00:00:46,661 --> 00:00:48,662
And we're also gonna build a reducer,

25
00:00:48,662 --> 00:00:50,100
that's going to

26
00:00:50,100 --> 00:00:52,434
keep application level state that consists

27
00:00:52,434 --> 00:00:55,920
of an array of all the comments that get submitted.

28
00:00:55,920 --> 00:00:58,230
So as we're building this comment list right here

29
00:00:58,230 --> 00:01:02,370
we're going to assume that we're going to use react redux

30
00:01:02,370 --> 00:01:03,900
as helper connect,

31
00:01:03,900 --> 00:01:06,540
to hook into our application level state,

32
00:01:06,540 --> 00:01:08,730
to get our list of comments.

33
00:01:08,730 --> 00:01:11,091
So let's go ahead and just start working

34
00:01:11,091 --> 00:01:13,770
on the comment list and we'll see how it progresses

35
00:01:13,770 --> 00:01:15,480
Once we put the comment list together

36
00:01:15,480 --> 00:01:16,650
we'll go back and start working

37
00:01:16,650 --> 00:01:20,790
on our comment reducer and our ad comment action creator,

38
00:01:20,790 --> 00:01:23,640
and we're gonna write specs for those as well.

39
00:01:23,640 --> 00:01:24,690
Alright, so I think

40
00:01:24,690 --> 00:01:26,550
that we're pretty good with our comment box here.

41
00:01:26,550 --> 00:01:28,950
So I'm gonna close both the comment box

42
00:01:28,950 --> 00:01:31,413
and the comment box test files out.

43
00:01:33,690 --> 00:01:36,120
I'm going to do just a little bit of reordering here,

44
00:01:36,120 --> 00:01:38,250
and I think that the first thing I wanna do is,

45
00:01:38,250 --> 00:01:41,370
I want to add another spec to app test,

46
00:01:41,370 --> 00:01:42,203
to just assert,

47
00:01:42,203 --> 00:01:44,670
very similar to the comment box class right here.

48
00:01:44,670 --> 00:01:47,970
We wanna assert that our app contains a component

49
00:01:47,970 --> 00:01:50,880
with class comment list.

50
00:01:50,880 --> 00:01:53,400
And that's just going to make sure that our app is at

51
00:01:53,400 --> 00:01:56,520
all times showing the component that we're about to build

52
00:01:56,520 --> 00:01:58,830
which is gonna be comment list.

53
00:01:58,830 --> 00:02:01,290
So let's write that spec to start.

54
00:02:01,290 --> 00:02:02,130
We're gonna say

55
00:02:02,130 --> 00:02:03,510
it shows

56
00:02:03,510 --> 00:02:05,313
a comment list.

57
00:02:07,020 --> 00:02:08,669
I encourage you at this point

58
00:02:08,669 --> 00:02:11,520
in time to go ahead and pause the video,

59
00:02:11,520 --> 00:02:14,070
and give a shot at the next spec on your own.

60
00:02:14,070 --> 00:02:16,350
So it's gonna end up looking very similar

61
00:02:16,350 --> 00:02:19,140
to the existing spec that we've got right here.

62
00:02:19,140 --> 00:02:21,420
We're gonna make a new component,

63
00:02:21,420 --> 00:02:22,560
that is a comment list

64
00:02:22,560 --> 00:02:24,870
and we expect it to have class comment list.

65
00:02:24,870 --> 00:02:25,740
So,

66
00:02:25,740 --> 00:02:27,510
I encourage you to pause the video,

67
00:02:27,510 --> 00:02:29,070
write the test out, and then see

68
00:02:29,070 --> 00:02:31,350
if you can't do kind of a rough draft

69
00:02:31,350 --> 00:02:33,930
on our comment list spec,

70
00:02:33,930 --> 00:02:34,763
or excuse me,

71
00:02:34,763 --> 00:02:38,550
comment list component just to make the spec go green.

72
00:02:38,550 --> 00:02:41,190
So if you wanna give that a shot, go for it now.

73
00:02:41,190 --> 00:02:42,810
Otherwise, we're just gonna go ahead

74
00:02:42,810 --> 00:02:44,403
and charge right through.

75
00:02:47,700 --> 00:02:50,100
Okay, so let's give this a shot.

76
00:02:50,100 --> 00:02:53,193
We'll do our expect, where we expect our component.

77
00:02:54,420 --> 00:02:59,420
If we look for something that has a class comment list

78
00:02:59,670 --> 00:03:02,043
we'll expect that to exist.

79
00:03:02,910 --> 00:03:06,630
I'm gonna save this and we immediately see our specs go red.

80
00:03:06,630 --> 00:03:08,643
So we don't yet have our comment list.

81
00:03:10,440 --> 00:03:13,650
Let's go ahead and stub out our comment list component.

82
00:03:13,650 --> 00:03:18,030
So we'll make comment list dot js

83
00:03:18,030 --> 00:03:19,200
and inside of here,

84
00:03:19,200 --> 00:03:20,553
I'm gonna make this,

85
00:03:22,020 --> 00:03:24,660
let's make this a functional component because it's probably

86
00:03:24,660 --> 00:03:27,300
not gonna have any state to it or any need

87
00:03:27,300 --> 00:03:28,920
for lifecycle methods.

88
00:03:28,920 --> 00:03:31,800
So we'll just make this a functional component.

89
00:03:31,800 --> 00:03:34,983
At the top, we'll import React from react,

90
00:03:36,930 --> 00:03:38,830
and then we will make our comment

91
00:03:40,950 --> 00:03:42,630
list,

92
00:03:42,630 --> 00:03:44,283
which is a functional component.

93
00:03:46,380 --> 00:03:48,450
And since this is definitely gonna be a list

94
00:03:48,450 --> 00:03:50,900
for right now, we'll just assume that it has a UL

95
00:03:53,580 --> 00:03:55,090
with a class name

96
00:03:56,100 --> 00:03:58,470
of comment list.

97
00:03:58,470 --> 00:04:01,925
And at the bottom we'll export default

98
00:04:01,925 --> 00:04:04,350
comment list.

99
00:04:04,350 --> 00:04:05,910
So we'll save this,

100
00:04:05,910 --> 00:04:07,950
and our specs are still red.

101
00:04:07,950 --> 00:04:09,960
So the problem here is that we're not yet showing

102
00:04:09,960 --> 00:04:11,940
our comment list inside of our app.

103
00:04:11,940 --> 00:04:14,130
So let's fix that up really quick.

104
00:04:14,130 --> 00:04:16,079
We'll go over to our app,

105
00:04:16,079 --> 00:04:16,913
at the top,

106
00:04:16,913 --> 00:04:17,890
we'll import

107
00:04:19,860 --> 00:04:21,033
comment list,

108
00:04:22,984 --> 00:04:25,290
from comment list,

109
00:04:25,290 --> 00:04:26,130
and then underneath

110
00:04:26,130 --> 00:04:27,453
the comment box,

111
00:04:28,680 --> 00:04:30,930
we'll show our comment list.

112
00:04:30,930 --> 00:04:32,970
So now we'll save this,

113
00:04:32,970 --> 00:04:34,290
and our specs go green.

114
00:04:34,290 --> 00:04:35,123
Perfect.

115
00:04:36,570 --> 00:04:38,700
So now we're ready to start writing some specs

116
00:04:38,700 --> 00:04:40,710
around our comment list.

117
00:04:40,710 --> 00:04:43,140
We need to first create our spec file, so inside

118
00:04:43,140 --> 00:04:46,080
of our test components directory, We will make,

119
00:04:46,080 --> 00:04:46,930
comment

120
00:04:48,150 --> 00:04:48,983
list

121
00:04:50,070 --> 00:04:50,903
test.

122
00:04:52,650 --> 00:04:54,030
And we're good to go.

123
00:04:54,030 --> 00:04:56,482
Let's put our boiler plate together really quick in here.

124
00:04:56,482 --> 00:04:58,740
And it's gonna look very similar to all the specs

125
00:04:58,740 --> 00:05:00,450
that we've already written so far.

126
00:05:00,450 --> 00:05:01,740
So at the top,

127
00:05:01,740 --> 00:05:02,823
we'll import,

128
00:05:04,140 --> 00:05:05,433
render component,

129
00:05:06,524 --> 00:05:08,770
and we'll also import expect

130
00:05:09,960 --> 00:05:11,370
from

131
00:05:11,370 --> 00:05:13,800
our test helper file.

132
00:05:13,800 --> 00:05:16,150
And then we'll also import our component

133
00:05:17,490 --> 00:05:18,600
comment list

134
00:05:18,600 --> 00:05:19,433
from

135
00:05:20,490 --> 00:05:21,690
up

136
00:05:21,690 --> 00:05:22,523
up

137
00:05:22,523 --> 00:05:24,790
into source,into components

138
00:05:25,890 --> 00:05:27,210
comment list

139
00:05:27,210 --> 00:05:28,530
like so.

140
00:05:28,530 --> 00:05:30,130
And then we're going to describe

141
00:05:32,400 --> 00:05:34,083
comment list.

142
00:05:36,690 --> 00:05:37,560
Quick aside, I know

143
00:05:37,560 --> 00:05:41,100
that we're doing a ton of typing in here, but unfortunately

144
00:05:41,100 --> 00:05:42,570
you know the react side of things,

145
00:05:42,570 --> 00:05:44,010
the assumption is that we kind of already know

146
00:05:44,010 --> 00:05:45,270
what's going on here

147
00:05:45,270 --> 00:05:47,970
and so we're kind of having to double up on typing duty.

148
00:05:47,970 --> 00:05:49,497
Not only do we have to get through all the components

149
00:05:49,497 --> 00:05:51,873
but we also have to write the specs as well.

150
00:05:53,040 --> 00:05:55,350
Alright, so we've got our stubbed out test here.

151
00:05:55,350 --> 00:05:56,183
Let's go ahead

152
00:05:56,183 --> 00:05:59,100
and start writing some tests inside of the next section.

153
00:05:59,100 --> 00:06:00,050
I'll see you there.