1
00:00:06,570 --> 00:00:07,403
- In this section

2
00:00:07,403 --> 00:00:10,500
we're going to see how
to test service classes.

3
00:00:10,500 --> 00:00:12,510
We'll also see how to test components

4
00:00:12,510 --> 00:00:15,423
that receive services injected into them.

5
00:00:16,410 --> 00:00:17,243
Okay. Right.

6
00:00:17,243 --> 00:00:19,710
The example is the same example as before,

7
00:00:19,710 --> 00:00:21,630
frequent example three.

8
00:00:21,630 --> 00:00:23,220
In the demo application,

9
00:00:23,220 --> 00:00:25,710
I implemented a product service class

10
00:00:25,710 --> 00:00:29,280
with a method that returned products.

11
00:00:29,280 --> 00:00:33,570
The service classes in Angular
are typically annotated

12
00:00:33,570 --> 00:00:36,990
with injectable provided in root.

13
00:00:36,990 --> 00:00:39,900
So quick reminder, what that means.

14
00:00:39,900 --> 00:00:43,350
The provided in root
means at the root level

15
00:00:43,350 --> 00:00:44,460
in your application,

16
00:00:44,460 --> 00:00:47,130
which will be the top level module.

17
00:00:47,130 --> 00:00:49,770
Basically, the module will be responsible

18
00:00:49,770 --> 00:00:51,900
for creating a single instance

19
00:00:51,900 --> 00:00:53,553
of your product service class.

20
00:00:54,480 --> 00:00:58,410
Any constructor that
specifies that as an input,

21
00:00:58,410 --> 00:01:01,182
like a component receiving
a product service,

22
00:01:01,182 --> 00:01:02,880
it will automatically receive that object

23
00:01:02,880 --> 00:01:05,013
passed in as a dependency injection.

24
00:01:06,120 --> 00:01:07,860
So in my example code,

25
00:01:07,860 --> 00:01:11,250
if I go into the source folder,
my application component

26
00:01:11,250 --> 00:01:13,800
which is here,

27
00:01:13,800 --> 00:01:15,480
it says in the constructor

28
00:01:15,480 --> 00:01:18,150
please, will it give me
a product service object.

29
00:01:18,150 --> 00:01:20,640
It'll automatically
receive the product service

30
00:01:20,640 --> 00:01:22,200
injected into it.

31
00:01:22,200 --> 00:01:26,700
So my application component
here, my application component,

32
00:01:26,700 --> 00:01:30,450
will automatically receive that
product service as an input,

33
00:01:30,450 --> 00:01:33,900
so we can then invoke
methods upon it like that.

34
00:01:33,900 --> 00:01:34,860
So what we're gonna do then,

35
00:01:34,860 --> 00:01:36,690
is we're gonna see how to test this.

36
00:01:36,690 --> 00:01:38,460
First of all, we'll see how to test

37
00:01:38,460 --> 00:01:40,743
the product service class on its own.

38
00:01:41,610 --> 00:01:45,090
And then, we'll see how to
test a component that uses it.

39
00:01:45,090 --> 00:01:47,760
How can we test this
component that will hopefully

40
00:01:47,760 --> 00:01:50,430
have received as an injection parameter?

41
00:01:50,430 --> 00:01:53,520
One of those, how can we
check that the dependency

42
00:01:53,520 --> 00:01:55,563
injection has worked properly?

43
00:01:56,700 --> 00:01:57,990
Well, let's see.

44
00:01:57,990 --> 00:02:00,840
So let's see how to test
the product service class.

45
00:02:00,840 --> 00:02:04,590
Here we go, product.service.spec.ts

46
00:02:04,590 --> 00:02:06,150
Let's get started.

47
00:02:06,150 --> 00:02:08,040
Right, so couple of basic things.

48
00:02:08,040 --> 00:02:10,740
Remember the test bed class.

49
00:02:10,740 --> 00:02:13,620
When you say test bed
configure testing module,

50
00:02:13,620 --> 00:02:15,330
what you would normally do here

51
00:02:15,330 --> 00:02:17,430
is you're given a bunch of components

52
00:02:17,430 --> 00:02:21,090
that your test module
needs to instantiate.

53
00:02:21,090 --> 00:02:24,090
If you're testing a
service class on its own,

54
00:02:24,090 --> 00:02:25,830
then there aren't any components,

55
00:02:25,830 --> 00:02:29,040
so we give it an empty context.

