Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(docs-infra): remove redundant nav menu items from the DOM in the reference (#58934)

Browse source 
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
This commit is contained in:
hawkgs 2024-11-27 17:42:45 +02:00 committed by Pawel Kozlowski
parent 9f99196d23
commit 293dce929d
3 changed files with 31 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
adev/shared-docs/components/navigation-list/navigation-list.component.html
View file

@ -4,10 +4,7 @@
[class.docs-navigation-list-dropdown]="isDropdownView()"
>
@for (item of navigationItems; track $index) {
<li
class="docs-faceted-list-item"
[class.docs-navigation-link-hidden]="displayItemsToLevel() && item.level > displayItemsToLevel()"
>
<li class="docs-faceted-list-item">
@if (item.path) {
@if (item.isExternal) {
<a [href]="item.path" target="_blank">
@ -67,7 +64,7 @@
</button>
}
}
@if (item.children?.length > 0) {
@if (displayItemsToLevel() > item.level && item.children?.length > 0) {
<ng-container *ngTemplateOutlet="navigationList; context: {$implicit: item.children}" />
}
</li>

8
adev/shared-docs/components/navigation-list/navigation-list.component.scss
View file

@ -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 {

41
adev/shared-docs/components/navigation-list/navigation-list.component.spec.ts
View file

@ -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);
});
});