diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html index beac0b6bb8c43..457662ed19ed7 100644 --- a/aio/src/app/app.component.html +++ b/aio/src/app/app.component.html @@ -22,7 +22,7 @@ Home Home - +
diff --git a/aio/src/app/layout/top-menu/top-menu.component.spec.ts b/aio/src/app/layout/top-menu/top-menu.component.spec.ts index fbc6efde79897..579e58adc187a 100644 --- a/aio/src/app/layout/top-menu/top-menu.component.spec.ts +++ b/aio/src/app/layout/top-menu/top-menu.component.spec.ts @@ -1,42 +1,86 @@ 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; + // Helpers + const getListItems = () => { + const list: HTMLUListElement = fixture.debugElement.nativeElement.querySelector('ul'); + return Array.from(list.querySelectorAll('li')); + }; + const getSelected = (items: HTMLLIElement[]) => + items.filter(item => item.classList.contains('selected')); + beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ TopMenuComponent ], - providers: [ - { provide: NavigationService, useClass: TestNavigationService } - ] + declarations: [ + TopMenuComponent, + ], }); - }); - beforeEach(() => { 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', () => { - expect(component).toBeTruthy(); + it('should create an item for each navigation node', () => { + const items = getListItems(); + const links = items.map(item => item.querySelector('a')) + .filter((link): link is NonNullable => 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' } - ], - }; + it('should mark the currently selected node with `.selected`', () => { + const items = getListItems(); + expect(getSelected(items)).toEqual([]); + + component.currentNode = {url: 'api', view: 'foo', nodes: []}; + fixture.detectChanges(); + expect(getSelected(items)).toEqual([items[0]]); + + component.currentNode = {url: 'features', view: 'foo', nodes: []}; + fixture.detectChanges(); + expect(getSelected(items)).toEqual([items[1]]); - navigationViews = new BehaviorSubject(this.navJson); -} + component.currentNode = {url: 'something/else', view: 'foo', nodes: []}; + fixture.detectChanges(); + expect(getSelected(items)).toEqual([]); + }); + + it('should not mark any node with `.selected` if the current URL is undefined', () => { + component.nodes = [ + {url: '', title: 'API', tooltip: 'API docs'}, + {url: undefined, title: 'Features', tooltip: 'Angular features overview'}, + ]; + fixture.detectChanges(); + const items = getListItems(); + + component.currentNode = undefined; + fixture.detectChanges(); + expect(getSelected(items)).toEqual([]); + }); + + it('should correctly mark a node with `.selected` even if its URL is empty', () => { + component.nodes = [ + {url: '', title: 'API', tooltip: 'API docs'}, + {url: undefined, title: 'Features', tooltip: 'Angular features overview'}, + ]; + fixture.detectChanges(); + const items = getListItems(); + + component.currentNode = {url: '', view: 'Empty url', nodes: []}; + fixture.detectChanges(); + expect(getSelected(items)).toEqual([items[0]]); + }); +}); diff --git a/aio/src/app/layout/top-menu/top-menu.component.ts b/aio/src/app/layout/top-menu/top-menu.component.ts index 3eff5116fdb65..2ef09554ec2fa 100644 --- a/aio/src/app/layout/top-menu/top-menu.component.ts +++ b/aio/src/app/layout/top-menu/top-menu.component.ts @@ -1,12 +1,12 @@ import { Component, Input } from '@angular/core'; -import { NavigationNode } from 'app/navigation/navigation.service'; +import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service'; @Component({ selector: 'aio-top-menu', template: `