1
00:00:00,120 --> 00:00:03,190
In this lecture, I have a quick exercise for you.

2
00:00:03,210 --> 00:00:07,890
I want you to write a test for selecting the logout link from the template.

3
00:00:07,920 --> 00:00:10,620
The template should be displaying for links.

4
00:00:10,650 --> 00:00:15,330
The logout link will be the third element in the unordered list element.

5
00:00:15,360 --> 00:00:19,160
You do not need to trigger a change detection by defaults.

6
00:00:19,170 --> 00:00:24,360
The links will appear on the page since our observable emits a true value.

7
00:00:24,390 --> 00:00:26,490
Pause the video and give it a try.

8
00:00:26,520 --> 00:00:27,420
Good luck.

9
00:00:29,490 --> 00:00:30,580
Welcome back.

10
00:00:30,600 --> 00:00:33,670
If you were able to write the test, that's great.

11
00:00:33,690 --> 00:00:35,690
If not, that's fine as well.

12
00:00:35,700 --> 00:00:38,010
Let's walk through the solution together.

13
00:00:38,010 --> 00:00:41,820
First, open the navigation component test file.

14
00:00:44,010 --> 00:00:48,150
Querying the template for elements will require the buy object.

15
00:00:48,180 --> 00:00:53,100
Import this object from the angular slash platform browser package.

16
00:00:55,170 --> 00:00:58,270
Next scroll to the bottom of the test suite.

17
00:00:58,290 --> 00:01:01,350
Add the IT function with the following description.

18
00:01:01,350 --> 00:01:02,730
Should log out.

19
00:01:04,840 --> 00:01:07,450
Afterward pass in an arrow function.

20
00:01:09,600 --> 00:01:15,560
Inside our test, we're going to query the template for the log out link with the query function.

21
00:01:15,570 --> 00:01:23,700
Create a variable called logout link with the following value fixture dot debug element dot query bi

22
00:01:23,730 --> 00:01:29,370
dot css ly colon nth child three a.

23
00:01:38,380 --> 00:01:42,650
The query we've curated uses the nth child pseudo selector.

24
00:01:42,670 --> 00:01:47,270
As I mentioned before, the logout link is the third link in the list.

25
00:01:47,290 --> 00:01:51,500
This selector does not scale if we add or remove links.

26
00:01:51,520 --> 00:01:53,410
Our test must be updated.

27
00:01:53,440 --> 00:01:59,160
Ideally, we should be able to select the logout link regardless of where it is for now.

28
00:01:59,170 --> 00:02:02,200
This will get the job done after the variable.

29
00:02:02,200 --> 00:02:06,190
Add the expected function with the logout link variable.

30
00:02:08,350 --> 00:02:14,030
Next, let's add the with context function to add a custom error message.

31
00:02:14,050 --> 00:02:18,100
If this test fails, this means the user is not logged in.

32
00:02:18,130 --> 00:02:20,600
This may be a problem with our service.

33
00:02:20,620 --> 00:02:22,750
Let's add the following message.

34
00:02:22,750 --> 00:02:24,160
Not logged in.

35
00:02:26,370 --> 00:02:29,970
Lastly Jane the to be true three function.

36
00:02:32,060 --> 00:02:34,400
The tests we've written is very simple.

37
00:02:34,400 --> 00:02:36,830
It's nothing we haven't encountered before.

38
00:02:36,860 --> 00:02:42,200
All we're doing is selecting the logout link and verifying it exists in the template.

39
00:02:42,230 --> 00:02:44,810
Let's check out the browser for the results.

40
00:02:46,920 --> 00:02:50,320
As expected, the test passed with flying colours.

41
00:02:50,340 --> 00:02:53,690
This step takes care of the first half of the tests.

42
00:02:53,700 --> 00:02:57,090
The other half of the test will involve clicking on the link.

43
00:02:57,120 --> 00:03:00,390
This action should cause a method in our service to run.

44
00:03:00,390 --> 00:03:04,140
Let's handle the last half of the test in the next lecture.

45
00:03:04,170 --> 00:03:05,370
I'll see you there.