1
00:00:06,659 --> 00:00:08,340
- In this section, we're
going to start looking

2
00:00:08,340 --> 00:00:11,220
at how to test Angular applications.

3
00:00:11,220 --> 00:00:14,310
There's quite a wide range of
different tests you can write

4
00:00:14,310 --> 00:00:17,070
but the process is basically
the same in each case.

5
00:00:17,070 --> 00:00:20,310
So what we'll do in this
example is we'll just see

6
00:00:20,310 --> 00:00:22,950
a very simple class

7
00:00:22,950 --> 00:00:26,190
and how to run it, using
the Jasmine tool set.

8
00:00:26,190 --> 00:00:27,960
So, as we've mentioned previously,

9
00:00:27,960 --> 00:00:30,180
when you use Angular CLI

10
00:00:30,180 --> 00:00:32,430
as well as creating your
template application

11
00:00:32,430 --> 00:00:35,760
it also sets up an
environment for testing.

12
00:00:35,760 --> 00:00:39,210
So we use Jasmine for testing in Angular.

13
00:00:39,210 --> 00:00:41,400
Jasmine is very similar to Jest,

14
00:00:41,400 --> 00:00:43,860
so we shouldn't see many surprises there.

15
00:00:43,860 --> 00:00:47,460
And Angular uses a tool
called Karma to run the tests.

16
00:00:47,460 --> 00:00:49,710
Karma is a test runner.

17
00:00:49,710 --> 00:00:50,543
Okay?

18
00:00:50,543 --> 00:00:53,760
It executes the tests that
we've implemented in Jasmine.

19
00:00:53,760 --> 00:00:56,430
Jasmine is the syntax for writing tests.

20
00:00:56,430 --> 00:00:59,490
Karma is the tool to run those tests.

21
00:00:59,490 --> 00:01:01,530
So I've got an example application.

22
00:01:01,530 --> 00:01:03,000
If you go into lesson 11

23
00:01:03,000 --> 00:01:04,960
Example2/HelloWorld

24
00:01:05,820 --> 00:01:08,340
that's the application that
we're going to be dissecting

25
00:01:08,340 --> 00:01:11,100
and add in a class and testing it.

26
00:01:11,100 --> 00:01:12,840
So here it is.

27
00:01:12,840 --> 00:01:16,740
I'm going to pick out the
content of the package.

28
00:01:16,740 --> 00:01:18,000
json file, first of all,

29
00:01:18,000 --> 00:01:20,070
to show you what libraries
are there for testing.

30
00:01:20,070 --> 00:01:24,450
Oh, by the way, if you want
to use this example yourself,

31
00:01:24,450 --> 00:01:26,340
you'll need to install the libraries.

32
00:01:26,340 --> 00:01:29,490
I deleted node modules in my zip file.

33
00:01:29,490 --> 00:01:33,513
So, if you wanna follow along,
you need to reinstall them.

34
00:01:34,500 --> 00:01:39,300
So, go to a command window,
lesson 11, example 2.

35
00:01:39,300 --> 00:01:41,940
Go into the Hello World demo application

36
00:01:41,940 --> 00:01:44,880
and do an npm install.

37
00:01:44,880 --> 00:01:46,470
It'll take a few moments.

38
00:01:46,470 --> 00:01:50,130
And once you've done that,
you'll then have the libraries

39
00:01:50,130 --> 00:01:52,590
in node modules and you
are only ready to go.

40
00:01:52,590 --> 00:01:53,423
Right.

41
00:01:53,423 --> 00:01:55,440
So let's take a look at package json.

42
00:01:55,440 --> 00:01:58,320
This was generated for me by Angular CLI.

43
00:01:58,320 --> 00:02:00,900
It contains the libraries and the tools

44
00:02:00,900 --> 00:02:02,670
that I need for testing purposes.

45
00:02:02,670 --> 00:02:03,503
Okay?

46
00:02:03,503 --> 00:02:05,310
So in the dev dependency section

