From 75a463067c55d77c901e74d3b01a832d14e146e2 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 10 Oct 2023 10:42:14 +0100 Subject: [PATCH] fix how the real date is stored, extra tests --- .../widgets/date/date.widget.spec.ts | 110 +++++++++++++----- .../components/widgets/date/date.widget.ts | 6 +- 2 files changed, 83 insertions(+), 33 deletions(-) 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 35c275fe10e..98bb017c23d 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 @@ -23,12 +23,14 @@ import { DateWidgetComponent } from './date.widget'; import { CoreTestingModule } from '../../../../testing/core.testing.module'; import { TranslateModule } from '@ngx-translate/core'; import { FormFieldTypes } from '../core/form-field-types'; +import { DateFieldValidator, MaxDateFieldValidator, MinDateFieldValidator } from '../core/form-field-validator'; describe('DateWidgetComponent', () => { let widget: DateWidgetComponent; let fixture: ComponentFixture; let element: HTMLElement; let adapter: DateAdapter; + let form: FormModel; beforeEach(() => { TestBed.configureTestingModule({ @@ -37,6 +39,10 @@ describe('DateWidgetComponent', () => { CoreTestingModule ] }); + + form = new FormModel(); + form.fieldValidators = [new DateFieldValidator(), new MinDateFieldValidator(), new MaxDateFieldValidator()]; + fixture = TestBed.createComponent(DateWidgetComponent); adapter = fixture.debugElement.injector.get(DateAdapter); @@ -45,7 +51,7 @@ describe('DateWidgetComponent', () => { }); it('[C310333] - should be able to set a placeholder', () => { - widget.field = new FormFieldModel(null, { + widget.field = new FormFieldModel(form, { id: 'date-id', name: 'date-name', placeholder: 'My Placeholder' @@ -56,7 +62,7 @@ describe('DateWidgetComponent', () => { it('should setup min value for date picker', () => { const minValue = '13-03-1982'; - widget.field = new FormFieldModel(null, { + widget.field = new FormFieldModel(form, { id: 'date-id', name: 'date-name', minValue @@ -68,9 +74,61 @@ describe('DateWidgetComponent', () => { expect(adapter.compareDate(widget.minDate, expected)).toBe(0); }); + it('should validate min date value constraint', async () => { + const minValue = '13-03-1982'; + + const field = new FormFieldModel(form, { + id: 'date-id', + type: 'date', + name: 'date-name', + dateDisplayFormat: 'DD-MM-YYYY', + minValue + }); + + widget.field = field; + widget.ngOnInit(); + + widget.onDateChange({ + value: new Date('1982/03/12') + } as any); + + 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 () => { + const maxValue = '13-03-1982'; + + const field = new FormFieldModel(form, { + id: 'date-id', + type: 'date', + name: 'date-name', + dateDisplayFormat: 'DD-MM-YYYY', + maxValue + }); + + widget.field = field; + widget.ngOnInit(); + + widget.onDateChange({ + value: new Date('2023/03/13') + } as any); + + fixture.detectChanges(); + await fixture.whenStable(); + + expect(widget.field.isValid).toBeFalsy(); + expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_GREATER_THAN'); + expect(field.validationSummary.attributes.get('maxValue')).toBe('13-03-1982'); + }); + it('should date field be present', () => { const minValue = '13-03-1982'; - widget.field = new FormFieldModel(null, { + widget.field = new FormFieldModel(form, { minValue }); @@ -82,7 +140,7 @@ describe('DateWidgetComponent', () => { it('should setup max value for date picker', () => { const maxValue = '31-03-1982'; - widget.field = new FormFieldModel(null, { + widget.field = new FormFieldModel(form, { maxValue }); widget.ngOnInit(); @@ -94,13 +152,13 @@ describe('DateWidgetComponent', () => { it('should eval visibility on date changed', () => { spyOn(widget, 'onFieldChanged').and.callThrough(); - const field = new FormFieldModel(new FormModel(), { + const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', value: '9-9-9999', - type: 'date', - readOnly: 'false' + type: 'date' }); + widget.field = field; widget.onDateChange({ value: new Date('12/12/2012') @@ -139,14 +197,12 @@ describe('DateWidgetComponent', () => { }); it('should show visible date widget', async () => { - widget.field = new FormFieldModel(new FormModel(), { + widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', value: '9-9-9999', - type: 'date', - readOnly: 'false' + type: 'date' }); - widget.field.isVisible = true; fixture.detectChanges(); await fixture.whenStable(); @@ -158,15 +214,13 @@ describe('DateWidgetComponent', () => { }); it('[C310335] - Should be able to change display format for Date widget', async () => { - widget.field = new FormFieldModel(new FormModel(), { + widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', - value: '12-30-9999', + value: '30-12-9999', type: 'date', - readOnly: 'false' + dateDisplayFormat: 'MM-DD-YYYY' }); - widget.field.isVisible = true; - widget.field.dateDisplayFormat = 'MM-DD-YYYY'; fixture.detectChanges(); await fixture.whenStable(); @@ -174,7 +228,7 @@ describe('DateWidgetComponent', () => { let dateElement = element.querySelector('#date-field-id'); expect(dateElement?.value).toContain('12-30-9999'); - widget.field.value = '05.06.2019'; + widget.field.value = '05-06-2019'; widget.field.dateDisplayFormat = 'DD.MM.YYYY'; fixture.componentInstance.ngOnInit(); @@ -186,15 +240,12 @@ describe('DateWidgetComponent', () => { }); it('should disable date button when is readonly', () => { - widget.field = new FormFieldModel(new FormModel(), { + widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', value: '9-9-9999', - type: 'date', - readOnly: 'false' + type: 'date' }); - widget.field.isVisible = true; - widget.field.readOnly = false; fixture.detectChanges(); @@ -211,7 +262,7 @@ describe('DateWidgetComponent', () => { }); it('should set isValid to false when the value is not a correct date value', () => { - widget.field = new FormFieldModel(new FormModel(), { + widget.field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', value: 'aa', @@ -227,23 +278,22 @@ describe('DateWidgetComponent', () => { }); it('should display always the json value', async () => { - const field = new FormFieldModel(new FormModel(), { + const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', - value: '12-30-9999', + value: '30-12-9999', type: 'date', - readOnly: 'false' + dateDisplayFormat: 'MM-DD-YYYY' }); - field.isVisible = true; - field.dateDisplayFormat = 'MM-DD-YYYY'; widget.field = field; fixture.detectChanges(); await fixture.whenStable(); const dateElement = element.querySelector('#date-field-id'); - expect(dateElement?.value).toContain('12-30-9999'); + expect(dateElement).toBeDefined(); + expect(dateElement.value).toContain('12-30-9999'); widget.field.value = '03-02-2020'; @@ -251,6 +301,6 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - expect(dateElement?.value).toContain('03-02-2020'); + 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 a7f02dc4700..3fa5818e65c 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 @@ -78,8 +78,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe } if (this.field.value) { - this.startAt = this.dateAdapter.parse(this.field.value, this.field.dateDisplayFormat); - this.value = this.dateAdapter.parse(this.field.value, this.field.dateDisplayFormat); + this.startAt = this.dateAdapter.parse(this.field.value, this.DATE_FORMAT); + this.value = this.dateAdapter.parse(this.field.value, this.DATE_FORMAT); } } } @@ -94,7 +94,7 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe const input = event.targetElement as HTMLInputElement; if (value) { - this.field.value = this.dateAdapter.format(value, this.field.dateDisplayFormat); + this.field.value = this.dateAdapter.format(value, this.DATE_FORMAT); } else { this.field.value = input.value; }