1
00:00:01,110 --> 00:00:02,190
-: Our two tests inside the

2
00:00:02,190 --> 00:00:04,890
app.test.js file are looking pretty good.

3
00:00:04,890 --> 00:00:06,780
But there's just one last quick refactor

4
00:00:06,780 --> 00:00:07,826
I wanna do inside of here.

5
00:00:07,826 --> 00:00:10,050
You'll notice that both of our tests right now

6
00:00:10,050 --> 00:00:12,480
have the exact same line of code

7
00:00:12,480 --> 00:00:14,811
right here and right here.

8
00:00:14,811 --> 00:00:16,200
So anytime that you're writing

9
00:00:16,200 --> 00:00:18,540
out multiple tests inside of a single file,

10
00:00:18,540 --> 00:00:19,830
and start to notice that there's some

11
00:00:19,830 --> 00:00:22,380
common setup or some common code between

12
00:00:22,380 --> 00:00:23,430
both those tests.

13
00:00:23,430 --> 00:00:25,590
We like to extract that common logic

14
00:00:25,590 --> 00:00:28,230
to another helper function that is provided

15
00:00:28,230 --> 00:00:30,000
to us by jest.

16
00:00:30,000 --> 00:00:31,620
This helper function is referred to

17
00:00:31,620 --> 00:00:33,336
as the before each function.

18
00:00:33,336 --> 00:00:36,390
And we'd like to use it to kind of abstract out,

19
00:00:36,390 --> 00:00:38,670
or pull out logic that needs to occur

20
00:00:38,670 --> 00:00:41,460
for every single test inside this file.

21
00:00:41,460 --> 00:00:42,690
So let's do this refactor,

22
00:00:42,690 --> 00:00:44,040
and then we'll talk about what it's really

23
00:00:44,040 --> 00:00:45,630
doing for us.

24
00:00:45,630 --> 00:00:47,790
Above our first test inside this file,

25
00:00:47,790 --> 00:00:50,673
I'm going to call a function before each.

26
00:00:51,600 --> 00:00:53,610
And to that function I'm going to pass an

27
00:00:53,610 --> 00:00:55,653
arrow function like so.

28
00:00:56,700 --> 00:00:58,710
So any logic that we put inside of this

29
00:00:58,710 --> 00:01:01,140
function right here will be executed before

30
00:01:01,140 --> 00:01:03,420
the test and this test right here.

31
00:01:03,420 --> 00:01:04,980
So again, it's a great place to

32
00:01:04,980 --> 00:01:07,770
put some common setup logic.

33
00:01:07,770 --> 00:01:08,940
In this case, we're probably going to

34
00:01:08,940 --> 00:01:11,370
want to make sure that we initialize this

35
00:01:11,370 --> 00:01:13,710
wrapped variable right here before we get

36
00:01:13,710 --> 00:01:15,870
into either one of these tests.

37
00:01:15,870 --> 00:01:18,270
So, I'm going to extract that variable

38
00:01:18,270 --> 00:01:20,597
up here to the before each statement-

39
00:01:20,597 --> 00:01:23,733
and then I can remove it from the second test as well.

40
00:01:25,020 --> 00:01:27,810
Okay, so this right here is almost a hundred

41
00:01:27,810 --> 00:01:30,900
percent equivalent to what we had before.

42
00:01:30,900 --> 00:01:33,000
Before this test is executed that

43
00:01:33,000 --> 00:01:34,800
before each statement will run,

44
00:01:34,800 --> 00:01:37,200
and it will initialize our new app component,

45
00:01:37,200 --> 00:01:40,137
and assign it to this wrapped variable.

46
00:01:40,137 --> 00:01:42,120
This test will then execute.

47
00:01:42,120 --> 00:01:43,470
We'll look at that wrapped variable

48
00:01:43,470 --> 00:01:46,530
and try to do some expectation around it.

49
00:01:46,530 --> 00:01:48,810
Then, after this test has been completed

50
00:01:48,810 --> 00:01:51,504
before each has ran a second time,

51
00:01:51,504 --> 00:01:53,550
and then we jump straight down to this

52
00:01:53,550 --> 00:01:54,870
test down here.

53
00:01:54,870 --> 00:01:56,940
So, the word before each very literally

54
00:01:56,940 --> 00:02:00,120
means before every single test

55
00:02:00,120 --> 00:02:03,270
we're going to do some common setup logic.

56
00:02:03,270 --> 00:02:04,890
Now, before we try to run this code right here,

57
00:02:04,890 --> 00:02:05,816
there's one little issue with

58
00:02:05,816 --> 00:02:07,069
how we've written it.

59
00:02:07,069 --> 00:02:11,039
Remember how scoping of variables works with JavaScript.

60
00:02:11,039 --> 00:02:11,873
At present,

61
00:02:11,873 --> 00:02:14,370
we are defining a new variable called wrapped,

62
00:02:14,370 --> 00:02:16,736
in the scope of this arrow function.

63
00:02:16,736 --> 00:02:19,239
So this wrapped variable right here is not

64
00:02:19,239 --> 00:02:22,200
in the same scope as wrapped right here

