✅ [#4871] Add storybook for variableMapping with validation errors

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.'},
+        ],
+      ],
+    ],
+  },
+};