📝 [open-formulieren/open-forms#3443] Attempt at writing a story for t…

…his...

The jest test didnt go anywhere (the method that creates a form with a date component returns a promise that never resolves).
In storybook you can interact manually with a component with a minDate and see that it works. It's something.

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();
   },
 };