47
00:02:05,310 --> 00:02:07,830
these are the relevant parts.

48
00:02:07,830 --> 00:02:09,330
I'll show you the actual code.

49
00:02:09,330 --> 00:02:11,010
That would be quite useful.

50
00:02:11,010 --> 00:02:12,843
So here's my package json.

51
00:02:13,950 --> 00:02:16,290
You remember with node,

52
00:02:16,290 --> 00:02:18,630
you have dependencies libraries

53
00:02:18,630 --> 00:02:20,760
that you need when your
application's running,

54
00:02:20,760 --> 00:02:23,070
and that's in the dependency section.

55
00:02:23,070 --> 00:02:24,044
Okay?

56
00:02:24,044 --> 00:02:26,430
So these are the packages or the libraries

57
00:02:26,430 --> 00:02:29,010
that my application needs at run time.

58
00:02:29,010 --> 00:02:30,210
But as well as that

59
00:02:30,210 --> 00:02:32,760
we have dependencies that
need development time,

60
00:02:32,760 --> 00:02:34,320
the dev dependencies.

61
00:02:34,320 --> 00:02:37,200
So these are tools to help
you build the application

62
00:02:37,200 --> 00:02:38,610
and to test it.

63
00:02:38,610 --> 00:02:39,810
So what have we got here?

64
00:02:39,810 --> 00:02:41,640
We got the TypeScript compiler

65
00:02:41,640 --> 00:02:43,563
because Angular is TypeScript.

66
00:02:44,910 --> 00:02:46,383
We have, oh, the Angular CLI.

67
00:02:48,000 --> 00:02:51,603
In terms of testing, we
have these libraries here.

68
00:02:53,070 --> 00:02:54,330
So where to start.

69
00:02:54,330 --> 00:02:57,660
Jasmine, core that defines the API

70
00:02:57,660 --> 00:02:59,160
for writing tests.

71
00:02:59,160 --> 00:03:01,830
Karma is the test runner.

72
00:03:01,830 --> 00:03:05,550
And Karma-Jasmine enables
it to run Jasmine tests.

73
00:03:05,550 --> 00:03:08,010
Karma enables you to do coverage testing

74
00:03:08,010 --> 00:03:10,530
to make sure that every line
of code is actually covered

75
00:03:10,530 --> 00:03:11,403
by a test.

76
00:03:12,840 --> 00:03:16,170
When you run Karma, we'll
see this in a few minutes.

77
00:03:16,170 --> 00:03:19,080
When you run Karma to execute your tests,

78
00:03:19,080 --> 00:03:22,080
it can automatically open a Chrome browser

79
00:03:22,080 --> 00:03:23,610
to display the results.

80
00:03:23,610 --> 00:03:26,130
And it can generate an html report

81
00:03:26,130 --> 00:03:29,070
to say which tests work
and which tests fail.

82
00:03:29,070 --> 00:03:31,773
The test results are
displayed in a webpage.

83
00:03:33,000 --> 00:03:35,763
So various different tests
related dependencies.

84
00:03:36,690 --> 00:03:39,690
All of those obviously get
installed in node modules.

85
00:03:39,690 --> 00:03:41,970
When you do an npm install.

86
00:03:41,970 --> 00:03:43,740
Also, probably just reminding you

87
00:03:43,740 --> 00:03:45,990
that because we are using TypeScript

88
00:03:45,990 --> 00:03:49,950
there are also some
TypeScript dependencies there.

89
00:03:49,950 --> 00:03:51,447
They define interfaces and enums

90
00:03:51,447 --> 00:03:54,750
and such like to keep the
TypeScript compiler happy.

91
00:03:54,750 --> 00:03:57,750
So we have various dev dependencies.

92
00:03:57,750 --> 00:03:59,430
What we need to do now is to see

93
00:03:59,430 --> 00:04:02,010
what does it look like to write the test?

