1
00:00:00,000 --> 00:00:04,858
[MUSIC]

2
00:00:04,858 --> 00:00:09,967
The fragrance of jasmine from
all those flower garlands

3
00:00:09,967 --> 00:00:14,218
on the temple street
wafting through the air.

4
00:00:14,218 --> 00:00:17,684
What a settling feeling.

5
00:00:17,684 --> 00:00:20,510
Must be the good karma from my past life.

6
00:00:23,749 --> 00:00:25,857
Sorry, where was I?

7
00:00:25,857 --> 00:00:29,703
I was talking to you about
angular testing, right?

8
00:00:29,703 --> 00:00:34,743
And we're going to use karma
adjustment to do our angular testing.

9
00:00:34,743 --> 00:00:37,769
So let's get on with it.

10
00:00:37,769 --> 00:00:45,571
One good thing about using the Angular CLI
is that it sets up all the scaffolding for

11
00:00:45,571 --> 00:00:49,869
you to automatically
include the support for

12
00:00:49,869 --> 00:00:53,393
testing your Angular application.

13
00:00:53,393 --> 00:00:59,108
So you will notice that whenever
you generate a component or

14
00:00:59,108 --> 00:01:03,454
a service along with
the component ts files,

15
00:01:03,454 --> 00:01:08,942
you will also notice a file
called component.spect.ts

16
00:01:08,942 --> 00:01:13,422
already included into
your project folders.

17
00:01:13,422 --> 00:01:17,423
And also,
if you go to the package.json file,

18
00:01:17,423 --> 00:01:24,434
you will see that there is already support
for the Angular testing included there.

19
00:01:24,434 --> 00:01:30,640
So if you go into the dev dependencies
you will see that the jasmine core,

20
00:01:30,640 --> 00:01:34,201
the jasmine spec reporter, the karma and

21
00:01:34,201 --> 00:01:39,394
karma related npm modules
are already installed within your

22
00:01:39,394 --> 00:01:44,414
angular application that is
scaffold out by Angular CLI.

23
00:01:44,414 --> 00:01:47,716
So, we have all the things and place for

24
00:01:47,716 --> 00:01:53,538
us to just get on with doing our
testing for our angular application.

25
00:01:53,538 --> 00:01:58,617
So, if you look around
you'll see that there is

26
00:01:58,617 --> 00:02:03,572
a file called test.ts
in your source folder,

27
00:02:03,572 --> 00:02:07,269
so let's open the test.ts file.

28
00:02:07,269 --> 00:02:11,518
You'll also see that there is
another folder here called to e2e.

29
00:02:11,518 --> 00:02:16,409
We will come back to that
in the next exercise.

30
00:02:16,409 --> 00:02:21,232
But in the test.ts folder,
you will see that this is where

31
00:02:21,232 --> 00:02:25,084
your karma support is
being configured here.

32
00:02:25,084 --> 00:02:29,551
So going into this test.ts file,
by default,

33
00:02:29,551 --> 00:02:33,907
when you use the angular CLS support for
test,

34
00:02:33,907 --> 00:02:38,261
it'll run the tests for
all the components and

35
00:02:38,261 --> 00:02:43,750
services that are included
in your angular application.

36
00:02:43,750 --> 00:02:49,017
Now, I am going to illustrate
to you how to do testing for

37
00:02:49,017 --> 00:02:53,516
one specific component, the menuComponent.

38
00:02:53,516 --> 00:03:00,469
So I want to restrict myself to only
use the menu component .spec file and

39
00:03:00,469 --> 00:03:04,696
do the testing for
just the menu component.

40
00:03:04,696 --> 00:03:07,823
So, go into the test.ts file.

41
00:03:07,823 --> 00:03:16,388
One way we can configure the Angular CLIs
test to run the test only for

42
00:03:16,388 --> 00:03:22,397
a specific component is
to go to this line here,

43
00:03:22,397 --> 00:03:29,308
which says const context and
then change this to menu,

44
00:03:29,308 --> 00:03:36,088
you can see /menu\.component and
spec.ts file.

45
00:03:36,088 --> 00:03:41,615
Earlier it was just /\.spec.ts file,
which meant that you

46
00:03:41,615 --> 00:03:47,992
will run all the spec files that
are there in your project source folder.

47
00:03:47,992 --> 00:03:51,379
So, right now, by specifying this here,

48
00:03:51,379 --> 00:03:57,225
I am interested to run the test only for
the menu component spec file here.

49
00:03:57,225 --> 00:04:02,285
Now this I figure out by
searching around on the stack

50
00:04:02,285 --> 00:04:08,268
overflow where I found somebody
giving me the answer to this,

51
00:04:08,268 --> 00:04:12,985
pointing to some resource on Angular CLI,
and so

52
00:04:12,985 --> 00:04:18,393
that's how I figured out that
this is the way to restrict

53
00:04:18,393 --> 00:04:23,019
the test to a specific
component's test file.

54
00:04:23,019 --> 00:04:28,465
So after making a change to the test.ts
file, let's save the change.

55
00:04:28,465 --> 00:04:32,622
Now, we will try to run our
test on the menu component.

56
00:04:32,622 --> 00:04:37,198
So as you see, in the menu component,
we already have the menu

57
00:04:37,198 --> 00:04:42,051
component .spec.ts file,
which contains some code already.

58
00:04:42,051 --> 00:04:45,631
Let's try to run this test and
see what happens.

59
00:04:45,631 --> 00:04:50,650
Going to the terminal, add the prompt,
type ng test, and this

60
00:04:50,650 --> 00:04:56,644
will result in an Angular CLI starting
the testing for the menu component.

61
00:04:56,644 --> 00:04:59,875
So when you type this and hit the Return,

62
00:04:59,875 --> 00:05:05,216
then Angular CLI will start
compiling your angular application.

63
00:05:05,216 --> 00:05:10,129
It will also open a browser window,
in my case it will open a Chrome browser

64
00:05:10,129 --> 00:05:13,874
window and then use that
browser window to run the test.

65
00:05:13,874 --> 00:05:20,992
And you see that in the back, you have
the Chrome browser window running and

66
00:05:20,992 --> 00:05:25,980
it is all full of red and
a whole bunch of words there.

67
00:05:25,980 --> 00:05:30,937
The same information will also be
printed out in your console window,

68
00:05:30,937 --> 00:05:34,980
and from this I can see that
my test did not run correctly.

69
00:05:34,980 --> 00:05:41,070
There is something not configured properly
in my test file, so I'll need to go and

70
00:05:41,070 --> 00:05:47,272
edit my test file to include appropriate
support for running this test correctly.

71
00:05:47,272 --> 00:05:51,425
So let's go to the menu
component spec.ts file and

72
00:05:51,425 --> 00:05:54,430
then prepare our test accordingly.

73
00:05:54,430 --> 00:06:00,134
Now we can leave the ng
test running right here.

74
00:06:00,134 --> 00:06:04,337
Anytime you make changes to
the mini component.ts file or

75
00:06:04,337 --> 00:06:07,169
the mini component.spec.ts file and

76
00:06:07,169 --> 00:06:12,078
save the changes, this test will
automatically run at that point.

77
00:06:12,078 --> 00:06:17,011
So, let's Let's go to
the MenuComponent.spect.ts file.

