AAE-30596 Fix required reactive widgets do not visibility conditions (#10595)

* AAE-30596 Fix required reactive widgets do not visibility conditions

* fix unit test
This commit is contained in:
Tomasz Gnyp
2025-01-28 10:30:12 +01:00
committed by GitHub
parent 35aec24c0f
commit c4b3b9f3d4
11 changed files with 110 additions and 26 deletions

View File

@@ -22,7 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
import { DateAdapter } from '@angular/material/core';
import { isEqual, subDays, addDays } from 'date-fns';
describe('DateWidgetComponent', () => {
describe('DateCloudWidgetComponent', () => {
let widget: DateCloudWidgetComponent;
let fixture: ComponentFixture<DateCloudWidgetComponent>;
let element: HTMLElement;
@@ -443,5 +443,23 @@ describe('DateWidgetComponent', () => {
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be valid when field is hidden with empty value', () => {
widget.field.isVisible = false;
fixture.detectChanges();
expect(widget.field.isValid).toBeTrue();
expect(widget.dateInputControl.valid).toBeTrue();
expect(widget.field.validationSummary.message).toBe('');
});
it('should be invalid when field is hidden with empty value', () => {
widget.field.isVisible = true;
fixture.detectChanges();
expect(widget.field.isValid).toBeFalse();
expect(widget.dateInputControl.valid).toBeFalse();
expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
});
});
});

View File

@@ -101,7 +101,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
}
private updateFormControlState(): void {
this.dateInputControl.setValidators(this.isRequired() ? [Validators.required] : []);
this.dateInputControl.setValidators(this.isRequired() && this.field?.isVisible ? [Validators.required] : []);
this.field?.readOnly || this.readOnly
? this.dateInputControl.disable({ emitEvent: false })
: this.dateInputControl.enable({ emitEvent: false });

View File

@@ -336,9 +336,8 @@ describe('DropdownCloudWidgetComponent', () => {
});
});
it('should be able to display label with asterisk', async () => {
it('should be able to display label with asterisk', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
@@ -346,9 +345,8 @@ describe('DropdownCloudWidgetComponent', () => {
expect(asterisk.textContent).toEqual('*');
});
it('should display a required error when dropdown is required and has no value after an interaction', async () => {
it('should display a required error when dropdown is required and has no value after an interaction', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
@@ -356,7 +354,6 @@ describe('DropdownCloudWidgetComponent', () => {
dropdownSelect.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
@@ -364,10 +361,9 @@ describe('DropdownCloudWidgetComponent', () => {
expect(requiredErrorElement.nativeElement.innerText).toEqual('FORM.FIELD.REQUIRED');
});
it('should NOT display a required error when dropdown is readonly', async () => {
it('should NOT display a required error when dropdown is readonly', () => {
widget.field.readOnly = true;
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
@@ -375,10 +371,27 @@ describe('DropdownCloudWidgetComponent', () => {
dropdownSelect.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
});
it('should be valid when field is hidden with empty value', () => {
widget.field.isVisible = false;
fixture.detectChanges();
expect(widget.field.isValid).toBeTrue();
expect(widget.dropdownControl.valid).toBeTrue();
expect(widget.field.validationSummary.message).toBe('');
});
it('should be invalid when field is hidden with empty value', () => {
widget.field.isVisible = true;
fixture.detectChanges();
expect(widget.field.isValid).toBeFalse();
expect(widget.dropdownControl.valid).toBeFalse();
expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
});
});
describe('filter', () => {

View File

@@ -198,7 +198,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
}
private updateFormControlState(): void {
this.dropdownControl.setValidators(this.isRequired() ? [Validators.required] : []);
this.dropdownControl.setValidators(this.isRequired() && this.field?.isVisible ? [Validators.required] : []);
this.field?.readOnly || this.readOnly
? this.dropdownControl.disable({ emitEvent: false })

View File

@@ -19,13 +19,14 @@ import { Component, ViewEncapsulation } from '@angular/core';
import { FormService, BaseViewerWidgetComponent, ErrorWidgetComponent } from '@alfresco/adf-core';
import { AlfrescoViewerComponent } from '@alfresco/adf-content-services';
import { TranslateModule } from '@ngx-translate/core';
import { NgIf } from '@angular/common';
/* eslint-disable @angular-eslint/component-selector */
@Component({
selector: 'file-viewer-widget',
standalone: true,
imports: [ErrorWidgetComponent, AlfrescoViewerComponent, TranslateModule],
imports: [NgIf, ErrorWidgetComponent, AlfrescoViewerComponent, TranslateModule],
templateUrl: './file-viewer.widget.html',
styleUrls: ['./file-viewer.widget.scss'],
host: {