94
00:04:02,010 --> 00:04:06,513
Okay, there's a script in
package json called test.

95
00:04:07,440 --> 00:04:09,930
It's the equivalent to ng test.

96
00:04:09,930 --> 00:04:13,590
So you can either say npm run test

97
00:04:13,590 --> 00:04:15,240
or you can just say ng test.

98
00:04:15,240 --> 00:04:19,230
When you say ng test, it'll run the tests.

99
00:04:19,230 --> 00:04:20,223
And what it does,

100
00:04:21,420 --> 00:04:25,290
there's a file that tells
it what tests to generate

101
00:04:25,290 --> 00:04:26,430
and what tests to run.

102
00:04:26,430 --> 00:04:28,890
We'll have a look at that in a moment.

103
00:04:28,890 --> 00:04:32,010
When I was putting together
this series of examples,

104
00:04:32,010 --> 00:04:35,640
obviously the purpose of
the course really is to show

105
00:04:35,640 --> 00:04:37,530
how to test real applications.

106
00:04:37,530 --> 00:04:38,880
So in an Angular application

107
00:04:38,880 --> 00:04:41,190
that would mean testing components,

108
00:04:41,190 --> 00:04:43,410
but it turns out to be
a little bit too tricky

109
00:04:43,410 --> 00:04:45,090
to do in one step.

110
00:04:45,090 --> 00:04:47,520
So I thought what would
be a useful first step

111
00:04:47,520 --> 00:04:51,000
would be to show how
to test a simple class.

112
00:04:51,000 --> 00:04:53,700
So I'm gonna use the CLI tool

113
00:04:53,700 --> 00:04:55,680
to generate a class called bank account.

114
00:04:55,680 --> 00:04:58,320
Ng is the Angular CLI,

115
00:04:58,320 --> 00:05:00,510
the g means generate.

116
00:05:00,510 --> 00:05:03,570
You can generate a whole
load of things like a class,

117
00:05:03,570 --> 00:05:07,050
give it a name, use
lowercase, and hyphens.

118
00:05:07,050 --> 00:05:09,060
It'll convert it to a capital letter

119
00:05:09,060 --> 00:05:11,303
and every hyphen will be
replaced with a capital.

120
00:05:11,303 --> 00:05:13,830
So it'll be capital B, capital A.

121
00:05:13,830 --> 00:05:15,330
It'll generate a class called Bank Account

122
00:05:15,330 --> 00:05:17,730
with a capital B and a capital A.

123
00:05:17,730 --> 00:05:21,600
And it puts it into the
a source app folder.

124
00:05:21,600 --> 00:05:23,940
So it'll generate two files,

125
00:05:23,940 --> 00:05:26,610
a file that contains the class

126
00:05:26,610 --> 00:05:28,620
and the file that contains the test

127
00:05:28,620 --> 00:05:29,940
where you can test the class.

128
00:05:29,940 --> 00:05:32,850
So, always follow these conventions,

129
00:05:32,850 --> 00:05:34,650
lowercase with hyphens,

130
00:05:34,650 --> 00:05:36,720
and follow these file extensions as well.

131
00:05:36,720 --> 00:05:39,243
It's what everybody uses
in the Angular community.

132
00:05:40,080 --> 00:05:41,820
So those have already been generated.

133
00:05:41,820 --> 00:05:43,653
I've already done this in the demo.

134
00:05:44,682 --> 00:05:47,460
And let's have look in
the source app folder.

135
00:05:47,460 --> 00:05:51,000
We have a bank account ts.

136
00:05:51,000 --> 00:05:52,110
What I've actually done,

137
00:05:52,110 --> 00:05:54,420
is I've implemented a
simple bank account class.

138
00:05:54,420 --> 00:05:56,340
We'll go through that in a moment.

139
00:05:56,340 --> 00:06:00,660
And also generated by the
Angular CLI was a spec.

140
00:06:00,660 --> 00:06:02,130
It calls them specs.