56
00:02:29,040 --> 00:02:30,870
Effectively, our testing module

57
00:02:30,870 --> 00:02:34,530
doesn't contain any components.

58
00:02:34,530 --> 00:02:38,730
What we do instead is we
inject into the test module,

59
00:02:38,730 --> 00:02:41,250
we inject product service.

60
00:02:41,250 --> 00:02:43,200
In the full blown application,

61
00:02:43,200 --> 00:02:44,970
when the application starts,

62
00:02:44,970 --> 00:02:48,210
the module would've created this service

63
00:02:48,210 --> 00:02:49,440
for us automatically.

64
00:02:49,440 --> 00:02:51,240
That's what it does.

65
00:02:51,240 --> 00:02:53,520
But if you just set up a test environment,

66
00:02:53,520 --> 00:02:55,860
and you're just testing
your product service,

67
00:02:55,860 --> 00:02:59,050
there isn't anything here
yet that would've told it

68
00:03:00,090 --> 00:03:02,430
to create a product service object,

69
00:03:02,430 --> 00:03:03,630
so you have to do it yourself.

70
00:03:03,630 --> 00:03:05,370
You say, test bed, inject.

71
00:03:05,370 --> 00:03:09,960
So effectively, the test
module that gets set up for us

72
00:03:09,960 --> 00:03:12,540
that would normally contain components.

73
00:03:12,540 --> 00:03:15,810
What we've just done there
is we've told Angular,

74
00:03:15,810 --> 00:03:17,580
or the Angular test environment,

75
00:03:17,580 --> 00:03:21,540
basically create an
instance of product service.

76
00:03:21,540 --> 00:03:22,640
So let's put it there.

77
00:03:24,584 --> 00:03:27,450
And basically put it
into the testing module

78
00:03:27,450 --> 00:03:29,430
effectively so that it
can then be injected,

79
00:03:29,430 --> 00:03:31,410
potentially, if necessary.

80
00:03:31,410 --> 00:03:34,410
It gives us back a pointer
to the object it creates.

81
00:03:34,410 --> 00:03:36,030
We give it the class name.

82
00:03:36,030 --> 00:03:37,680
It creates an instance.

83
00:03:37,680 --> 00:03:40,410
It gives us back a
reference to that instance.

84
00:03:40,410 --> 00:03:44,430
So this variable here is a pointer

85
00:03:44,430 --> 00:03:47,940
to the singleton product
service object that has

86
00:03:47,940 --> 00:03:50,553
been created because
of the inject function.

87
00:03:51,600 --> 00:03:55,080
Okay. So what we can do now
is we can invoke methods

88
00:03:55,080 --> 00:03:56,550
on that service.

89
00:03:56,550 --> 00:03:58,410
At the moment, I'm just checking,

90
00:03:58,410 --> 00:04:00,570
does that service actually exist?

91
00:04:00,570 --> 00:04:02,040
Has it been created?

92
00:04:02,040 --> 00:04:03,270
Yes.

93
00:04:03,270 --> 00:04:04,740
If I wanted to go further,

94
00:04:04,740 --> 00:04:07,770
I could have invoked the
get products method on it

95
00:04:07,770 --> 00:04:11,220
to see does it return the
correct bunch of products?

96
00:04:11,220 --> 00:04:13,950
Okay? But this is a simple way

97
00:04:13,950 --> 00:04:17,190
of getting the test bed
to create an instance

98
00:04:17,190 --> 00:04:19,950
of your service, get a handle to it,

99
00:04:19,950 --> 00:04:21,960
and then you can test
that it's being created

100
00:04:21,960 --> 00:04:24,030
and that it works properly.

101
00:04:24,030 --> 00:04:26,013
This is my product service spec.

102
00:04:27,000 --> 00:04:30,990
Okay. So injected a
service into the module

103
00:04:30,990 --> 00:04:33,030
got back a reference.

104
00:04:33,030 --> 00:04:35,430
We can then test my product service spec.

105
00:04:35,430 --> 00:04:39,653
Remember, when you run
in tests with Karma,

106
00:04:39,653 --> 00:04:43,080
you can say which tests you
want to run in particular.

107
00:04:43,080 --> 00:04:46,260
I'm just running the product
service test at the moment.

108
00:04:46,260 --> 00:04:49,410
And well, as you can
imagine, it works fine.

109
00:04:49,410 --> 00:04:51,630
So we've just seen, basically,