78
00:06:17,011 --> 00:06:21,882
Going to the MenuComponent.spect.ts file,

79
00:06:21,882 --> 00:06:30,417
we understand that the spect file uses the
Jasmine syntax for describing the test.

80
00:06:30,417 --> 00:06:33,478
So you already noticed that
there is something here

81
00:06:33,478 --> 00:06:38,118
which starts out with describe and
then there is a function defined in there.

82
00:06:38,118 --> 00:06:43,174
So this is what I was referring to when I
talked about the Jasmine syntax earlier.

83
00:06:43,174 --> 00:06:47,961
And also if you scroll down
you'll see an it or so in there.

84
00:06:47,961 --> 00:06:53,922
And in addition, you'll see
something called beforeEach, here.

85
00:06:53,922 --> 00:06:59,594
Let's examine this file in a bit
more detail to understand how this

86
00:06:59,594 --> 00:07:05,794
file is configured, and how this test
is set up in this particular file.

87
00:07:05,794 --> 00:07:10,843
So within this test file,
you will notice that

88
00:07:10,843 --> 00:07:17,979
we are importing here a set of
classes from Angular core testing.

89
00:07:17,979 --> 00:07:22,874
So this module enables you to
provide the testing support for

90
00:07:22,874 --> 00:07:29,603
your angular application, and enables you
to design the test for your component.

91
00:07:29,603 --> 00:07:33,304
So you see that I am importing async and

92
00:07:33,304 --> 00:07:39,105
ComponentFixture and
TestBed from this testing library.

93
00:07:39,105 --> 00:07:40,955
I'm going to call it testing library.

94
00:07:40,955 --> 00:07:44,783
Also you see that the MenuComponent
is also imported here.

95
00:07:44,783 --> 00:07:47,220
Now, once we understand these two,

96
00:07:47,220 --> 00:07:51,788
let's walk down the code to understand
what we are trying to do here.

97
00:07:51,788 --> 00:07:56,358
So, here, as you expect,
this describe here is

98
00:07:56,358 --> 00:08:02,330
specifying that this particular
function is describing,

99
00:08:02,330 --> 00:08:08,129
A Jasmine based test that we are
specifying for our Angular application.

100
00:08:08,129 --> 00:08:11,056
So when you look at the describe here,

101
00:08:11,056 --> 00:08:15,181
you will see that this includes
all this code in here.

102
00:08:15,181 --> 00:08:19,950
So this is part of one single set of
tests that we are running are our

103
00:08:19,950 --> 00:08:21,670
menu component.

104
00:08:21,670 --> 00:08:26,670
So inside the describe,
you will see that there is a string here.

105
00:08:26,670 --> 00:08:32,120
This specifies this particular set
of tests that you're running here.

106
00:08:32,120 --> 00:08:34,130
So, it says on the menu component.

107
00:08:34,130 --> 00:08:36,770
So here you can specify
whatever string you want.

108
00:08:36,770 --> 00:08:39,930
You can use this as a description to

109
00:08:39,930 --> 00:08:43,610
specify what this particular
set of tests are doing.

110
00:08:43,610 --> 00:08:46,930
So here,
I'm going to stay with a before thing.

111
00:08:46,930 --> 00:08:49,380
We are trying to test the menu component.

112
00:08:49,380 --> 00:08:53,320
And after that, you see that we
are specifying an addo function here.

113
00:08:53,320 --> 00:08:57,036
Within this addo function,
we are going to construct the test.

114
00:08:57,036 --> 00:09:00,700
For our MenuComponent here.

115
00:09:00,700 --> 00:09:05,670
So after this, you will see that we
are declaring a variable called component,

116
00:09:05,670 --> 00:09:08,080
which is of the type MenuComponent.

117
00:09:08,080 --> 00:09:11,950
Now and then,
we're also declaring a fixture variable,

118
00:09:11,950 --> 00:09:14,140
which is of the type ComponentFixture.

119
00:09:15,390 --> 00:09:19,060
Which is of the type MenuComponent.

120
00:09:19,060 --> 00:09:21,180
Now, why is this interesting?

121
00:09:21,180 --> 00:09:24,450
Now, within our Angular application,

122
00:09:24,450 --> 00:09:27,130
we have the MenuComponent that
we have already designed.

123
00:09:27,130 --> 00:09:29,990
So So in this test file,

124
00:09:29,990 --> 00:09:35,310
we're going to create that MenuComponent
using the angular TestBed,

125
00:09:35,310 --> 00:09:38,110
and then we're going to carry out
the tests on the MenuComponent.

126
00:09:38,110 --> 00:09:40,580
So we're going to isolate
the MenuComponent, and

127
00:09:40,580 --> 00:09:45,760
then carry out unit tests
on that specific component.

128
00:09:45,760 --> 00:09:50,470
Now, this is where
the angular testing utilities

129
00:09:50,470 --> 00:09:54,900
which come with support using TestBed.

130
00:09:54,900 --> 00:09:58,890
The TestBed allows me to set up
the environment within which

131
00:09:58,890 --> 00:10:01,280
I can test my angular component.

132
00:10:01,280 --> 00:10:04,935
So here,
you see that we are saying TestBed and

133
00:10:04,935 --> 00:10:11,049
then calling the configure testing
module method of the TestBed class here.

134
00:10:11,049 --> 00:10:14,233
And inside this configure testing module,

135
00:10:14,233 --> 00:10:19,406
you can declare a bunch of things,
and you will see me adding more here.

136
00:10:19,406 --> 00:10:24,296
This acts exactly like
the NG module configuration

137
00:10:24,296 --> 00:10:27,714
that you do for our at module there.

138
00:10:27,714 --> 00:10:30,950
So all the information that you need for

139
00:10:30,950 --> 00:10:35,375
setting up the MenuComponent
will be declared here.

140
00:10:35,375 --> 00:10:40,022
So the NG model part that
you saw in the app module,

141
00:10:40,022 --> 00:10:45,999
similar kind of syntax can be used
here to declare the support for

142
00:10:45,999 --> 00:10:49,690
testing the MenuComponent here.

143
00:10:49,690 --> 00:10:55,849
And also after this, you will see this
function called to compileComponents.

144
00:10:55,849 --> 00:11:00,205
So this method will compile
the MenuComponent and

145
00:11:00,205 --> 00:11:03,427
make it ready for doing the testing.

146
00:11:03,427 --> 00:11:08,852
Note also, that this whole thing,
this function here,

147
00:11:08,852 --> 00:11:14,250
is enclosed inside something
called an async here.

148
00:11:14,250 --> 00:11:16,548
Now, why do we need this async?

149
00:11:16,548 --> 00:11:21,315
Now, because the preparation
of the components using this

150
00:11:21,315 --> 00:11:25,711
compileComponents method
takes some amount of time.

151
00:11:25,711 --> 00:11:30,643
And until this is completed,
we can't proceed forward with the tests.

152
00:11:30,643 --> 00:11:34,583
So using the async module,
we are essentially specifying that

153
00:11:34,583 --> 00:11:39,432
I'm going to wait for this whole thing
to complete before proceeding forward.

154
00:11:39,432 --> 00:11:42,107
So the asynch module as you see,

155
00:11:42,107 --> 00:11:47,690
wraps a test function inside
an asynchronous test zone.

156
00:11:47,690 --> 00:11:52,510
So, what this means is that this
test will automatically complete

