From 293dce929d98c7b86c248272eff21ee30f0987f4 Mon Sep 17 00:00:00 2001 From: hawkgs Date: Wed, 27 Nov 2024 17:42:45 +0200 Subject: [PATCH] docs(docs-infra): remove redundant nav menu items from the DOM in the reference (#58934) The DOM is cluttered with a lot of nav item UL-s that are not visible to the end user due to the usage of multiple docs-navigation-list instances that render the full navigation tree recursively instead of only the preselected visible levels. PR Close #58934 --- .../navigation-list.component.html | 7 +--- .../navigation-list.component.scss | 8 ++-- .../navigation-list.component.spec.ts | 41 ++++++++++++------- 3 files changed, 31 insertions(+), 25 deletions(-) diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.html b/adev/shared-docs/components/navigation-list/navigation-list.component.html index ac8c429c33c..404d762bdf8 100644 --- a/adev/shared-docs/components/navigation-list/navigation-list.component.html +++ b/adev/shared-docs/components/navigation-list/navigation-list.component.html @@ -4,10 +4,7 @@ [class.docs-navigation-list-dropdown]="isDropdownView()" > @for (item of navigationItems; track $index) { -
  • +
  • @if (item.path) { @if (item.isExternal) { @@ -67,7 +64,7 @@ } } - @if (item.children?.length > 0) { + @if (displayItemsToLevel() > item.level && item.children?.length > 0) { }
    • diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.scss b/adev/shared-docs/components/navigation-list/navigation-list.component.scss index 2df35c706eb..3a4c3097a30 100644 --- a/adev/shared-docs/components/navigation-list/navigation-list.component.scss +++ b/adev/shared-docs/components/navigation-list/navigation-list.component.scss @@ -45,10 +45,6 @@ border: 0; } - .docs-navigation-link-hidden { - display: none; - } - .docs-nav-item-has-icon { &::after { // FIXME: for some reason this disappears when transformed @@ -77,7 +73,9 @@ font-family: var(--inter-font); line-height: 160%; letter-spacing: -0.00875rem; - transition: color 0.3s ease, background 0.3s ease; + transition: + color 0.3s ease, + background 0.3s ease; text-align: left; // forces left alignment of text in button &.docs-secondary-nav-button-active { diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.spec.ts b/adev/shared-docs/components/navigation-list/navigation-list.component.spec.ts index 3586fef7560..6c2fb4e9011 100644 --- a/adev/shared-docs/components/navigation-list/navigation-list.component.spec.ts +++ b/adev/shared-docs/components/navigation-list/navigation-list.component.spec.ts @@ -11,7 +11,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NavigationList} from './navigation-list.component'; import {By} from '@angular/platform-browser'; import {NavigationItem} from '../../interfaces'; -import {RouterTestingModule} from '@angular/router/testing'; +import {provideRouter} from '@angular/router'; import {provideExperimentalZonelessChangeDetection, signal} from '@angular/core'; import {NavigationState} from '../../services'; @@ -37,8 +37,9 @@ describe('NavigationList', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [NavigationList, RouterTestingModule], + imports: [NavigationList], providers: [ + provideRouter([]), {provide: NavigationState, useClass: FakeNavigationListState}, provideExperimentalZonelessChangeDetection(), ], @@ -121,24 +122,34 @@ describe('NavigationList', () => { expect(toggleItemSpy).toHaveBeenCalledOnceWith(itemToToggle); }); - it('should display items to provided level', () => { + it('should display only items to provided level (Level 1)', () => { fixture.componentRef.setInput('navigationItems', [...navigationItems]); fixture.componentRef.setInput('displayItemsToLevel', 1); fixture.detectChanges(true); - const visibleItems = fixture.debugElement.queryAll( - By.css('li.docs-faceted-list-item:not(.docs-navigation-link-hidden)'), - ); - const hiddenItems = fixture.debugElement.queryAll( - By.css('li.docs-faceted-list-item.docs-navigation-link-hidden'), - ); + const items = fixture.debugElement.queryAll(By.css('li.docs-faceted-list-item')); - expect(visibleItems.length).toBe(2); - expect(visibleItems[0].nativeElement.innerText).toBe(navigationItems[0].label); - expect(visibleItems[1].nativeElement.innerText).toBe(navigationItems[1].label); - expect(hiddenItems.length).toBe(2); - expect(hiddenItems[0].nativeElement.innerText).toBe(navigationItems[1].children![0].label); - expect(hiddenItems[1].nativeElement.innerText).toBe(navigationItems[1].children![1].label); + expect(items.length).toBe(2); + expect(items[0].nativeElement.innerText).toBe(navigationItems[0].label); + expect(items[1].nativeElement.innerText).toBe(navigationItems[1].label); + }); + + it('should display all items (Level 2)', () => { + fixture.componentRef.setInput('navigationItems', [...navigationItems]); + fixture.componentRef.setInput('displayItemsToLevel', 2); + fixture.detectChanges(true); + + const items = fixture.debugElement.queryAll(By.css('li.docs-faceted-list-item')); + + expect(items.length).toBe(4); + + expect(items[0].nativeElement.innerText).toBe(navigationItems[0].label); + expect(items[1].nativeElement.innerText.startsWith(navigationItems[1].label)).toBeTrue(); + + const secondItemChildren = navigationItems[1].children || []; + + expect(items[2].nativeElement.innerText).toBe(secondItemChildren[0].label); + expect(items[3].nativeElement.innerText).toBe(secondItemChildren[1].label); }); });