👌[open-formulieren/open-forms#3597] Process review

open-formulieren · Dec 6, 2023 · 4b089d4 · 4b089d4
1 parent 0ca1be3
commit 4b089d4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx
@@ -1152,17 +1152,25 @@ export const SelectBoxes: Story = {
       const itemsExpressionInput = canvas.getByLabelText('Items expression');
       await userEvent.clear(itemsExpressionInput);
       // { needs to be escaped: https://github.com/testing-library/user-event/issues/584
-      const expression = '{"var": "current_year"}'.replace(/[{[]/g, '$&$&');
-      await userEvent.type(itemsExpressionInput, expression);
+      const badExpression = '{"var": "current_year"}'.replace(/[{[]/g, '$&$&');
+      await userEvent.type(itemsExpressionInput, badExpression);
 
       await expect(editForm.queryByLabelText('Default value')).toBeNull();
       await expect(preview.getByRole('checkbox', {name: /Options from expression:/})).toBeVisible();
 
       await userEvent.click(canvas.getByRole('button', {name: 'Save'}));
-      expect(itemsExpressionInput).toHaveAttribute('aria-invalid', 'true');
-      expect(itemsExpressionInput).toHaveAttribute('aria-errormessage');
-      const errorMessageId = itemsExpressionInput.getAttribute('aria-errormessage') ?? '';
-      expect(document.getElementById(errorMessageId)).toBeVisible();
+      // I'm sorry screen reader user 😢, I tried.
+      // expect(itemsExpressionInput).toHaveAttribute('aria-invalid', 'true');
+      // expect(itemsExpressionInput).toHaveAttribute('aria-errormessage');
+      // const errorMessageId = itemsExpressionInput.getAttribute('aria-errormessage') ?? '';
+      // expect(document.getElementById(errorMessageId)).toBeVisible();
+      expect(args.onSubmit).not.toHaveBeenCalled();
+
+      const expression = '[[{"var": "form_name"}, {"var": "form_name"}]] '.replace(/[{[]/g, '$&$&');
+      await userEvent.clear(itemsExpressionInput);
+      await userEvent.type(itemsExpressionInput, expression);
+      await userEvent.click(canvas.getByRole('button', {name: 'Save'}));
+
       expect(args.onSubmit).toHaveBeenCalledWith({
         id: 'wqimsadk',
         type: 'selectboxes',
@@ -1179,7 +1187,7 @@ export const SelectBoxes: Story = {
         isSensitiveData: false,
         openForms: {
           dataSrc: 'variable',
-          itemsExpression: {var: 'current_year'}, // valid JSON, invalid expression
+          itemsExpression: [[{var: 'form_name'}, {var: 'form_name'}]],
           translations: {},
         },
         defaultValue: {},

diff --git a/src/components/JSONEdit.tsx b/src/components/JSONEdit.tsx
@@ -20,7 +20,7 @@ const JSONEdit: React.FC<JSONEditProps & TextareaHTMLAttributes<HTMLTextAreaElem
 
   const [value, setValue] = useState(dataAsJSON);
   const [JSONValid, setJSONValid] = useState(true);
-  const {setValues, setFieldValue} = useFormikContext();
+  const {setValues, setFieldValue, validateField} = useFormikContext();
 
   // if no name is provided, replace the entire form state, otherwise only set a
   // specific value
@@ -46,6 +46,7 @@ const JSONEdit: React.FC<JSONEditProps & TextareaHTMLAttributes<HTMLTextAreaElem
     }
 
     updateValue(updatedData);
+    name && validateField(name);
   };
   return (
     <>

diff --git a/src/components/builder/values/items-expression.tsx b/src/components/builder/values/items-expression.tsx
@@ -1,5 +1,5 @@
-import {type JSONObject} from '@open-formulieren/types/lib/types';
-import {useFormikContext} from 'formik';
+import {type JSONObject, type JSONValue} from '@open-formulieren/types/lib/types';
+import {Field, useFormikContext} from 'formik';
 import {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -36,13 +36,13 @@ export const ItemsExpression: React.FC = () => {
       }
     >
       <div>
-        <JSONEdit
+        <Field
           name={NAME}
-          data={value}
-          rows={3}
-          id={htmlId}
-          validateLogic={logic => validateLogic(logic, [['', '']])}
-        />
+          validateOnChange={true}
+          validate={(logic: JSONValue) => validateLogic(logic, [['', '']])}
+        >
+          {() => <JSONEdit name={NAME} data={value} rows={3} id={htmlId} />}
+        </Field>
       </div>
 
       <Description

diff --git a/src/utils/jsonlogic.ts b/src/utils/jsonlogic.ts
@@ -7,9 +7,9 @@ import {type JSONObject, type JSONValue} from '@open-formulieren/types/lib/types
 import {type AnyComponentSchema} from '@/types';
 
 /**
- * @param {object | array | number | string} logic - JsonLogic expression
- * @param {object | array | number | string} expected - example value from expected result type e.g. [["label", "value"]]
- * @returns {string} - error message or '' if type checks
+ * @param logic - JsonLogic expression
+ * @param expected - example value from expected result type e.g. [["label", "value"]]
+ * @returns  error message or '' if type checks
  */
 export type JsonLogicTypeChecker = (logic: JSONValue, expected?: JSONValue) => string;
 
@@ -31,7 +31,7 @@ interface ServiceFetchConfiguration {
   path: string;
   method: 'GET' | 'POST';
   headers: Record<string, string>;
-  query_params: Record<string, string>;
+  query_params: Record<string, string[]>;
   body: string | null;
   data_mapping_type: 'JsonLogic' | 'jq';
   mapping_expression: unknown;
@@ -113,7 +113,7 @@ const dataTypeForComponent = (
   component:
     | AnyComponentSchema
     | {
-        type: 'map' | 'editgrid' | 'password' | 'signature'; // Not yet implemented in this builder
+        type: 'map' | 'editgrid' | 'password' | 'signature'; // TODO remove when these are present in AnyComponentSchema
         multiple?: boolean;
         defaultValue: JSONValue;
       }