141
00:06:02,130 --> 00:06:03,630
A spec is like a test.

142
00:06:03,630 --> 00:06:07,230
A specification for the
behavior you expect to have

143
00:06:07,230 --> 00:06:10,140
from your component or class.

144
00:06:10,140 --> 00:06:12,300
I'm actually gonna generate another class

145
00:06:12,300 --> 00:06:14,010
just because I can.

146
00:06:14,010 --> 00:06:16,071
I'm gonna go into my demo folder,

147
00:06:16,071 --> 00:06:18,063
example2\HelloWorld.

148
00:06:18,063 --> 00:06:20,370
And I'm going to use the Angular CLI

149
00:06:20,370 --> 00:06:25,143
to generate a class called employee.

150
00:06:27,120 --> 00:06:29,250
So it'll generate two files,

151
00:06:29,250 --> 00:06:31,320
an employee dot ts

152
00:06:31,320 --> 00:06:34,522
and employee dot spec dot ts.

153
00:06:34,522 --> 00:06:36,873
And it'll put those into
the source app folder.

154
00:06:37,710 --> 00:06:39,420
So let's take a look.

155
00:06:39,420 --> 00:06:43,353
In my source app folder,
I now have an employee ts.

156
00:06:44,310 --> 00:06:45,690
It's exported.

157
00:06:45,690 --> 00:06:47,520
Export basically means public.

158
00:06:47,520 --> 00:06:49,890
It means that someone else can import it.

159
00:06:49,890 --> 00:06:51,270
If it didn't say export,

160
00:06:51,270 --> 00:06:53,340
then it would be private to this file.

161
00:06:53,340 --> 00:06:56,460
By default, in modern JavaScript,

162
00:06:56,460 --> 00:06:58,440
classes and functions and whatever

163
00:06:58,440 --> 00:07:01,200
are private to the current
file, to the current module.

164
00:07:01,200 --> 00:07:03,600
If you want to access them externally

165
00:07:03,600 --> 00:07:05,580
then you have to export them, like that.

166
00:07:05,580 --> 00:07:07,980
So that's my employee class exported,

167
00:07:07,980 --> 00:07:11,703
and the spec or the test, that
was automatically generated.

168
00:07:13,080 --> 00:07:15,410
It's very reminiscent of Jest, isn't it?

169
00:07:15,410 --> 00:07:17,610
It is Jasmine, technically speaking,

170
00:07:17,610 --> 00:07:19,410
but it looks just like Jest.

171
00:07:19,410 --> 00:07:23,400
Import the class from the relevant file.

172
00:07:23,400 --> 00:07:26,670
You don't have to specify employee dot ts.

173
00:07:26,670 --> 00:07:29,370
It kind of knows that
it's the employee ts file.

174
00:07:29,370 --> 00:07:31,830
It imports the employee class from there.

175
00:07:31,830 --> 00:07:33,063
There's a test suite.

176
00:07:34,290 --> 00:07:37,080
That test suite starts and ends there.

177
00:07:37,080 --> 00:07:39,510
We've seen all of this many times already.

178
00:07:39,510 --> 00:07:41,070
It has a single function.

179
00:07:41,070 --> 00:07:43,980
We use it to represent the function.

180
00:07:43,980 --> 00:07:46,320
So like a test, basically.

181
00:07:46,320 --> 00:07:49,000
The test has a textural description

182
00:07:50,070 --> 00:07:52,560
and then the body of the test.

183
00:07:52,560 --> 00:07:55,380
It just tries to create a
new instance of employee

184
00:07:55,380 --> 00:07:58,290
and verify that that comes
back not to be undefined,

185
00:07:58,290 --> 00:07:59,123
basically.

186
00:07:59,123 --> 00:08:00,180
Does that class exist?

187
00:08:00,180 --> 00:08:04,020
That's the simplest possible
test that you could write.

188
00:08:04,020 --> 00:08:05,610
Well, in terms of my bank account class,