110
00:04:51,630 --> 00:04:53,580
we had like a simplified setup.

111
00:04:53,580 --> 00:04:55,410
We had a test module.

112
00:04:55,410 --> 00:05:00,410
We injected, or got created,
a product service object.

113
00:05:01,110 --> 00:05:03,750
Okay. Which we could then test against.

114
00:05:03,750 --> 00:05:04,650
What we're gonna do now

115
00:05:04,650 --> 00:05:06,720
is we're gonna test components

116
00:05:06,720 --> 00:05:10,080
that receive that injected into it.

117
00:05:10,080 --> 00:05:12,300
We're gonna see how we
can test these components

118
00:05:12,300 --> 00:05:14,763
that receive an injected service.

119
00:05:16,110 --> 00:05:19,440
So here is a component
that uses a service.

120
00:05:19,440 --> 00:05:21,660
It's my application component.

121
00:05:21,660 --> 00:05:23,430
I'm gonna give you a quick reminder

122
00:05:23,430 --> 00:05:25,380
of the application component.

123
00:05:25,380 --> 00:05:30,380
So the application component
receives a product service.

124
00:05:30,900 --> 00:05:32,310
Okay?

125
00:05:32,310 --> 00:05:35,940
It invokes the get
product method to get back

126
00:05:35,940 --> 00:05:39,693
a bunch of products, puts
it into a collection here,

127
00:05:40,530 --> 00:05:44,790
and then it renders that
collection as a list of products.

128
00:05:44,790 --> 00:05:48,090
We've seen how that works many times now.

129
00:05:48,090 --> 00:05:51,000
Okay. So I've actually
got two different tests,

130
00:05:51,000 --> 00:05:52,980
just to show different techniques.

131
00:05:52,980 --> 00:05:57,033
First of all, app.component1.spec.ts.

132
00:05:58,500 --> 00:06:01,470
Right, so what we do here is,

133
00:06:01,470 --> 00:06:04,170
this is going back to a
more familiar arrangement

134
00:06:04,170 --> 00:06:05,730
where we go to our test bed

135
00:06:05,730 --> 00:06:09,090
and we say, please
configure a testing module.

136
00:06:09,090 --> 00:06:11,490
So this is going to be our test module.

137
00:06:11,490 --> 00:06:15,000
This one will contain the
components that we need.

138
00:06:15,000 --> 00:06:18,783
So our test module will
contain app component.

139
00:06:19,680 --> 00:06:22,473
Okay. So let me put app component class.

140
00:06:24,780 --> 00:06:26,073
Okay. That's good.

141
00:06:27,510 --> 00:06:28,343
So far, so good.

142
00:06:28,343 --> 00:06:30,180
Oh, and then we compile components.

143
00:06:30,180 --> 00:06:31,013
Well, we know what that does.

144
00:06:31,013 --> 00:06:35,130
It basically generates
JavaScript for the HTML

145
00:06:35,130 --> 00:06:36,600
for my application component.

146
00:06:36,600 --> 00:06:37,433
Anyway.

147
00:06:37,433 --> 00:06:39,540
So far, my testing module knows

148
00:06:39,540 --> 00:06:41,310
about the application component.

149
00:06:41,310 --> 00:06:42,870
All good?

150
00:06:42,870 --> 00:06:44,490
Okay. What we then do, is we say,

151
00:06:44,490 --> 00:06:46,380
okay then can you go off
and create an instance

152
00:06:46,380 --> 00:06:47,550
of that please?

153
00:06:47,550 --> 00:06:48,630
I'm sent to the test bed.

154
00:06:48,630 --> 00:06:50,370
Will you please create an instance

155
00:06:50,370 --> 00:06:52,560
of my application component?

156
00:06:52,560 --> 00:06:54,240
Now at that point,

157
00:06:54,240 --> 00:06:57,900
it realizes that my
application component has

158
00:06:57,900 --> 00:07:00,813
to have a service injected into it.

159
00:07:01,710 --> 00:07:02,543
Okay.

160
00:07:02,543 --> 00:07:03,376
Like that.

161
00:07:03,376 --> 00:07:07,680
My test module will automatically realize

162
00:07:07,680 --> 00:07:09,690
that, well, because of
the way my product service

163
00:07:09,690 --> 00:07:13,530
is implemented, my product service says,

164
00:07:13,530 --> 00:07:16,350
I am injectable at the root level.

