@digigov/form 2.0.0-555d1027 → 2.0.0-5e7a6790

package/src/FieldArray/__tests__/preference-multiple-choice.spec.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { FieldSpec } from '@digigov/form';
+import FormBuilder, { Field } from '@digigov/form';
+import Radio from '@digigov/form/inputs/Radio';
+import { getYUPTypeMap } from '@digigov/form/internal';
+import { Button } from '@digigov/ui/form/Button';
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+const customComponentRegistry = {
+  'preference-multiple-choice': {
+    component: (props: any) => {
+      return (
+        <Radio
+          {...props}
+          extra={{
+            ...props.extra,
+            options: props.extra.options,
+          }}
+        />
+      );
+    },
+  },
+};
+
+const customValidatorRegistry = {
+  'preference-multiple-choice': getYUPTypeMap().string,
+};
+
+const options = [
+  {
+    disabled: false,
+    label: {
+      primary: 'Δελτίο Ταυτότητας Έλληνα Πολίτη',
+    },
+    value: 'hellenic_police',
+  },
+  {
+    disabled: false,
+    label: {
+      primary: 'Διαβατήριο',
+    },
+    value: 'passport',
+  },
+  {
+    disabled: false,
+    label: {
+      primary: 'Άδεια Διαμονής',
+    },
+    value: 'residence_permit',
+  },
+];
+
+const fieldSpec: FieldSpec = {
+  key: 'preference_multiple_choice',
+  type: 'array',
+  editable: true,
+  label: {
+    primary: 'Component preference-multiple-choice',
+  },
+  extra: {
+    variant: 'dialog', // Unnecessary for base variant, but included for consistency
+    border: false,
+    label: {
+      object: {
+        title: 'Προσθήκη επιλογών',
+        titleNumbering: false,
+        add: 'Προσθήκη επιλογής',
+        addButtonVariant: 'link',
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        append: {
+          label: 'Προσθήκη',
+        },
+        edit: {
+          label: 'Προσθήκη',
+        },
+        cancel: {
+          label: 'Ακύρωση',
+        },
+        nothing_added: 'Δεν έχουν προστεθεί επιλογές',
+        nothing_added_props: {
+          margin: 0,
+          paddingLeft: 2,
+          style: {
+            color: 'var(--color-gray-600)',
+          },
+        },
+      },
+    },
+    max: 2,
+    min: 1,
+    noHeader: true,
+    noIndex: true,
+    sortable: true,
+    stackProps: {
+      spacing: 2,
+      justifyContent: 'flex-end',
+      direction: 'row',
+    },
+    tableContainer: {
+      mb: 0,
+      pl: 2,
+    },
+    verticalAlign: 'top',
+    wordBreak: 'normal',
+    valueDisplay: (value: any) => {
+      // @ts-ignore
+      return options.find((option) => option.value === value).label.primary;
+    },
+    of: {
+      editable: true,
+      key: 'preference_multiple_choice',
+      name: 'preference_multiple_choice',
+      required: true,
+      type: 'preference-multiple-choice',
+      label: {
+        primary: 'Component preference-multiple-choice',
+      },
+      extra: {
+        options,
+      },
+    },
+  },
+};
+
+describe('preference-multiple-choice case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder
+      onSubmit={submitHandler}
+      componentRegistry={customComponentRegistry}
+      validatorRegistry={customValidatorRegistry}
+    >
+      <Field name="preference_multiple_choice" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(
+      screen.getByText('Component preference-multiple-choice')
+    ).toBeInTheDocument();
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη επιλογής' });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it('should open dialog on add button click', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη επιλογής' });
+    fireEvent.click(addButton);
+    expect(screen.getByText('Προσθήκη επιλογών')).toBeInTheDocument();
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+  it('should add a new item on dialog form submission', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη επιλογής' });
+    fireEvent.click(addButton);
+
+    const dialogTitle = screen.getByText('Προσθήκη επιλογών');
+    const radioInput = screen.getByLabelText('Δελτίο Ταυτότητας Έλληνα Πολίτη');
+    fireEvent.click(radioInput);
+    expect(radioInput).toBeChecked();
+    const submitButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+    expect(dialogTitle).not.toBeInTheDocument();
+
+    expect(screen.getByText('Επιλογή #1')).toBeInTheDocument();
+    expect(
+      screen.getByText('Δελτίο Ταυτότητας Έλληνα Πολίτη')
+    ).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+  });
+  it('should submit added item on main form', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη επιλογής' });
+    fireEvent.click(addButton);
+
+    const dialogTitle = screen.getByText('Προσθήκη επιλογών');
+    const radioInput = screen.getByLabelText('Δελτίο Ταυτότητας Έλληνα Πολίτη');
+    fireEvent.click(radioInput);
+    expect(radioInput).toBeChecked();
+    const submitButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+    expect(dialogTitle).not.toBeInTheDocument();
+
+    expect(screen.getByText('Επιλογή #1')).toBeInTheDocument();
+    expect(
+      screen.getByText('Δελτίο Ταυτότητας Έλληνα Πολίτη')
+    ).toBeInTheDocument();
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      preference_multiple_choice: ['hellenic_police'],
+    });
+  });
+});

