1
00:00:01,290 --> 00:00:02,310
narrator: In the last section

2
00:00:02,310 --> 00:00:04,380
we put together our first assertion

3
00:00:04,380 --> 00:00:06,270
for our comment box where we expected

4
00:00:06,270 --> 00:00:08,850
the text area to exist.

5
00:00:08,850 --> 00:00:10,140
We also spoke a little bit about

6
00:00:10,140 --> 00:00:12,600
the JQuery chi library and how the component

7
00:00:12,600 --> 00:00:14,160
that we're rendering here is actually

8
00:00:14,160 --> 00:00:17,550
a jQuery wrapped version of our component.

9
00:00:17,550 --> 00:00:20,940
Again, we're not using jQuery in our production environment

10
00:00:20,940 --> 00:00:22,590
or for anything inside of our app

11
00:00:22,590 --> 00:00:25,320
we're just using it as a helper for testing.

12
00:00:25,320 --> 00:00:26,850
And we're definitely gonna talk a lot more

13
00:00:26,850 --> 00:00:29,820
about how JQuery exactly is being used when

14
00:00:29,820 --> 00:00:31,380
we rewrite this method here

15
00:00:31,380 --> 00:00:32,913
the render component function.

16
00:00:33,990 --> 00:00:37,020
So, our next step here we saw the last thing

17
00:00:37,020 --> 00:00:38,700
we did there, let me do a quick add on

18
00:00:38,700 --> 00:00:39,930
is just to say we wrote

19
00:00:39,930 --> 00:00:42,570
our first spec and it failed.

20
00:00:42,570 --> 00:00:44,730
So, I wanna write one more spec.

21
00:00:44,730 --> 00:00:46,590
The spec for it has a button

22
00:00:46,590 --> 00:00:47,670
and then we're gonna start doing

23
00:00:47,670 --> 00:00:50,640
the implementation for our comment box.

24
00:00:50,640 --> 00:00:52,170
So we're gonna do the same exact thing

25
00:00:52,170 --> 00:00:54,900
as we did in the spec above this

26
00:00:54,900 --> 00:00:56,910
but instead of finding a text area

27
00:00:56,910 --> 00:00:58,623
we're gonna find a button.

28
00:00:59,670 --> 00:01:04,670
So, we'll say constant component, render component

29
00:01:04,902 --> 00:01:08,160
and we're gonna render the comment box.

30
00:01:08,160 --> 00:01:09,870
And then we're just going to say

31
00:01:09,870 --> 00:01:13,650
we expect the component we're gonna find

32
00:01:13,650 --> 00:01:17,340
the button and we're gonna expect that to exist.

33
00:01:17,340 --> 00:01:19,863
So, expectcomponent.findbutton to exist.

34
00:01:24,180 --> 00:01:27,540
We'll save this, our specs are gonna run again

35
00:01:27,540 --> 00:01:30,330
and we're definitely gonna expect them both to fail.

36
00:01:30,330 --> 00:01:33,780
So, in this case we see fail number 2

37
00:01:33,780 --> 00:01:36,720
and above that failure number 1.

38
00:01:36,720 --> 00:01:38,580
So now , the great spot where we can start

39
00:01:38,580 --> 00:01:41,880
doing our implementation of our comment box component.

40
00:01:41,880 --> 00:01:44,400
Let's flip over to the implementation file

41
00:01:44,400 --> 00:01:46,470
for our comment box and we're

42
00:01:46,470 --> 00:01:48,360
just gonna put together some boiler plate here

43
00:01:48,360 --> 00:01:50,163
just to make the test work.

44
00:01:51,900 --> 00:01:52,950
So, this is where we start getting

45
00:01:52,950 --> 00:01:55,770
into the kinda the react side of things

46
00:01:55,770 --> 00:01:57,090
being that this is a little bit more

47
00:01:57,090 --> 00:01:58,530
of an advanced course we're going

48
00:01:58,530 --> 00:02:00,420
to kind of speed through the react side

49
00:02:00,420 --> 00:02:03,870
of things and focus a lot more on the test side.

50
00:02:03,870 --> 00:02:05,040
So,if you need to pause the video

51
00:02:05,040 --> 00:02:06,492
as we're writing the code here, don't sweat it

52
00:02:06,492 --> 00:02:08,610
just go for it but in general,

53
00:02:08,610 --> 00:02:10,710
I'm only gonna do a kind of a light explanation

54
00:02:10,710 --> 00:02:12,160
about the code we're writing.

55
00:02:13,080 --> 00:02:16,020
Okay, so with that kinda disclaimer out of the way

