diff --git a/src/formio/components/DateField.stories.js b/src/formio/components/DateField.stories.js index 88e9869b7..99f594621 100644 --- a/src/formio/components/DateField.stories.js +++ b/src/formio/components/DateField.stories.js @@ -57,7 +57,7 @@ export const DateField = { const dateInput = canvas.getByRole('textbox'); userEvent.type(dateInput, '06-06-2006'); - await expect(dateInput).toHaveDisplayValue('06-06-2006'); + expect(dateInput).toHaveDisplayValue('06-06-2006'); const error = canvas.queryByText('minDate'); await expect(error).toBeNull(); @@ -92,7 +92,7 @@ export const DateWithMinField = { const dateInput = canvas.getByRole('textbox'); userEvent.type(dateInput, '06-06-2006'); - await expect(dateInput).toHaveDisplayValue('06-06-2006'); + expect(dateInput).toHaveDisplayValue('06-06-2006'); // TODO: I cannot get this to work. If you do it manually in storybook, it works... (it shows the error). // const error = canvas.queryByText('minDate'); diff --git a/src/jstests/formio/components/date.spec.js b/src/jstests/formio/components/date.spec.js new file mode 100644 index 000000000..95ceaf683 --- /dev/null +++ b/src/jstests/formio/components/date.spec.js @@ -0,0 +1,117 @@ +import set from 'lodash/set'; +import {Formio} from 'react-formio'; + +import OpenFormsModule from 'formio/module'; +import MinMaxDateValidator from 'formio/validators/minMaxDateValidator'; + +const FormioComponent = Formio.Components.components.component; + +// Use our custom components +Formio.use(OpenFormsModule); + +describe('Date Component', () => { + test('Date validator: check min date', done => { + const component = { + label: 'date', + key: 'date', + type: 'date', + datePicker: { + minDate: '2023-09-08', + maxDate: null, + }, + customOptions: { + allowInvalidPreload: true, + }, + validate: {dateMinMax: true}, + }; + + const componentInstance = new FormioComponent(component, {}, {}); + + const isValid1 = MinMaxDateValidator.check(componentInstance, {}, '2020-01-01'); + + expect(isValid1).toBeFalsy(); + expect( + componentInstance.openForms.validationErrorContext.minMaxDateValidatorErrorKeys + ).toContain('minDate'); + + const isValid2 = MinMaxDateValidator.check(componentInstance, {}, '2024-01-01'); + + expect(isValid2).toBeTruthy(); + + done(); + }); + + test('Date validator: check max date', done => { + const component = { + label: 'date', + key: 'date', + type: 'date', + datePicker: { + minDate: null, + maxDate: '2023-09-08', + }, + customOptions: { + allowInvalidPreload: true, + }, + validate: {dateMinMax: true}, + }; + + const componentInstance = new FormioComponent(component, {}, {}); + + const isValid1 = MinMaxDateValidator.check(componentInstance, {}, '2024-01-01'); + + expect(isValid1).toBeFalsy(); + expect( + componentInstance.openForms.validationErrorContext.minMaxDateValidatorErrorKeys + ).toContain('maxDate'); + + const isValid2 = MinMaxDateValidator.check(componentInstance, {}, '2020-01-01'); + + expect(isValid2).toBeTruthy(); + + done(); + }); + + test('Date validator: error message', done => { + const component = { + label: 'date', + key: 'date', + type: 'date', + datePicker: { + minDate: '2023-09-08', + maxDate: null, + }, + customOptions: { + allowInvalidPreload: true, + }, + validate: {dateMinMax: true}, + }; + + const mockTranslation = jest.fn((message, values) => message); + + const componentInstance = new FormioComponent(component, {}, {}); + componentInstance.t = mockTranslation; + + MinMaxDateValidator.message(componentInstance); + + expect(mockTranslation.mock.calls[0][0]).toEqual('invalidDate'); + + set(componentInstance, 'openForms.validationErrorContext.minMaxDateValidatorErrorKeys', [ + 'minDate', + ]); + + MinMaxDateValidator.message(componentInstance); + + expect(mockTranslation.mock.calls[1][0]).toEqual('minDate'); + + set(componentInstance, 'openForms.validationErrorContext.minMaxDateValidatorErrorKeys', [ + 'maxDate', + ]); + + MinMaxDateValidator.message(componentInstance); + + expect(mockTranslation.mock.calls[2][0]).toEqual('maxDate'); + + done(); + }); +});