189
00:08:05,610 --> 00:08:07,470
I decided to implement it like this.

190
00:08:07,470 --> 00:08:09,630
Export a bank account class.

191
00:08:09,630 --> 00:08:14,130
A constructor to take in a
parameter for the person's name

192
00:08:14,130 --> 00:08:16,530
with a default empty string.

193
00:08:16,530 --> 00:08:20,310
The initial balance with
a default value of zero.

194
00:08:20,310 --> 00:08:22,590
When you have a constructor in TypeScript

195
00:08:22,590 --> 00:08:26,070
and you declare the parameters
as either public or private

196
00:08:26,070 --> 00:08:27,570
it does two things.

197
00:08:27,570 --> 00:08:29,730
It takes these in as parameters

198
00:08:29,730 --> 00:08:33,450
and it all automatically declares
fields with the same name.

199
00:08:33,450 --> 00:08:36,180
So effectively, it's like
saying, this bank account

200
00:08:36,180 --> 00:08:37,590
has a data member,

201
00:08:37,590 --> 00:08:39,870
a private data member called name,

202
00:08:39,870 --> 00:08:41,490
which is initialized by that parameter.

203
00:08:41,490 --> 00:08:43,530
It takes the parameter and
it automatically adds it

204
00:08:43,530 --> 00:08:45,600
as a property into the class.

205
00:08:45,600 --> 00:08:48,420
So my bank account has a
property called underscore name

206
00:08:48,420 --> 00:08:50,550
and a property called underscore balance.

207
00:08:50,550 --> 00:08:53,010
I've got a deposit and withdraw method.

208
00:08:53,010 --> 00:08:55,680
When you implement methods in JavaScript,

209
00:08:55,680 --> 00:08:58,200
when you wanna access this object's data

210
00:08:58,200 --> 00:08:59,553
you have to say this.

211
00:09:00,480 --> 00:09:02,167
In Java or C ++ or C #,

212
00:09:03,750 --> 00:09:07,740
you don't have to say this
to refer to your own state,

213
00:09:07,740 --> 00:09:10,500
but you do have to in
JavaScript and TypeScript.

214
00:09:10,500 --> 00:09:11,850
So in this bank account,

215
00:09:11,850 --> 00:09:14,130
increment the balance or decrement it.

216
00:09:14,130 --> 00:09:16,380
Oh, and gimme the balance, please.

217
00:09:16,380 --> 00:09:18,810
The balance was private.

218
00:09:18,810 --> 00:09:20,700
That's good practice.

219
00:09:20,700 --> 00:09:23,310
So if you want to get
the balance externally

220
00:09:23,310 --> 00:09:24,780
here's a gutter.

221
00:09:24,780 --> 00:09:27,510
I can just, this looks like a function

222
00:09:27,510 --> 00:09:28,920
but I can just treat it like a field.

223
00:09:28,920 --> 00:09:31,620
I can say a bank account dot balance

224
00:09:31,620 --> 00:09:34,740
and it'll call this gutter
and it'll return the balance.

225
00:09:34,740 --> 00:09:37,020
You can also have a setter, but I don't.

226
00:09:37,020 --> 00:09:39,300
I've just got a gutter to get the balance.

227
00:09:39,300 --> 00:09:40,560
If I want to change the balance

228
00:09:40,560 --> 00:09:43,080
I've gotta call deposit or withdraw.

229
00:09:43,080 --> 00:09:44,310
So that's simple enough, isn't it?

230
00:09:44,310 --> 00:09:46,020
That's my bank account class.

231
00:09:46,020 --> 00:09:46,853
To test it,

232
00:09:49,104 --> 00:09:51,840
so here's my generated test code.

233
00:09:51,840 --> 00:09:54,750
We've seen a similar thing for
the employee class just now.

234
00:09:54,750 --> 00:09:56,460
I haven't changed this.

235
00:09:56,460 --> 00:09:58,110
So it puts it into the same folder,