56
00:02:16,020 --> 00:02:18,540
let's make our comment box and our goal right now

57
00:02:18,540 --> 00:02:20,490
is just to get our test to pass.

58
00:02:20,490 --> 00:02:21,930
So, all we wanna do is make sure that

59
00:02:21,930 --> 00:02:23,940
we have a text area on the screen

60
00:02:23,940 --> 00:02:25,490
and we've got a button as well.

61
00:02:26,460 --> 00:02:30,730
So, at the top we're going to import react from react

62
00:02:31,890 --> 00:02:34,860
and we're gonna make this a class based component.

63
00:02:34,860 --> 00:02:37,743
So, we'll import the component property as well.

64
00:02:39,480 --> 00:02:43,640
We'll export default class comment box

65
00:02:46,260 --> 00:02:50,972
and it's going to extend component and inside of here

66
00:02:50,972 --> 00:02:55,972
we'll put a render method that's just

67
00:02:56,128 --> 00:03:01,128
gonna return a div that contains a text area and a button.

68
00:03:09,330 --> 00:03:10,380
And we're just going to put

69
00:03:10,380 --> 00:03:12,780
in the correct text for the button right now

70
00:03:12,780 --> 00:03:16,143
it's gonna say submit comment like so.

71
00:03:17,790 --> 00:03:21,180
Okay, so we added that in and then we refreshed

72
00:03:21,180 --> 00:03:22,568
I saved the file, our specs instantly reran

73
00:03:22,568 --> 00:03:25,620
and we saw our specs go green.

74
00:03:25,620 --> 00:03:28,650
So our account box is now successfully rendering

75
00:03:28,650 --> 00:03:31,110
with the text area and it successfully found

76
00:03:31,110 --> 00:03:33,030
the button that we placed as well.

77
00:03:33,030 --> 00:03:35,100
And so let's say that I come back through here

78
00:03:35,100 --> 00:03:37,260
and I am refactoring you let's say

79
00:03:37,260 --> 00:03:40,290
this is sometime months into the future

80
00:03:40,290 --> 00:03:42,990
even years and for some crazy reason

81
00:03:42,990 --> 00:03:45,750
I accidentally delete my text area.

82
00:03:45,750 --> 00:03:48,420
I would then expect my text area to fail

83
00:03:48,420 --> 00:03:49,683
so it just goes red.

84
00:03:50,550 --> 00:03:53,640
I can then undo that deletion, save the file

85
00:03:53,640 --> 00:03:55,530
and we're back to green.

86
00:03:55,530 --> 00:03:57,510
Best part of this is that man, these specs

87
00:03:57,510 --> 00:03:59,190
just run lightning fast.

88
00:03:59,190 --> 00:04:01,440
So as you're writing your code

89
00:04:01,440 --> 00:04:05,670
you're going to get this instant feedback along the way.

90
00:04:05,670 --> 00:04:06,780
So this is looking great.

91
00:04:06,780 --> 00:04:08,220
There's usually one more spec

92
00:04:08,220 --> 00:04:09,690
that I just kind of like to do

93
00:04:09,690 --> 00:04:11,040
just kind of as a warmup thing

94
00:04:11,040 --> 00:04:13,020
for all of my components.

95
00:04:13,020 --> 00:04:15,720
I usually like to add a class name

96
00:04:15,720 --> 00:04:19,620
to my top level HTML element in every component

97
00:04:19,620 --> 00:04:23,040
and the class name matches up with the name

98
00:04:23,040 --> 00:04:24,720
of the component itself.

99
00:04:24,720 --> 00:04:26,940
So, this is a total personal preference,

100
00:04:26,940 --> 00:04:29,700
it's up to you if you don't wanna follow this no problem.

101
00:04:29,700 --> 00:04:31,574
But it's something that I find really useful for

102
00:04:31,574 --> 00:04:35,610
when I'm debugging in the Chrome console

103
00:04:35,610 --> 00:04:39,300
or when I am writing SAS or CSS or what have you.

104
00:04:39,300 --> 00:04:41,760
I really like to have my top level component

105
00:04:41,760 --> 00:04:45,240
share a class with a class name.

106
00:04:45,240 --> 00:04:50,240
So I'm gonna put in class name of comment box

107
00:04:52,770 --> 00:04:56,340
and then let's go ahead and write a spec for this as well.

108
00:04:56,340 --> 00:05:00,660
So, I'll say at the top I'm gonna add another it block

109
00:05:00,660 --> 00:05:05,660
and I'll say it has the correct class.

110
00:05:06,210 --> 00:05:09,420
I could also say it has the class comment box,

