1
00:00:06,480 --> 00:00:08,850
- Okay. In this section,
we going to see how to

2
00:00:08,850 --> 00:00:13,140
write some simple JavaScript
code, how to test it using Jest

3
00:00:13,140 --> 00:00:16,020
and how to run that test
from the command line.

4
00:00:16,020 --> 00:00:20,370
So all the examples are
located in the example1 folder.

5
00:00:20,370 --> 00:00:21,780
You can follow along if you like,

6
00:00:21,780 --> 00:00:24,303
let me show you where to
get the examples from.

7
00:00:25,470 --> 00:00:29,400
So going to JSTDD, which contains the

8
00:00:29,400 --> 00:00:31,710
all the demos for the entire video series.

9
00:00:31,710 --> 00:00:35,940
We're currently in LessonO1,
if you go in there,

10
00:00:35,940 --> 00:00:37,620
there are three separate
examples we're gonna look

11
00:00:37,620 --> 00:00:39,270
at in this lesson.

12
00:00:39,270 --> 00:00:42,690
The first example for this
section is in example1.

13
00:00:42,690 --> 00:00:45,900
Okay. So I'm gonna open that folder.

14
00:00:45,900 --> 00:00:47,340
There are three files.

15
00:00:47,340 --> 00:00:50,220
There's the JavaScript
code that I'm gonna test.

16
00:00:50,220 --> 00:00:51,390
There's my test code.

17
00:00:51,390 --> 00:00:53,647
You tend to have a file
that called something

18
00:00:53,647 --> 00:00:58,080
.test.JS, and then a package .JSON file

19
00:00:58,080 --> 00:01:00,090
which I'll discuss in a moment.

20
00:01:00,090 --> 00:01:02,970
So I'm gonna use VS
Code Visual Studio Code

21
00:01:02,970 --> 00:01:05,670
as the editor for all my examples.

22
00:01:05,670 --> 00:01:09,840
So you can open that folder
in Visual Studio code

23
00:01:09,840 --> 00:01:11,343
and it looks like this.

24
00:01:13,110 --> 00:01:16,950
So here are my three
files, my JavaScript code

25
00:01:16,950 --> 00:01:20,387
the test code and this mysterious package

26
00:01:20,387 --> 00:01:22,140
.JSON that we'll discuss in a few minutes.

27
00:01:22,140 --> 00:01:24,450
So, first of all, then
here's the JavaScript code.

28
00:01:24,450 --> 00:01:27,510
It's a very simple example
just to get the ball rolling.

29
00:01:27,510 --> 00:01:28,580
It's a simple add function.

30
00:01:28,580 --> 00:01:31,920
It takes two numbers and returns the sum.

31
00:01:31,920 --> 00:01:34,950
Notice at the bottom of the JavaScript

32
00:01:34,950 --> 00:01:37,920
I have a module.exports statement,

33
00:01:37,920 --> 00:01:42,330
technically speaking this file
is called a common JS module.

34
00:01:42,330 --> 00:01:45,750
This is what NodeJS uses
to organize script files.

35
00:01:45,750 --> 00:01:48,660
Okay. So when you have a script file

36
00:01:48,660 --> 00:01:51,810
or module file in NodeJS, every function

37
00:01:51,810 --> 00:01:56,810
or class or variable is by
default private to that file.

38
00:01:57,000 --> 00:02:00,180
If you want to access a
function outside the file

39
00:02:00,180 --> 00:02:01,830
you have to export it.

40
00:02:01,830 --> 00:02:04,650
And that's what the module.exports does.

41
00:02:04,650 --> 00:02:07,890
It allows us to export
symbols like function names.

42
00:02:07,890 --> 00:02:12,360
So we can then import them
elsewhere, like in our test code.

43
00:02:12,360 --> 00:02:15,810
Okay. So I've module.exports
is how I export

44
00:02:15,810 --> 00:02:18,180
or make public the add function

45
00:02:18,180 --> 00:02:21,393
so that I can access it in my test.

46
00:02:22,261 --> 00:02:24,510
Okay. So the module exports is the way

47
00:02:24,510 --> 00:02:26,670
that you share symbols

48
00:02:26,670 --> 00:02:29,850
across multiple files in NodeJS.

49
00:02:29,850 --> 00:02:31,050
A little bit later

50
00:02:31,050 --> 00:02:33,310
I'll show you an another way

51
00:02:34,280 --> 00:02:38,250
of exporting symbols as
it works in ECMAScript6.

52
00:02:38,250 --> 00:02:40,350
Okay. So that would be
a slightly different way

53
00:02:40,350 --> 00:02:41,550
of exporting symbols.

54
00:02:41,550 --> 00:02:43,530
We'll see that later.

