Merge pull request 'OZG-6381 use InvalidParam for error messages' (#719) from...

Merge pull request 'OZG-6381 use InvalidParam for error messages' (#719) from OZG-6381-Validierungsfehler-Admin into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/719


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html

@@ -13,11 +13,11 @@
     />
   </label>
   <div
-    *ngIf="errorMessages.length > 0"
+    *ngIf="invalidParams.length > 0"
     [attr.data-test-id]="'text-field-errors-' + label | convertForDataTest"
   >
-    <span class="mb-3 italic text-red-500" *ngFor="let errorMessage of errorMessages">{{
-      errorMessage
+    <span class="mb-3 italic text-red-500" *ngFor="let invalidParam of invalidParams">{{
+      getErrorMessage(invalidParam)
     }}</span>
   </div>
 </div>

alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts

-import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
-import { getElementFromFixture, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { ConvertForDataTestPipe, InvalidParam } from '@alfa-client/tech-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, NgControl, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
-import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { ReactiveFormsModule } from '@angular/forms';
+import { createInvalidParam, createProblemDetail } from 'libs/tech-shared/test/error';
 import { TextFieldComponent } from './text-field.component';
 
+import * as TechValidationUtil from 'libs/tech-shared/src/lib/validation/tech.validation.util';
+
 describe('TextFieldComponent', () => {
   let component: TextFieldComponent;
   let fixture: ComponentFixture<TextFieldComponent>;
 
   const label = 'custom';
-  const spanSelector = getDataTestIdOf('text-field-span-' + label);
-  const inputSelector = getDataTestIdOf('text-field-input-' + label);
-  const errorsSelector = getDataTestIdOf('text-field-errors-' + label);
-
-  const formControl = new FormControl('');
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [TextFieldComponent, ConvertForDataTestPipe],
       imports: [ReactiveFormsModule],
-    })
-      .overrideComponent(TextFieldComponent, {
-        add: {
-          providers: [
-            {
-              provide: NgControl,
-              useValue: formControl,
-            },
-          ],
-        },
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(TextFieldComponent);
     component = fixture.componentInstance;
@@ -43,62 +28,39 @@ describe('TextFieldComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should use label', () => {
-    const labelElement = getElementFromFixture(fixture, spanSelector);
-    expect(labelElement.textContent).toBe(label);
-  });
-
-  it('should use form control', () => {
-    const fieldText = 'text';
-    component.writeValue(fieldText);
+  describe('getErrorMessage', () => {
+    it('should call getMessageForInvalidParam()', () => {
+      const getMessageForInvalidParam: jest.SpyInstance<string, [string, InvalidParam]> =
+        jest.spyOn(TechValidationUtil, 'getMessageForInvalidParam');
+      const invalidParam: InvalidParam = createInvalidParam();
 
-    fixture.detectChanges();
+      component.getErrorMessage(invalidParam);
 
-    const inputElement = getElementFromFixture(fixture, inputSelector);
-    expect(inputElement.value).toBe(fieldText);
+      expect(getMessageForInvalidParam).toHaveBeenCalledWith(label, invalidParam);
     });
-
-  describe('invalid indication', () => {
-    it('should show as red if invalid', () => {
-      formControl.setErrors({ someErrorCode: 'Invalid' });
-
-      fixture.detectChanges();
-
-      const labelElement = getElementFromFixture(fixture, spanSelector);
-      expect([...labelElement.classList]).toEqual(['text-red-500', 'font-bold']);
   });
 
-    it('should not show as red if valid', () => {
-      formControl.setErrors(null);
+  describe('show error messages', () => {
+    it('should not call getErrorMessage() if no error', () => {
+      component.getErrorMessage = jest.fn();
+      component.fieldControl.setErrors({});
 
       fixture.detectChanges();
 
-      const labelElement = getElementFromFixture(fixture, spanSelector);
-      expect([...labelElement.classList]).toEqual([]);
-    });
+      expect(component.getErrorMessage).not.toHaveBeenCalled();
     });
 
-  describe('error messages', () => {
-    it('should not show empty error message container', () => {
-      fixture.detectChanges();
+    it('should call getErrorMessage() if error', () => {
+      component.getErrorMessage = jest.fn();
 
-      notExistsAsHtmlElement(fixture, errorsSelector);
+      component.fieldControl.setErrors({
+        ...createProblemDetail(),
+        invalidParams: [{ ...createInvalidParam(), name: 'settingBody.absender.name' }],
       });
 
-    it('should show error messages', () => {
-      const errors: ValidationErrors = {
-        firstMessage: 'first',
-        secondMessage: 'second',
-      };
-      formControl.setErrors(errors);
-
       fixture.detectChanges();
 
-      const errorsElement: HTMLElement = getElementFromFixture(fixture, errorsSelector);
-      const spansTexts = Array.from(errorsElement.querySelectorAll('span')).map(
-        (span) => span.textContent,
-      );
-      expect(spansTexts).toEqual(Object.values(errors));
+      expect(component.getErrorMessage).toHaveBeenCalled();
     });
   });
 });

alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts

-import { isNotNil } from '@alfa-client/tech-shared';
+import { getMessageForInvalidParam, InvalidParam } from '@alfa-client/tech-shared';
 import { Component, Input } from '@angular/core';
 import { FormControlEditorAbstractComponent } from '@ods/component';
 
@@ -10,7 +10,7 @@ export class TextFieldComponent extends FormControlEditorAbstractComponent {
   @Input()
   label: string;
 
-  get errorMessages(): string[] {
-    return isNotNil(this.control?.errors) ? Object.values(this.control.errors) : [];
+  public getErrorMessage(invalidParam: InvalidParam): string {
+    return getMessageForInvalidParam(this.label, invalidParam);
   }
 }