1
00:00:00,840 --> 00:00:02,064
Instructor: In the last section, we added on

2
00:00:02,064 --> 00:00:04,680
our last two specs, the spec to make sure

3
00:00:04,680 --> 00:00:06,450
that our component had a button

4
00:00:06,450 --> 00:00:08,580
and we also add in a little bonus one

5
00:00:08,580 --> 00:00:11,220
just to make sure that we had the correct class.

6
00:00:11,220 --> 00:00:12,840
So, we've got three specs now

7
00:00:12,840 --> 00:00:15,060
and we've got a little bit of a problem.

8
00:00:15,060 --> 00:00:18,480
Our code is really not dry, so to speak.

9
00:00:18,480 --> 00:00:20,340
We've got the same line repeated

10
00:00:20,340 --> 00:00:22,590
in each one of our tests here.

11
00:00:22,590 --> 00:00:24,120
So, it'd be really great if we could kind of

12
00:00:24,120 --> 00:00:26,910
extract this setup for each spec into something

13
00:00:26,910 --> 00:00:30,090
that some little bit of work that gets ahead of time.

14
00:00:30,090 --> 00:00:34,260
So, luckily MOCA does have us covered.

15
00:00:34,260 --> 00:00:38,370
We've got another construct, along with describe it

16
00:00:38,370 --> 00:00:42,570
and expect that's called a before each.

17
00:00:42,570 --> 00:00:45,000
So, we're gonna write the code out really quick here

18
00:00:45,000 --> 00:00:48,090
and then we'll talk exactly about what it's doing.

19
00:00:48,090 --> 00:00:52,477
So, I'm going to add in a before each

20
00:00:54,030 --> 00:00:56,643
and I'm gonna pass it a fat arrow function.

21
00:00:58,020 --> 00:01:00,180
So, we call before each.

22
00:01:00,180 --> 00:01:03,273
It is a function and we pass it a function.

23
00:01:04,980 --> 00:01:06,780
Now, here's where it gets interesting.

24
00:01:06,780 --> 00:01:10,860
I'm going to move our line of code, our initialization,

25
00:01:10,860 --> 00:01:14,430
into the before each and then I'm gonna delete

26
00:01:14,430 --> 00:01:16,443
all the other instances of that line.

27
00:01:17,700 --> 00:01:19,980
So, now I've got three it statements

28
00:01:19,980 --> 00:01:23,070
and each of them just has a single expectation,

29
00:01:23,070 --> 00:01:25,014
and I've got a before each,

30
00:01:25,014 --> 00:01:28,050
where I do some setup for my component.

31
00:01:28,050 --> 00:01:29,730
So, you might be able to guess

32
00:01:29,730 --> 00:01:32,130
exactly what before each is doing.

33
00:01:32,130 --> 00:01:34,770
Before each is a function that's going to run

34
00:01:34,770 --> 00:01:38,130
before any of our it statements

35
00:01:38,130 --> 00:01:41,040
and it's gonna run before each of them runs.

36
00:01:41,040 --> 00:01:45,510
So, in total, before each is gonna get called three times.

37
00:01:45,510 --> 00:01:49,500
Once for it number one, once for it number two

38
00:01:49,500 --> 00:01:51,420
and once for it number three.

39
00:01:51,420 --> 00:01:54,300
And so, you can really have the expectation that we're using

40
00:01:54,300 --> 00:01:55,890
or you can kind of guess here that we're gonna use

41
00:01:55,890 --> 00:01:58,800
before each all over the place to kind of do

42
00:01:58,800 --> 00:02:00,210
some setup for our specs.

43
00:02:00,210 --> 00:02:01,800
It's gonna do some setup ahead of time

44
00:02:01,800 --> 00:02:05,283
that we don't have to repeat inside of each it statement.

45
00:02:06,660 --> 00:02:09,720
So, I'm gonna go ahead, my specs are passing right now,

46
00:02:09,720 --> 00:02:10,553
as you can see.

47
00:02:10,553 --> 00:02:12,553
I'm gonna go ahead and save my file now,