55
00:02:43,530 --> 00:02:46,500
But for now here's my
simple example function.

56
00:02:46,500 --> 00:02:48,810
Example.JS is the file.

57
00:02:48,810 --> 00:02:53,490
So in Visual Studio
Code, here's my example.

58
00:02:53,490 --> 00:02:55,260
That's the example I want to test.

59
00:02:55,260 --> 00:02:56,460
What could be easier than that?

60
00:02:56,460 --> 00:02:58,530
So to write some tests

61
00:02:58,530 --> 00:03:00,390
Do you know, just, I've
got a color scheme.

62
00:03:00,390 --> 00:03:04,350
I've got yellow for my code
and orange for my tests.

63
00:03:04,350 --> 00:03:05,730
I hope you like it.

64
00:03:05,730 --> 00:03:07,680
So the first thing we need to do

65
00:03:07,680 --> 00:03:11,880
in our test is we need to import the file

66
00:03:11,880 --> 00:03:14,670
and the symbols that we want to test.

67
00:03:14,670 --> 00:03:17,640
Okay. So the require function in NodeJS

68
00:03:17,640 --> 00:03:19,620
is like an import statement.

69
00:03:19,620 --> 00:03:21,180
You give it to the name of the file.

70
00:03:21,180 --> 00:03:22,800
So from the current folder

71
00:03:22,800 --> 00:03:25,170
it'll import the example .JS file.

72
00:03:25,170 --> 00:03:28,050
It kind of knows that it's
looking for the JS file.

73
00:03:28,050 --> 00:03:32,220
So it'll import the example, .JS file.

74
00:03:32,220 --> 00:03:35,970
And in that file, I
exported the add function.

75
00:03:35,970 --> 00:03:37,620
Okay. So this gives me access.

76
00:03:37,620 --> 00:03:40,500
This is basically
importing the add function

77
00:03:40,500 --> 00:03:41,643
from that module.

78
00:03:42,600 --> 00:03:45,690
Okay. So first of all,
import the add function

79
00:03:45,690 --> 00:03:47,700
then I've got a test function.

80
00:03:47,700 --> 00:03:52,620
Test is a Jest function,
as you would imagine.

81
00:03:52,620 --> 00:03:55,650
And alternatively, you can say it.

82
00:03:55,650 --> 00:03:59,250
Okay. So instead of saying
test, you can say it

83
00:03:59,250 --> 00:04:00,810
and inside this function

84
00:04:00,810 --> 00:04:04,410
inside the test function
or inside the it function

85
00:04:04,410 --> 00:04:06,930
you basically specify the
test that you want to do.

86
00:04:06,930 --> 00:04:09,393
And this is in my example.test file.

87
00:04:10,750 --> 00:04:14,820
Okay. So just for the sake
of completeness in VS code

88
00:04:14,820 --> 00:04:17,253
this is my example test file.

89
00:04:19,020 --> 00:04:23,730
Okay. So let's dig a bit
deeper into this test function.

90
00:04:23,730 --> 00:04:27,510
The test function takes two parameters.

91
00:04:27,510 --> 00:04:31,920
The first parameter is a
free-format string that basically

92
00:04:31,920 --> 00:04:34,050
describes the purpose of the test.

93
00:04:34,050 --> 00:04:36,570
Okay. So you can put any
message you want in there

94
00:04:36,570 --> 00:04:37,800
including spaces.

95
00:04:37,800 --> 00:04:38,633
That's fine.

96
00:04:38,633 --> 00:04:41,460
This is the name that's
going to appear when

97
00:04:41,460 --> 00:04:42,480
you run the test.

98
00:04:42,480 --> 00:04:45,330
Okay. So you make it nice and
clear what the purpose is.

99
00:04:45,330 --> 00:04:47,220
That's the first parameter.

100
00:04:47,220 --> 00:04:50,790
The second parameter is a Lambda.

101
00:04:50,790 --> 00:04:53,190
Okay? So this is or an arrow function.

102
00:04:53,190 --> 00:04:58,050
If you prefer, this is the
code that you want to execute

103
00:04:58,050 --> 00:04:58,920
for your test.

104
00:04:58,920 --> 00:05:03,630
So defined this as an
ECMAScript6 arrow function, or

105
00:05:03,630 --> 00:05:06,270
if you prefer you can call it a Lambda.

106
00:05:06,270 --> 00:05:10,080
Okay? So that code will
be executed for that test.

107
00:05:10,080 --> 00:05:15,030
So inside my Lambda, you
call the expect function.

108
00:05:15,030 --> 00:05:18,300
This is similar to assert.

109
00:05:18,300 --> 00:05:21,330
If you've used J unit, the
expect function is where