157
00:11:52,510 --> 00:11:56,830
when all the asynchronous calls
inside this zone are done.

158
00:11:56,830 --> 00:12:03,755
So this is what the use of
the async that we have here, does.

159
00:12:03,755 --> 00:12:08,206
So what this means is that you
can use this sync function,

160
00:12:08,206 --> 00:12:14,442
either in the before each or in the it
also, so within the it, our declaration.

161
00:12:14,442 --> 00:12:20,032
So when you see within the it also,
you will see that you can use the async.

162
00:12:20,032 --> 00:12:24,160
So in case you have any operations
here that done asynchronously.

163
00:12:24,160 --> 00:12:29,500
Then you need to wait for those operations
to complete for that test to complete.

164
00:12:29,500 --> 00:12:33,996
So for example,
if you are calling a service and wait for

165
00:12:33,996 --> 00:12:37,070
the service to return the value then.

166
00:12:37,070 --> 00:12:41,997
All that needs to complete
before you can proceed forward.

167
00:12:41,997 --> 00:12:48,603
So those are enabled by using this async,
to surround this function here.

168
00:12:48,603 --> 00:12:53,726
Now, in addition, the second beforeEach,
now we have separated

169
00:12:53,726 --> 00:12:59,592
this into two separate beforeEach here,
because we want this to complete.

170
00:12:59,592 --> 00:13:04,592
And this compileComponents is going
to take a certain amount of time,

171
00:13:04,592 --> 00:13:09,000
especially if your component
is using an external template,

172
00:13:09,000 --> 00:13:11,570
as we do in our MenuComponent.

173
00:13:11,570 --> 00:13:16,850
So, it requires some time for
the external template to get ready for

174
00:13:16,850 --> 00:13:19,430
my testing to proceed forward.

175
00:13:19,430 --> 00:13:22,210
So, we need to wait for
this whole thing to complete.

176
00:13:22,210 --> 00:13:25,634
So that is why after this is complete,

177
00:13:25,634 --> 00:13:30,449
then we will get to the second
part where we are going to

178
00:13:30,449 --> 00:13:35,710
get some references to some
values from the test bed.

179
00:13:35,710 --> 00:13:40,752
Now, what is this beforeEach
function that you are doing here?

180
00:13:40,752 --> 00:13:45,718
What the beforeEach means is that
whatever you declare inside here,

181
00:13:45,718 --> 00:13:49,313
that function will be
executed beforeEach test,

182
00:13:49,313 --> 00:13:53,012
that you are going to specify
later on using the it.

183
00:13:53,012 --> 00:13:57,734
So using this beforeEach,
you can set up the initial

184
00:13:57,734 --> 00:14:02,253
configuration for
your test to proceed forward.

185
00:14:02,253 --> 00:14:05,923
So meaning that here,
we are setting up our TestBed,

186
00:14:05,923 --> 00:14:10,330
preparing our menu component and
then setting up a few things for

187
00:14:10,330 --> 00:14:14,752
our menu component, before we
proceed on to carry out the test.

188
00:14:14,752 --> 00:14:19,292
So for each of the test that you're
going to specify using an it here,

189
00:14:19,292 --> 00:14:23,428
these before each whatever you
specify in this before each,

190
00:14:23,428 --> 00:14:26,692
will be executed before
the test is conducted.

191
00:14:26,692 --> 00:14:30,008
So here as you can see I
am preparing the TestBed.

192
00:14:30,008 --> 00:14:34,980
Then after,
I am getting access to the fixture.

193
00:14:34,980 --> 00:14:39,143
So I am using the TestBed, I'm saying
createComponent and MenuComponent.

194
00:14:39,143 --> 00:14:43,782
So this will return me a reference
to the MenuComponent that

195
00:14:43,782 --> 00:14:47,215
I'm creating within my
test script here and

196
00:14:47,215 --> 00:14:52,130
then get a reference to that,
because I will need a reference to

197
00:14:52,130 --> 00:14:57,178
that in order to do some manipulations
on that component there.

198
00:14:57,178 --> 00:15:02,608
In addition, from the fixture,
I am getting an access to the component

199
00:15:02,608 --> 00:15:07,324
instance that is being created
by my component fixture here.

200
00:15:07,324 --> 00:15:12,828
So as you can see, the component
fixture of the type MenuComponent and

201
00:15:12,828 --> 00:15:18,799
then calling the componentInstance,
gives me access to that specific menu

202
00:15:18,799 --> 00:15:25,259
component that I have created inside the
TestBed for carrying out the unit tests.

203
00:15:25,259 --> 00:15:30,004
Now, after this we call
this this detectChanges.

204
00:15:30,004 --> 00:15:35,482
Now, what this means is that this will
proceed forward only after all the changes

205
00:15:35,482 --> 00:15:40,254
are completed, and then recognize
that the changes have completed.

206
00:15:40,254 --> 00:15:45,686
So this will trigger a change
detection cycle for this component.

207
00:15:45,686 --> 00:15:50,323
So what this means is that this
will ensure that you have made any

208
00:15:50,323 --> 00:15:54,086
changes earlier,
all the changes are detected and

209
00:15:54,086 --> 00:16:00,170
everything is stabilized before you
can proceed forward with your test.

210
00:16:00,170 --> 00:16:07,500
Now, after this, we're going to use our
it to configure our first test here.

211
00:16:07,500 --> 00:16:10,500
What is the first test
that we are doing here?

212
00:16:10,500 --> 00:16:11,520
The first test,

213
00:16:11,520 --> 00:16:15,670
what we're going to test is to make sure
that the component has been created.

214
00:16:15,670 --> 00:16:21,848
So, within this here, I'm using
the Jasmin syntax and I'm saying it.

215
00:16:21,848 --> 00:16:27,035
And then here you can give
a description in the form of a string

216
00:16:27,035 --> 00:16:31,760
to specify what this test
is actually testing about.

217
00:16:31,760 --> 00:16:33,640
So, what we are saying is,

218
00:16:33,640 --> 00:16:37,540
we are testing to see if the component
has been created or not.

219
00:16:37,540 --> 00:16:40,810
So to do that,
I'm saying it should create meaning that,

220
00:16:40,810 --> 00:16:44,610
this setup here should have
created the component correctly.

221
00:16:44,610 --> 00:16:49,350
So that's why inside here,
I'm using this method called expect.

222
00:16:49,350 --> 00:16:53,760
So the expect method inside
here takes a value here, and

223
00:16:53,760 --> 00:16:57,840
then you can test to see if
this value satisfies something.

224
00:16:57,840 --> 00:17:04,640
So here we are saying toBeTruthy, meaning
that this particular value should be true.

225
00:17:04,640 --> 00:17:09,950
That is what is specified by this
method called here called toBetruthy.

226
00:17:09,950 --> 00:17:15,010
You can also say toBefalsy,
meaning that should evaluate to false.

227
00:17:15,010 --> 00:17:15,873
But in this case,

228
00:17:15,873 --> 00:17:19,510
we are testing to make sure that
the component has been created correctly.

229
00:17:19,510 --> 00:17:24,000
So that's why we're saying
expect toBetruthy here.

230
00:17:24,000 --> 00:17:28,877
So this is a simple test that we
are doing to make sure that our

231
00:17:28,877 --> 00:17:32,404
component is correctly getting created.

