1
00:00:00,180 --> 00:00:05,820
In this lecture, we are going to finish the test we've written in the navigation test file.

2
00:00:05,910 --> 00:00:10,710
If we were to look at the template, this link has an event listener called Click.

3
00:00:10,740 --> 00:00:14,610
Upon clicking this link, a method from our service gets invoked.

4
00:00:14,640 --> 00:00:18,900
Let's write a test for everything that our service method gets called in.

5
00:00:18,900 --> 00:00:22,110
Your editor open the navigation test file.

6
00:00:24,230 --> 00:00:27,720
I mentioned this in an earlier lecture, but I'll repeat it again.

7
00:00:27,740 --> 00:00:32,299
The fake service we've created is not just an object, it's a spy.

8
00:00:32,330 --> 00:00:36,820
Jazmin Spies will watch our objects methods for invocations.

9
00:00:36,830 --> 00:00:40,830
This feature is incredibly helpful for keeping track of our objects.

10
00:00:40,850 --> 00:00:42,310
Let me show you what I mean.

11
00:00:42,320 --> 00:00:44,630
Scroll to the last test.

12
00:00:44,630 --> 00:00:47,810
In this test, we're going to trigger a click event.

13
00:00:47,840 --> 00:00:50,870
Luckily, we already have access to the element.

14
00:00:50,870 --> 00:00:58,040
However, keep in mind of one thing the long length variable is storing a debug element object.

15
00:00:58,040 --> 00:01:03,740
As a reminder, Angular produces two types of objects for referencing an element.

16
00:01:03,740 --> 00:01:08,930
The debug element is a reference to an element that is platform agnostic.

17
00:01:08,960 --> 00:01:14,660
It does not contain the same methods and properties you would find on a regular DOM object.

18
00:01:14,690 --> 00:01:21,050
Regardless, it is possible to simulate any event on the element after the test assertion.

19
00:01:21,050 --> 00:01:25,370
Run a function called logout link dot trigger event handler.

20
00:01:27,520 --> 00:01:32,930
The trigger event handler function is available on all debug element objects.

21
00:01:32,950 --> 00:01:36,800
This function artificially triggers an event on an element.

22
00:01:36,820 --> 00:01:38,580
There are two arguments.

23
00:01:38,590 --> 00:01:41,350
The first argument is the name of the event.

24
00:01:41,350 --> 00:01:44,980
In our case, we're trying to trigger a click event.

25
00:01:47,180 --> 00:01:49,330
The second document is optional.

26
00:01:49,340 --> 00:01:51,650
It's data to send with the event.

27
00:01:51,680 --> 00:01:57,500
If your functions require additional information, you can pass it along through this argument.

28
00:01:57,500 --> 00:02:01,880
For our purposes, we do not need to use these second arguments.

29
00:02:01,880 --> 00:02:06,620
The next step is to verify that the logout function was called from our service.

30
00:02:06,620 --> 00:02:13,400
First, we need to grab the service instance below the event at a variable called service.

31
00:02:13,400 --> 00:02:17,180
Its value will be the test band dot inject function.

32
00:02:19,340 --> 00:02:24,950
The test bed object has a method for retrieving and injected value into the testing module.

33
00:02:24,980 --> 00:02:27,860
The inject function will return the value.

34
00:02:27,890 --> 00:02:32,000
However, multiple values can be injected into a component.

35
00:02:32,030 --> 00:02:35,960
We must select a specific value by its token.

36
00:02:35,990 --> 00:02:39,070
This would be the value in the provider property.

37
00:02:39,080 --> 00:02:43,010
In this case, the token is called authentication service.

38
00:02:45,130 --> 00:02:45,780
Great.

39
00:02:45,790 --> 00:02:48,220
We can start writing the test assertion.

40
00:02:48,220 --> 00:02:52,630
Run the expect function with the service dot logout method.

41
00:02:54,660 --> 00:03:01,740
Next we are going to run the with context function with the following message could not click logout

42
00:03:01,740 --> 00:03:02,340
link.

43
00:03:04,440 --> 00:03:08,700
Lastly, Shane, the two have been called Time's function.

44
00:03:10,750 --> 00:03:14,350
By using a spy, we can track the methods in our object.

45
00:03:14,380 --> 00:03:19,540
This is why we're using a spy instead of creating a regular JavaScript object.

46
00:03:19,570 --> 00:03:25,450
Often we may need to verify that specific functions get called during a specific event.

47
00:03:25,480 --> 00:03:29,520
This function accepts the number of times the function should be called.

48
00:03:29,530 --> 00:03:33,370
Since we clicked once, the function should run once.

49
00:03:33,370 --> 00:03:34,930
Let's pass in one.

50
00:03:37,120 --> 00:03:39,460
Lastly, let's view the browser.

51
00:03:41,710 --> 00:03:43,480
Our test has passed.

52
00:03:43,510 --> 00:03:44,210
Great.

53
00:03:44,230 --> 00:03:50,260
It took a lot of time, but we covered important concepts from mocking services to spying on objects.

54
00:03:50,290 --> 00:03:54,240
Hopefully this information helps you get started with your own tests.

55
00:03:54,250 --> 00:03:58,690
In the next lecture, we're going to jump into end to end testing.