165
00:07:16,350 --> 00:07:20,580
Okay. So it knows that this
service is meant to be provided

166
00:07:20,580 --> 00:07:22,380
at the module level.

167
00:07:22,380 --> 00:07:26,130
So as soon as my component
says, give me a product service.

168
00:07:26,130 --> 00:07:28,770
It'll kind of realize that
that product service has to

169
00:07:28,770 --> 00:07:31,170
be provided at the root level.

170
00:07:31,170 --> 00:07:34,020
In other words, it'll create
one of these product services

171
00:07:34,020 --> 00:07:36,063
and add it to the module automatically.

172
00:07:37,470 --> 00:07:40,590
So the module will kind
of automatically realize

173
00:07:40,590 --> 00:07:43,230
that it's meant to create
a singleton instance

174
00:07:43,230 --> 00:07:44,940
of product service.

175
00:07:44,940 --> 00:07:47,880
And once it's done that,
it'll then pass that in

176
00:07:47,880 --> 00:07:49,890
to my application component.

177
00:07:49,890 --> 00:07:52,290
My application component
will automatically

178
00:07:52,290 --> 00:07:54,180
receive injected into it

179
00:07:54,180 --> 00:07:56,133
that product service as a singleton.

180
00:07:57,210 --> 00:08:00,540
Okay. So here's my application component.

181
00:08:00,540 --> 00:08:03,300
My application component will
receive that product service

182
00:08:03,300 --> 00:08:06,060
as a parameter, which is great.

183
00:08:06,060 --> 00:08:09,270
We actually do get a real
instance to the singleton,

184
00:08:09,270 --> 00:08:12,423
the product service, the
real product service object.

185
00:08:13,721 --> 00:08:16,110
Okay, great.

186
00:08:16,110 --> 00:08:19,470
So let's run the test.

187
00:08:19,470 --> 00:08:24,470
When I run the test, it
actually all works successfully.

188
00:08:24,810 --> 00:08:28,210
Okay. So what just happened
there, is in my test

189
00:08:29,520 --> 00:08:33,753
it got the application component,

190
00:08:34,800 --> 00:08:37,983
or rather it got a
fixture that wraps it up.

191
00:08:39,120 --> 00:08:42,600
It got the component
represented by the fixture,

192
00:08:42,600 --> 00:08:46,200
and it said, did that component
get created successfully

193
00:08:46,200 --> 00:08:49,383
with a reference to the
product service as well?

194
00:08:50,700 --> 00:08:52,470
Right. So that's good.

195
00:08:52,470 --> 00:08:55,740
Now then what we've just
done is integration testing

196
00:08:55,740 --> 00:08:58,233
because in my test module,

197
00:08:59,490 --> 00:09:03,520
my test module basically
injected the real product service

198
00:09:04,410 --> 00:09:06,423
into my application component.

199
00:09:07,770 --> 00:09:11,970
So when my application
component started up,

200
00:09:11,970 --> 00:09:15,450
it basically called get
products in the constructor

201
00:09:15,450 --> 00:09:19,020
for application component, it
called the get products method

202
00:09:19,020 --> 00:09:21,600
on the real product service,

203
00:09:21,600 --> 00:09:24,390
which might have called a rest
service to get the data back.

204
00:09:24,390 --> 00:09:26,580
So that's integration testing.

205
00:09:26,580 --> 00:09:30,130
My component received
the real product service

206
00:09:31,560 --> 00:09:32,673
injected into it.

207
00:09:33,810 --> 00:09:37,230
Okay. So, but what if you
wanted to do unit testing?

208
00:09:37,230 --> 00:09:38,100
With unit testing,

209
00:09:38,100 --> 00:09:40,740
you meant to just test
one class at a time.

210
00:09:40,740 --> 00:09:43,050
So a better arrangement for unit testing

211
00:09:43,050 --> 00:09:46,533
would be not to inject
the real product service,

212
00:09:47,370 --> 00:09:51,210
but maybe to create some
kind of mock version of it.

213
00:09:51,210 --> 00:09:54,960
Okay. So I can arrange for my test module

214
00:09:54,960 --> 00:09:58,560
to inject a mock version
of product service.

215
00:09:58,560 --> 00:10:00,780
I'll call it PS dash.

216
00:10:00,780 --> 00:10:03,270
We can create a mock implementation

217
00:10:03,270 --> 00:10:05,310
instead of the real product service.

218
00:10:05,310 --> 00:10:08,130
And then that is what's gonna be injected