232
00:17:32,404 --> 00:17:37,713
But as we realize when I run this test,
it is not running correctly.

233
00:17:37,713 --> 00:17:42,638
Let's quickly glance and
see what the problem is within

234
00:17:42,638 --> 00:17:47,770
our component creation in
the console window there.

235
00:17:47,770 --> 00:17:51,390
Going back to the console window,
let me just browse back and

236
00:17:51,390 --> 00:17:54,840
see where the problem is.

237
00:17:54,840 --> 00:17:59,820
And I'm beginning to notice that this
is specifying that it doesn't seem

238
00:17:59,820 --> 00:18:04,480
to be recognizing some of the things
that my component is using.

239
00:18:04,480 --> 00:18:09,065
In particular,
it is saying that the MdSpinach

240
00:18:09,065 --> 00:18:13,191
is something that it doesn't recognize,

241
00:18:13,191 --> 00:18:17,330
the MdGetGridList and a few other things.

242
00:18:17,330 --> 00:18:21,289
That immediately suggests to me
that I need to do a few more

243
00:18:21,289 --> 00:18:26,170
configurations within my test file
before my test can run correctly.

244
00:18:26,170 --> 00:18:30,994
So, let's go back to our spec file and
make some changes to it.

245
00:18:30,994 --> 00:18:34,142
Going back to our spec file,

246
00:18:34,142 --> 00:18:40,182
from our recollection of how
we created the template.

247
00:18:40,182 --> 00:18:44,865
We know that within the template we had
a router link in the MenuComponent's

248
00:18:44,865 --> 00:18:45,605
template.

249
00:18:45,605 --> 00:18:50,325
So I need support for
routing in order to recognize that router

250
00:18:50,325 --> 00:18:54,698
link that we used within
the MenuComponent.html file.

251
00:18:54,698 --> 00:18:59,640
So this is where I'm going to import

252
00:18:59,640 --> 00:19:03,926
another test support provided

253
00:19:03,926 --> 00:19:09,199
called as the RouterTestingModule,

254
00:19:09,199 --> 00:19:18,615
which is available from
Angular/router/testing library here.

255
00:19:18,615 --> 00:19:21,625
So this router testing
module will enable me to

256
00:19:21,625 --> 00:19:24,135
configure some aspects about my router.

257
00:19:24,135 --> 00:19:28,235
We will see that the way we use this is
a little different from the router module

258
00:19:28,235 --> 00:19:30,195
that we have used in our application.

259
00:19:30,195 --> 00:19:34,835
So we will import the routing
testing module, also you note

260
00:19:34,835 --> 00:19:39,640
that we are using some animations, and

261
00:19:39,640 --> 00:19:45,660
also using the Angular material
component within our template.

262
00:19:45,660 --> 00:19:49,410
So I need to import

263
00:19:49,410 --> 00:19:57,079
the BrowserAnimationsModule
into my test file.

264
00:19:58,490 --> 00:20:05,070
So this comes from
the angular/platform/browser.

265
00:20:05,070 --> 00:20:09,619
Now you'll notice that we need to do
this explicitly here simply because,

266
00:20:10,700 --> 00:20:16,960
in the actual Angular application
all this was in the app module,

267
00:20:16,960 --> 00:20:20,310
and so that was available for
the components.

268
00:20:20,310 --> 00:20:24,340
Right now we are testing this component,
the MenuComponent in isolation, so

269
00:20:24,340 --> 00:20:27,500
that's why it doesn't know
about all these things so

270
00:20:27,500 --> 00:20:31,190
we need to explicitly specify
all these things here.

271
00:20:31,190 --> 00:20:38,569
So I will import that from IM
platform browser animation here.

272
00:20:38,569 --> 00:20:43,358
So angular.platform.browser animations
importing the browser animations

273
00:20:43,358 --> 00:20:44,220
module here.

274
00:20:44,220 --> 00:20:47,300
Let me include the flex layer module, so

275
00:20:47,300 --> 00:20:53,060
I will include Angular FlexLayout.

276
00:20:53,060 --> 00:20:58,525
So these are needed because
I need them in the template,

277
00:20:58,525 --> 00:21:02,605
I'm going to also import that dish from,

278
00:21:06,495 --> 00:21:09,348
Shared/dish because as you will see later,

279
00:21:09,348 --> 00:21:14,125
I need to configure, A,

280
00:21:20,002 --> 00:21:26,070
DishService because my MenuComponent

281
00:21:26,070 --> 00:21:31,033
depends upon the DishService so

282
00:21:31,033 --> 00:21:35,170
I need that also in place.

283
00:21:35,170 --> 00:21:39,170
Although you will see that I
am going to stop that out.

284
00:21:39,170 --> 00:21:44,860
I'll explain that in a short while, and
also I need to import a few more things.

285
00:21:44,860 --> 00:21:47,410
I will import DISHES from,

286
00:21:48,530 --> 00:21:53,260
you recall that we use this
constant called DISHES

287
00:21:56,870 --> 00:22:01,640
that we exported from
the shared/dishes.ts file.

288
00:22:01,640 --> 00:22:05,650
I will need that in order to
configure a few more things.

289
00:22:05,650 --> 00:22:09,702
I'm also going to import the baseURL.

290
00:22:11,343 --> 00:22:19,105
Which I declared in the, Shared/base

291
00:22:21,057 --> 00:22:23,368
url file.

292
00:22:23,368 --> 00:22:28,692
And also, I need to import

293
00:22:28,692 --> 00:22:33,294
the Observable from,

294
00:22:35,992 --> 00:22:41,319
rxjs, slash, Because I

295
00:22:41,319 --> 00:22:47,220
will also be using Observable a little
bit later, when I configure a few things.

296
00:22:47,220 --> 00:22:50,806
So now, I have imported all these things.

297
00:22:50,806 --> 00:22:56,157
Getting down into the TestBed
configuration, you see that this

298
00:22:56,157 --> 00:23:02,813
part is exactly like the engine module
decorator that we have in the app module.

299
00:23:02,813 --> 00:23:07,450
So this is where I can
also use the imports just

300
00:23:07,450 --> 00:23:11,000
like I did with the engine module.

301
00:23:11,000 --> 00:23:16,900
And within the imports,
I'm going to import the BrowserAnimation

302
00:23:16,900 --> 00:23:21,765
module because that is something
is that l require, and

303
00:23:21,765 --> 00:23:25,090
then also import FlexLayout module.

304
00:23:26,660 --> 00:23:32,690
And also the RouterTestingModule because

305
00:23:32,690 --> 00:23:36,540
I would need the RouterTestingModule
to configure a few things.

306
00:23:36,540 --> 00:23:40,705
Now, when you use the RouterTestingModule,
you need to use this method

307
00:23:40,705 --> 00:23:46,950
calledwithRoutes instead of using forRoot
as we used with the router module here.

308
00:23:46,950 --> 00:23:52,400
So within this withRoutes
you can specify some default

309
00:23:52,400 --> 00:23:58,460
routes that you need for
your specific application here.

310
00:23:58,460 --> 00:24:03,737
I'm just going to configure
only one single path here,

311
00:24:03,737 --> 00:24:09,359
and that is good enough for
me for testing this module here.

312
00:24:09,359 --> 00:24:14,497
So I am just going to say path: 'menu',

