diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts index eef4c5ff9ec74c7a35544bdb60c15dbd8dd900c3..0e15e5ed231cbc622027dc95f2ca5a95f86ba7d3 100644 --- a/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts +++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts @@ -21,16 +21,20 @@ * Die sprachspezifischen Genehmigungen und Beschränkungen * unter der Lizenz sind dem Lizenztext zu entnehmen. */ +import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils'; import { provideHttpClient } from '@angular/common/http'; import { provideZoneChangeDetection } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { provideAngularSvgIcon } from 'angular-svg-icon'; +import { getDataTestIdOf } from 'libs/tech-shared/test/data-test'; import { IconComponent } from './icon.component'; describe('IconComponent', () => { let component: IconComponent; let fixture: ComponentFixture<IconComponent>; + const labelSelector: string = getDataTestIdOf('sr-label'); + beforeEach(async () => { await TestBed.configureTestingModule({ imports: [IconComponent], @@ -45,4 +49,24 @@ describe('IconComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + describe('component', () => { + describe('label', () => { + it('should show', () => { + component.label = 'test'; + + fixture.detectChanges(); + + existsAsHtmlElement(fixture, labelSelector); + }); + + it('should hide', () => { + component.label = ''; + + fixture.detectChanges(); + + notExistsAsHtmlElement(fixture, labelSelector); + }); + }); + }); }); diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts index 0c998775c807a04aeafdfbca4b29edb524361084..3a1d1d98bb7c75d697d57d7094ac45e534bef9cf 100644 --- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts +++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts @@ -60,7 +60,9 @@ type IconVariants = VariantProps<typeof iconVariants>; [svgClass]="twMerge(iconVariants({ size, fill }), class)" aria-hidden="true" /> - <span class="sr-only empty:hidden">{{ label }}</span>`, + @if (label) { + <span class="sr-only" data-test-id="sr-label">{{ label }}</span> + }`, styles: [':host {@apply block size-fit}'], }) export class IconComponent {