✅ [#4871] Storybook tests for variableMapping and evaluate DMN with errors

Author: robinmolen

src/openforms/js/components/admin/form_design/logic/actions/Action.stories.js

@@ -1,4 +1,5 @@
 import {useArgs} from '@storybook/preview-api';
+import {expect, userEvent, waitFor, within} from '@storybook/test';
 import {produce} from 'immer';
 import set from 'lodash/set';
 
@@ -197,3 +198,96 @@ export const EvaluateDMN = {
     },
   },
 };
+
+export const EvaluateDMNWithInitialErrors = {
+  render,
+  name: 'Evaluate DMN with initial errors',
+  args: {
+    prefixText: 'Action',
+
+    action: {
+      component: '',
+      variable: 'bar',
+      formStep: '',
+      formStepUuid: '',
+
+      action: {
+        config: {
+          pluginId: '',
+          decisionDefinitionId: '',
+        },
+        type: 'evaluate-dmn',
+        value: '',
+      },
+    },
+    errors: {
+      action: {
+        config: {
+          pluginId: 'This field is required.',
+          decisionDefinitionId: 'This field is required.',
+        },
+      },
+    },
+    availableDMNPlugins: [
+      {id: 'camunda7', label: 'Camunda 7'},
+      {id: 'some-other-engine', label: 'Some other engine'},
+    ],
+    availableFormVariables: [
+      {type: 'textfield', key: 'name', name: 'Name'},
+      {type: 'textfield', key: 'surname', name: 'Surname'},
+      {type: 'number', key: 'income', name: 'Income'},
+      {type: 'checkbox', key: 'canApply', name: 'Can apply?'},
+    ],
+  },
+  decorators: [FormDecorator],
+
+  parameters: {
+    msw: {
+      handlers: [
+        mockDMNDecisionDefinitionsGet({
+          camunda7: [
+            {
+              id: 'approve-payment',
+              label: 'Approve payment',
+            },
+            {
+              id: 'invoiceClassification',
+              label: 'Invoice Classification',
+            },
+          ],
+          'some-other-engine': [{id: 'some-definition-id', label: 'Some definition id'}],
+        }),
+        mockDMNDecisionDefinitionVersionsGet,
+      ],
+    },
+  },
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    step('Verify that global DMN config error is shown', () => {
+      expect(
+        canvas.getByRole('listitem', {text: 'De DMN-instellingen zijn niet geldig.'})
+      ).toBeVisible();
+    });
+
+    step('Open configuration modal', async () => {
+      await userEvent.click(canvas.getByRole('button', {name: 'Instellen'}));
+
+      const dialog = within(canvas.getByRole('dialog'));
+
+      const pluginDropdown = dialog.getByLabelText('Plugin');
+      const decisionDefDropdown = dialog.getByLabelText('Beslisdefinitie-ID');
+
+      // Mark dropdowns as touched
+      await userEvent.click(pluginDropdown);
+      await userEvent.click(decisionDefDropdown);
+      await userEvent.tab();
+
+      await waitFor(async () => {
+        const errorMessages = await dialog.getAllByRole('listitem');
+
+        await expect(errorMessages.length).toBe(2);
+      });
+    });
+  },
+};

src/openforms/js/components/admin/forms/VariableMapping.stories.js

@@ -1,7 +1,11 @@
 import {expect, fn, userEvent, within} from '@storybook/test';
 import selectEvent from 'react-select-event';
 
-import {FormDecorator, FormikDecorator} from 'components/admin/form_design/story-decorators';
+import {
+  FormDecorator,
+  FormikDecorator,
+  ValidationErrorsDecorator,
+} from 'components/admin/form_design/story-decorators';
 import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
 import {findReactSelectMenu} from 'utils/storybookTestHelpers';
 
@@ -10,7 +14,7 @@ import VariableMapping, {serializeValue} from './VariableMapping';
 export default {
   title: 'Form design/VariableMapping',
   component: VariableMapping,
-  decorators: [FormikDecorator, FormDecorator],
+  decorators: [FormikDecorator, ValidationErrorsDecorator, FormDecorator],
 
   parameters: {
     formik: {
@@ -224,3 +228,38 @@ export const OmitAlreadyMappedValues = {
     });
   },
 };
+
+export const WithValidationErrors = {
+  render: args => (
+    <>
+      <VariableMapping {...args} />
+      <button type="submit">Submit</button>
+    </>
+  ),
+
+  args: {
+    propertyChoices: [
+      [['nested', 'property'], 'Nested > property'],
+      [['otherProperty'], 'Other property'],
+    ],
+  },
+
+  parameters: {
+    formik: {
+      initialValues: {
+        mapping: [{formVariable: 'key2'}, {formVariable: 'key2', property: ['otherProperty']}, {}],
+      },
+      onSubmit: fn(),
+    },
+    validationErrors: [
+      [
+        'mapping',
+        [
+          {property: 'This field may not be blank.'},
+          undefined,
+          {formVariable: 'This field may not be blank.', property: 'This field may not be blank.'},
+        ],
+      ],
+    ],
+  },
+};