fix(docs-infra): use `.tooltip` in `aio-top-menu` items (#33351)

The top-menu items have both a `title` and a `tooltip` property. The
`title` is used as text content, so there is little point in using it as
"tooltip" (via the HTMLElement's `title` property) too.

This commit switches to using the `tooltip` property to populate the
`title`. Note that in many cases, the `tooltip` property is derived from
`title` anyway (so there is no practical change in behavior in these
cases).

PR Close #33351

aio/src/app/layout/top-menu/top-menu.component.spec.ts

@@ -1,42 +1,41 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BehaviorSubject } from 'rxjs';
-
 import { TopMenuComponent } from './top-menu.component';
-import { NavigationService, NavigationViews } from 'app/navigation/navigation.service';
 
 describe('TopMenuComponent', () => {
   let component: TopMenuComponent;
   let fixture: ComponentFixture<TopMenuComponent>;
 
-  beforeEach(() => {
+  // Helpers
-    TestBed.configureTestingModule({
+  const getListItems = () => {
-      declarations: [ TopMenuComponent ],
+    const list: HTMLUListElement = fixture.debugElement.nativeElement.querySelector('ul');
-      providers: [
+    return Array.from(list.querySelectorAll('li'));
-        { provide: NavigationService, useClass: TestNavigationService }
+  };
-      ]
-    });
-  });
 
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TopMenuComponent,
+      ],
+    });
+
     fixture = TestBed.createComponent(TopMenuComponent);
     component = fixture.componentInstance;
+
+    component.nodes = [
+      {url: 'api', title: 'API', tooltip: 'API docs'},
+      {url: 'features', title: 'Features', tooltip: 'Angular features overview'},
+    ];
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create an item for each navigation node', () => {
-    expect(component).toBeTruthy();
+    const items = getListItems();
+    const links = items.map(item => item.querySelector('a'))
+                      .filter((link): link is NonNullable<typeof link> => link !== null);
+
+    expect(links.length).toBe(2);
+    expect(links.map(link => link.pathname)).toEqual(['/api', '/features']);
+    expect(links.map(link => link.textContent)).toEqual(['API', 'Features']);
+    expect(links.map(link => link.title)).toEqual(['API docs', 'Angular features overview']);
   });
 });
-
-//// Test Helpers ////
-class TestNavigationService {
-  navJson = {
-    TopBar: [
-      {url: 'api', title: 'API' },
-      {url: 'features', title: 'Features' }
-    ],
-  };
-
-  navigationViews = new BehaviorSubject<NavigationViews>(this.navJson);
-}

aio/src/app/layout/top-menu/top-menu.component.ts

@@ -6,7 +6,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
   template: `
     <ul role="navigation">
       <li *ngFor="let node of nodes">
-        <a class="nav-link" [href]="node.url" [title]="node.title">
+        <a class="nav-link" [href]="node.url" [title]="node.tooltip">
           <span class="nav-link-inner">{{ node.title }}</span>
         </a>
       </li>