65
00:02:22,200 --> 00:02:23,340
in wrapped right here.

66
00:02:23,340 --> 00:02:24,930
They are in different scopes.

67
00:02:24,930 --> 00:02:26,267
And if we try to run the code as it

68
00:02:26,267 --> 00:02:27,204
stands right now,

69
00:02:27,204 --> 00:02:29,220
we'll get an error message saying

70
00:02:29,220 --> 00:02:31,980
that variable wrapped and wrapped

71
00:02:31,980 --> 00:02:34,866
are not found or they are completely undefined.

72
00:02:34,866 --> 00:02:36,930
So to get around this what we usually

73
00:02:36,930 --> 00:02:39,060
do is initialize our variable that

74
00:02:39,060 --> 00:02:41,460
we're making use of outside of the

75
00:02:41,460 --> 00:02:42,749
before each statement.

76
00:02:42,749 --> 00:02:45,750
So we would write above the before each

77
00:02:45,750 --> 00:02:47,733
let wrapped like so.

78
00:02:49,140 --> 00:02:51,210
Then inside the before each statement,

79
00:02:51,210 --> 00:02:52,590
we are not going to initialize the

80
00:02:52,590 --> 00:02:53,700
variable again.

81
00:02:53,700 --> 00:02:55,920
Instead, we will declare our new instance

82
00:02:55,920 --> 00:02:56,992
of the app and assign it to

83
00:02:56,992 --> 00:02:58,727
that wrapped variable.

84
00:02:58,727 --> 00:03:01,260
So now that wrapped is defined inside

85
00:03:01,260 --> 00:03:03,720
this outer scope is it is accessible

86
00:03:03,720 --> 00:03:05,370
within the before each statement,

87
00:03:05,370 --> 00:03:06,540
within this test,

88
00:03:06,540 --> 00:03:08,010
and within this test.

89
00:03:08,010 --> 00:03:09,750
And before each of these two tests,

90
00:03:09,750 --> 00:03:11,730
we're going to assign a new copy

91
00:03:11,730 --> 00:03:14,343
of our app component to that wrapped variable.

92
00:03:15,270 --> 00:03:16,770
Now, the other thing I'll mention here

93
00:03:16,770 --> 00:03:17,940
very quickly is you'll notice that

94
00:03:17,940 --> 00:03:20,160
we're using the let keyword right here rather

95
00:03:20,160 --> 00:03:21,831
than the more typical const.

96
00:03:21,831 --> 00:03:23,760
The reason for that is that we are very

97
00:03:23,760 --> 00:03:26,190
clearly going to want to reassign the value

98
00:03:26,190 --> 00:03:29,109
to wrapped several times throughout this file.

99
00:03:29,109 --> 00:03:30,999
So, when we first initialize the variable right here,

100
00:03:30,999 --> 00:03:31,920
we're saying,

101
00:03:31,920 --> 00:03:33,990
hey we do not yet know what we

102
00:03:33,990 --> 00:03:35,250
want to assign to this variable

103
00:03:35,250 --> 00:03:36,083
just yet.

104
00:03:36,083 --> 00:03:37,380
So we're going to use let,

105
00:03:37,380 --> 00:03:39,900
which will allow us to reassign a new value

106
00:03:39,900 --> 00:03:41,640
to that variable several times throughout

107
00:03:41,640 --> 00:03:42,920
this file.

108
00:03:42,920 --> 00:03:44,670
Okay, so now last thing I'm going to do

109
00:03:44,670 --> 00:03:46,140
is save this file.

110
00:03:46,140 --> 00:03:47,850
I'll flip back over to my terminal,

111
00:03:47,850 --> 00:03:49,158
I'll check out my tests,

112
00:03:49,158 --> 00:03:51,240
and it looks like they're still passing.

113
00:03:51,240 --> 00:03:52,147
Perfect.

114
00:03:52,147 --> 00:03:53,790
So we're going to be using this

115
00:03:53,790 --> 00:03:56,040
before each construct throughout all the

116
00:03:56,040 --> 00:03:58,050
rest of the tests that we put together as a

117
00:03:58,050 --> 00:03:59,484
location that we do some common setup

118
00:03:59,484 --> 00:04:02,040
that needs to be done for every single test

119
00:04:02,040 --> 00:04:03,011
inside this file.

120
00:04:03,011 --> 00:04:05,940
Now, one thing that you might be curious about is

121
00:04:05,940 --> 00:04:08,280
whether or not before each is going to apply to

122
00:04:08,280 --> 00:04:10,470
any other test inside of our project-

123
00:04:10,470 --> 00:04:11,850
and the answer is no.

124
00:04:11,850 --> 00:04:13,920
This before each right here is only going

125
00:04:13,920 --> 00:04:17,190
to apply to tests that we place inside this file.

126
00:04:17,190 --> 00:04:19,980
No other tests inside of our project.

127
00:04:19,980 --> 00:04:20,970
All right, so now that we've got this

128
00:04:20,970 --> 00:04:21,839
refactor done,

129
00:04:21,839 --> 00:04:23,250
let's continue in the next section

130
00:04:23,250 --> 00:04:25,150
and move forward with our application.