From 47285152d904ff8fc571ce840ca2a8bbfdaf7c03 Mon Sep 17 00:00:00 2001 From: Tomasz Gnyp Date: Tue, 30 Jul 2024 15:18:05 +0200 Subject: [PATCH] unit tests update --- .../form-renderer.component.spec.ts | 4 +- .../mock/form-renderer.component.mock.ts | 4 +- .../widgets/core/form-field-validator.spec.ts | 496 ------------------ .../widgets/core/form-field.model.ts | 4 + .../widgets/date-time/date-time.widget.html | 6 +- .../date-time/date-time.widget.spec.ts | 36 +- .../widgets/date-time/date-time.widget.ts | 30 +- .../components/widgets/date/date.widget.html | 6 +- .../widgets/date/date.widget.spec.ts | 39 +- .../components/widgets/date/date.widget.ts | 20 +- .../form/components/form-cloud.component.ts | 6 +- .../widgets/date/date-cloud.widget.html | 6 +- .../widgets/date/date-cloud.widget.spec.ts | 64 +-- .../widgets/date/date-cloud.widget.ts | 13 +- 14 files changed, 111 insertions(+), 623 deletions(-) diff --git a/lib/core/src/lib/form/components/form-renderer.component.spec.ts b/lib/core/src/lib/form/components/form-renderer.component.spec.ts index 4dc682e51cf..f67e5fc8d96 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.spec.ts +++ b/lib/core/src/lib/form/components/form-renderer.component.spec.ts @@ -110,7 +110,7 @@ describe('Form Renderer Component', () => { expectElementToBeHidden(displayTextElementContainer); inputDateTestOne.value = '2019-11-19'; - inputDateTestOne.dispatchEvent(new Event('change')); + inputDateTestOne.dispatchEvent(new Event('input')); fixture.detectChanges(); await fixture.whenStable(); @@ -130,7 +130,7 @@ describe('Form Renderer Component', () => { expectElementToBeVisible(displayTextElementContainer); inputDateTestOne.value = '2019-11-19'; - inputDateTestOne.dispatchEvent(new Event('change')); + inputDateTestOne.dispatchEvent(new Event('input')); fixture.detectChanges(); await fixture.whenStable(); diff --git a/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts b/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts index 90c7f5c543d..87c1f8555a9 100644 --- a/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts +++ b/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts @@ -1552,7 +1552,7 @@ export const formDateVisibility = { 2: [ { id: 'Text0pqd1u', - name: 'Text', + name: 'Text equal specific date', type: 'text', readOnly: false, required: false, @@ -1589,7 +1589,7 @@ export const formDateVisibility = { 1: [ { id: 'Text0uyqd3', - name: 'Text', + name: 'Text NOT equal specific date', type: 'text', readOnly: false, required: false, diff --git a/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts b/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts index f478af0b45a..48513ffdc90 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts @@ -16,7 +16,6 @@ */ import { ErrorMessageModel } from './error-message.model'; -import { FormFieldOption } from './form-field-option'; import { FormFieldTypes } from './form-field-types'; import { FixedValueFieldValidator, @@ -27,11 +26,6 @@ import { NumberFieldValidator, RegExFieldValidator, RequiredFieldValidator, - MaxDateTimeFieldValidator, - MinDateTimeFieldValidator, - MaxDateFieldValidator, - MinDateFieldValidator, - DateTimeFieldValidator, DecimalFieldValidator } from './form-field-validator'; import { FormFieldModel } from './form-field.model'; @@ -65,22 +59,6 @@ describe('FormFieldValidator', () => { expect(validator.validate(field)).toBe(true); }); - it('should fail (display error) for dropdown with empty value', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DROPDOWN, - value: '', - options: [{ id: 'empty', name: 'Choose option...' }], - hasEmptyValue: true, - required: true - }); - - field.emptyOption = { id: '' } as FormFieldOption; - expect(validator.validate(field)).toBe(false); - - field.value = ''; - expect(validator.validate(field)).toBe(true); - }); - it('should fail (display error) for multiple type dropdown with zero selection', () => { const field = new FormFieldModel(new FormModel(), { type: FormFieldTypes.DROPDOWN, @@ -196,20 +174,6 @@ describe('FormFieldValidator', () => { expect(validator.validate(field)).toBe(true); }); - it('should fail (display error) for date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: null, - required: true - }); - - field.value = null; - expect(validator.validate(field)).toBe(false); - - field.value = ''; - expect(validator.validate(field)).toBe(false); - }); - it('should succeed for text', () => { const field = new FormFieldModel(new FormModel(), { type: FormFieldTypes.TEXT, @@ -664,466 +628,6 @@ describe('FormFieldValidator', () => { }); }); - describe('MaxDateTimeFieldValidator', () => { - let validator: MaxDateTimeFieldValidator; - - beforeEach(() => { - validator = new MaxDateTimeFieldValidator(); - }); - - it('should require maxValue defined', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME - }); - expect(validator.isSupported(field)).toBe(false); - - field.maxValue = '9999-02-08 10:10 AM'; - expect(validator.isSupported(field)).toBe(true); - }); - - it('should support date time widgets only', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - maxValue: '9999-02-08 10:10 AM' - }); - - expect(validator.isSupported(field)).toBe(true); - - field.type = FormFieldTypes.TEXT; - expect(validator.isSupported(field)).toBe(false); - }); - - it('should allow empty values', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: null, - maxValue: '9999-02-08 10:10 AM' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed for unsupported types', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.TEXT - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should take into account that max value is in UTC and NOT fail (display error) validating value checking the time', () => { - const localValidValue = '2018-03-30T22:59:00.000Z'; - - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: localValidValue, - maxValue: '2018-03-31T23:00:00.000Z' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should take into account that max value is in UTC and fail (display error) validating value checking the time', () => { - const localInvalidValue = '2018-03-30T23:01:00.000Z'; - - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: localInvalidValue, - maxValue: `2018-03-30T23:00:00.000Z` - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_GREATER_THAN'); - }); - - it('should succeed validating value checking the time', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '9999-02-08T09:10:00.000Z', - maxValue: '9999-02-08T10:10:00.000Z' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating value checking the time', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '9999-02-08T11:10:00.000Z', - maxValue: '9999-02-08T10:10:00.000Z' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - - it('should succeed validating value checking the date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '9999-02-08T09:10:00.000Z', - maxValue: '9999-02-08T10:10:00.000Z' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating value checking the date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '08-02-9999 12:10 AM', - maxValue: '9999-02-07 10:10 AM' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - }); - - describe('MinDateTimeFieldValidator', () => { - let validator: MinDateTimeFieldValidator; - - beforeEach(() => { - validator = new MinDateTimeFieldValidator(); - }); - - it('should require minValue defined', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME - }); - expect(validator.isSupported(field)).toBe(false); - - field.minValue = '9999-02-08 09:10 AM'; - expect(validator.isSupported(field)).toBe(true); - }); - - it('should support date time widgets only', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - minValue: '9999-02-08 09:10 AM' - }); - - expect(validator.isSupported(field)).toBe(true); - - field.type = FormFieldTypes.TEXT; - expect(validator.isSupported(field)).toBe(false); - }); - - it('should allow empty values', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: null, - minValue: '9999-02-08 09:10 AM' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed for unsupported types', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.TEXT - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should take into account that min value is in UTC and NOT fail (display error) validating value checking the time', () => { - const localValidValue = '2018-03-02T06:01:00.000Z'; - - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: localValidValue, - minValue: '2018-03-02T06:00:00.000Z' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should take into account that min value is in UTC and fail (display error) validating value checking the time', () => { - const localInvalidValue = '2018-3-02 05:59 AM'; - - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: localInvalidValue, - minValue: '2018-03-02T06:00:00+00:00' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_LESS_THAN'); - }); - - it('should succeed validating value by time', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '08-02-9999 09:10 AM', - minValue: '9999-02-08 09:00 AM' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed validating value by date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '09-02-9999 09:10 AM', - minValue: '9999-02-08 09:10 AM' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating value by time', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '9999-08-02T08:10:00.000Z', - minValue: '9999-08-02T08:11:00.000Z' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - - it('should fail (display error) validating value by date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '9999-02-07T09:10:00.000Z', - minValue: '9999-02-08T09:10:00.000Z' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - }); - - describe('MaxDateFieldValidator', () => { - let validator: MaxDateFieldValidator; - - beforeEach(() => { - validator = new MaxDateFieldValidator(); - }); - - it('should require maxValue defined', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE - }); - expect(validator.isSupported(field)).toBe(false); - - field.maxValue = '9999-02-08'; - expect(validator.isSupported(field)).toBe(true); - }); - - it('should support date widgets only', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - maxValue: '9999-02-08' - }); - - expect(validator.isSupported(field)).toBe(true); - - field.type = FormFieldTypes.TEXT; - expect(validator.isSupported(field)).toBe(false); - }); - - it('should allow empty values', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: null, - maxValue: '9999-02-08' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed for unsupported types', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.TEXT - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed validating value checking the date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - maxValue: '9999-02-09' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating value checking the date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - maxValue: '9999-02-07' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - - it('should validate with APS1 format', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - maxValue: '09-02-9999' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating with APS1 format', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - maxValue: '07-02-9999' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - }); - - describe('MinDateFieldValidator', () => { - let validator: MinDateFieldValidator; - - beforeEach(() => { - validator = new MinDateFieldValidator(); - }); - - it('should require maxValue defined', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE - }); - expect(validator.isSupported(field)).toBe(false); - - field.minValue = '9999-02-08'; - expect(validator.isSupported(field)).toBe(true); - }); - - it('should support date widgets only', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - minValue: '9999-02-08' - }); - - expect(validator.isSupported(field)).toBe(true); - - field.type = FormFieldTypes.TEXT; - expect(validator.isSupported(field)).toBe(false); - }); - - it('should allow empty values', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: null, - minValue: '9999-02-08' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed for unsupported types', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.TEXT - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should succeed validating value checking the date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - minValue: '9999-02-07' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating value checking the date', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - minValue: '9999-02-09' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - - it('should validate with APS1 format', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - minValue: '07-02-9999' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should fail (display error) validating with APS1 format', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATE, - value: '9999-02-08T00:00:00', - minValue: '09-02-9999' - }); - - field.validationSummary = new ErrorMessageModel(); - expect(validator.validate(field)).toBe(false); - expect(field.validationSummary).not.toBeNull(); - }); - }); - - describe('DateTimeFieldValidator', () => { - let validator: DateTimeFieldValidator; - - beforeEach(() => { - validator = new DateTimeFieldValidator(); - }); - - it('should validate dateTime format with dateDisplayFormat', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '2021-06-09 14:10', - dateDisplayFormat: 'YYYY-MM-DD HH:mm' - }); - - expect(validator.validate(field)).toBe(true); - }); - - it('should validate dateTime format with default format', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '9-6-2021 11:10 AM' - }); - expect(field.value).toBe('9-6-2021 11:10 AM'); - expect(field.dateDisplayFormat).toBe('D-M-YYYY hh:mm A'); - expect(validator.validate(field)).toBe(true); - }); - - it('should not validate dateTime format with default format', () => { - const field = new FormFieldModel(new FormModel(), { - type: FormFieldTypes.DATETIME, - value: '2021-06-09 14:10 AM' // 14:10 does not conform to A - }); - expect(field.value).toBe('2021-06-09 14:10 AM'); - expect(field.dateDisplayFormat).toBe('D-M-YYYY hh:mm A'); - expect(validator.validate(field)).toBe(false); - }); - }); - describe('DecimalFieldValidator', () => { let decimalValidator: DecimalFieldValidator; diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts index 2ce1740999e..e32b3e93bd5 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts @@ -143,6 +143,10 @@ export class FormFieldModel extends FormWidgetModel { this._isValid = false; } + markAsValid() { + this._isValid = true; + } + validate(): boolean { this.validationSummary = new ErrorMessageModel(); diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html index 2d42ec09e95..7f0efa81018 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html @@ -1,6 +1,6 @@
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts index ecdb5f93f0d..b12a1b1d4b0 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts @@ -22,12 +22,10 @@ import { DateTimeWidgetComponent } from './date-time.widget'; import { TranslateModule } from '@ngx-translate/core'; import { MatTooltipModule } from '@angular/material/tooltip'; import { FormFieldTypes } from '../core/form-field-types'; -import { DateFieldValidator, DateTimeFieldValidator } from '../core'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { MatInputHarness } from '@angular/material/input/testing'; import { addMinutes } from 'date-fns'; -import { HttpClientModule } from '@angular/common/http'; import { MatDialogModule } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core'; @@ -35,6 +33,7 @@ import { MatMenuModule } from '@angular/material/menu'; import { MatButtonModule } from '@angular/material/button'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; describe('DateTimeWidgetComponent', () => { let loader: HarnessLoader; @@ -47,7 +46,7 @@ describe('DateTimeWidgetComponent', () => { TestBed.configureTestingModule({ imports: [ TranslateModule.forRoot(), - HttpClientModule, + HttpClientTestingModule, NoopAnimationsModule, MatDialogModule, MatMenuModule, @@ -65,7 +64,6 @@ describe('DateTimeWidgetComponent', () => { widget = fixture.componentInstance; form = new FormModel(); - form.fieldValidators = [new DateFieldValidator(), new DateTimeFieldValidator()]; loader = TestbedHarnessEnvironment.loader(fixture); }); @@ -74,7 +72,7 @@ describe('DateTimeWidgetComponent', () => { TestBed.resetTestingModule(); }); - it('should setup min value for date picker', async () => { + it('should setup min value for date picker', () => { const minValue = '1982-03-13T10:00:00Z'; widget.field = new FormFieldModel(form, { id: 'date-id', @@ -84,7 +82,6 @@ describe('DateTimeWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.minDate.toISOString()).toBe(`1982-03-13T10:00:00.000Z`); }); @@ -101,18 +98,17 @@ describe('DateTimeWidgetComponent', () => { expect(element.querySelector('#data-time-widget')).not.toBeNull(); }); - it('should setup max value for date picker', async () => { + it('should setup max value for date picker', () => { const maxValue = '1982-03-13T10:00:00Z'; widget.field = new FormFieldModel(null, { maxValue }); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.maxDate.toISOString()).toBe('1982-03-13T10:00:00.000Z'); }); - it('should eval visibility on date changed', async () => { + it('should eval visibility on date changed', () => { spyOn(widget, 'onFieldChanged').and.callThrough(); const field = new FormFieldModel(form, { @@ -125,14 +121,13 @@ describe('DateTimeWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); widget.datetimeInputControl.setValue(new Date('1982-03-13T10:00:00.000Z')); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); - it('should validate the initial datetime value', async () => { + it('should validate the initial datetime value', () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -143,12 +138,11 @@ describe('DateTimeWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); expect(field.isValid).toBeTrue(); }); - it('should validate the updated datetime value', async () => { + it('should validate the updated datetime value', () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -159,7 +153,6 @@ describe('DateTimeWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); let expectedDate = new Date('9999-09-12T09:10:00.000Z'); expectedDate = addMinutes(expectedDate, expectedDate.getTimezoneOffset()); @@ -169,7 +162,7 @@ describe('DateTimeWidgetComponent', () => { expect(field.isValid).toBeTrue(); }); - it('should forwad the incorrect datetime input for further validation', async () => { + it('should forwad the incorrect datetime input for further validation', () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -180,15 +173,12 @@ describe('DateTimeWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); - widget.datetimeInputControl.setValue('123abc'); + widget.datetimeInputControl.setValue(new Date('123abc')); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.datetimeInputControl.invalid).toBeTrue(); - expect(field.value).toBe('123abc'); expect(field.isValid).toBeFalse(); expect(field.validationSummary.message).toBe('D-M-YYYY hh:mm A'); }); @@ -213,7 +203,7 @@ describe('DateTimeWidgetComponent', () => { expect(field.isValid).toBeTrue(); }); - it('should fail validating incorrect keyboard input', async () => { + it('should fail validating incorrect keyboard input', () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -224,10 +214,7 @@ describe('DateTimeWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); - // const input = await loader.getHarness(MatInputHarness); - // await input.setValue('123abc'); const dateTimeInput = fixture.nativeElement.querySelector('input'); dateTimeInput.value = '123abc'; dateTimeInput.dispatchEvent(new Event('input')); @@ -284,6 +271,7 @@ describe('DateTimeWidgetComponent', () => { type: FormFieldTypes.DATETIME, required: true }); + fixture.detectChanges(); }); it('should be marked as invalid after interaction', () => { @@ -298,8 +286,6 @@ describe('DateTimeWidgetComponent', () => { }); it('should be able to display label with asterisk', () => { - fixture.detectChanges(); - const asterisk = element.querySelector('.adf-asterisk'); expect(asterisk).not.toBeNull(); diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts index 9a9cea1cbb9..51a398b1572 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts @@ -18,7 +18,7 @@ /* eslint-disable @angular-eslint/component-selector */ import { NgIf } from '@angular/common'; -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -49,24 +49,25 @@ import { ErrorMessageModel } from '../core/error-message.model'; export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy { minDate: Date; maxDate: Date; - datetimeInputControl: FormControl; private datetimeChangesSubscription: Subscription; - constructor( - public readonly formService: FormService, - private readonly dateAdapter: DateAdapter, - private readonly dateTimeAdapter: DatetimeAdapter - ) { - super(formService); - } + public readonly formService = inject(FormService); + private readonly dateAdapter = inject(DateAdapter); + private readonly dateTimeAdapter = inject(DatetimeAdapter); - ngOnInit() { + ngOnInit(): void { this.initFormControl(); this.initDateAdapter(); this.initDateRange(); this.subscribeToDateChanges(); + this.updateField(); + } + + updateField(): void { + this.validateField(); + this.onFieldChanged(this.field); } private initFormControl(): void { @@ -81,17 +82,18 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, private subscribeToDateChanges(): void { this.datetimeChangesSubscription = this.datetimeInputControl.valueChanges.subscribe((newDate: Date) => { - this.field.value = newDate.toISOString(); - this.validateField(); - this.onFieldChanged(this.field); + this.field.value = newDate; + this.updateField(); }); } private validateField(): void { - if (this.datetimeInputControl.invalid) { + if (this.datetimeInputControl?.invalid) { this.handleErrors(this.datetimeInputControl.errors); + this.field.markAsInvalid(); } else { this.resetErrors(); + this.field.markAsValid(); } } diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html index 24131389000..728b27ecf85 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.html +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html @@ -1,4 +1,4 @@ -
+
+ (blur)="updateField()"> - +
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts b/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts index d19f2c63471..e3cb518650a 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts @@ -18,7 +18,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DateAdapter } from '@angular/material/core'; import { CoreTestingModule } from '../../../../testing'; -import { DateFieldValidator, FormFieldModel, FormFieldTypes, FormModel, MaxDateFieldValidator, MinDateFieldValidator } from '../core'; +import { FormFieldModel, FormFieldTypes, FormModel } from '../core'; import { DateWidgetComponent } from './date.widget'; describe('DateWidgetComponent', () => { @@ -34,7 +34,6 @@ describe('DateWidgetComponent', () => { }); form = new FormModel(); - form.fieldValidators = [new DateFieldValidator(), new MinDateFieldValidator(), new MaxDateFieldValidator()]; fixture = TestBed.createComponent(DateWidgetComponent); adapter = fixture.debugElement.injector.get(DateAdapter); @@ -61,13 +60,13 @@ describe('DateWidgetComponent', () => { minValue }); - widget.ngOnInit(); + fixture.detectChanges(); const expected = adapter.parse(minValue, widget.DATE_FORMAT) as Date; expect(adapter.compareDate(widget.minDate, expected)).toBe(0); }); - it('should validate min date value constraint', async () => { + it('should validate min date value constraint', () => { const minValue = '13-03-1982'; const field = new FormFieldModel(form, { @@ -79,19 +78,18 @@ describe('DateWidgetComponent', () => { }); widget.field = field; - widget.ngOnInit(); + fixture.detectChanges(); widget.dateInputControl.setValue(new Date('1982/03/12')); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.field.isValid).toBeFalsy(); expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_LESS_THAN'); expect(field.validationSummary.attributes.get('minValue')).toBe('13-03-1982'); }); - it('should validate max date value constraint', async () => { + it('should validate max date value constraint', () => { const maxValue = '13-03-1982'; const field = new FormFieldModel(form, { @@ -103,12 +101,11 @@ describe('DateWidgetComponent', () => { }); widget.field = field; - widget.ngOnInit(); + fixture.detectChanges(); widget.dateInputControl.setValue(new Date('2023/03/13')); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.field.isValid).toBeFalsy(); expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_GREATER_THAN'); @@ -132,13 +129,13 @@ describe('DateWidgetComponent', () => { widget.field = new FormFieldModel(form, { maxValue }); - widget.ngOnInit(); + fixture.detectChanges(); const expected = adapter.parse(maxValue, widget.DATE_FORMAT) as Date; expect(adapter.compareDate(widget.maxDate, expected)).toBe(0); }); - it('should eval visibility on date changed', async () => { + it('should eval visibility on date changed', () => { spyOn(widget, 'onFieldChanged').and.callThrough(); const field = new FormFieldModel(form, { @@ -151,7 +148,6 @@ describe('DateWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); widget.dateInputControl.setValue(new Date('12/12/2012')); @@ -185,7 +181,7 @@ describe('DateWidgetComponent', () => { TestBed.resetTestingModule(); }); - it('should show visible date widget', async () => { + it('should show visible date widget', () => { widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -194,7 +190,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const dateElement = element.querySelector('#date-field-id'); expect(dateElement).not.toBeNull(); @@ -202,7 +197,7 @@ describe('DateWidgetComponent', () => { expect(dateElement?.value).toContain('9-9-9999'); }); - it('[C310335] - Should be able to change display format for Date widget', async () => { + it('[C310335] - Should be able to change display format for Date widget', () => { widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -212,7 +207,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); let dateElement = element.querySelector('#date-field-id'); expect(dateElement?.value).toContain('12-30-9999'); @@ -223,7 +217,6 @@ describe('DateWidgetComponent', () => { fixture.componentInstance.ngOnInit(); fixture.detectChanges(); - await fixture.whenStable(); dateElement = element.querySelector('#date-field-id'); expect(dateElement?.value).toContain('05.06.2019'); @@ -234,7 +227,7 @@ describe('DateWidgetComponent', () => { id: 'date-field-id', name: 'date-name', value: '9-9-9999', - type: 'date' + type: FormFieldTypes.DATE }); fixture.detectChanges(); @@ -256,18 +249,22 @@ describe('DateWidgetComponent', () => { id: 'date-field-id', name: 'date-name', value: 'aa', - type: 'date', + type: FormFieldTypes.DATE, readOnly: 'false' }); widget.field.isVisible = true; widget.field.readOnly = false; fixture.detectChanges(); + widget.dateInputControl.setValue(new Date('invalid date')); + + fixture.detectChanges(); + expect(widget.field.isValid).toBeFalsy(); }); }); - it('should display always the json value', async () => { + it('should display always the json value', () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -279,7 +276,6 @@ describe('DateWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); const dateElement = element.querySelector('#date-field-id'); expect(dateElement).toBeDefined(); @@ -290,7 +286,6 @@ describe('DateWidgetComponent', () => { fixture.componentInstance.ngOnInit(); fixture.detectChanges(); - await fixture.whenStable(); expect(dateElement.value).toContain('02-03-2020'); }); diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.ts b/lib/core/src/lib/form/components/widgets/date/date.widget.ts index 55472e1854c..dc9b03e2c06 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.ts +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.ts @@ -18,7 +18,7 @@ /* eslint-disable @angular-eslint/component-selector */ import { NgIf } from '@angular/common'; -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { MatDatepickerModule } from '@angular/material/datepicker'; @@ -65,16 +65,21 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe private dateChangesSubscription: Subscription; - constructor(public readonly formService: FormService, private readonly dateAdapter: DateAdapter) { - super(formService); - } + public readonly formService = inject(FormService); + private readonly dateAdapter = inject(DateAdapter); - ngOnInit() { + ngOnInit(): void { this.initFormControl(); this.initDateAdapter(); this.initDateRange(); this.initStartAt(); this.subscribeToDateChanges(); + this.updateField(); + } + + updateField(): void { + this.validateField(); + this.onFieldChanged(this.field); } private initFormControl(): void { @@ -90,16 +95,17 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe private subscribeToDateChanges(): void { this.dateChangesSubscription = this.dateInputControl.valueChanges.subscribe((newDate: Date) => { this.field.value = newDate; - this.validateField(); - this.onFieldChanged(this.field); + this.updateField(); }); } private validateField(): void { if (this.dateInputControl.invalid) { this.handleErrors(this.dateInputControl.errors); + this.field.markAsInvalid(); } else { this.resetErrors(); + this.field.markAsValid(); } } diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts index 7b75a23ad1a..482f82ff48d 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, HostListener, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, HostListener, OnInit, ChangeDetectorRef } from '@angular/core'; import { Observable, of, forkJoin, Subject, Subscription } from 'rxjs'; import { switchMap, takeUntil, map, filter } from 'rxjs/operators'; import { @@ -130,7 +130,8 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges, private dialog: MatDialog, protected visibilityService: WidgetVisibilityService, private readonly displayModeService: DisplayModeService, - private spinnerService: FormCloudSpinnerService + private spinnerService: FormCloudSpinnerService, + private readonly changeDetector: ChangeDetectorRef ) { super(); @@ -421,6 +422,7 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges, this.displayModeOn.emit(this.displayModeService.findConfiguration(this.displayMode, this.displayModeConfigurations)); } + this.changeDetector.detectChanges(); this.formLoaded.emit(form); } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index 6381f81bcd8..03818c514e1 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -1,4 +1,4 @@ -
+
@@ -15,13 +15,13 @@ [min]="minDate" [max]="maxDate" [title]="field.tooltip" - (blur)="markAsTouched()"> + (blur)="updateField()"> - +
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts index 15b897796c7..c75553aae80 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts @@ -17,7 +17,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DateCloudWidgetComponent } from './date-cloud.widget'; -import { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateFieldValidator, MaxDateFieldValidator } from '@alfresco/adf-core'; +import { FormFieldModel, FormModel, FormFieldTypes } from '@alfresco/adf-core'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { DateAdapter } from '@angular/material/core'; import { isEqual, subDays, addDays } from 'date-fns'; @@ -35,7 +35,6 @@ describe('DateWidgetComponent', () => { }); form = new FormModel(); - form.fieldValidators = [new DateFieldValidator(), new MinDateFieldValidator(), new MaxDateFieldValidator()]; fixture = TestBed.createComponent(DateCloudWidgetComponent); adapter = fixture.debugElement.injector.get(DateAdapter); @@ -83,7 +82,7 @@ describe('DateWidgetComponent', () => { expect(isEqual(widget.maxDate, expected)).toBeTrue(); }); - it('should eval visibility on date changed', async () => { + it('should eval visibility on date changed', () => { spyOn(widget, 'onFieldChanged').and.callThrough(); const field = new FormFieldModel(form, { @@ -97,7 +96,6 @@ describe('DateWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); widget.dateInputControl.setValue(new Date('9999-9-9')); @@ -110,7 +108,7 @@ describe('DateWidgetComponent', () => { TestBed.resetTestingModule(); }); - it('should show visible date widget', async () => { + it('should show visible date widget', () => { widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -119,7 +117,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const dateElement = element.querySelector('#date-field-id'); expect(dateElement).not.toBeNull(); @@ -143,7 +140,7 @@ describe('DateWidgetComponent', () => { expect(dateElement.value).toContain('9999-30-12'); }); - it('should disable date button when is readonly', async () => { + it('should disable date button when is readonly', () => { widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -154,20 +151,18 @@ describe('DateWidgetComponent', () => { widget.field.isVisible = true; widget.field.readOnly = false; fixture.detectChanges(); - await fixture.whenStable(); let dateButton = element.querySelector('button'); expect(dateButton.disabled).toBeFalsy(); widget.field.readOnly = true; fixture.detectChanges(); - await fixture.whenStable(); dateButton = element.querySelector('button'); expect(dateButton.disabled).toBeTruthy(); }); - it('should set isValid to false when the value is not a correct date value', async () => { + it('should set isValid to false when the value is not a correct date value', () => { widget.field = new FormFieldModel(new FormModel(), { id: 'date-field-id', name: 'date-name', @@ -179,13 +174,16 @@ describe('DateWidgetComponent', () => { widget.field.readOnly = false; fixture.detectChanges(); - await fixture.whenStable(); + + widget.dateInputControl.setValue(new Date('invalid date')); + + fixture.detectChanges(); expect(widget.field.isValid).toBeFalsy(); }); }); - it('should display always the json value', async () => { + it('should display always the json value', () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', @@ -197,7 +195,6 @@ describe('DateWidgetComponent', () => { widget.field = field; fixture.detectChanges(); - await fixture.whenStable(); const dateElement = element.querySelector('#date-field-id'); expect(dateElement).toBeDefined(); @@ -208,13 +205,12 @@ describe('DateWidgetComponent', () => { fixture.componentInstance.ngOnInit(); fixture.detectChanges(); - await fixture.whenStable(); expect(dateElement.value).toContain('02-03-2020'); }); describe('when form model has left labels', () => { - it('should have left labels classes on leftLabels true', async () => { + it('should have left labels classes on leftLabels true', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), { id: 'date-id', name: 'date-name', @@ -225,7 +221,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const widgetContainer = element.querySelector('.adf-left-label-input-container'); expect(widgetContainer).not.toBeNull(); @@ -237,7 +232,7 @@ describe('DateWidgetComponent', () => { expect(adfLeftLabel).not.toBeNull(); }); - it('should not have left labels classes on leftLabels false', async () => { + it('should not have left labels classes on leftLabels false', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), { id: 'date-id', name: 'date-name', @@ -248,7 +243,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const widgetContainer = element.querySelector('.adf-left-label-input-container'); expect(widgetContainer).toBeNull(); @@ -260,7 +254,7 @@ describe('DateWidgetComponent', () => { expect(adfLeftLabel).toBeNull(); }); - it('should not have left labels classes on leftLabels not present', async () => { + it('should not have left labels classes on leftLabels not present', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'date-id', name: 'date-name', @@ -271,7 +265,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const widgetContainer = element.querySelector('.adf-left-label-input-container'); expect(widgetContainer).toBeNull(); @@ -293,7 +286,7 @@ describe('DateWidgetComponent', () => { }); describe('Minimum date range value and date', () => { - it('should set minimum date range date to today if minimum date range value is 0', async () => { + it('should set minimum date range date to today if minimum date range value is 0', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -302,7 +295,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const expectedMinDate = adapter.today(); @@ -310,7 +302,7 @@ describe('DateWidgetComponent', () => { expect(widget.field.minValue).toBe(todayString); }); - it('should set minimum date range date to null if minimum date range value is null', async () => { + it('should set minimum date range date to null if minimum date range value is null', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -319,13 +311,12 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.minDate).toBeNull(); expect(widget.field.minValue).toBeNull(); }); - it('should set minimum date range date to today minus abs(minDateRangeValue) if minimum date range value is negative', async () => { + it('should set minimum date range date to today minus abs(minDateRangeValue) if minimum date range value is negative', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -334,7 +325,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const expectedMinDate = subDays(adapter.today(), 2); @@ -342,7 +332,7 @@ describe('DateWidgetComponent', () => { expect(widget.field.minValue).toBe('20-02-2022'); }); - it('should set minimum date range date to today plus minDateRangeValue if minimum date range value is positive', async () => { + it('should set minimum date range date to today plus minDateRangeValue if minimum date range value is positive', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -351,7 +341,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const expectedMinDate = addDays(adapter.today(), 2); @@ -361,7 +350,7 @@ describe('DateWidgetComponent', () => { }); describe('Maximum date range value and date', () => { - it('should set maximum date range date to today if maximum date range value is 0', async () => { + it('should set maximum date range date to today if maximum date range value is 0', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -370,7 +359,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const expectedMaxDate = adapter.today(); @@ -378,7 +366,7 @@ describe('DateWidgetComponent', () => { expect(widget.field.maxValue).toBe(todayString); }); - it('should set maximum date range date to null if maximum date range value is null', async () => { + it('should set maximum date range date to null if maximum date range value is null', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -387,13 +375,12 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); expect(widget.maxDate).toBeNull(); expect(widget.field.maxValue).toBeNull(); }); - it('should set maximum date range date to today minus abs(maxDateRangeValue) if maximum date range value is negative', async () => { + it('should set maximum date range date to today minus abs(maxDateRangeValue) if maximum date range value is negative', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -402,7 +389,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const expectedMaxDate = subDays(adapter.today(), 2); @@ -410,7 +396,7 @@ describe('DateWidgetComponent', () => { expect(widget.field.maxValue).toBe('20-02-2022'); }); - it('should set maximum date range date to today plus maxDateRangeValue if maximum date range value is positive', async () => { + it('should set maximum date range date to today plus maxDateRangeValue if maximum date range value is positive', () => { widget.field = new FormFieldModel(form, { type: FormFieldTypes.DATE, dynamicDateRangeSelection: true, @@ -419,7 +405,6 @@ describe('DateWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); const expectedMaxDate = addDays(adapter.today(), 2); @@ -437,9 +422,8 @@ describe('DateWidgetComponent', () => { }); }); - 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'); @@ -447,9 +431,8 @@ describe('DateWidgetComponent', () => { expect(asterisk.textContent).toEqual('*'); }); - it('should be invalid after user interaction without typing', async () => { + it('should be invalid after user interaction without typing', () => { fixture.detectChanges(); - await fixture.whenStable(); expect(element.querySelector('.adf-invalid')).toBeFalsy(); @@ -457,7 +440,6 @@ describe('DateWidgetComponent', () => { dateCloudInput.dispatchEvent(new Event('blur')); fixture.detectChanges(); - await fixture.whenStable(); expect(element.querySelector('.adf-invalid')).toBeTruthy(); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts index 1a2b558354f..6eeed620f09 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts @@ -86,12 +86,18 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, super(formService); } - ngOnInit() { + ngOnInit(): void { this.initFormControl(); this.initDateAdapter(); this.initRangeSelection(); this.initStartAt(); this.subscribeToDateChanges(); + this.updateField(); + } + + updateField(): void { + this.validateField(); + this.onFieldChanged(this.field); } private initFormControl(): void { @@ -107,16 +113,17 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, private subscribeToDateChanges(): void { this.dateChangesSubscription = this.dateInputControl.valueChanges.subscribe((newDate: any) => { this.field.value = newDate; - this.validateField(); - this.onFieldChanged(this.field); + this.updateField(); }); } private validateField(): void { if (this.dateInputControl.invalid) { this.handleErrors(this.dateInputControl.errors); + this.field.markAsInvalid(); } else { this.resetErrors(); + this.field.markAsValid(); } }