package/src/FieldArray/index.spec.tsx

@@ -0,0 +1,355 @@
+import React from 'react';
+import {
+  fireEvent,
+  getByLabelText,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import type { FieldSpec } from '@digigov/form';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+describe('FieldArray', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = ({ fieldObject }: { fieldObject: FieldSpec }) => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="fieldArray" {...fieldObject} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('with items of type=object', () => {
+    const baseFieldSpec = {
+      key: 'fieldArray',
+      type: 'array',
+      editable: true,
+      label: {
+        primary: 'Συνυπογράφοντες',
+      },
+      extra: {
+        variant: 'base', // Unnecessary for base variant, but included for consistency
+        label: {
+          object: {
+            title: 'Συνυπογράφοντας',
+            add: 'Προσθήκη συνυπογράφοντα',
+            delete: 'Αφαίρεση συνυπογράφοντος',
+            append: {
+              label: 'Αποθήκευση',
+            },
+            edit: {
+              label: 'Αποθήκευση',
+            },
+            cancel: {
+              label: 'Ακύρωση',
+            },
+          },
+        },
+        of: {
+          type: 'object',
+          extra: {
+            fields: [
+              {
+                key: 'firstName',
+                required: true,
+                type: 'text',
+                label: {
+                  primary: 'Όνομα',
+                },
+              },
+              {
+                key: 'lastName',
+                required: true,
+                type: 'text',
+                label: {
+                  primary: 'Επώνυμο',
+                },
+              },
+            ],
+          },
+        },
+      },
+    } satisfies FieldSpec;
+
+    const dialogFieldSpec: FieldSpec = {
+      ...baseFieldSpec,
+      extra: {
+        ...baseFieldSpec.extra,
+        variant: 'dialog',
+      },
+    };
+
+    const testVariants = [
+      {
+        description: 'base variant',
+        fieldSpec: baseFieldSpec,
+      },
+      {
+        description: 'dialog variant',
+        fieldSpec: dialogFieldSpec,
+      },
+    ];
+
+    const testCases = [
+      {
+        description: 'empty array',
+        values: [],
+      },
+      {
+        description: 'one value',
+        values: [{ firstName: 'John', lastName: 'Doe' }],
+      },
+      {
+        description: 'multiple values',
+        values: [
+          { firstName: 'John', lastName: 'Doe' },
+          { firstName: 'Jane', lastName: 'Smith' },
+        ],
+      },
+    ];
+
+    for (const { description, fieldSpec } of testVariants) {
+      const isDialogVariant = fieldSpec.extra?.variant === 'dialog';
+
+      describe(`${description}`, () => {
+        for (const testCase of testCases) {
+          it(`should submit ${testCase.description}`, async () => {
+            render(<TestForm fieldObject={fieldSpec} />);
+
+            const addButton = screen.getByText('Προσθήκη συνυπογράφοντα');
+            let firstNameInput: HTMLInputElement;
+            let lastNameInput: HTMLInputElement;
+
+            testCase.values.forEach((value, index) => {
+              fireEvent.click(addButton);
+              if (isDialogVariant) {
+                firstNameInput = screen.getByLabelText('Όνομα');
+                lastNameInput = screen.getByLabelText('Επώνυμο');
+              } else {
+                const fieldArray = screen.getByText(
+                  `Συνυπογράφοντας ${index + 1}`
+                ).parentElement;
+                firstNameInput = getByLabelText(fieldArray!, 'Όνομα');
+                lastNameInput = getByLabelText(fieldArray!, 'Επώνυμο');
+              }
+              fireEvent.change(firstNameInput, {
+                target: { value: value.firstName },
+              });
+              fireEvent.change(lastNameInput, {
+                target: { value: value.lastName },
+              });
+
+              if (isDialogVariant) {
+                fireEvent.click(screen.getByText('Αποθήκευση'));
+              }
+            });
+            if (isDialogVariant) {
+              for (const value of testCase.values) {
+                await waitFor(() => {
+                  expect(screen.getByText(value.firstName)).toBeInTheDocument();
+                  expect(screen.getByText(value.lastName)).toBeInTheDocument();
+                });
+              }
+            }
+
+            fireEvent.click(screen.getByText('Συνέχεια'));
+
+            await waitFor(() => {
+              expect(submitHandler).toHaveBeenCalledWith(
+                expect.objectContaining({
+                  fieldArray: testCase.values,
+                })
+              );
+            });
+          });
+        }
+
+        it('should focus on "add item" button if there are top-level errors', async () => {
+          const fieldSpecWithError = {
+            ...fieldSpec,
+            extra: {
+              ...fieldSpec.extra,
+              min: 1,
+            },
+          };
+
+          render(<TestForm fieldObject={fieldSpecWithError} />);
+          // Trigger validation error by submitting empty form
+          fireEvent.click(screen.getByText('Συνέχεια'));
+          await waitFor(() => {
+            expect(submitHandler).toHaveBeenCalledTimes(0);
+            expect(
+              screen.getByText(/Το πεδίο πρέπει να έχει τουλάχιστον 1 εγγραφές/)
+            ).toBeInTheDocument();
+          });
+
+          expect(screen.getByText('Προσθήκη συνυπογράφοντα')).toHaveFocus();
+        });
+
+        it(`should focus on ${isDialogVariant ? '"add-item" button' : 'item input'} if there are item errors`, async () => {
+          render(<TestForm fieldObject={fieldSpec} />);
+
+          const addButton = screen.getByText('Προσθήκη συνυπογράφοντα');
+          fireEvent.click(addButton);
+
+          const firstNameInput = screen.getByLabelText('Όνομα');
+          const lastNameInput = screen.getByLabelText('Επώνυμο');
+
+          fireEvent.change(firstNameInput, {
+            target: { value: '' }, // Leave first name empty
+          });
+          fireEvent.change(lastNameInput, {
+            target: { value: 'Doe' },
+          });
+
+          if (isDialogVariant) {
+            fireEvent.click(screen.getByText('Αποθήκευση'));
+          } else {
+            fireEvent.click(screen.getByText('Συνέχεια'));
+          }
+          await waitFor(() => expect(firstNameInput).toHaveFocus());
+
+          expect(submitHandler).toHaveBeenCalledTimes(0);
+          await waitFor(() =>
+            expect(
+              screen.getByText(/Το πεδίο είναι υποχρεωτικό/)
+            ).toBeInTheDocument()
+          );
+        });
+      });
+    }
+  });
+
+  describe('with items of type=string', () => {
+    const fieldSpec = {
+      key: 'fieldArray',
+      type: 'array',
+      editable: true,
+      label: {
+        primary: 'Συνυπογράφοντες',
+      },
+      extra: {
+        variant: 'dialog',
+        label: {
+          object: {
+            title: 'Συνυπογράφοντας',
+            add: 'Προσθήκη συνυπογράφοντα',
+            delete: 'Αφαίρεση συνυπογράφοντος',
+            append: {
+              label: 'Αποθήκευση',
+            },
+            edit: {
+              label: 'Αποθήκευση',
+            },
+            cancel: {
+              label: 'Ακύρωση',
+            },
+          },
+        },
+        of: {
+          key: 'fieldArray',
+          type: 'string',
+          required: true,
+          label: {
+            primary: 'Όνομα',
+          },
+        },
+      },
+    } satisfies FieldSpec;
+
+    const testCases = [
+      {
+        description: 'empty array',
+        values: [],
+      },
+      {
+        description: 'one value',
+        values: ['John'],
+      },
+      {
+        description: 'multiple values',
+        values: ['John', 'Jane', 'Menexes'],
+      },
+    ];
+
+    for (const testCase of testCases) {
+      it(`should submit ${testCase.description}`, async () => {
+        render(<TestForm fieldObject={fieldSpec} />);
+
+        for (const value of testCase.values) {
+          const addButton = await screen.findByText('Προσθήκη συνυπογράφοντα');
+          expect(addButton).toBeInTheDocument();
+          fireEvent.click(addButton);
+
+          const nameInput = screen.getByLabelText('Όνομα');
+          fireEvent.change(nameInput, {
+            target: { value: value },
+          });
+
+          fireEvent.click(screen.getByText('Αποθήκευση'));
+
+          await waitFor(() =>
+            expect(screen.getByText(value)).toBeInTheDocument()
+          );
+        }
+
+        await waitFor(() =>
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+        );
+
+        fireEvent.click(screen.getByText('Συνέχεια'));
+
+        await waitFor(() => {
+          expect(submitHandler).toHaveBeenCalledWith(
+            expect.objectContaining({
+              fieldArray: testCase.values,
+            })
+          );
+        });
+      });
+    }
+
+    it('should focus on "add item" button if there are top-level errors', async () => {
+      const fieldSpecWithError = {
+        ...fieldSpec,
+        extra: {
+          ...fieldSpec.extra,
+          min: 1,
+        },
+      };
+
+      render(<TestForm fieldObject={fieldSpecWithError} />);
+      // Trigger validation error by submitting empty form
+      fireEvent.click(screen.getByText('Συνέχεια'));
+      await waitFor(() => {
+        expect(submitHandler).toHaveBeenCalledTimes(0);
+        expect(
+          screen.getByText(/Το πεδίο πρέπει να έχει τουλάχιστον 1 εγγραφές/, {
+            selector: 'p.ds-error-message',
+          })
+        ).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('Προσθήκη συνυπογράφοντα')).toHaveFocus();
+    });
+  });
+});

package/src/FieldArray/index.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import React, { useEffect, useRef } from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
-import { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from '@digigov/form/Field/types';
+import BaseFieldArray from '@digigov/form/FieldArray/BaseFieldArray';
 import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
-import { FieldObject } from '@digigov/form/FieldObject';
-import { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';
-import { Card } from '@digigov/ui/content/Card';
-import { Button } from '@digigov/ui/form/Button';
+import type { registerFieldFocus } from '@digigov/form/types';
 
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
@@ -20,6 +18,7 @@ export interface FieldArrayProps extends FieldProps {
   reset: UseFormReturn['reset'];
   resetField?: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
+  registerFieldFocus: registerFieldFocus;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
@@ -36,13 +35,24 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   resetField,
   label,
   Field,
+  registerFieldFocus,
   ...customField
 }) => {
-  const { append, remove } = useFieldArray({
-    control,
-    name,
-  });
-  const fields = getValues(name) || [];
+  /** The ref of the add-button */
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  // Register the button to be focusable
+  useEffect(() => {
+    let unregister: (name: string) => void = () => {};
+    if (buttonRef.current) {
+      unregister = registerFieldFocus(name, buttonRef.current);
+    }
+
+    return () => {
+      unregister(name);
+    };
+  }, [name, registerFieldFocus]);
+
   return (
     <FieldBaseContainer
       label={label}
@@ -57,6 +67,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
     >
       {customField.extra?.variant === 'dialog' ? (
         <FormDialog
+          ref={buttonRef}
           name={name}
           trigger={trigger}
           register={register}
@@ -75,55 +86,17 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           {...customField}
         />
       ) : (
-        <>
-          {fields.map((field, index) => (
-            <Card
-              variant={customField.extra?.border ? 'border' : 'divider'}
-              key={field.id || index}
-            >
-              <Fieldset>
-                <FieldsetLabel>
-                  {customField.extra?.label.object.title}{' '}
-                  {!customField.extra?.noIndex && index + 1}
-                </FieldsetLabel>
-                <FieldObject
-                  name={`${name}.${index}`}
-                  error={Array.isArray(error) && error[index]}
-                  formState={formState}
-                  register={register}
-                  control={control}
-                  {...customField.extra?.of}
-                  Field={Field}
-                />
-                <Button
-                  name={`${name}-object-remove`}
-                  variant={customField.extra?.label.object?.deleteButtonVariant}
-                  type="button"
-                  color="warning"
-                  onClick={() => remove(index)}
-                  disabled={!customField?.editable}
-                >
-                  {customField.extra?.label.object?.delete}
-                </Button>
-              </Fieldset>
-            </Card>
-          ))}
-          {customField.editable && (
-            <Button
-              type="button"
-              name={`${name}-add-object`}
-              color="secondary"
-              variant={customField.extra?.label.object?.addButtonVariant}
-              onClick={(ev) => {
-                ev.preventDefault();
-                append({});
-              }}
-              disabled={!customField?.editable}
-            >
-              {customField.extra?.label.object?.add}
-            </Button>
-          )}
-        </>
+        <BaseFieldArray
+          ref={buttonRef}
+          name={name}
+          register={register}
+          control={control}
+          formState={formState}
+          error={error}
+          getValues={getValues}
+          Field={Field}
+          {...customField}
+        />
       )}
     </FieldBaseContainer>
   );