313
00:24:14,497 --> 00:24:19,021
and component: MenuComponent.

314
00:24:19,021 --> 00:24:24,235
Since the MenuComponent templates is
using certain material components,

315
00:24:24,235 --> 00:24:26,523
let's go ahead and import them.

316
00:24:26,523 --> 00:24:35,263
So we will import the MatGridListModule

317
00:24:35,263 --> 00:24:45,034
from @angular/material/grid-list and

318
00:24:45,034 --> 00:24:54,033
also the MatProgressSpinnerModule from

319
00:24:54,033 --> 00:25:03,747
@angular/material/progress-spinner.

320
00:25:04,327 --> 00:25:09,123
And once we have imported them,
then let's go ahead and

321
00:25:09,123 --> 00:25:13,322
include them into the imports
down below there.

322
00:25:13,322 --> 00:25:19,568
So let's add in the MatGridListModule and
the MatProgressSpinnerModule.

323
00:25:19,568 --> 00:25:23,047
And that is all that I need for

324
00:25:23,047 --> 00:25:28,997
this particular imports
to be configured here.

325
00:25:28,997 --> 00:25:34,422
So along with the imports,
we have the declarations where I have

326
00:25:34,422 --> 00:25:41,067
the MenuComponent being used here,
I can also configure the providers here.

327
00:25:41,067 --> 00:25:43,295
So I need to configure the providers here.

328
00:25:43,295 --> 00:25:47,998
Now this is where we are going

329
00:25:47,998 --> 00:25:52,898
to create a few stubs here, so

330
00:25:52,898 --> 00:25:58,779
I will say provide: DishService.

331
00:25:58,779 --> 00:26:02,825
Now, the DishService that we're going to
use here is not going to be the real

332
00:26:02,825 --> 00:26:03,713
DishService.

333
00:26:03,713 --> 00:26:08,422
When you're testing a component,
you don't want to use a real service.

334
00:26:08,422 --> 00:26:12,750
Instead, you risk stubbing
out the service, and

335
00:26:12,750 --> 00:26:19,262
then use a stub DishService, which I
am going to call as dishServiceStub.

336
00:26:19,262 --> 00:26:27,040
So I will say, useValue: dishServiceStub.

337
00:26:27,040 --> 00:26:32,018
So this would be a stub function
that I will use in order

338
00:26:32,018 --> 00:26:34,904
to mark the DishService here.

339
00:26:34,904 --> 00:26:38,272
So that is one that I am
going to make use of.

340
00:26:38,272 --> 00:26:42,776
And also the second one that I am

341
00:26:42,776 --> 00:26:47,455
going to make use of is BaseURL,

342
00:26:47,455 --> 00:26:54,040
which I am going to use
the value as the baseURL

343
00:26:54,040 --> 00:26:59,951
that we have already imported earlier.

344
00:26:59,951 --> 00:27:06,280
So, now, with this, I have actually
configured my testing module,

345
00:27:06,280 --> 00:27:11,644
so notice that the way we specify
this is exactly like the way

346
00:27:11,644 --> 00:27:17,160
we specify the NG module decorator for
our app module.

347
00:27:17,160 --> 00:27:22,250
And here, we are only configuring those
that are required by the MenuComponent, so

348
00:27:22,250 --> 00:27:27,890
I don't have the other ones that
we use in the app module itself.

349
00:27:27,890 --> 00:27:32,220
So this is how we will
configure the testing module.

350
00:27:32,220 --> 00:27:36,600
Now the one thing missing
is this dishServiceStub.

351
00:27:36,600 --> 00:27:41,718
So what I'm going to do is to

352
00:27:41,718 --> 00:27:47,283
implement a function here and

353
00:27:47,283 --> 00:27:53,072
call that let dishServiceStub

354
00:27:53,072 --> 00:27:59,973
be a simple JavaScript object here,

355
00:27:59,973 --> 00:28:05,537
which I am going to let it act in

356
00:28:05,537 --> 00:28:10,679
place of the real service.

357
00:28:10,679 --> 00:28:13,067
We can stub out services
like this as seen here.

358
00:28:13,067 --> 00:28:17,807
So inside here, I'm just going to

359
00:28:17,807 --> 00:28:21,846
supply a simple function,

360
00:28:21,846 --> 00:28:26,412
the getDishes function here,

361
00:28:26,412 --> 00:28:33,803
which will return Observable
of Dish array type.

362
00:28:33,803 --> 00:28:38,133
So that is exactly how the return
value was configured there.

363
00:28:38,133 --> 00:28:42,776
And I'm going to return

364
00:28:42,776 --> 00:28:48,819
an observable of DISHES here.

365
00:28:48,819 --> 00:28:51,692
So using this stub function here,

366
00:28:51,692 --> 00:28:56,349
what I am doing is I am stubbing
out the dishService, and

367
00:28:56,349 --> 00:29:00,906
then configuring it with this
one method that I need for

368
00:29:00,906 --> 00:29:06,158
my cache, saying getDishes, and
when this method is called,

369
00:29:06,158 --> 00:29:09,355
I'm just going to return this value.

370
00:29:09,355 --> 00:29:11,334
The DISHES constant, here.

371
00:29:11,334 --> 00:29:16,740
So this way, now you can see that
how I am controlling what is being

372
00:29:16,740 --> 00:29:23,449
supplied to the component from a stub
dishService that I have just created here.

373
00:29:23,449 --> 00:29:27,333
So this is how you will create stubs for
your dishService.

374
00:29:27,333 --> 00:29:30,570
The other approach that we can use for

375
00:29:30,570 --> 00:29:35,910
cases where we are using services
is called as using the spy.

376
00:29:37,300 --> 00:29:42,840
Jasmine supports something called Spy,
which allows us to spy on function calls,

377
00:29:42,840 --> 00:29:47,040
and then capture the function calls, and
then respond to those function call.

378
00:29:47,040 --> 00:29:52,981
So that is another way of using a fake
service in place of the real service.

379
00:29:52,981 --> 00:29:59,778
So now we are able to control what is
being supplied to our menu component.

380
00:29:59,778 --> 00:30:04,410
So after these modifications, then we're

381
00:30:04,410 --> 00:30:09,424
going to go down into our
before each method here.

382
00:30:09,424 --> 00:30:14,172
After the async, what I am going to do

383
00:30:14,172 --> 00:30:19,085
is I will get hold of the dishService.

384
00:30:19,085 --> 00:30:24,187
So you see that I am using the test
bed and then using the get

385
00:30:24,187 --> 00:30:31,415
method of the test bed to get ahold of the
DishService that has been created here,

386
00:30:31,415 --> 00:30:37,819
from this particular stub that we
have declared here in the providers.

387
00:30:39,520 --> 00:30:43,140
So this gives me a reference
to the DishService so

388
00:30:43,140 --> 00:30:47,870
that I can call the methods of
the DishService wherever I need here.

389
00:30:47,870 --> 00:30:52,453
So after making these changes,
let's save the changes and

390
00:30:52,453 --> 00:30:57,679
then see how our Angular CLI will
run this test after these changes,

391
00:30:57,679 --> 00:31:02,369
and whether our test will be
successful at this point or not.

392
00:31:02,369 --> 00:31:04,462
So let's save the changes.

393
00:31:04,462 --> 00:31:09,412
The moment you save the changes
you will notice that your NG