236
00:09:58,110 --> 00:10:01,653
source app, bank account spec ts.

237
00:10:02,910 --> 00:10:04,320
It imports the bank account class.

238
00:10:04,320 --> 00:10:08,640
Notice with capitalization
from the bank account ts.

239
00:10:08,640 --> 00:10:10,860
Here's my test suite
for bank account class.

240
00:10:10,860 --> 00:10:15,720
I've just got one test function
should create an instance.

241
00:10:15,720 --> 00:10:16,553
There we go.

242
00:10:16,553 --> 00:10:21,510
So in my test, try to create
an object that should succeed.

243
00:10:21,510 --> 00:10:22,680
I should get back an object.

244
00:10:22,680 --> 00:10:25,740
Basically it's not null and not undefined.

245
00:10:25,740 --> 00:10:27,603
So this should work.

246
00:10:28,470 --> 00:10:29,497
Okay?

247
00:10:29,497 --> 00:10:30,480
So that's the test.

248
00:10:30,480 --> 00:10:31,350
Next question.

249
00:10:31,350 --> 00:10:32,853
How do you run the test?

250
00:10:34,140 --> 00:10:36,660
Oh, actually we using
expect script modules here.

251
00:10:36,660 --> 00:10:39,390
So we import modules like this.

252
00:10:39,390 --> 00:10:40,980
Import the bank account.

253
00:10:40,980 --> 00:10:44,130
From the bank account module
import the bank account class.

254
00:10:44,130 --> 00:10:45,600
Fair enough?

255
00:10:45,600 --> 00:10:48,030
Our tests here using Jasmine.

256
00:10:48,030 --> 00:10:50,943
But to be honest, Jasmine
and Jest are so similar,

257
00:10:52,320 --> 00:10:53,570
there's no problem there.

258
00:10:54,840 --> 00:10:56,220
This is how you can run the tests.

259
00:10:56,220 --> 00:10:59,083
Open the command window
in your demo folder

260
00:10:59,083 --> 00:11:02,040
a hello world ng test.

261
00:11:02,040 --> 00:11:05,040
And when you use the
dash dash watch option

262
00:11:05,040 --> 00:11:09,000
it observes your code
and it runs the tests.

263
00:11:09,000 --> 00:11:12,570
It automatically reruns the
tests if your code changes.

264
00:11:12,570 --> 00:11:14,520
Now, this takes a while to get going.

265
00:11:14,520 --> 00:11:17,130
Everything takes seems to
take a long time with Angular.

266
00:11:17,130 --> 00:11:18,540
So I'm just gonna start that

267
00:11:18,540 --> 00:11:20,640
while I'm talking for
the next few minutes.

268
00:11:20,640 --> 00:11:21,780
So I'm in the right folder.

269
00:11:21,780 --> 00:11:24,760
Hello world ng test

270
00:11:26,100 --> 00:11:27,363
dash dash watch.

271
00:11:28,530 --> 00:11:31,380
So I'll leave that run for a moment or two

272
00:11:31,380 --> 00:11:32,250
for it to get started.

273
00:11:32,250 --> 00:11:34,350
And while it's starting,
I'll just describe

274
00:11:34,350 --> 00:11:35,730
what actually happens.

275
00:11:35,730 --> 00:11:37,980
So when you run the command like that

276
00:11:37,980 --> 00:11:40,320
it builds the application code

277
00:11:40,320 --> 00:11:43,330
and because TypeScript has to
be converted into JavaScript

278
00:11:44,940 --> 00:11:46,440
and other things as well,

279
00:11:46,440 --> 00:11:47,820
it starts Karma.

280
00:11:47,820 --> 00:11:49,830
Karma is the test runner.

281
00:11:49,830 --> 00:11:50,663
Okay?

282
00:11:50,663 --> 00:11:53,340
So basically it fires up the Karma engine

283
00:11:53,340 --> 00:11:56,580
and Karma basically runs all the tests

