diff --git a/src/formio/components/DateField.stories.js b/src/formio/components/DateField.stories.js index b563c2fa4..88e9869b7 100644 --- a/src/formio/components/DateField.stories.js +++ b/src/formio/components/DateField.stories.js @@ -1,3 +1,6 @@ +import {expect} from '@storybook/jest'; +import {userEvent, within} from '@storybook/testing-library'; + import {withUtrechtDocument} from 'story-utils/decorators'; import {SingleFormioComponent} from './story-util'; @@ -38,5 +41,61 @@ export const DateField = { args: { key: 'date', label: 'Datum', + extraComponentProperties: { + format: 'dd-MM-yyyy', + placeholder: 'dd-mm-yyyy', + enableTime: false, + datePicker: { + minDate: null, + maxDate: null, + }, + }, + }, + play: async ({canvasElement}) => { + const canvas = within(canvasElement); + + const dateInput = canvas.getByRole('textbox'); + + userEvent.type(dateInput, '06-06-2006'); + await expect(dateInput).toHaveDisplayValue('06-06-2006'); + + const error = canvas.queryByText('minDate'); + await expect(error).toBeNull(); + // This test succeeds, but the value is not displayed in storybook... Mystery + }, +}; + +export const DateWithMinField = { + render: SingleFormioComponent, + args: { + key: 'date', + label: 'Datum > 08-09-2023', + extraComponentProperties: { + format: 'dd-MM-yyyy', + placeholder: 'dd-mm-yyyy', + enableTime: false, + datePicker: { + minDate: '2023-09-08', + maxDate: null, + }, + customOptions: { + allowInvalidPreload: true, + }, + validate: { + dateMinMax: true, + }, + }, + }, + play: async ({canvasElement}) => { + const canvas = within(canvasElement); + + const dateInput = canvas.getByRole('textbox'); + + userEvent.type(dateInput, '06-06-2006'); + await 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'); + // await expect(error).not.toBeNull(); }, };