394
00:31:09,412 --> 00:31:13,060
test will start rerunning our test again.

395
00:31:13,060 --> 00:31:16,310
So it will compile the application and
then rerun the test.

396
00:31:16,310 --> 00:31:21,450
And voila,
our test successfully passed after

397
00:31:22,540 --> 00:31:27,574
making the changes to our
component.spec.ts file.

398
00:31:27,574 --> 00:31:33,270
So our first test, meaning that we
are now able to create a menu component

399
00:31:33,270 --> 00:31:37,950
from our menu,
component.spec.ts file there.

400
00:31:37,950 --> 00:31:40,990
So our test setup is working right.

401
00:31:40,990 --> 00:31:48,460
Now I can go in and do more intense
tests within my test component.

402
00:31:48,460 --> 00:31:53,790
Going back to that menu component.spec
file, let me add in another test.

403
00:31:53,790 --> 00:32:00,420
Now you see that because I now
have an established service here

404
00:32:00,420 --> 00:32:07,292
which is returning this DISHES value I
can then now make use of my dishService,

405
00:32:07,292 --> 00:32:11,290
to which I have got the reference in here.

406
00:32:11,290 --> 00:32:15,934
Inside was before each, and
then call the getDishes method and

407
00:32:15,934 --> 00:32:18,830
then I'll be able to obtain the value.

408
00:32:18,830 --> 00:32:23,800
And that'll be available within my menu
component that l have just created.

409
00:32:23,800 --> 00:32:28,615
So my MenuComponent should now get
access to the dishes constant that

410
00:32:28,615 --> 00:32:32,856
has been supplied back to it
through this dishservice stop.

411
00:32:32,856 --> 00:32:37,608
So I can now test to see if
the dishes variable inside my

412
00:32:37,608 --> 00:32:43,642
MenuComponent is actually receiving
the values correctly or not.

413
00:32:43,642 --> 00:32:46,982
So going in,
let me create another test here.

414
00:32:46,982 --> 00:32:52,413
So I will create a test here, With the it,

415
00:32:52,413 --> 00:32:57,228
as you saw earlier, so
just like the previous one.

416
00:32:57,228 --> 00:33:03,447
This second test I'm going
to call that as it and

417
00:33:03,447 --> 00:33:09,460
dishes, Items should be 4,

418
00:33:09,460 --> 00:33:14,605
because the dishes constant
that we declared in

419
00:33:14,605 --> 00:33:21,562
the shared.dishes file has four
dishes in the constant there.

420
00:33:21,562 --> 00:33:26,232
So when my dishes variable
inside my MenuComponent or

421
00:33:26,232 --> 00:33:31,018
ts file gets initialized
by calling the dishservice.

422
00:33:31,018 --> 00:33:34,632
It should have received
those four dishes and

423
00:33:34,632 --> 00:33:37,970
got initialized with those four dishes.

424
00:33:37,970 --> 00:33:43,182
So I'm going to carry out a few
tests on that dishes variable there.

425
00:33:43,182 --> 00:33:46,492
So how do I get access to
the dishes variable here?

426
00:33:46,492 --> 00:33:50,431
So I would say it dishes
items should be 4, and

427
00:33:50,431 --> 00:33:54,171
then I will declare
an arrow function here.

428
00:33:54,171 --> 00:33:59,453
And inside this arrow
function I'm going to specify

429
00:33:59,453 --> 00:34:04,024
the various tests that
I'm going to carry out.

