@digigov/form 2.0.0-87b6232d → 2.0.0-8bbad051

package/src/FieldArray/__tests__/nested-fieldset-multiplicity.spec.tsx

@@ -0,0 +1,627 @@
+import React from 'react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} 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
+    }
+  };
+});
+
+const fieldSpec: FieldSpec = {
+  key: 'nested_fieldset_multiplicity',
+  type: 'array',
+  editable: true,
+  label: {
+    primary:
+      'Fieldset με multiplicity που περιέχει πεδία με multiplicity (multiplinception)',
+  },
+  extra: {
+    noIndex: true,
+    tableCellActionsLabel: '',
+    border: true,
+    variant: 'dialog',
+    labelSize: 'md',
+    tableContainer: {
+      mb: 0,
+    },
+    stackProps: {
+      spacing: 2,
+      justifyContent: 'flex-end',
+      direction: 'row',
+    },
+    max: 5,
+    label: {
+      object: {
+        append: {
+          label: 'Αποθήκευση',
+          props: {
+            color: 'primary',
+          },
+        },
+        edit: {
+          label: 'Αποθήκευση',
+          props: {
+            color: 'primary',
+          },
+        },
+        cancel: {
+          label: 'Ακύρωση',
+          props: {
+            variant: 'button',
+            color: 'secondary',
+          },
+        },
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+        nothing_added_props: {
+          style: {
+            color: 'var(--color-gray-600)',
+          },
+          margin: 0,
+          paddingLeft: 2,
+        },
+      },
+    },
+    of: {
+      type: 'object',
+      extra: {
+        fields: [
+          {
+            type: 'array',
+            key: 'nested_multiplicity_required',
+            name: 'nested_multiplicity_required',
+            label: {
+              primary: '"required" μέχρι 10',
+              secondary:
+                'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+            },
+            extra: {
+              editVariant: 'required',
+              noIndex: true,
+              border: false,
+              noHeader: true,
+              variant: 'dialog',
+              min: 1,
+              max: 10,
+              tableContainer: {
+                mb: 0,
+              },
+              stackProps: {
+                spacing: 2,
+                justifyContent: 'flex-end',
+                direction: 'row',
+              },
+              label: {
+                object: {
+                  append: {
+                    label: 'Αποθήκευση',
+                    props: {
+                      color: 'primary',
+                    },
+                  },
+                  edit: {
+                    label: 'Αποθήκευση',
+                    props: {
+                      color: 'primary',
+                    },
+                  },
+                  cancel: {
+                    label: 'Ακύρωση',
+                    props: {
+                      variant: 'button',
+                      color: 'secondary',
+                    },
+                  },
+                  add: 'Προσθήκη',
+                  addButtonVariant: 'link',
+                  delete: 'Αφαίρεση',
+                  deleteButtonVariant: 'link',
+                  nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+                  nothing_added_props: {
+                    style: {
+                      color: 'var(--color-gray-600)',
+                    },
+                    margin: 0,
+                    paddingLeft: 2,
+                  },
+                },
+              },
+              of: {
+                type: 'string',
+                label: {},
+                editable: true,
+                required: true,
+                layout: {},
+              },
+            },
+            required: true,
+            editable: true,
+            layout: {},
+          },
+          {
+            type: 'array',
+            key: 'nested_multiplicity_optional',
+            name: 'nested_multiplicity_optional',
+            label: {
+              primary: '"optional" μέχρι 10',
+              secondary:
+                'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+            },
+            extra: {
+              editVariant: 'optional',
+              noIndex: true,
+              border: false,
+              noHeader: true,
+              variant: 'dialog',
+              min: 0,
+              max: 10,
+              tableContainer: {
+                mb: 0,
+              },
+              stackProps: {
+                spacing: 2,
+                justifyContent: 'flex-end',
+                direction: 'row',
+              },
+              label: {
+                object: {
+                  append: {
+                    label: 'Αποθήκευση',
+                    props: {
+                      color: 'primary',
+                    },
+                  },
+                  edit: {
+                    label: 'Αποθήκευση',
+                    props: {
+                      color: 'primary',
+                    },
+                  },
+                  cancel: {
+                    label: 'Ακύρωση',
+                    props: {
+                      variant: 'button',
+                      color: 'secondary',
+                    },
+                  },
+                  add: 'Προσθήκη',
+                  addButtonVariant: 'link',
+                  delete: 'Αφαίρεση',
+                  deleteButtonVariant: 'link',
+                  nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+                  nothing_added_props: {
+                    style: {
+                      color: 'var(--color-gray-600)',
+                    },
+                    margin: 0,
+                    paddingLeft: 2,
+                  },
+                },
+              },
+              of: {
+                type: 'string',
+                label: {},
+                required: false,
+                editable: true,
+                layout: {},
+              },
+            },
+            required: false,
+            editable: true,
+            layout: {},
+          },
+        ],
+      },
+    },
+  },
+};
+
+describe('nested_fieldset_multiplicity case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="nested_fieldset_multiplicity" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(
+      screen.getByText(
+        'Fieldset με multiplicity που περιέχει πεδία με multiplicity (multiplinception)'
+      )
+    ).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.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  for (const fieldsetType of ['required', 'optional'] as const) {
+    it(`should open the nested_multiplicity_${fieldsetType} dialog on nested "add" button click`, async () => {
+      render(<TestForm />);
+      openMainDialog();
+      const nestedFieldset = getNestedFieldset(fieldsetType);
+      const nestedFieldsetAddButton = within(nestedFieldset!).getByRole(
+        'button',
+        { name: 'Προσθήκη' }
+      );
+      fireEvent.click(nestedFieldsetAddButton);
+      expect(screen.getAllByRole('dialog').length).toBe(2);
+      const inputField = screen.getByRole('textbox');
+      expect(inputField).toBeInTheDocument();
+      expect(inputField).toHaveProperty(
+        'name',
+        `nested_multiplicity_${fieldsetType}`
+      );
+    });
+  }
+
+  it('should validate nested_multiplicity_required', async () => {
+    render(<TestForm />);
+    openMainDialog();
+    const submitButton = screen.getByRole('button', {
+      name: 'Αποθήκευση',
+    });
+    fireEvent.click(submitButton);
+
+    expect(
+      await screen.findByText(
+        'Το πεδίο πρέπει να έχει τουλάχιστον 1 εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('should validate nested_multiplicity_required string field', async () => {
+    render(<TestForm />);
+    openMainDialog();
+    const nestedFieldset = getNestedFieldset('required');
+    const nestedFieldsetAddButton = within(nestedFieldset).getByRole('button', {
+      name: 'Προσθήκη',
+    });
+    fireEvent.click(nestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const inputField = screen.getByRole('textbox');
+    expect(inputField).toHaveProperty('name', `nested_multiplicity_required`);
+    const submitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(submitButton);
+    await waitFor(() =>
+      expect(
+        screen.getByText('Το πεδίο είναι υποχρεωτικό.')
+      ).toBeInTheDocument()
+    );
+  });
+
+  it('should submit nested_multiplicity_required item added by nested form', async () => {
+    render(<TestForm />);
+    openMainDialog();
+    const nestedFieldset = getNestedFieldset('required');
+    const nestedFieldsetAddButton = within(nestedFieldset).getByRole('button', {
+      name: 'Προσθήκη',
+    });
+    fireEvent.click(nestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const nestedFieldsetInput = screen.getByRole('textbox');
+    expect(nestedFieldsetInput).toBeInTheDocument();
+    expect(nestedFieldsetInput).toHaveProperty(
+      'name',
+      `nested_multiplicity_required`
+    );
+    fireEvent.change(nestedFieldsetInput, {
+      target: { value: 'Test Value' },
+    });
+    expect(nestedFieldsetInput).toHaveValue('Test Value');
+    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
+    const submitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(submitButton);
+    await waitFor(() => {
+      // Only one dialog should remain open (the main one)
+      expect(screen.getAllByRole('dialog').length).toBe(1);
+    });
+
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    const mainDialogSubmitButton = screen.getByRole('button', {
+      name: 'Αποθήκευση',
+    });
+    fireEvent.click(mainDialogSubmitButton);
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    expect(continueButton).toBeInTheDocument();
+    fireEvent.click(continueButton);
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      nested_fieldset_multiplicity: expect.arrayContaining([
+        {
+          nested_multiplicity_required: ['Test Value'],
+          nested_multiplicity_optional: [],
+        },
+      ]),
+    });
+  });
+
+  it('should submit both nested_multiplicity_required and nested_multiplicity_optional items added by nested forms', async () => {
+    render(<TestForm />);
+    openMainDialog();
+
+    // Add multiple nested_multiplicity_required items
+    const requiredNestedFieldset = getNestedFieldset('required');
+    const requiredNestedFieldsetAddButton = within(
+      requiredNestedFieldset
+    ).getByRole('button', {
+      name: 'Προσθήκη',
+    });
+    fireEvent.click(requiredNestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const requiredNestedFieldsetInput = screen.getByRole('textbox');
+    expect(requiredNestedFieldsetInput).toBeInTheDocument();
+    expect(requiredNestedFieldsetInput).toHaveProperty(
+      'name',
+      `nested_multiplicity_required`
+    );
+    fireEvent.change(requiredNestedFieldsetInput, {
+      target: { value: 'Required Test Value 1' },
+    });
+    expect(requiredNestedFieldsetInput).toHaveValue('Required Test Value 1');
+    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
+    const requiredSubmitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(requiredSubmitButton);
+    await waitFor(() => {
+      // Only one dialog should remain open (the main one)
+      expect(screen.getAllByRole('dialog').length).toBe(1);
+    });
+
+    expect(screen.getByText('Required Test Value 1')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+    // Add a second required item
+    fireEvent.click(requiredNestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const secondRequiredNestedFieldsetInput = screen.getByRole('textbox');
+    expect(secondRequiredNestedFieldsetInput).toBeInTheDocument();
+    expect(secondRequiredNestedFieldsetInput).toHaveProperty(
+      'name',
+      `nested_multiplicity_required`
+    );
+    fireEvent.change(secondRequiredNestedFieldsetInput, {
+      target: { value: 'Required Test Value 2' },
+    });
+    expect(secondRequiredNestedFieldsetInput).toHaveValue(
+      'Required Test Value 2'
+    );
+    const secondRequiredSubmitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(secondRequiredSubmitButton);
+    await waitFor(() => {
+      // Only one dialog should remain open (the main one)
+      expect(screen.getAllByRole('dialog').length).toBe(1);
+    });
+
+    expect(screen.getByText('Required Test Value 1')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    // Add nested_multiplicity_optional item
+    const optionalNestedFieldset = getNestedFieldset('optional');
+    const optionalNestedFieldsetAddButton = within(
+      optionalNestedFieldset
+    ).getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(optionalNestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const optionalNestedFieldsetInput = screen.getByRole('textbox');
+    expect(optionalNestedFieldsetInput).toBeInTheDocument();
+    expect(optionalNestedFieldsetInput).toHaveProperty(
+      'name',
+      `nested_multiplicity_optional`
+    );
+    fireEvent.change(optionalNestedFieldsetInput, {
+      target: { value: 'Optional Test Value' },
+    });
+    expect(optionalNestedFieldsetInput).toHaveValue('Optional Test Value');
+
+    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
+    const optionalSubmitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(optionalSubmitButton);
+    await waitFor(() => {
+      // Only one dialog should remain open (the main one)
+      expect(screen.getAllByRole('dialog').length).toBe(1);
+    });
+
+    expect(screen.getByText('Optional Test Value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    const mainDialogSubmitButton = screen.getByRole('button', {
+      name: 'Αποθήκευση',
+    });
+    fireEvent.click(mainDialogSubmitButton);
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Optional Test Value')).toBeInTheDocument();
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    expect(continueButton).toBeInTheDocument();
+    fireEvent.click(continueButton);
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      nested_fieldset_multiplicity: expect.arrayContaining([
+        {
+          nested_multiplicity_required: [
+            'Required Test Value 1',
+            'Required Test Value 2',
+          ],
+          nested_multiplicity_optional: ['Optional Test Value'],
+        },
+      ]),
+    });
+  });
+
+  it('should submit multiple fieldset items added to main form', async () => {
+    render(<TestForm />);
+    openMainDialog();
+
+    // Add first item
+    const nestedFieldset = getNestedFieldset('required');
+    const nestedFieldsetAddButton = within(nestedFieldset).getByRole('button', {
+      name: 'Προσθήκη',
+    });
+    fireEvent.click(nestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const nestedFieldsetInput = screen.getByRole('textbox');
+    expect(nestedFieldsetInput).toBeInTheDocument();
+    expect(nestedFieldsetInput).toHaveProperty(
+      'name',
+      `nested_multiplicity_required`
+    );
+    fireEvent.change(nestedFieldsetInput, {
+      target: { value: 'Test Value 1' },
+    });
+    expect(nestedFieldsetInput).toHaveValue('Test Value 1');
+    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
+    const submitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(submitButton);
+    await waitFor(() => {
+      // Only one dialog should remain open (the main one)
+      expect(screen.getAllByRole('dialog').length).toBe(1);
+    });
+    expect(screen.getByText('Test Value 1')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    // Submit first item
+    const mainDialogSubmitButton = screen.getByRole('button', {
+      name: 'Αποθήκευση',
+    });
+    fireEvent.click(mainDialogSubmitButton);
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Test Value 1')).toBeInTheDocument();
+
+    // Add second item
+    openMainDialog();
+    const secondNestedFieldset = getNestedFieldset('required', true);
+    const secondNestedFieldsetAddButton = within(
+      secondNestedFieldset
+    ).getByRole('button', {
+      name: 'Προσθήκη',
+    });
+    fireEvent.click(secondNestedFieldsetAddButton);
+    expect(screen.getAllByRole('dialog').length).toBe(2);
+    const secondNestedFieldsetInput = screen.getByRole('textbox');
+    expect(secondNestedFieldsetInput).toBeInTheDocument();
+    expect(secondNestedFieldsetInput).toHaveProperty(
+      'name',
+      `nested_multiplicity_required`
+    );
+    fireEvent.change(secondNestedFieldsetInput, {
+      target: { value: 'Test Value 2' },
+    });
+    expect(secondNestedFieldsetInput).toHaveValue('Test Value 2');
+    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
+    const secondSubmitButton = screen.getAllByRole('button', {
+      name: 'Αποθήκευση',
+    })[1];
+    fireEvent.click(secondSubmitButton);
+    await waitFor(() => {
+      // Only one dialog should remain open (the main one)
+      expect(screen.getAllByRole('dialog').length).toBe(1);
+    });
+    expect(screen.getByText('Test Value 2')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+    // Submit second item
+    const secondMainDialogSubmitButton = screen.getByRole('button', {
+      name: 'Αποθήκευση',
+    });
+    fireEvent.click(secondMainDialogSubmitButton);
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Test Value 2')).toBeInTheDocument();
+
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    expect(continueButton).toBeInTheDocument();
+    fireEvent.click(continueButton);
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      nested_fieldset_multiplicity: expect.arrayContaining([
+        {
+          nested_multiplicity_required: ['Test Value 1'],
+          nested_multiplicity_optional: [],
+        },
+        {
+          nested_multiplicity_required: ['Test Value 2'],
+          nested_multiplicity_optional: [],
+        },
+      ]),
+    });
+  });
+});
+
+function openMainDialog() {
+  const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+  fireEvent.click(addButton);
+  expect(screen.getByRole('dialog')).toBeInTheDocument();
+  // Expect: The external "add" button + the required "add" button + the optional "add" button
+  expect(screen.getAllByRole('button', { name: 'Προσθήκη' }).length).toBe(3);
+}
+
+function getNestedFieldset(
+  type: 'required' | 'optional',
+  hasSubmittedOnce = false
+) {
+  const nestedFieldsetTitle = screen.getAllByText(
+    new RegExp(`"${type}" μέχρι 10`)
+  )[hasSubmittedOnce ? 1 : 0];
+  const nestedFieldset = nestedFieldsetTitle.closest('fieldset');
+  expect(nestedFieldset).toBeInTheDocument();
+  return nestedFieldset!;
+}