219
00:10:08,130 --> 00:10:09,813
into my application component.

220
00:10:10,860 --> 00:10:12,630
So when it calls get products

221
00:10:12,630 --> 00:10:16,080
it calls a dummy version of
the method that I can provide

222
00:10:16,080 --> 00:10:18,210
that doesn't actually call a rest service.

223
00:10:18,210 --> 00:10:19,230
And, you know,

224
00:10:19,230 --> 00:10:22,140
instead maybe return some
hard coded data instead.

225
00:10:22,140 --> 00:10:25,770
So effectively, the product
service can be mocked,

226
00:10:25,770 --> 00:10:28,680
and I can just unit test
my component in isolation.

227
00:10:28,680 --> 00:10:30,453
That seems like a good thing to do.

228
00:10:31,890 --> 00:10:35,550
So this is called, this
mock in Angular terminology,

229
00:10:35,550 --> 00:10:38,130
this mock implementation of the service

230
00:10:38,130 --> 00:10:40,980
in Angular terminology is called a spy.

231
00:10:40,980 --> 00:10:43,140
Okay. It's basically a replacement

232
00:10:43,140 --> 00:10:44,880
for the real product service

233
00:10:44,880 --> 00:10:48,141
with a simplified implementation.

234
00:10:48,141 --> 00:10:49,983
And this is how you do it.

235
00:10:51,060 --> 00:10:54,660
I've got app.component2.spec

236
00:10:54,660 --> 00:10:57,420
where I'm going to be
using a mock product spec

237
00:10:57,420 --> 00:10:59,400
service instead of the real one.

238
00:10:59,400 --> 00:11:01,230
Have a look at the first statement there.

239
00:11:01,230 --> 00:11:04,140
Jasmine creates spy object.

240
00:11:04,140 --> 00:11:06,540
You give it two parameters.

241
00:11:06,540 --> 00:11:09,030
You give it the name of the class

242
00:11:09,030 --> 00:11:12,360
that you're meant to be kind of mocking

243
00:11:12,360 --> 00:11:14,340
and the method or the array

244
00:11:14,340 --> 00:11:16,590
of methods that you want to replace.

245
00:11:16,590 --> 00:11:19,240
So effectively, this will
give you back a spy object.

246
00:11:20,700 --> 00:11:24,300
And that spy object
basically is a replacement

247
00:11:24,300 --> 00:11:25,773
for product service.

248
00:11:26,730 --> 00:11:29,020
Anyone that asks for product service.

249
00:11:29,020 --> 00:11:33,810
Well, this is the class that
we're mocking, basically.

250
00:11:33,810 --> 00:11:34,680
And in particular,

251
00:11:34,680 --> 00:11:38,010
we're mocking the get
products method on there.

252
00:11:38,010 --> 00:11:39,780
You can mock multiple methods if you like,

253
00:11:39,780 --> 00:11:43,143
but I'm just mocking
the get products method.

254
00:11:44,910 --> 00:11:47,070
Okay. You could mock other methods

255
00:11:47,070 --> 00:11:49,740
on product service as
well if you wanted to.

256
00:11:49,740 --> 00:11:51,180
Well, I don't particularly.

257
00:11:51,180 --> 00:11:52,620
It's just that one.

258
00:11:52,620 --> 00:11:55,713
So this here is my spy object.

259
00:11:57,540 --> 00:12:01,020
Okay. It's like a replacement
for the product service.

260
00:12:01,020 --> 00:12:04,320
What you then do, is you
basically tell the testing module,

261
00:12:04,320 --> 00:12:08,373
if anyone asks for a product
service, use this one instead.

262
00:12:09,870 --> 00:12:13,260
So when I configure my testing module,

263
00:12:13,260 --> 00:12:17,340
I give it the components
of interest and providers.

264
00:12:17,340 --> 00:12:19,350
Now, if you haven't seen this before,

265
00:12:19,350 --> 00:12:21,030
when you have a model,

266
00:12:21,030 --> 00:12:25,650
you can basically tell it
how to inject dependencies.

267
00:12:25,650 --> 00:12:28,770
So you can give it, if
there were like five

268
00:12:28,770 --> 00:12:30,810
different classes that
you might want to inject,

269
00:12:30,810 --> 00:12:32,640
you would have an array
of five different bits

270
00:12:32,640 --> 00:12:36,540
of information here, how
to inject each dependency.

271
00:12:36,540 --> 00:12:38,370
So this is just one dependency.

272
00:12:38,370 --> 00:12:42,690
It basically says, if anybody
asks for a product service

273
00:12:42,690 --> 00:12:45,513
to be injected, use this value instead.

274
00:12:46,440 --> 00:12:50,400
If any component asks for a
product service to be injected,

275
00:12:50,400 --> 00:12:52,650
inject the spy object.

276
00:12:52,650 --> 00:12:54,750
Well, that's quite handy because

277
00:12:54,750 --> 00:12:57,363
if you remember, in my
application component,

278
00:12:58,200 --> 00:13:00,420
my application component
does actually say,

279
00:13:00,420 --> 00:13:04,470
please will you give me a
product service from somewhere?

280
00:13:04,470 --> 00:13:06,090
I don't care where it comes from.

281
00:13:06,090 --> 00:13:07,950
You just give it to me.

282
00:13:07,950 --> 00:13:09,480
And what this does, it said,

283
00:13:09,480 --> 00:13:12,180
if any component asks
for a product service,

284
00:13:12,180 --> 00:13:15,180
give them this spy object instead.

285
00:13:15,180 --> 00:13:16,590
What that means is,

286
00:13:16,590 --> 00:13:20,250
when an application component is created

287
00:13:20,250 --> 00:13:22,650
and when it asks the testing module,

288
00:13:22,650 --> 00:13:25,680
basically, please really
give me a product service

289
00:13:25,680 --> 00:13:27,720
injected into my constructor,

290
00:13:27,720 --> 00:13:29,760
it'll get the spy object.

291
00:13:29,760 --> 00:13:33,450
The spy object is what's
going to be injected

292
00:13:33,450 --> 00:13:35,793
into the application component.

293
00:13:36,720 --> 00:13:39,390
So then, whenever the application
component calls a method

294
00:13:39,390 --> 00:13:42,660
on a product service,
it'll be called a method

295
00:13:42,660 --> 00:13:46,263
on the spy and we can
mock that implementation.

296
00:13:47,550 --> 00:13:49,920
Right, so we've already set up then.

297
00:13:49,920 --> 00:13:53,370
We have a spy that basically points to

298
00:13:53,370 --> 00:13:55,050
like a mock version

299
00:13:55,050 --> 00:13:59,670
of a product service
class and product service.

300
00:13:59,670 --> 00:14:02,250
And in particular, the
method that we were kind

301
00:14:02,250 --> 00:14:05,013
of replacing was called get products.

302
00:14:05,970 --> 00:14:07,503
Okay. Get products, like that.

303
00:14:08,700 --> 00:14:10,263
Okay. Right.

304
00:14:12,000 --> 00:14:15,240
So this statement here
is going to be important.

305
00:14:15,240 --> 00:14:18,633
Before we get to that,
I need to hook it up.

306
00:14:19,470 --> 00:14:20,880
What's gonna happen in a moment,

307
00:14:20,880 --> 00:14:23,670
is that my application
component is gonna basically

308
00:14:23,670 --> 00:14:28,470
call product service,
get products on my spy.

309
00:14:28,470 --> 00:14:30,210
That's not a real method.

310
00:14:30,210 --> 00:14:32,070
It doesn't actually exist.

311
00:14:32,070 --> 00:14:35,790
So we have to basically kind
of give a stub implementation.

312
00:14:35,790 --> 00:14:37,050
And that's what this does.

313
00:14:37,050 --> 00:14:39,663
It says with this spy here,

314
00:14:40,530 --> 00:14:43,020
if somebody calls get products,

315
00:14:43,020 --> 00:14:47,160
then return this, the mock data.

316
00:14:47,160 --> 00:14:49,860
Okay. So instead of calling
the real get products method

317
00:14:49,860 --> 00:14:52,560
on the real service, basically we turn

318
00:14:52,560 --> 00:14:53,790
this dummy method instead.

319
00:14:53,790 --> 00:14:54,930
In other frameworks,

320
00:14:54,930 --> 00:14:57,273
this is called setting expectations.

321
00:14:58,230 --> 00:14:59,063
Okay.

322
00:14:59,063 --> 00:15:01,540
So I've got some dummy products
that will be returned here.

323
00:15:02,400 --> 00:15:04,200
Okay, bear that in mind.

324
00:15:04,200 --> 00:15:07,560
Let's look at the test
harness when we run it

325
00:15:07,560 --> 00:15:09,390
it all works. Good.

326
00:15:09,390 --> 00:15:11,520
Let's see the code in a
bit more detail, then,

327
00:15:11,520 --> 00:15:13,613
in app.component.spec2.

328
00:15:16,050 --> 00:15:17,560
So we've set up a spy

329
00:15:18,510 --> 00:15:21,870
on product service for
the get products method.

330
00:15:21,870 --> 00:15:23,970
We've configured the testing module

331
00:15:23,970 --> 00:15:27,660
so that if anybody asks to
have one of those injected,

332
00:15:27,660 --> 00:15:28,900
it'll inject the spy

333
00:15:30,480 --> 00:15:34,620
In my test, I create some dummy data,

334
00:15:34,620 --> 00:15:37,950
and I say, upon my spy
object, in other words,

335
00:15:37,950 --> 00:15:42,090
upon this spy object here,
my pretend product service,

336
00:15:42,090 --> 00:15:44,070
if anybody calls to get products method,

337
00:15:44,070 --> 00:15:46,593
return them these dummy products instead.

338
00:15:48,210 --> 00:15:51,990
Okay. Now here, I create
the application component.

339
00:15:51,990 --> 00:15:53,760
The application component, remember,

340
00:15:53,760 --> 00:15:57,273
says, please will you
give me a product service?

341
00:15:58,560 --> 00:15:59,910
Right.

342
00:15:59,910 --> 00:16:01,650
And it said earlier, didn't it?

343
00:16:01,650 --> 00:16:03,360
If anyone asks for a product service

344
00:16:03,360 --> 00:16:05,283
give them the spy object instead.

345
00:16:06,600 --> 00:16:09,120
So the application
component will basically

346
00:16:09,120 --> 00:16:10,740
get the spy object.

347
00:16:10,740 --> 00:16:12,870
When it calls in its constructor,

348
00:16:12,870 --> 00:16:14,520
when it calls get products,

349
00:16:14,520 --> 00:16:16,860
it's gonna basically call this method

350
00:16:16,860 --> 00:16:19,080
and that will return the dummy products,

351
00:16:19,080 --> 00:16:21,870
product one and product two.

352
00:16:21,870 --> 00:16:23,760
Those are the products that
will actually be assigned

353
00:16:23,760 --> 00:16:24,843
into my component.

354
00:16:25,710 --> 00:16:27,810
So do some data binding,

355
00:16:27,810 --> 00:16:30,510
and then see what was generated.

356
00:16:30,510 --> 00:16:32,820
In my application component, basically,

357
00:16:32,820 --> 00:16:36,270
give me the rendered component structure,

358
00:16:36,270 --> 00:16:39,480
find how many accounts
there were of a product.

359
00:16:39,480 --> 00:16:43,173
Remember, for each product
it rendered an app product.

360
00:16:44,850 --> 00:16:47,343
For each product it
rendered an app product.

361
00:16:50,101 --> 00:16:51,750
Okay. So what we should see then

362
00:16:51,750 --> 00:16:53,580
is that there should
have been two of them.

363
00:16:53,580 --> 00:16:56,610
The number of products
displayed should have been two

364
00:16:56,610 --> 00:16:59,610
because when my application
component got the products,

365
00:16:59,610 --> 00:17:03,690
it got the mock version,
not the real version.

366
00:17:03,690 --> 00:17:06,810
So this is useful for unit testing.

367
00:17:06,810 --> 00:17:10,440
When your component has
dependencies injected into it,

368
00:17:10,440 --> 00:17:13,860
you can arrange for mock versions

369
00:17:13,860 --> 00:17:16,710
to be injected instead of real versions.

370
00:17:16,710 --> 00:17:20,100
Then when your component
calls a method on the service,

371
00:17:20,100 --> 00:17:23,820
you can basically say how
that method should be mocked,

372
00:17:23,820 --> 00:17:26,550
so that you are in control of the data

373
00:17:26,550 --> 00:17:29,880
in your test, so that you
can predict exactly what kind

374
00:17:29,880 --> 00:17:32,490
of results you're gonna get back.

375
00:17:32,490 --> 00:17:34,440
So quite complicated.

376
00:17:34,440 --> 00:17:35,760
Quite a lot of steps involved there,

377
00:17:35,760 --> 00:17:39,420
but very much the way that
you would do unit testing

378
00:17:39,420 --> 00:17:42,423
when you have components
with injected services.