430
00:34:04,024 --> 00:34:10,348
So here I'm going to now
say expect(component.,

431
00:34:10,348 --> 00:34:15,378
and notice that it automatically gives me

432
00:34:15,378 --> 00:34:22,290
access to this dishes property
from the MenuComponent.

433
00:34:22,290 --> 00:34:27,400
So I can say that component.dishes,
and then I can test

434
00:34:27,400 --> 00:34:34,053
to see that the length of that dishes
JavaScript object array should be.

435
00:34:34,053 --> 00:34:38,367
So this is where I use
the Jasmine's toBe method here.

436
00:34:38,367 --> 00:34:41,517
And then I can specify the value 4,

437
00:34:41,517 --> 00:34:46,347
because I was supplying 4
dishes in my dishes constant

438
00:34:46,347 --> 00:34:51,284
that I have declared in
the shared.dishes file there.

439
00:34:51,284 --> 00:34:54,709
So that is the first test
that I'm going to carry out,

440
00:34:54,709 --> 00:34:56,867
this should turn out to be true.

441
00:34:56,867 --> 00:35:01,096
Otherwise the setup did
not work correctly, so

442
00:35:01,096 --> 00:35:05,120
I know that my code is
not working correctly.

443
00:35:05,120 --> 00:35:09,891
But I know for sure that this
test should work out correctly.

444
00:35:09,891 --> 00:35:11,547
If you want to be sure,

445
00:35:11,547 --> 00:35:16,011
let's save the changes and
then go and see our test running.

446
00:35:16,011 --> 00:35:18,084
Going to that terminal,

447
00:35:18,084 --> 00:35:23,323
you see that now my app is being
recompiled, and the test runs.

448
00:35:23,323 --> 00:35:27,941
And notice all the greens
in the terminal window.

449
00:35:27,941 --> 00:35:32,355
It says executed 1 of 2 success,
executed 2 of 2 success.

450
00:35:32,355 --> 00:35:36,021
Which means that both my
tests ran successfully.

451
00:35:36,021 --> 00:35:41,221
If I look at my browser, so
you see that the MenuComponent,

452
00:35:41,221 --> 00:35:44,031
both the tests are successful.

453
00:35:44,031 --> 00:35:46,189
Let me create a few more and

454
00:35:46,189 --> 00:35:51,994
add them to that set of second group
of tests that I'm creating there.

455
00:35:51,994 --> 00:35:58,106
Going to the menu_component_spec.ts file,
I will add in one more.

456
00:35:58,106 --> 00:36:05,535
I will say expect component.,

457
00:36:05,535 --> 00:36:12,420
and I will say dishes[1].

458
00:36:12,420 --> 00:36:16,105
Recall that the first dish's name was,

459
00:36:18,858 --> 00:36:22,552
So that is what I'm going to test,
the dishes[1].name.

460
00:36:22,552 --> 00:36:26,774
So this is how I can test to see if
it is receiving the values correctly.

461
00:36:26,774 --> 00:36:28,431
What are all the ways that I can test?

462
00:36:28,431 --> 00:36:34,594
If I put a dot there, it'll give me a
suggestion of all the possibilities here.

463
00:36:34,594 --> 00:36:42,862
So I will say, I will also
again use the toBe method here.

464
00:36:42,862 --> 00:36:45,623
And then the second dish name is,

465
00:36:51,916 --> 00:36:55,779
Just that there, so that is the second
caster I'm going to carry out.

466
00:36:55,779 --> 00:36:59,819
So if my code ran correctly,
then this should also pass.

467
00:36:59,819 --> 00:37:03,389
Similarly, let me put in one more here.

468
00:37:03,389 --> 00:37:06,072
So I'll say expect,

469
00:37:09,579 --> 00:37:16,457
Component.dishes and I will say 3.

470
00:37:16,457 --> 00:37:21,520
And in here, the featured

471
00:37:21,520 --> 00:37:26,819
property should be Falsy.

472
00:37:26,819 --> 00:37:33,572
That you should be false, it is not true
in this case, so let me add in one more.

473
00:37:33,572 --> 00:37:35,748
You can start adding more if you want,

474
00:37:35,748 --> 00:37:38,405
play around with it
until you're satisfied.

475
00:37:38,405 --> 00:37:40,936
So do those additions.
Let me save the changes that I've made

476
00:37:40,936 --> 00:37:44,292
here, let's go and
see if this test runs correctly.

477
00:37:44,292 --> 00:37:50,041
And going back to my terminal,
you see that my test is again running.

478
00:37:50,041 --> 00:37:52,720
You see that both
the tests were successful,

479
00:37:52,720 --> 00:37:55,551
now I'm going to make one
of those things fail.

480
00:37:55,551 --> 00:37:59,754
So I'm going to go in and
change this to truthy.

481
00:37:59,754 --> 00:38:03,950
See, that is the fun of
playing around with code.

482
00:38:03,950 --> 00:38:08,111
I'm going to change this to truthy and
I know that this test is going to fail.

483
00:38:08,111 --> 00:38:10,186
So let's save the changes.

484
00:38:10,186 --> 00:38:15,977
Taking a look at the terminal,
there you see the test has failed.

485
00:38:15,977 --> 00:38:23,603
You see all this red here, meaning that
the second test did not pass correctly.

486
00:38:23,603 --> 00:38:30,750
And if you scroll backwards,
you would see this particular test failed,

487
00:38:30,750 --> 00:38:36,295
because somewhere down there
it'll say that it did not.

488
00:38:36,295 --> 00:38:42,119
Okay, see this statement here it
says expected false to be truthy,

489
00:38:42,119 --> 00:38:44,378
so that's why it failed.

490
00:38:44,378 --> 00:38:47,978
So it was not supposed to be true,
but I said it should be true, and

491
00:38:47,978 --> 00:38:51,393
obviously the test is wrong,
so that's why the test failed.

492
00:38:51,393 --> 00:38:55,865
So this is how you can even
test to see if the test fails,

493
00:38:55,865 --> 00:38:59,086
if you asked for the wrong things also.

494
00:38:59,086 --> 00:39:04,107
But again, let me go back and
correct that one more time.

495
00:39:04,107 --> 00:39:09,068
So going back to my, File I'll change them

496
00:39:09,068 --> 00:39:13,529
back to falsy,
because I want this test to run correctly.

497
00:39:13,529 --> 00:39:15,517
Now we're not satisfied yet.

498
00:39:15,517 --> 00:39:20,117
Now in this particular test
I am only testing the dishes

499
00:39:20,117 --> 00:39:23,825
variable that is inside my MenuComponent.

500
00:39:23,825 --> 00:39:29,777
How do I go about playing around
with the template itself?

501
00:39:29,777 --> 00:39:35,454
So this is where we need
some more help from Angular.

502
00:39:35,454 --> 00:39:40,216
To carry out some tests on the template,
I'm going to go in and

503
00:39:40,216 --> 00:39:42,972
pull in a couple more imports here.

504
00:39:42,972 --> 00:39:49,896
So going to my top of this file,
menu_component_spec.tsfile.

505
00:39:49,896 --> 00:39:55,105
I'm going to import, One

506
00:39:55,105 --> 00:40:00,594
more called By, which is a method.

507
00:40:00,594 --> 00:40:03,044
You will see me using
this in a short while.

508
00:40:03,044 --> 00:40:10,855
This should be imported from, Angular,

509
00:40:15,209 --> 00:40:18,863
/platform-browser.

510
00:40:18,863 --> 00:40:27,301
And also, I'm going to import one
more which is a debug element.

511
00:40:27,301 --> 00:40:32,009
The debug element allows me
to get access to the DOM so

512
00:40:32,009 --> 00:40:37,040
that I can carry out tests on
the DOM elements directly.

513
00:40:37,040 --> 00:40:44,548
So that's where I'm going to import this
from, the Angular code here, so these two.

514
00:40:44,548 --> 00:40:49,580
So add in the By and
the DebugElement to the imports, and

515
00:40:49,580 --> 00:40:54,947
then once you do that,
we will walk down into the code here.

516
00:40:54,947 --> 00:40:59,338
And then we will add in one more test
where we are going to go into the DOM and

517
00:40:59,338 --> 00:41:01,690
fetch one of the items from the doc.

518
00:41:01,690 --> 00:41:06,404
So I would say it, so one more test here,

519
00:41:06,404 --> 00:41:09,889
what is this test going to do?

520
00:41:09,889 --> 00:41:14,970
For this test, I will specify

521
00:41:14,970 --> 00:41:22,903
the test as should use
dishes in the template.

522
00:41:22,903 --> 00:41:25,838
I'm just randomly saying something here,

523
00:41:25,838 --> 00:41:29,804
because I just want to check to
see that the dishes variable,

524
00:41:29,804 --> 00:41:34,905
whatever it is making available,
is being used in the template correctly.

525
00:41:34,905 --> 00:41:38,412
So that's the part that I'm setting up,
and

526
00:41:38,412 --> 00:41:42,104
then the second part is
the arrow function, and

527
00:41:42,104 --> 00:41:47,760
within this arrow function I'm going to
supply the code for the next test.

528
00:41:47,760 --> 00:41:52,734
So inside this arrow function what I'm

529
00:41:52,734 --> 00:41:58,008
going to do is I will
first call fixture and

530
00:41:58,008 --> 00:42:00,880
then detect changes.

531
00:42:00,880 --> 00:42:05,990
And then after that I will say let de:,

532
00:42:12,226 --> 00:42:13,908
Is a DebugElement.

533
00:42:13,908 --> 00:42:20,748
Through this I'm going to
get access to the DOM and

534
00:42:20,748 --> 00:42:26,566
then the element would be HTMLElement.

535
00:42:26,566 --> 00:42:33,243
So I want to get access to one
of the HTMLElements from my DOM.

536
00:42:33,243 --> 00:42:35,369
So which element do I want?

537
00:42:35,369 --> 00:42:38,846
So to do that, I will get access to the,

538
00:42:41,533 --> 00:42:48,138
DebugElement by saying fixture and
debugElement.

539
00:42:48,138 --> 00:42:54,933
So this allows me to get access to
items from my DOM here so debugElement.

540
00:42:54,933 --> 00:43:02,220
And then I can query and then pick only
those that will be of interest to me.

541
00:43:02,220 --> 00:43:08,690
So I'm going to query and
then I will ask for by using the By.

542
00:43:08,690 --> 00:43:15,908
So notice where I am using the By
that I have included by importing it.

543
00:43:15,908 --> 00:43:20,780
So By, the By supports a bunch
of metrics by which I can

544
00:43:20,780 --> 00:43:25,020
ask to access particular
elements in the DOM.

545
00:43:25,020 --> 00:43:31,824
So as you can see it'll tell
me what I can import and

546
00:43:31,824 --> 00:43:36,846
then the .css allows me to get access

547
00:43:36,846 --> 00:43:43,018
to match elements by
the given css selector.

548
00:43:43,018 --> 00:43:45,789
So what is the css selector
that I'm going to use?

549
00:43:45,789 --> 00:43:50,503
I know that there is an h1 element,
html element in the DOM and

550
00:43:50,503 --> 00:43:55,750
that I'm going to get access to
the first h1 element from the DOM.

551
00:43:55,750 --> 00:44:00,764
And one of the h1 elements
in there is the one that

552
00:44:00,764 --> 00:44:05,670
is going to display the name
of each dish there.

553
00:44:05,670 --> 00:44:10,459
Look back and you see that inside
the grid timeline using a h1 and

554
00:44:10,459 --> 00:44:13,839
that h1 contains the name
of the dish there.

555
00:44:13,839 --> 00:44:16,723
So I'm going to get hold of that and

556
00:44:16,723 --> 00:44:21,198
then I'm going to get an element and
then I would say de,

557
00:44:21,198 --> 00:44:26,385
from the debug element, and
then I would say nativeElement.

558
00:44:26,385 --> 00:44:31,572
And that gives me access to
the element specifically in the DOM

559
00:44:31,572 --> 00:44:37,873
that I am referring to and I have
selected by using this statement earlier.

560
00:44:37,873 --> 00:44:43,091
So when I query the DOM and
then say, return me all

561
00:44:43,091 --> 00:44:48,964
those which are using the tag h1 for
the HTML element.

562
00:44:48,964 --> 00:44:54,077
And I get access to that,
and I can query and

563
00:44:54,077 --> 00:44:58,349
say expect (el.textContent).

564
00:44:58,349 --> 00:45:02,869
So I'm looking for
the content inside this h1 in my

565
00:45:02,869 --> 00:45:07,718
template fixed content and
then I will say toContain.

566
00:45:07,718 --> 00:45:12,596
So this is another method, toContain,
this is a Jasmine method called toContain.

567
00:45:12,596 --> 00:45:18,352
This checks to see if that
contains a particular value,

568
00:45:18,352 --> 00:45:23,262
and then I will check for DISHES(0).name.

569
00:45:23,262 --> 00:45:29,360
So is the first dish been created
in the DOM and added into the DOM?

570
00:45:29,360 --> 00:45:33,981
If my template works correctly,
then that must be present in the DOM.

571
00:45:33,981 --> 00:45:38,626
So that is what I'm going to check to
see if the grid tile corresponding to

572
00:45:38,626 --> 00:45:42,658
the first DISH has been created and
added into the DOM or not.

573
00:45:42,658 --> 00:45:47,521
So I say DISHES(0).name,
and say to uppercase.

574
00:45:47,521 --> 00:45:52,395
Recall that I used the uppercase
pipe to display the name

575
00:45:52,395 --> 00:45:56,647
of the DISH by converting
the name of the dish into

576
00:45:56,647 --> 00:46:01,450
all uppercase in the grid
tile in the menu component.

577
00:46:01,450 --> 00:46:05,830
So that is what I'm going to check for,
okay, so I'm just checking for

578
00:46:05,830 --> 00:46:07,200
only one of them.

579
00:46:07,200 --> 00:46:10,983
You can carry out many of those tests,
you can check for

580
00:46:10,983 --> 00:46:16,016
DISHES(1).name and
then DISHES(2).name and more if you want.

581
00:46:16,016 --> 00:46:21,683
I'm just illustrating one example of how
you would access elements of the DOM and

582
00:46:21,683 --> 00:46:24,783
then check what they contain inside there.

583
00:46:24,783 --> 00:46:29,585
So this is one test that I'm going to
conduct here, so let me save the changes,

584
00:46:29,585 --> 00:46:32,930
and then see if the test runs correctly.

585
00:46:32,930 --> 00:46:35,951
Go into that terminal and
when the test runs,

586
00:46:35,951 --> 00:46:41,039
you see that my first test was successful,
the second test was successful,

587
00:46:41,039 --> 00:46:44,635
and the third test was also successful,
wonderful.

588
00:46:44,635 --> 00:46:48,374
Now, let me make the third test fail.

589
00:46:48,374 --> 00:46:52,273
Going to the menucomponentspec.ts file,

590
00:46:52,273 --> 00:46:58,818
I'm going to remove this to uppercase,
and then carry out the same test.

591
00:46:58,818 --> 00:47:02,269
You will see that this test will fail,
save the changes.

592
00:47:02,269 --> 00:47:06,941
And when the test runs, you will
see that the third test will fail.

593
00:47:06,941 --> 00:47:11,251
Because I am causing it to fail by
checking for the wrong thing there and

594
00:47:11,251 --> 00:47:13,894
there you go, the third test failed here.

595
00:47:13,894 --> 00:47:18,490
So this is how you can check to
see whether certain things that

596
00:47:18,490 --> 00:47:22,471
are supposed to be there
are there correctly or not.

597
00:47:22,471 --> 00:47:28,360
Why is this case, so you can see here,
the reason why this test failed.

598
00:47:28,360 --> 00:47:34,750
It is expecting this to be in the DOM,

599
00:47:34,750 --> 00:47:40,670
but instead this is what is in
the DOM in the h1 element in the DOM.

600
00:47:40,670 --> 00:47:43,929
So that's the reason why
the test failed here.

601
00:47:43,929 --> 00:47:47,718
So again going back let me
correct the mistake and

602
00:47:47,718 --> 00:47:53,922
then when I rerun the test you should now
see that the test passes successfully.

603
00:47:53,922 --> 00:47:58,757
Going back to the terminal you will
see that when this test runs now it'll

604
00:47:58,757 --> 00:47:59,875
run correctly.

605
00:48:03,610 --> 00:48:08,670
And there you go, all the three
tests are passed by my application.

606
00:48:08,670 --> 00:48:13,970
Also, looking at the browser,
you can see that the three tests

607
00:48:13,970 --> 00:48:19,770
successfully were executed on
the menu components template file and

608
00:48:19,770 --> 00:48:22,571
also the menu component itself.

609
00:48:22,571 --> 00:48:28,398
Now obviously, this is not necessarily
the most comprehensive test but

610
00:48:28,398 --> 00:48:32,407
I just wanted to give you
a flavor of how you would go

611
00:48:32,407 --> 00:48:37,398
about constructing tests within
your Angular application.

612
00:48:37,398 --> 00:48:42,025
If you get carried away you can go into
all the spec.ts files that you have and

613
00:48:42,025 --> 00:48:44,194
then write your own test for each and

614
00:48:44,194 --> 00:48:49,580
every one of those components using
the knowledge that you have gained here.

615
00:48:49,580 --> 00:48:55,150
Also, you can read more about testing
in the Angular documentation and

616
00:48:55,150 --> 00:49:00,590
then learn more ways of carrying out
tests on your Angular application.

617
00:49:00,590 --> 00:49:05,190
Testing is a field by itself so
if I need to teach you everything about

618
00:49:05,190 --> 00:49:10,410
testing that will be come an entire
course in itself for Angular.

619
00:49:10,410 --> 00:49:14,500
And in this course,
I just wanted to give you a flavor of how

620
00:49:14,500 --> 00:49:17,820
you will carry out testing
in your Angular application.

621
00:49:17,820 --> 00:49:21,585
And this is an example of
how we can configure and

622
00:49:21,585 --> 00:49:27,441
carry out a unit test on one of
the components in our Angular application.

623
00:49:27,441 --> 00:49:33,901
This is a good time for you to do a good
comment with the message components test.

624
00:49:33,901 --> 00:49:37,750
[MUSIC]