Most likely, you will have multiple links throughout the application in the form of a navigation menu or deep links. These links are treated as routes in Angular and are usually defined in your app-routing.module.ts file.

We learned about and mastered how to use Angular routing in Chapter 4, Routing. In this section, we will learn how to write test scripts for testing Angular routing and testing the links and navigation in our application.

We will need a beautiful menu component for our application. Using the ng generate component menu command, we will generate the menu component. Now, let's navigate to menu.component.html and create a menu called navbar with two links in it:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#">AutoStop </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
    aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link" routerLink="/list-cars">Cars <span class="sr-only">
   (current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" routerLink="/list-trucks">Trucks</a>
 </li>
 </ul>
 </div>
</nav>

The preceding code is nothing fancy, at least not yet. It is standard code that uses Bootstrap to generate a navbar component. Look carefully and you will see that we have defined two links in the menu bar, list-cars and list-trucks, with the classes as nav-link.

We can now write a few test specs around the menu functionality to test the navbar component, which will cover navigation, the count of links, and so on.

Use case #1: We need to test that the navbar menu has exactly two links.

Here's the code to check whether there are exactly two links:

// Check the app has 2 links
 it('should check routerlink', () => {
 const fixture = TestBed.createComponent(MenuComponent);
 fixture.detectChanges();
 const compiled = fixture.debugElement.nativeElement;

let linkDes = fixture.debugElement.queryAll(By.css('.nav-link'));
 expect(linkDes.length).toBe(2);

});

In the preceding code, we are creating a fixture for our MenuComponent component. Since we have assigned the nav-link class, it's easy to target the corresponding links in the component. Using the debugElement and queryAll methods, we are finding all the links with className as nav-link. Finally, we are writing an expect statement to assert whether the length of the array of links returned is equal to 2.

Run the tests using the ng test command. We should see the following output:

That's a good start to testing our menu functionality. Now that we know there are two links in our menu, the next use case we want to test is whether the first link is list-cars. 

The following is the code to test whether the first link in the array of links is list-cars:

// Check the app has first link as "List Cars"
 it('should check that the first link is list-cars ', () => {
 const fixture = TestBed.createComponent(MenuComponent);
 fixture.detectChanges();
 const compiled = fixture.debugElement.nativeElement;

 let linkDes = fixture.debugElement.queryAll(By.css('.nav-link'));
 
 expect(linkDes[0].properties.href).toBe('/list-cars', '1st link should  
    go to Dashboard');
 });

In the preceding code, we are creating a fixture for our MenuComponent component. Using the debugElement and queryAll methods, we are finding all the links with className as nav-link. We will be getting all the links that have the class name as nav-link. There can be multiple links in the menu, but we are interested in reading the href property of the first element through index [0] and asserting whether the value matches /list-cars.

Again, run the ng test command. We should see our test report updated, as shown in the following screenshot:

OK, fair enough. We got a clue that the list-cars menu link is the first in the menu list. What if we don't know the index or position of the link we are searching for? Let's tackle that use case as well.

Take a look at the following code snippet:

// Check the app if "List Cars" link exist
 it('should have a link to /list-cars', () => {
 const fixture = TestBed.createComponent(AppComponent);
 fixture.detectChanges();
 const compiled = fixture.debugElement.nativeElement;
 let linkDes = fixture.debugElement.queryAll(By.css('.nav-link'));
 const index = linkDes.findIndex(de => {
 return de.properties['href'] === '/list-cars';
 });
 expect(index).toBeGreaterThan(-1);
 });

Some things to note are that we are finding the index of the route path, /list-cars, and we are also making use of the assigned classes, nav-link, and getting an array of all matching elements using the queryAll method. Using the findIndex method, we are looping the array elements to find the index of the matching href to /list-cars.

Run the tests again using the ng test command and the updated test report should look as follows:

In this section, we learned about various ways to target a router link. The same principle applies to hunting down a deep link or a child link.

That's your homework.