110
00:05:21,330 --> 00:05:24,570
you specify what you expect to happen.

111
00:05:24,570 --> 00:05:28,830
So the expect function specifies
the operation to perform.

112
00:05:28,830 --> 00:05:31,260
It will invoke this operation.

113
00:05:31,260 --> 00:05:34,410
It adds one and two, not rocket science.

114
00:05:34,410 --> 00:05:37,020
And obviously that will return a value

115
00:05:37,020 --> 00:05:40,260
and whatever it returns, I'm
hoping it's going to be three.

116
00:05:40,260 --> 00:05:43,530
I'm expecting the result to be three.

117
00:05:43,530 --> 00:05:46,140
ToBe it's called a matcher.

118
00:05:46,140 --> 00:05:49,140
And the way it works is by equality.

119
00:05:49,140 --> 00:05:53,970
It takes the value that you
specified here, the result

120
00:05:53,970 --> 00:05:57,120
of that function, and it
compares it for equality

121
00:05:57,120 --> 00:05:58,620
against this result here.

122
00:05:58,620 --> 00:06:03,540
Hopefully the add function,
the result will be three.

123
00:06:03,540 --> 00:06:05,190
Okay. So that's fairly straightforward

124
00:06:05,190 --> 00:06:08,760
but that's the way that you
that's the way you write it.

125
00:06:08,760 --> 00:06:12,780
Okay. Next thing is, how do
you actually run the test?

126
00:06:12,780 --> 00:06:15,510
So what you do, just
open up a command window

127
00:06:15,510 --> 00:06:18,240
in the folder and just run Jest

128
00:06:18,240 --> 00:06:22,140
and that will run the test
and hopefully it'll pass.

129
00:06:22,140 --> 00:06:25,068
So when you run the test in my Lesson1

130
00:06:25,068 --> 00:06:28,290
example01 folder, I run Jest.

131
00:06:28,290 --> 00:06:31,717
What it does, it looks
for all files that have a

132
00:06:31,717 --> 00:06:36,270
.test filing and it'll
execute all the test functions

133
00:06:36,270 --> 00:06:39,840
and all the it functions in those files.

134
00:06:39,840 --> 00:06:42,480
So it found one test and it passed.

135
00:06:42,480 --> 00:06:45,600
So we get a nice green pass symbol.

136
00:06:45,600 --> 00:06:47,280
Okay. I'm a bit of a skeptic.

137
00:06:47,280 --> 00:06:48,789
So I'm gonna actually
try running this actually

138
00:06:48,789 --> 00:06:52,080
in real life to see if
this really happens.

139
00:06:52,080 --> 00:06:53,980
So I'm gonna go into a command window.

140
00:06:55,779 --> 00:06:56,612
[Instructor] Here's my command window

141
00:06:56,612 --> 00:06:58,473
in the correct folder.

142
00:06:59,651 --> 00:07:01,650
[Instructor] And I'm
going to run Jest here.

143
00:07:01,650 --> 00:07:04,620
So like I said, it
scans the command folder

144
00:07:04,620 --> 00:07:09,067
for all files by default
that have a test file name.

145
00:07:09,067 --> 00:07:11,040
It found that one

146
00:07:11,040 --> 00:07:14,850
that file had one test
function, which passed.

147
00:07:14,850 --> 00:07:15,840
Great.

148
00:07:15,840 --> 00:07:16,833
What if it failed?

149
00:07:18,450 --> 00:07:20,430
You get a big red marker

150
00:07:20,430 --> 00:07:23,430
and it tells you where it went wrong.

151
00:07:23,430 --> 00:07:28,170
So I'm gonna deliberately
hijack my code so that it fails.

152
00:07:28,170 --> 00:07:30,090
It tries to add two numbers together

153
00:07:30,090 --> 00:07:31,950
but it gets it wrong, somehow.

154
00:07:31,950 --> 00:07:35,310
So let's change my code
to introduce a bike

155
00:07:35,310 --> 00:07:37,773
and then we'll see how it fails the test.

156
00:07:38,910 --> 00:07:41,673
Right? So my code example.JS.

157
00:07:42,600 --> 00:07:46,420
So the add function,
it gets two parameters

158
00:07:47,438 --> 00:07:51,240
but I accidentally get
my algorithm incorrect

159
00:07:51,240 --> 00:07:52,817
and I return wibble.

160
00:07:54,060 --> 00:07:56,280
Okay. An easy mistake to make.

161
00:07:56,280 --> 00:07:58,230
That's my add function, now.

162
00:07:58,230 --> 00:07:59,880
It should have added the numbers together.

163
00:07:59,880 --> 00:08:01,893
Instead it returns wibble.

