🎨 [#4524] Tweak implementation details

Attempted to make the code a bit easier/simpler, and clean up the
test helpers to use accessible queries.

src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.stories.js

@@ -1,4 +1,4 @@
-import {expect, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
+import {expect, findByRole, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
 import selectEvent from 'react-select-event';
 
 import {
@@ -8,7 +8,7 @@ import {
 } from 'components/admin/form_design/mocks';
 import {FormDecorator} from 'components/admin/form_design/story-decorators';
 import {serializeValue} from 'components/admin/forms/VariableMapping';
-import {getReactSelectInput} from 'utils/storybookTestHelpers';
+import {getReactSelectContainer} from 'utils/storybookTestHelpers';
 
 import DMNActionConfig from './DMNActionConfig';
 
@@ -187,7 +187,7 @@ export const Empty = {
       outputMapping: [],
     },
   },
-  play: async ({canvasElement, step}) => {
+  play: async ({canvasElement, step, args}) => {
     const canvas = within(canvasElement);
     const originalConfirm = window.confirm;
     window.confirm = () => true;
@@ -230,16 +230,25 @@ export const Empty = {
       const dropdowns = within(document.querySelector('.logic-dmn__mapping-config')).getAllByRole(
         'combobox'
       );
-
-      await expect(dropdowns.length).toBe(2);
+      expect(dropdowns.length).toBe(2);
 
       const [formVarsDropdowns, dmnVarsDropdown] = dropdowns;
 
       await selectEvent.select(formVarsDropdowns, 'Name');
-      await userEvent.selectOptions(dmnVarsDropdown, 'Camunda variable');
+      // this is super flaky for some reason on both Chromium and Firefox :/
+      await waitFor(async () => {
+        await userEvent.selectOptions(dmnVarsDropdown, 'Camunda variable');
+        expect(dmnVarsDropdown).toHaveValue(serializeValue('camundaVar'));
+      });
 
-      await expect(getReactSelectInput(formVarsDropdowns)).toHaveValue('name');
-      await expect(dmnVarsDropdown).toHaveValue(serializeValue('camundaVar'));
+      await userEvent.click(canvas.getByRole('button', {name: 'Save'}));
+      expect(args.onSave).toHaveBeenCalledWith({
+        pluginId: 'camunda7',
+        decisionDefinitionId: 'approve-payment',
+        decisionDefinitionVersion: '2',
+        inputMapping: [{formVariable: 'name', dmnVariable: 'camundaVar'}],
+        outputMapping: [],
+      });
     });
 
     await step('Changing plugin clears decision definition, version and DMN vars', async () => {
@@ -320,9 +329,15 @@ export const withInitialValues = {
       const formVariableDropdowns = await canvas.findAllByLabelText('Formuliervariabele');
 
       await waitFor(async () => {
-        await expect(getReactSelectInput(formVariableDropdowns[0])).toHaveValue('name');
-        await expect(getReactSelectInput(formVariableDropdowns[1])).toHaveValue('surname');
-        await expect(getReactSelectInput(formVariableDropdowns[2])).toHaveValue('canApply');
+        expect(
+          await within(getReactSelectContainer(formVariableDropdowns[0])).findByText('Name')
+        ).toBeVisible();
+        expect(
+          await within(getReactSelectContainer(formVariableDropdowns[1])).findByText('Surname')
+        ).toBeVisible();
+        expect(
+          await within(getReactSelectContainer(formVariableDropdowns[2])).findByText('Can apply?')
+        ).toBeVisible();
       });
     });
 

src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js

@@ -6,7 +6,6 @@ import {
 } from 'components/admin/form_design/mocks';
 import {BACKEND_OPTIONS_FORMS} from 'components/admin/form_design/registrations';
 import {mockTargetPathsPost} from 'components/admin/form_design/registrations/objectsapi/mocks';
-import {getReactSelectInput} from 'utils/storybookTestHelpers';
 
 import {serializeValue} from '../../forms/VariableMapping';
 import {mockObjecttypeVersionsGet, mockObjecttypesGet} from '../registrations/objectsapi/mocks';
@@ -590,32 +589,39 @@ export const ConfigurePrefill = {
 };
 
 export const ConfigurePrefillObjectsAPI = {
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
 
-    const userDefinedVarsTab = await canvas.findByRole('tab', {name: 'Gebruikersvariabelen'});
-    expect(userDefinedVarsTab).toBeVisible();
-    await userEvent.click(userDefinedVarsTab);
+    await step('Open configuration modal', async () => {
+      const userDefinedVarsTab = await canvas.findByRole('tab', {name: 'Gebruikersvariabelen'});
+      expect(userDefinedVarsTab).toBeVisible();
+      await userEvent.click(userDefinedVarsTab);
 
-    // open modal for configuration
-    const editIcon = canvas.getByTitle('Prefill instellen');
-    await userEvent.click(editIcon);
-
-    const pluginDropdown = await screen.findByLabelText('Plugin');
-    expect(pluginDropdown).toBeVisible();
-
-    await userEvent.selectOptions(pluginDropdown, 'Objects API');
-
-    const variableSelect = await screen.findByLabelText('Formuliervariabele');
-    await expect(getReactSelectInput(variableSelect)).toHaveValue('formioComponent');
+      // open modal for configuration
+      const editIcon = canvas.getByTitle('Prefill instellen');
+      await userEvent.click(editIcon);
+      expect(await screen.findByRole('dialog')).toBeVisible();
+    });
 
-    // Wait until the API call to retrieve the prefillAttributes is done
-    await waitFor(async () => {
-      const prefillPropertySelect = await screen.findByLabelText(
-        'Select a property from the object type'
-      );
-      expect(prefillPropertySelect).toBeVisible();
-      expect(prefillPropertySelect).toHaveValue(serializeValue(['firstName']));
+    await step('Configure Objects API prefill', async () => {
+      const modal = within(await screen.findByRole('dialog'));
+      const pluginDropdown = await screen.findByLabelText('Plugin');
+      expect(pluginDropdown).toBeVisible();
+      await userEvent.selectOptions(pluginDropdown, 'Objects API');
+
+      // check mappings
+      const variableSelect = await screen.findByLabelText('Formuliervariabele');
+      expect(variableSelect).toBeVisible();
+      expect(modal.getByText('Form.io component')).toBeVisible();
+
+      // Wait until the API call to retrieve the prefillAttributes is done
+      await waitFor(async () => {
+        const prefillPropertySelect = await screen.findByLabelText(
+          'Select a property from the object type'
+        );
+        expect(prefillPropertySelect).toBeVisible();
+        expect(prefillPropertySelect).toHaveValue(serializeValue(['firstName']));
+      });
     });
   },
 };

src/openforms/js/components/admin/forms/ReactSelect.js

@@ -32,23 +32,38 @@ const styles = {
   }),
 };
 
+/**
+ * Find the option by `value` in the list of possible options.
+ *
+ * `options` are the options passed to ReactSelect, which may be a list of options or
+ * a list of option groups: `(Option | Group)[]`. If an item is a group, it has a nested
+ * property `options` of type `Option[]`.
+ *
+ * See https://github.com/JedWatson/react-select/blob/a8b8f4342cc113e921bb238de2dd69a2d345b5f8/packages/react-select/src/Select.tsx#L406
+ * for a reference.
+ */
 const getValue = (options, value) => {
-  if (!value) {
+  // 0 could be an actual selected value (!)
+  if (value == null || value === '') {
     return null;
   }
 
-  // We support grouped ReactSelect options.
-  // So we need to look in the first, and possible second level of options
-  for (let index = 0; index < options.length; index++) {
-    const option = options[index];
-    if ('value' in option && option.value === value) {
-      return option;
-    }
-    const foundOption = (option?.options || []).find(opt => opt.value === value);
-    if (foundOption) {
-      return foundOption;
+  // check all the options until we find a match on the `value` property for the option.
+  // ReactSelect allows using different properties for the value, but let's handle that
+  // when we actually need it.
+  for (const groupOrOption of options) {
+    if ('options' in groupOrOption) {
+      const hit = getValue(groupOrOption.options, value);
+      if (hit) return hit; // otherwise continue with the rest
+    } else {
+      // we're dealing with a plain option, compare the value property
+      if (groupOrOption.value === value) {
+        return groupOrOption;
+      }
     }
   }
+
+  return null;
 };
 
 /**
@@ -59,27 +74,22 @@ const getValue = (options, value) => {
  * @deprecated - if possible, refactor the form to use Formik and use the Formik-enabled
  * variant.
  */
-const SelectWithoutFormik = ({name, options, value, className, onChange, ...props}) => {
-  const classes = classNames('admin-react-select', {
-    [`${className}`]: className,
-  });
-  return (
-    <ReactSelect
-      inputId={`id_${name}`}
-      name={name}
-      className={classes}
-      classNamePrefix="admin-react-select"
-      styles={styles}
-      menuPlacement="auto"
-      options={options}
-      value={getValue(options, value)}
-      onChange={selectedOption => {
-        onChange(selectedOption === null ? undefined : selectedOption.value);
-      }}
-      {...props}
-    />
-  );
-};
+const SelectWithoutFormik = ({name, options, value, className, onChange, ...props}) => (
+  <ReactSelect
+    inputId={`id_${name}`}
+    name={name}
+    className={classNames('admin-react-select', className)}
+    classNamePrefix="admin-react-select"
+    styles={styles}
+    menuPlacement="auto"
+    options={options}
+    value={getValue(options, value)}
+    onChange={selectedOption => {
+      onChange(selectedOption === null ? undefined : selectedOption.value);
+    }}
+    {...props}
+  />
+);
 
 /**
  * A select dropdown backed by react-select for Formik forms.
@@ -90,13 +100,10 @@ const SelectWithFormik = ({name, options, className, ...props}) => {
   const [fieldProps, , fieldHelpers] = useField(name);
   const {value} = fieldProps;
   const {setValue} = fieldHelpers;
-  const classes = classNames('admin-react-select', {
-    [`${className}`]: className,
-  });
   return (
     <ReactSelect
       inputId={`id_${name}`}
-      className={classes}
+      className={classNames('admin-react-select', className)}
       classNamePrefix="admin-react-select"
       styles={styles}
       menuPlacement="auto"

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

@@ -1,8 +1,9 @@
-import {expect, fn, userEvent, within} from '@storybook/test';
+import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 import selectEvent from 'react-select-event';
 
 import {FormDecorator, FormikDecorator} from 'components/admin/form_design/story-decorators';
-import {getReactSelectOptions} from 'utils/storybookTestHelpers';
+import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
+import {getReactSelectContainer} from 'utils/storybookTestHelpers';
 
 import VariableMapping, {serializeValue} from './VariableMapping';
 
@@ -35,17 +36,19 @@ export default {
       {
         form: 'foo',
         formDefinition: 'foo',
-        name: 'name1',
+        name: 'Name 1',
         key: 'key1',
+        source: '',
       },
     ],
 
     availableFormVariables: [
       {
         form: 'bar',
         formDefinition: 'bar',
-        name: 'name2',
+        name: 'Name 2',
         key: 'key2',
+        source: VARIABLE_SOURCES.component,
       },
     ],
   },
@@ -124,11 +127,15 @@ export const NonStringValues = {
 export const SelectOptions = {
   render: args => (
     <>
-      <VariableMapping {...args} includeStaticVariables />
+      <VariableMapping {...args} />
       <button type="submit">Submit</button>
     </>
   ),
 
+  args: {
+    includeStaticVariables: true,
+  },
+
   parameters: {
     formik: {
       onSubmit: fn(),
@@ -140,18 +147,23 @@ export const SelectOptions = {
 
     await step('Check rendered values', async () => {
       const formVariableDropdown = canvas.getByLabelText('Formuliervariabele');
-      await selectEvent.openMenu(formVariableDropdown);
-      const variableOptions = getReactSelectOptions(formVariableDropdown);
+      selectEvent.openMenu(formVariableDropdown);
+
+      const formVarOptions = await within(
+        getReactSelectContainer(formVariableDropdown)
+      ).findAllByRole('option');
 
-      await expect(variableOptions).toHaveLength(2);
-      await expect(variableOptions[1]).toHaveTextContent('(key2)');
+      expect(formVarOptions).toHaveLength(2);
+      expect(formVarOptions[0]).toHaveTextContent('key2');
+      expect(formVarOptions[0]).toHaveTextContent('Name 2');
+      await userEvent.click(formVariableDropdown); // close the menu again
 
       const propertyDropdown = canvas.getByLabelText('Pick a property');
       const propertyOptions = within(propertyDropdown).getAllByRole('option');
 
-      await expect(propertyOptions).toHaveLength(3);
-      await expect(propertyOptions[1]).toHaveValue(serializeValue('option_1'));
-      await expect(propertyOptions[2]).toHaveValue(serializeValue('option_2'));
+      expect(propertyOptions).toHaveLength(3);
+      expect(propertyOptions[1]).toHaveValue(serializeValue('option_1'));
+      expect(propertyOptions[2]).toHaveValue(serializeValue('option_2'));
     });
 
     await step('Select different option and submit', async () => {

src/openforms/js/utils/storybookTestHelpers.js

@@ -1,11 +1,19 @@
-import {within} from '@storybook/test';
-
-const getReactSelectInput = SelectElement => {
-  return SelectElement.closest('.admin-react-select').querySelector('input[type="hidden"]');
-};
-
-const getReactSelectOptions = SelectElement => {
-  return within(SelectElement.closest('.admin-react-select')).getAllByRole('option');
+/**
+ * From the input field (retrieved by accessible queries), find the react-select container.
+ *
+ * Equivalent of https://github.com/romgain/react-select-event/blob/8619e8b3da349eadfa7321ea4aa2b7eee7209f9f/src/index.ts#L14,
+ * however instead of relying on the DOM structure we can leverage class names that are
+ * guaranteed to be set by us.
+ *
+ * Usage:
+ *
+ * const dropdown = canvas.getByLabelText('My dropdown');
+ * const container = getReactSelectContainer(dropdown);
+ * const options = within(container).queryByRole('option');
+ */
+const getReactSelectContainer = comboboxInput => {
+  const container = comboboxInput.closest('.admin-react-select');
+  return container;
 };
 
-export {getReactSelectInput, getReactSelectOptions};
+export {getReactSelectContainer};