48
00:02:12,553 --> 00:02:14,490
and I'm gonna just see what happens.

49
00:02:14,490 --> 00:02:16,350
So, we're gonna save it

50
00:02:16,350 --> 00:02:19,410
and now all of a sudden our specs are failing.

51
00:02:19,410 --> 00:02:22,500
Component is not defined, huh?

52
00:02:22,500 --> 00:02:24,330
So, that's kind of interesting.

53
00:02:24,330 --> 00:02:27,990
Well, little bit of JavaScript 101 here.

54
00:02:27,990 --> 00:02:31,830
We are declaring a variable inside of this function

55
00:02:31,830 --> 00:02:34,620
right here, which means that nothing outside

56
00:02:34,620 --> 00:02:36,900
of that function's scope is gonna have any idea

57
00:02:36,900 --> 00:02:39,540
that the component variable exists.

58
00:02:39,540 --> 00:02:41,700
So, what we're going to do to fix this problem

59
00:02:41,700 --> 00:02:44,880
is we're going to initialize the component variable

60
00:02:44,880 --> 00:02:48,240
ahead of time, and then when component, or excuse me,

61
00:02:48,240 --> 00:02:51,660
when before each runs, we'll reassign the component,

62
00:02:51,660 --> 00:02:54,720
and that will mean that all of our different specs

63
00:02:54,720 --> 00:02:57,660
are referring to the same component variable.

64
00:02:57,660 --> 00:02:58,830
So, let's just go ahead and you know,

65
00:02:58,830 --> 00:03:00,510
it's kind of a tough one to explain.

66
00:03:00,510 --> 00:03:03,840
A lot easier to see what's happening in practice.

67
00:03:03,840 --> 00:03:06,810
So, ahead of time, before I run the before each,

68
00:03:06,810 --> 00:03:11,400
but inside of the describe, I'm going to say let component

69
00:03:11,400 --> 00:03:13,620
and that means I'm going to declare a variable

70
00:03:13,620 --> 00:03:16,023
that I expect to change over time.

71
00:03:16,890 --> 00:03:19,410
Then inside of the before each,

72
00:03:19,410 --> 00:03:21,360
we're just gonna reassign the variable.

73
00:03:22,800 --> 00:03:25,290
Let's save this and see if it runs.

74
00:03:25,290 --> 00:03:28,020
And yep, everything went back to being green.

75
00:03:28,020 --> 00:03:29,880
So, let's talk about, kind of do a flow

76
00:03:29,880 --> 00:03:32,850
or a walkthrough here of exactly what's happening.

77
00:03:32,850 --> 00:03:35,010
If you think back a little bit, I told you earlier

78
00:03:35,010 --> 00:03:39,180
that when MOCA runs and it executes this file right here,

79
00:03:39,180 --> 00:03:41,100
all of these functions that we're declaring

80
00:03:41,100 --> 00:03:43,590
inside of the describes and the its

81
00:03:43,590 --> 00:03:46,140
are kind of getting loaded or queued up to be executed

82
00:03:46,140 --> 00:03:48,240
at some future point in time.

83
00:03:48,240 --> 00:03:49,500
So, let's think about kinda the order

84
00:03:49,500 --> 00:03:52,170
of operations here of what's happening.

85
00:03:52,170 --> 00:03:55,530
So, when MOCA first runs, it's going to see this file

86
00:03:55,530 --> 00:03:57,780
and execute all this code.

87
00:03:57,780 --> 00:04:00,600
At that point in time, it's then going to execute

88
00:04:00,600 --> 00:04:02,673
the function that we passed to describe.

89
00:04:03,569 --> 00:04:05,220
Component's gonna get initialized

90
00:04:05,220 --> 00:04:08,823
and it's gonna start off as undefined.

91
00:04:10,800 --> 00:04:12,240
Then MOCA's gonna say, okay,

92
00:04:12,240 --> 00:04:13,830
I've done all this initialization.

93
00:04:13,830 --> 00:04:16,290
It's time to run my three its.

