👌 [open-formulieren/open-forms#3443] PR Feedback

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');

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