164
00:08:02,730 --> 00:08:05,400
What's gonna happen when I run the test?

165
00:08:05,400 --> 00:08:09,120
Well, we just saw what's gonna happen.

166
00:08:09,120 --> 00:08:10,120
Let's give it a try.

167
00:08:12,150 --> 00:08:14,460
So just run the tests again.

168
00:08:14,460 --> 00:08:17,760
So it will obviously
run, locate the test file

169
00:08:17,760 --> 00:08:18,840
run the test.

170
00:08:18,840 --> 00:08:20,990
And it gives me an error
message and a big red error

171
00:08:20,990 --> 00:08:25,230
message. So the whole
thing, if one test fails

172
00:08:25,230 --> 00:08:26,493
the whole thing fails.

173
00:08:27,660 --> 00:08:30,132
This is the name of my, this is the string

174
00:08:30,132 --> 00:08:32,163
in my test function.

175
00:08:33,360 --> 00:08:35,460
This is the statement that failed.

176
00:08:35,460 --> 00:08:38,982
And it, it has a nice color
code in, I dunno, if you can see

177
00:08:38,982 --> 00:08:43,577
that the value that it
received back was wibble.

178
00:08:44,975 --> 00:08:48,060
The value that it
expected to be was three.

179
00:08:48,060 --> 00:08:50,160
Okay. So basically it kind of shows me

180
00:08:50,160 --> 00:08:52,380
where the error occurred.

181
00:08:52,380 --> 00:08:54,990
There was one test that it found

182
00:08:54,990 --> 00:08:56,340
And it failed.

183
00:08:56,340 --> 00:08:57,690
So I would go back here

184
00:08:57,690 --> 00:09:01,320
and I would realize the
it's the add function.

185
00:09:01,320 --> 00:09:03,930
That seems to be in error.

186
00:09:03,930 --> 00:09:05,820
I wonder if I can fix the bug.

187
00:09:05,820 --> 00:09:07,530
Oh, I can see it.

188
00:09:07,530 --> 00:09:09,390
It should have not returned wibble.

189
00:09:09,390 --> 00:09:13,173
It should have returned the
actual sum, fix the bug.

190
00:09:14,160 --> 00:09:16,410
Okay, great.

191
00:09:16,410 --> 00:09:17,733
Run the test again.

192
00:09:20,771 --> 00:09:22,680
And hopefully this time it's gonna work.

193
00:09:22,680 --> 00:09:24,580
If it doesn't work, I start panicking.

194
00:09:25,620 --> 00:09:27,120
Right? So that's worked.

195
00:09:27,120 --> 00:09:28,980
That was easy enough.

196
00:09:28,980 --> 00:09:33,480
If you want to, there is another
way of running the tests.

197
00:09:33,480 --> 00:09:36,450
I mentioned the package.json file.

198
00:09:36,450 --> 00:09:37,950
In the package.json file.

199
00:09:37,950 --> 00:09:39,363
I've defined a script.

200
00:09:40,200 --> 00:09:44,430
I've set up a name script called test.

201
00:09:44,430 --> 00:09:47,250
So I can basically run this command

202
00:09:47,250 --> 00:09:50,790
as a yarn command or as a
node package manager command.

203
00:09:50,790 --> 00:09:52,640
I can basically run it like this now.

204
00:09:53,821 --> 00:09:55,920
Okay. I can say yarn test.

205
00:09:55,920 --> 00:10:00,627
When you say yarn, yarn looks
for the package .JSON file.

206
00:10:00,627 --> 00:10:02,970
And it looks for a script called test.

207
00:10:02,970 --> 00:10:04,620
There it is.

208
00:10:04,620 --> 00:10:06,940
So that's another way
of running the Jest tool

209
00:10:07,968 --> 00:10:11,790
or alternatively, I could
say node package manager run

210
00:10:11,790 --> 00:10:14,070
and I can give it the name of the script

211
00:10:14,070 --> 00:10:15,991
and it'll run that there.

212
00:10:15,991 --> 00:10:18,090
Okay. So you can either
just run jest on its own

213
00:10:18,090 --> 00:10:21,810
or you can say yarn test or NPM run test.

214
00:10:21,810 --> 00:10:23,670
So for example

215
00:10:23,670 --> 00:10:28,670
NPM run test doesn't
really gain you anything.

216
00:10:28,710 --> 00:10:31,323
It's just another way of running the test.

217
00:10:32,670 --> 00:10:34,560
Okay. So you can see it's running jest

218
00:10:34,560 --> 00:10:36,630
it located the test command.

219
00:10:36,630 --> 00:10:39,720
The test command basically
equates to running jest.

220
00:10:39,720 --> 00:10:42,603
Jest has run my test and it's worked fine.