94
00:04:16,290 --> 00:04:17,550
I have three its queued up.

95
00:04:17,550 --> 00:04:20,760
I'm gonna run each of them, but before I run each of them,

96
00:04:20,760 --> 00:04:23,490
I'm gonna run the before each.

97
00:04:23,490 --> 00:04:26,520
So, right now, component is undefined.

98
00:04:26,520 --> 00:04:30,060
We run the before each and component is assigned

99
00:04:30,060 --> 00:04:32,463
to the result of render component.

100
00:04:33,496 --> 00:04:36,540
So, the outside variable here is now equal

101
00:04:36,540 --> 00:04:40,413
to essentially comment box.

102
00:04:41,700 --> 00:04:43,390
Then the first it runs

103
00:04:44,640 --> 00:04:47,070
and an expectation is made where a component

104
00:04:47,070 --> 00:04:49,830
is equal to comment box.

105
00:04:49,830 --> 00:04:51,120
The expectation is made.

106
00:04:51,120 --> 00:04:53,943
It passes or fails and then everything is thrown away.

107
00:04:55,650 --> 00:04:59,460
Comment, or next it block is queued up to be ran.

108
00:04:59,460 --> 00:05:01,170
We initialized component.

109
00:05:01,170 --> 00:05:02,760
We run the before each.

110
00:05:02,760 --> 00:05:06,180
It's assigned to a new instance of comment box.

111
00:05:06,180 --> 00:05:07,200
And so, that's very key.

112
00:05:07,200 --> 00:05:11,340
It's a completely new, fresh instance of comment box.

113
00:05:11,340 --> 00:05:13,230
And then, we run our expectation

114
00:05:13,230 --> 00:05:15,660
with that fresh new instance.

115
00:05:15,660 --> 00:05:17,910
And then, the entire process is repeated again

116
00:05:17,910 --> 00:05:19,413
for the third time as well.

117
00:05:21,000 --> 00:05:23,340
In general, if all this sounds really confusing

118
00:05:23,340 --> 00:05:26,520
or JavaScript Scope is something that you just

119
00:05:26,520 --> 00:05:28,710
don't quite have mastery of just yet,

120
00:05:28,710 --> 00:05:30,810
I got really good news for you.

121
00:05:30,810 --> 00:05:34,140
As long as you follow this pattern, you'll be good to go.

122
00:05:34,140 --> 00:05:37,170
As long as you initialize your variable ahead of time,

123
00:05:37,170 --> 00:05:39,600
you declare it inside the before each,

124
00:05:39,600 --> 00:05:42,450
and then you write expectations around of it

125
00:05:42,450 --> 00:05:45,480
a hundred percent of the time it's always gonna work.

126
00:05:45,480 --> 00:05:47,460
Complete understanding is not required.

127
00:05:47,460 --> 00:05:50,460
So, again, if it's a little bit unclear, don't sweat it.

128
00:05:50,460 --> 00:05:52,530
You can always refer back to this example right here

129
00:05:52,530 --> 00:05:53,880
and you'll be good to go.

130
00:05:53,880 --> 00:05:55,980
And I know if you're watching this video,

131
00:05:55,980 --> 00:05:57,750
chances are you're a smart cookie,

132
00:05:57,750 --> 00:06:00,203
and so I know that the concept is gonna sink in

133
00:06:00,203 --> 00:06:02,430
over time a little bit.

134
00:06:02,430 --> 00:06:05,370
Okay, so we've done a refactor here to move everything

135
00:06:05,370 --> 00:06:06,960
into a before each.

136
00:06:06,960 --> 00:06:09,690
Each of our it statements look really clean.

137
00:06:09,690 --> 00:06:13,530
We have a partially functioning comment box.

138
00:06:13,530 --> 00:06:16,170
I think we're about ready to wire it up

139
00:06:16,170 --> 00:06:17,880
into our app component

140
00:06:17,880 --> 00:06:19,620
and maybe write another test around that.

141
00:06:19,620 --> 00:06:22,313
So, let's take care of that inside of the next section.