284
00:11:56,580 --> 00:11:58,350
as specified by this file here.

285
00:11:58,350 --> 00:12:00,150
We'll have a look at that in a moment.

286
00:12:00,150 --> 00:12:03,690
In the source folder,
there's a file test JS.

287
00:12:03,690 --> 00:12:07,170
It tells Karma what
file pattern to look for

288
00:12:07,170 --> 00:12:10,020
when it's trying to figure
out which files are tests.

289
00:12:10,020 --> 00:12:10,980
Should we have a look?

290
00:12:10,980 --> 00:12:14,163
So in the source folder, if I
just collapse it down again,

291
00:12:15,540 --> 00:12:19,263
in my source folder,
we have a test dot CS.

292
00:12:21,630 --> 00:12:24,600
So in here it's basically telling it

293
00:12:24,600 --> 00:12:26,580
what constitutes a test file.

294
00:12:26,580 --> 00:12:31,580
So it's a bit complicated,
but it's this thing here.

295
00:12:32,100 --> 00:12:33,570
That's the important thing,

296
00:12:33,570 --> 00:12:37,713
is basically saying, run any
files that have this pattern,

297
00:12:39,240 --> 00:12:44,220
a file name called dot spec
dot ts at the end of the file.

298
00:12:44,220 --> 00:12:45,239
Okay?

299
00:12:45,239 --> 00:12:47,610
So any file name that
ends with that pattern.

300
00:12:47,610 --> 00:12:50,400
The back slash here is an escape sequence

301
00:12:50,400 --> 00:12:53,610
because dot has a special
meaning in a regular expression.

302
00:12:53,610 --> 00:12:57,330
The back slash dot means
literally just a dot.

303
00:12:57,330 --> 00:13:00,690
So any file that is dot spec dot ts

304
00:13:00,690 --> 00:13:03,900
that ends with that pattern
is considered to be a test.

305
00:13:03,900 --> 00:13:05,760
And those are the files
which have executed.

306
00:13:05,760 --> 00:13:07,260
So that's good.

307
00:13:07,260 --> 00:13:08,093
It'll find

308
00:13:08,970 --> 00:13:11,610
employee dot spec dot ts,

309
00:13:11,610 --> 00:13:14,340
and bank account dot spec dot ts.

310
00:13:14,340 --> 00:13:16,500
It'll run those tests.

311
00:13:16,500 --> 00:13:18,060
Oh, there's another one up here

312
00:13:18,060 --> 00:13:20,040
for the application component.

313
00:13:20,040 --> 00:13:23,550
So I'm gonna have basically three suites.

314
00:13:23,550 --> 00:13:25,080
A suite for the component,

315
00:13:25,080 --> 00:13:27,240
that's a little bit more complicated.

316
00:13:27,240 --> 00:13:28,530
We'll have a look at that later.

317
00:13:28,530 --> 00:13:30,330
A suite for my bank account

318
00:13:30,330 --> 00:13:32,190
and a suite for my employee.

319
00:13:32,190 --> 00:13:33,780
All of those tests have,

320
00:13:33,780 --> 00:13:36,660
those files have the correct
file name and convention.

321
00:13:36,660 --> 00:13:39,720
So those tests will be executed by Karma.

322
00:13:39,720 --> 00:13:40,950
It opens a browser window,

323
00:13:40,950 --> 00:13:44,400
Karma, opens a browser
window to show the results.

324
00:13:44,400 --> 00:13:47,520
Did the tests work or did they fail?

325
00:13:47,520 --> 00:13:51,090
I wonder how my ng test is getting on.

326
00:13:51,090 --> 00:13:52,893
Oh, it seems to have worked okay.

327
00:13:55,000 --> 00:13:58,810
It started the server, it
launched the browser with Chrome

328
00:14:00,981 --> 00:14:01,860
and it ran the tests.

329
00:14:01,860 --> 00:14:06,480
There were five tests and they've
all executed successfully.

