diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts index d28fcaa5891c5e2faf4f4bb0593a9358faf98f83..f33524b795e39fff7585c3829d8094659429afa2 100644 --- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts +++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts @@ -32,14 +32,33 @@ describe('NavItemComponent', () => { expect(component).toBeTruthy(); }); - describe('routerLink', () => { - it('should set href', () => { - component.to = '/'; - fixture.detectChanges(); + describe('input', () => { + describe('caption', () => { + it('should set link text', () => { + component.caption = 'Test caption'; + fixture.detectChanges(); - const linkElement = getElementFromFixture(fixture, getDataTestIdOf('link-to-/')); + const captionElement: HTMLParagraphElement = getElementFromFixture( + fixture, + getDataTestIdOf('link-caption'), + ); - expect(linkElement).toHaveProperty('href'); + expect(captionElement.innerHTML).toBe('Test caption'); + }); + }); + + describe('to', () => { + it('should set href', () => { + component.to = '/'; + fixture.detectChanges(); + + const linkElement: HTMLAnchorElement = getElementFromFixture( + fixture, + getDataTestIdOf('link-to-/'), + ); + + expect(linkElement).toHaveProperty('href'); + }); }); }); }); diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts index f78a872978585aa6be3f7297ad68a408e6352635..d5f54907fe995fa082505d3449a236d89b6f4ecb 100644 --- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts @@ -18,7 +18,7 @@ import { RouterLink, RouterLinkActive } from '@angular/router'; [attr.data-test-id]="'link-to-' + to" > <ng-content select="[icon]" /> - <p class="text-left text-sm text-text">{{ caption }}</p> + <p class="text-left text-sm text-text" data-test-id="link-caption">{{ caption }}</p> </a>`, }) export class NavItemComponent {