Merge branch 'OZG-8129-bugfix' into 'main'

OZG-8129 Fix icons issues

See merge request !133

alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html

@@ -26,9 +26,13 @@
 <div class="nachrichten-header">
   <div class="flex gap-2">
     <h3 class="nachrichten">Nachrichten</h3>
-    <ods-mail-icon [withBadge]="vorgangStateResource.resource.hasNewPostfachNachricht" data-test-id="postfach-mail-list-mail-icon"/>
+    <ods-mail-icon
+      [withBadge]="vorgangStateResource.resource.hasNewPostfachNachricht"
+      data-test-id="postfach-mail-list-mail-icon"
+    />
   </div>
 
+  <div class="flex">
     <alfa-postfach-mail-pdf-button-container [postfachMailListResource]="postfachMailListStateResource.resource" />
 
     @if (postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL) {
@@ -40,9 +44,13 @@
       />
     }
   </div>
+</div>
 
 <ozgcloud-spinner [stateResource]="postfachMailListStateResource">
-  @for (postfachMail of postfachMailListStateResource.resource | toEmbeddedResources: postfachMailListLinkRel.POSTFACH_MAIL_LIST; track $index){
+  @for (
+    postfachMail of postfachMailListStateResource.resource | toEmbeddedResources: postfachMailListLinkRel.POSTFACH_MAIL_LIST;
+    track $index
+  ) {
     <alfa-postfach-mail
       class="postfach"
       [vorgangStateResource]="vorgangStateResource"

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.html

@@ -31,9 +31,14 @@
 <form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
   <mat-dialog-content>
     <div class="content">
-      <ods-icon name="aktenzeichen" [fill]="(hasAktenzeichen$ | async) ? 'text' : 'neutral'" size="large" class="az_icon" />
+      <ods-icon
+        name="aktenzeichen"
+        [fill]="(hasAktenzeichen$ | async) ? 'text' : 'neutral'"
+        size="large"
+        class="aktenzeichen_icon"
+      />
       <ozgcloud-text-editor
-        class="az_text"
+        class="aktenzeichen_text"
         data-test-id="aktenzeichen-edit-dialog-text-editor"
         label="Aktenzeichen"
         placeholder="kein Aktenzeichen"

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss

@@ -38,12 +38,12 @@
   grid-row-gap: 0.25rem;
   align-items: flex-start;
   grid-template-areas:
-    'az_icon az_text paste_icon'
+    'aktenzeichen_icon aktenzeichen_text paste_icon'
     '. hinweis .';
 }
 
-.az_icon {
-  grid-area: az_icon;
+.aktenzeichen_icon {
+  grid-area: aktenzeichen_icon;
   color: $darkModeGreyLight;
   margin-top: 12px;
 
@@ -53,7 +53,7 @@
 }
 
 :host-context(.dark) {
-  .az_icon {
+  .aktenzeichen_icon {
     color: $darkModeGreyLight;
 
     &--active {
@@ -62,8 +62,8 @@
   }
 }
 
-.az_text {
-  grid-area: az_text;
+.aktenzeichen_text {
+  grid-area: aktenzeichen_text;
 }
 
 .paste_icon {

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html

@@ -49,13 +49,12 @@
     </h2>
     <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
     <div class="flex flex-1 flex-row items-center gap-1">
-      <div class="flex flex-shrink-0" [class.text-gray-400]="!hasAktenzeichen">
-        <ods-icon name="aktenzeichen" fill="text" />
+      <div class="flex flex-shrink-0">
+        <ods-icon name="aktenzeichen" [fill]="hasAktenzeichen ? 'text' : 'neutral'" />
       </div>
       <alfa-aktenzeichen-editable
         data-test-id="alfa-aktenzeichen-editable-button"
         class="flex flex-grow"
-        [class.text-gray-400]="!hasAktenzeichen"
         [vorgang]="vorgang"
       ></alfa-aktenzeichen-editable>
     </div>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts

@@ -23,10 +23,9 @@
  */
 import { BeschiedenDateInVorgangContainerComponent } from '@alfa-client/bescheid';
 import { EMPTY_STRING, EnumToLabelPipe, HasLinkPipe } from '@alfa-client/tech-shared';
-import { getDebugElementFromFixtureByCss, getElementFromFixture } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getMockComponent, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { VorgangHeaderLinkRel } from '@alfa-client/vorgang-shared';
 import { VorgangNummerComponent, VorgangStatusDotComponent, VorgangStatusTextComponent } from '@alfa-client/vorgang-shared-ui';
-import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { IconComponent } from '@ods/system';
@@ -42,7 +41,6 @@ describe('VorgangDetailHeaderComponent', () => {
   let fixture: ComponentFixture<VorgangDetailHeaderComponent>;
 
   const user: string = getDataTestIdOf('vorgang-header-user-icon');
-  const aktenzeichenEditableComponentDataTestId: string = getDataTestIdOf('alfa-aktenzeichen-editable-button');
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -73,26 +71,7 @@ describe('VorgangDetailHeaderComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('bearbeiter/user icon', () => {
-    it('should be visible', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource([VorgangHeaderLinkRel.ASSIGN]);
-      fixture.detectChanges();
-
-      const userElement = fixture.nativeElement.querySelector(user);
-
-      expect(userElement).toBeInstanceOf(HTMLElement);
-    });
-
-    it('should NOT be visible', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource();
-      fixture.detectChanges();
-
-      const userElement = fixture.nativeElement.querySelector(user);
-
-      expect(userElement).not.toBeInstanceOf(HTMLElement);
-    });
-  });
-
+  describe('component', () => {
     describe('set vorgangWithEingang', () => {
       it('should have Aktenzeichen', () => {
         expect(component.hasAktenzeichen).toBeTruthy();
@@ -105,45 +84,41 @@ describe('VorgangDetailHeaderComponent', () => {
 
         expect(component.hasAktenzeichen).toBeFalsy();
       });
+    });
+  });
 
-    it('should NOT set class text-gray-400 for aktenzeichen', () => {
+  describe('template', () => {
+    describe('bearbeiter/user icon', () => {
+      it('should be visible', () => {
+        component.vorgangWithEingang = createVorgangWithEingangResource([VorgangHeaderLinkRel.ASSIGN]);
         fixture.detectChanges();
 
-      const element = getDebugElementFromFixtureByCss(fixture, 'div.text-gray-400');
-
-      expect(element).not.toBeInstanceOf(DebugElement);
+        existsAsHtmlElement(fixture, user);
       });
 
-    it.each([null, EMPTY_STRING])('should set class text-gray-400 for aktenzeichen %s', (aktenzeichen: string) => {
-      const vorgangWithEingang = createVorgangWithEingangResource();
-      vorgangWithEingang.aktenzeichen = aktenzeichen;
-      component.vorgangWithEingang = vorgangWithEingang;
-
+      it('should NOT be visible', () => {
+        component.vorgangWithEingang = createVorgangWithEingangResource();
         fixture.detectChanges();
 
-      const element = getDebugElementFromFixtureByCss(fixture, 'div.text-gray-400');
-
-      expect(element).toBeInstanceOf(DebugElement);
+        notExistsAsHtmlElement(fixture, user);
+      });
     });
 
-    it.each([null, EMPTY_STRING])('should set class text-gray-400 for alfa-aktenzeichen-editable %s', (aktenzeichen: string) => {
-      const vorgangWithEingang = createVorgangWithEingangResource();
-      vorgangWithEingang.aktenzeichen = aktenzeichen;
-      component.vorgangWithEingang = vorgangWithEingang;
-
-      fixture.detectChanges();
-
-      const element = getElementFromFixture(fixture, aktenzeichenEditableComponentDataTestId);
+    describe('aktenzeichen icon', () => {
+      it('should be text filled', () => {
+        const icon: IconComponent = getMockComponent(fixture, IconComponent);
 
-      expect(element).toHaveClass('text-gray-400');
+        expect(icon.fill).toBe('text');
       });
 
-    it('should NOT set class text-gray-400 for alfa-aktenzeichen-editable', () => {
-      fixture.detectChanges();
+      it('should be neutral filled', () => {
+        component.hasAktenzeichen = false;
 
-      const element = getElementFromFixture(fixture, aktenzeichenEditableComponentDataTestId);
+        fixture.detectChanges();
+        const icon: IconComponent = getMockComponent(fixture, IconComponent);
 
-      expect(element).not.toHaveClass('text-gray-400');
+        expect(icon.fill).toBe('neutral');
+      });
     });
   });
 });