330
00:14:06,480 --> 00:14:08,703
You can see the result in the browser.

331
00:14:11,174 --> 00:14:14,010
And it'll rerun the tests
automatically if we edit any code.

332
00:14:14,010 --> 00:14:16,290
So this is what the browser
would've looked like

333
00:14:16,290 --> 00:14:19,290
in my original example.

334
00:14:19,290 --> 00:14:21,670
In my example now, I've also got tests

335
00:14:22,855 --> 00:14:25,020
for the employee class.

336
00:14:25,020 --> 00:14:27,480
So let's have a look what
the browser looks like

337
00:14:27,480 --> 00:14:28,713
in our example.

338
00:14:30,180 --> 00:14:31,290
Here it is.

339
00:14:31,290 --> 00:14:34,800
So there was a suite for my app component.

340
00:14:34,800 --> 00:14:36,780
There was a suite for bank account

341
00:14:36,780 --> 00:14:38,670
and there was a suite for employee.

342
00:14:38,670 --> 00:14:42,060
Inside the bank account
suite there was one test.

343
00:14:42,060 --> 00:14:44,820
Inside the employee
suite there was one test.

344
00:14:44,820 --> 00:14:46,233
And they've all worked fine.

345
00:14:47,340 --> 00:14:48,660
Just in case you're wondering,

346
00:14:48,660 --> 00:14:50,910
what would it look like if it failed?

347
00:14:50,910 --> 00:14:53,550
- Let's deliberately introduce an error.

348
00:14:53,550 --> 00:14:55,263
Let's go into my employee spec.

349
00:14:56,520 --> 00:14:58,800
And what I'll do here is
I'll deliberately have

350
00:14:58,800 --> 00:15:00,150
something that fails.

351
00:15:00,150 --> 00:15:02,190
I'll say 'false'.

352
00:15:02,190 --> 00:15:04,410
Expect false to be truthy.

353
00:15:04,410 --> 00:15:06,180
Well clearly that's gonna fail.

354
00:15:06,180 --> 00:15:08,760
Let's see what it looks
like when a test fails.

355
00:15:08,760 --> 00:15:12,690
Whenever you change any code or any tests,

356
00:15:12,690 --> 00:15:17,640
the test runner is watching
your source code and your tests.

357
00:15:17,640 --> 00:15:20,760
So Karma will automatically
rerun the tests

358
00:15:20,760 --> 00:15:22,173
whenever anything changes.

359
00:15:23,040 --> 00:15:24,480
And this is what it looks like.

360
00:15:24,480 --> 00:15:26,430
I need to make it a little bit smaller.

361
00:15:27,450 --> 00:15:28,283
Okay.

362
00:15:28,283 --> 00:15:31,440
So Karma connected to
the browser environment

363
00:15:31,440 --> 00:15:35,460
but one of the tests failed,
basically this test here,

364
00:15:35,460 --> 00:15:39,300
the employee should create
an instance that failed

365
00:15:39,300 --> 00:15:40,530
and it tells you why it failed.

366
00:15:40,530 --> 00:15:43,500
Basically when an expect function fails

367
00:15:43,500 --> 00:15:45,750
it throws an exception or throws an error.

368
00:15:45,750 --> 00:15:49,293
And here's the error,
expected false to be truthy.

369
00:15:51,030 --> 00:15:55,557
I expected this to be truthy on line six.

370
00:15:55,557 --> 00:15:56,390
Okay?

371
00:15:56,390 --> 00:15:57,983
So that's the error that occurred.

372
00:15:59,280 --> 00:16:00,810
So that was really easy.

373
00:16:00,810 --> 00:16:02,580
Basically just open up a command window,

374
00:16:02,580 --> 00:16:04,980
ng test dash dash, watch,

375
00:16:04,980 --> 00:16:07,410
it'll run all the tests and
it'll keep on running them

376
00:16:07,410 --> 00:16:10,233
as you are going through
your coding process.