OZG-4948 Use data-test-id instead of selector

alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.ts

@@ -12,7 +12,7 @@ export class PostfachFormComponent {
 
   protected readonly PostfachFormService = PostfachFormService;
 
-  submit() {
+  public submit() {
     this.formService.submit();
   }
 }

alfa-client/libs/admin-settings/src/lib/shared/navigation-item/navigation-item.component.html

@@ -4,6 +4,6 @@
   data-test-id="anchor"
   class="hover:bg-ozgblue-200 active:bg-ozgblue-200/75 flex items-center gap-4 rounded-full p-3 font-semibold"
 >
-  <img [src]="imageSrc" [alt]="name" class="w-6" data-test-id="image" />
-  <span data-test-id="navigation-label">{{ name }}</span>
+	<img [src]="imageSrc" [alt]="name" class="w-6" [attr.data-test-id]="'image-' + name" />
+	<span [attr.data-test-id]="'navigation-label-' + name | convertForDataTest">{{ name }}</span>
 </a>

alfa-client/libs/admin-settings/src/lib/shared/navigation-item/navigation-item.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NavigationItemComponent } from './navigation-item.component';
-import { existsAsHtmlElement, getElementFromFixture } from '@alfa-client/test-utils';
+import { getElementFromFixture } from '@alfa-client/test-utils';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { RouterTestingModule } from '@angular/router/testing';
+import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
 
 describe('NavigationItemComponent', () => {
   let component: NavigationItemComponent;
   let fixture: ComponentFixture<NavigationItemComponent>;
 
   const anchorLink = getDataTestIdOf('anchor');
+  const navigationLabelName = 'test';
+  const image = getDataTestIdOf('image-' + navigationLabelName);
+  const label = getDataTestIdOf('navigation-label-' + navigationLabelName);
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NavigationItemComponent],
+      declarations: [NavigationItemComponent, ConvertForDataTestPipe],
       imports: [ReactiveFormsModule, RouterTestingModule],
     }).compileComponents();
   });
@@ -21,6 +25,7 @@ describe('NavigationItemComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NavigationItemComponent);
     component = fixture.componentInstance;
+    component.name = 'test';
     fixture.detectChanges();
   });
 
@@ -29,11 +34,13 @@ describe('NavigationItemComponent', () => {
   });
 
   it('should use imageSrc input', () => {
-    component.imageSrc = 'imagesrc';
+    const imageSrc = 'imagesrc';
+    component.imageSrc = imageSrc;
 
     fixture.detectChanges();
 
-    existsAsHtmlElement(fixture, 'img[src="imagesrc"]');
+    const imageElement: HTMLImageElement = getElementFromFixture(fixture, image);
+    expect(imageElement.getAttribute('src')).toBe(imageSrc);
   });
 
   it('should use router link', () => {
@@ -47,23 +54,13 @@ describe('NavigationItemComponent', () => {
   });
 
   describe('image name', () => {
-    const navigationLabelName = 'navname';
-
     it('should be used for alt', () => {
-      component.name = navigationLabelName;
-
-      fixture.detectChanges();
-
-      const imageElement = getElementFromFixture(fixture, getDataTestIdOf('image'));
+      const imageElement = getElementFromFixture(fixture, image);
       expect(imageElement.alt).toBe(navigationLabelName);
     });
 
     it('should be used for navigation-label', () => {
-      component.name = navigationLabelName;
-
-      fixture.detectChanges();
-
-      const labelElement = getElementFromFixture(fixture, getDataTestIdOf('navigation-label'));
+      const labelElement = getElementFromFixture(fixture, label);
       expect(labelElement.textContent).toBe(navigationLabelName);
     });
   });