In this lecture, I have a quick exercise for you.
I want you to write a test for selecting the logout link from the template.
The template should be displaying for links.
The logout link will be the third element in the unordered list element.
You do not need to trigger a change detection by defaults.
The links will appear on the page since our observable emits a true value.
Pause the video and give it a try.
Good luck.
Welcome back.
If you were able to write the test, that's great.
If not, that's fine as well.
Let's walk through the solution together.
First, open the navigation component test file.
Querying the template for elements will require the buy object.
Import this object from the angular slash platform browser package.
Next scroll to the bottom of the test suite.
Add the IT function with the following description.
Should log out.
Afterward pass in an arrow function.
Inside our test, we're going to query the template for the log out link with the query function.
Create a variable called logout link with the following value fixture dot debug element dot query bi
dot css ly colon nth child three a.
The query we've curated uses the nth child pseudo selector.
As I mentioned before, the logout link is the third link in the list.
This selector does not scale if we add or remove links.
Our test must be updated.
Ideally, we should be able to select the logout link regardless of where it is for now.
This will get the job done after the variable.
Add the expected function with the logout link variable.
Next, let's add the with context function to add a custom error message.
If this test fails, this means the user is not logged in.
This may be a problem with our service.
Let's add the following message.
Not logged in.
Lastly Jane the to be true three function.
The tests we've written is very simple.
It's nothing we haven't encountered before.
All we're doing is selecting the logout link and verifying it exists in the template.
Let's check out the browser for the results.
As expected, the test passed with flying colours.
This step takes care of the first half of the tests.
The other half of the test will involve clicking on the link.
This action should cause a method in our service to run.
Let's handle the last half of the test in the next lecture.
I'll see you there.