@digigov/form 2.0.0-d0adc9fb → 2.0.0-d2ffc726

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.test.tsx

@@ -1,23 +1,35 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
+import { CardsWithError } from '@digigov/form/FieldArray/__stories__/CardsWithError';
 import { Default } from '@digigov/form/FieldArray/__stories__/Default';
 import { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
+import { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
 
 test('renders the All FieldArray variants', async ({ mount, page }) => {
   await mount(
     
   <div>
+    <TestVariant title="CardsWithError">
+      <CardsWithError />
+    </TestVariant>
     <TestVariant title="Default">
       <Default />
     </TestVariant>
     <TestVariant title="WithExactLength">
       <WithExactLength />
     </TestVariant>
+    <TestVariant title="WithModal">
+      <WithModal />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });