1
00:00:00,120 --> 00:00:05,570
In this lecture, we are going to override the authentication service to our fake service.

2
00:00:05,580 --> 00:00:12,430
The process for injecting a fake dependency is similar to injecting a regular dependency to get started.

3
00:00:12,450 --> 00:00:15,210
Open the navigation test file.

4
00:00:17,340 --> 00:00:21,590
In the before each function we're registering a test module.

5
00:00:21,600 --> 00:00:26,250
A service can be registered with a module by adding it to the provider's option.

6
00:00:26,250 --> 00:00:30,270
Let's add this option to the modules configuration object.

7
00:00:32,369 --> 00:00:36,420
Normally we would add the marked off service to the array.

8
00:00:36,450 --> 00:00:38,730
However, that's not going to cut it.

9
00:00:38,760 --> 00:00:42,740
The navigation component injects the authentication service.

10
00:00:42,750 --> 00:00:47,060
The class name must match the name injected by the component.

11
00:00:47,070 --> 00:00:51,540
So how do we replace the original service with our fake service?

12
00:00:51,540 --> 00:00:58,080
Instead of passing in the service, we can add an object with two properties called Provide and use

13
00:00:58,080 --> 00:00:58,830
value.

14
00:01:01,000 --> 00:01:03,690
The Vine option accepts a token.

15
00:01:03,700 --> 00:01:08,770
You can think of a token as an ID during the initialization of our component.

16
00:01:08,800 --> 00:01:13,180
Angular will look at the constructor function's argument list.

17
00:01:13,180 --> 00:01:19,480
The data type of an argument will determine the type of value that will be injected into the components.

18
00:01:19,600 --> 00:01:23,380
This option's value must correspond with the data type.

19
00:01:23,380 --> 00:01:26,950
In this case, the data type was off service.

20
00:01:26,950 --> 00:01:30,280
Let's import this service into our test file.

21
00:01:34,980 --> 00:01:38,970
Next set the provider option to this service.

22
00:01:41,130 --> 00:01:47,400
If Angular finds a match, the value from the used value property will be the injected value.

23
00:01:47,430 --> 00:01:51,960
Let's set this property to the marked off service object.

24
00:01:53,060 --> 00:01:59,420
By passing in this configuration object, we do not need to update our component to use this service.

25
00:01:59,420 --> 00:02:05,060
Angular dependency injection feature allows us to change the value of a dependency.

26
00:02:05,060 --> 00:02:12,200
If a component injects the off service object, the value injected into the component will be the marked

27
00:02:12,200 --> 00:02:14,210
off service object.

28
00:02:14,240 --> 00:02:17,840
Let's move over to the browser to verify this behavior.

29
00:02:19,970 --> 00:02:22,880
As you can see, our test has passed.

30
00:02:22,910 --> 00:02:28,670
Our app is not using the authentication service which uses the angular fire package.

31
00:02:28,670 --> 00:02:31,400
Instead, it'll use the fake dependency.

32
00:02:31,430 --> 00:02:37,730
Unlike the original service, our fake dependency does not rely on Firebase to be functional, thus

33
00:02:37,730 --> 00:02:41,300
allowing our component to be created in the next lecture.

34
00:02:41,300 --> 00:02:43,850
Let's continue working on our test.