diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html index 2baa2a383b01b1e32ac4295240fc0a0890a47f52..303f8720da7e44c2cdcc5618f70a64d366e4c64e 100644 --- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html +++ b/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> diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts index 44f27c6b31b79144a38f750312ba6404f2e00647..9096bedd3ab98897a3adc9474b291c7703144572 100644 --- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts +++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts @@ -1,37 +1,22 @@ -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); - - fixture.detectChanges(); - - const inputElement = getElementFromFixture(fixture, inputSelector); - expect(inputElement.value).toBe(fieldText); - }); + describe('getErrorMessage', () => { + it('should call getMessageForInvalidParam()', () => { + const getMessageForInvalidParam: jest.SpyInstance<string, [string, InvalidParam]> = + jest.spyOn(TechValidationUtil, 'getMessageForInvalidParam'); + const invalidParam: InvalidParam = createInvalidParam(); - describe('invalid indication', () => { - it('should show as red if invalid', () => { - formControl.setErrors({ someErrorCode: 'Invalid' }); + component.getErrorMessage(invalidParam); - fixture.detectChanges(); - - const labelElement = getElementFromFixture(fixture, spanSelector); - expect([...labelElement.classList]).toEqual(['text-red-500', 'font-bold']); + expect(getMessageForInvalidParam).toHaveBeenCalledWith(label, invalidParam); }); + }); - 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(); - - notExistsAsHtmlElement(fixture, errorsSelector); - }); + it('should call getErrorMessage() if error', () => { + component.getErrorMessage = jest.fn(); - it('should show error messages', () => { - const errors: ValidationErrors = { - firstMessage: 'first', - secondMessage: 'second', - }; - formControl.setErrors(errors); + component.fieldControl.setErrors({ + ...createProblemDetail(), + invalidParams: [{ ...createInvalidParam(), name: 'settingBody.absender.name' }], + }); 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(); }); }); }); diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts index bca9352718c8cbdb0e8f0434095d574215da1577..00037394425175ac3fcca9fe68b1ba286e3c6315 100644 --- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts +++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts @@ -1,4 +1,4 @@ -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); } }