111
00:05:09,420 --> 00:05:10,710
it's totally up to you how you want

112
00:05:10,710 --> 00:05:12,843
to name your expectations.

113
00:05:14,760 --> 00:05:18,490
And so I'm going to render my component again

114
00:05:24,270 --> 00:05:27,340
and then I'll expect my component

115
00:05:28,440 --> 00:05:29,880
and this is where we need to do

116
00:05:29,880 --> 00:05:32,640
a little bit reference back to our docs again

117
00:05:32,640 --> 00:05:36,213
so I'm going to pull my browser down again.

118
00:05:37,410 --> 00:05:38,820
There we go.

119
00:05:38,820 --> 00:05:40,810
I'll search for chai jquery

120
00:05:42,960 --> 00:05:47,040
I go to the first link and I've got

121
00:05:47,040 --> 00:05:49,950
all my documentation for all my matches

122
00:05:49,950 --> 00:05:52,650
and so I'm not really dealing with an attr here

123
00:05:52,650 --> 00:05:53,940
I'm not dealing with a prop

124
00:05:53,940 --> 00:05:57,300
I'm not dealing with CSS, I'm dealing with a class.

125
00:05:57,300 --> 00:06:01,230
So, we can use the class expect component

126
00:06:01,230 --> 00:06:04,470
to have class comment box

127
00:06:04,470 --> 00:06:06,960
and hopefully we should see that pass.

128
00:06:06,960 --> 00:06:09,810
So, let's flip back over and we'll do

129
00:06:09,810 --> 00:06:14,810
to have class comment box, let's save it

130
00:06:18,930 --> 00:06:21,990
and sure enough we now have four passing specs,

131
00:06:21,990 --> 00:06:24,210
it has the correct class.

132
00:06:24,210 --> 00:06:26,340
Now we did kind of go out of order

133
00:06:26,340 --> 00:06:27,510
there a little bit.

134
00:06:27,510 --> 00:06:29,820
We wrote the implementation first

135
00:06:29,820 --> 00:06:32,520
and then we wrote the spec afterwards.

136
00:06:32,520 --> 00:06:35,400
As a rule of thumb, whenever we write the code first

137
00:06:35,400 --> 00:06:38,760
and then we write the spec, it's always a very good idea

138
00:06:38,760 --> 00:06:42,600
to purposefully break the spec and watch it fail.

139
00:06:42,600 --> 00:06:44,340
And the reason that we do that is that

140
00:06:44,340 --> 00:06:46,770
it ensures that we didn't write a spec

141
00:06:46,770 --> 00:06:50,700
that is testing say nothing or testing something

142
00:06:50,700 --> 00:06:53,040
that is always the true you know, always true

143
00:06:53,040 --> 00:06:54,780
maybe we wrote a spec that is just not

144
00:06:54,780 --> 00:06:57,600
behaving the way that we expect it to behave

145
00:06:57,600 --> 00:07:00,000
and so if we do our implementation first

146
00:07:00,000 --> 00:07:01,470
and then we write our spec

147
00:07:01,470 --> 00:07:05,280
it's always a good idea just to test the test

148
00:07:05,280 --> 00:07:08,730
so to speak, by just purposefully making the spec fail.

149
00:07:08,730 --> 00:07:13,440
So, delete the dash box, I'll save it

150
00:07:13,440 --> 00:07:15,780
and sure enough I see the spec go red.

151
00:07:15,780 --> 00:07:19,350
We expected it to have the class comment dash box.

152
00:07:19,350 --> 00:07:22,350
So, I'll add back on comment box

153
00:07:22,350 --> 00:07:25,590
it goes back to green and we're good to go.

154
00:07:25,590 --> 00:07:26,760
All right, so this is great.

155
00:07:26,760 --> 00:07:29,310
We've now got our three tests in here.

156
00:07:29,310 --> 00:07:30,960
There's just one little problem

157
00:07:30,960 --> 00:07:33,180
you'll notice that every single one

158
00:07:33,180 --> 00:07:35,340
of our specs repeats this line right here.

159
00:07:35,340 --> 00:07:38,370
They all say constant component, render component

160
00:07:38,370 --> 00:07:39,720
and this is really tiresome.

161
00:07:39,720 --> 00:07:41,700
You know, surely if we're gonna repeat

162
00:07:41,700 --> 00:07:43,200
this line of code all over the place

163
00:07:43,200 --> 00:07:45,600
there must be some way that we can reduce

164
00:07:45,600 --> 00:07:47,550
the number of times we have to write it.

165
00:07:47,550 --> 00:07:49,800
So, let's look into that in the next section.