@digigov/form 2.0.0-36b707c1 → 2.0.0-385c7994

package/src/FieldArray/__stories__/WithModal.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    editable: true,
+    required: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      noIndex: true,
+      border: false,
+      variant: 'dialog',
+      noHeader: false,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+          append: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          edit: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          cancel: {
+            label: 'Ακύρωση',
+            props: {
+              variant: 'link',
+            },
+          },
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      min: 2,
+      // max: 4,
+      of: {
+        type: 'object',
+        extra: {
+          fields: [
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'gender',
+              required: true,
+              type: 'choice:single',
+              label: {
+                primary: 'Φύλο',
+              },
+              extra: {
+                options: [
+                  {
+                    label: {
+                      primary: 'Άνδρας',
+                      secondary: 'Choice 1 explanation',
+                    },
+                    value: 'male',
+                  },
+                  {
+                    label: {
+                      primary: 'Γυναίκα',
+                      secondary: 'Choice 2 explanation',
+                    },
+                    value: 'female',
+                  },
+                  {
+                    label: {
+                      primary: 'Άλλο',
+                      secondary: 'Choice 3 explanation',
+                    },
+                    value: 'other',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'arrayofafm',
+    editable: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      variant: 'dialog',
+      noHeader: false,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+          append: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          edit: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          cancel: {
+            label: 'Ακύρωση',
+            props: {
+              variant: 'link',
+            },
+          },
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      // min: 2,
+      // max: 4,
+      of: {
+        required: true,
+        type: 'afm',
+        label: {
+          primary: 'ΑΦΜ',
+        },
+      },
+    },
+  },
+] as FieldSpec[];
+
+export const WithModal = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+      window.alert('Submit success');
+    }}
+    initial={{
+      multiplicity: [['Παπαδόπουλος', 'other']],
+    }}
+  >
+    <Field name="multiplicity" {...fields[1]} />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);

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

@@ -0,0 +1,271 @@
+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 { Button } from '@digigov/ui/form/Button';
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+const fieldSpec: FieldSpec = {
+  key: 'fieldset_multiplicity',
+  type: 'array',
+  editable: true,
+  label: {
+    primary: 'Fieldset multiplicity (μέχρι 5)',
+  },
+  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: [
+          {
+            key: 'fieldset_multiplicity_required',
+            name: 'fieldset_multiplicity_required',
+            type: 'string',
+            label: {
+              primary: '"required label"',
+            },
+            required: true,
+            editable: true,
+            layout: {},
+          },
+          {
+            key: 'fieldset_multiplicity_optional',
+            name: 'fieldset_multiplicity_optional',
+            type: 'string',
+            label: {
+              primary: '"optional label"',
+            },
+            required: false,
+            editable: true,
+            layout: {},
+          },
+        ],
+      },
+    },
+  },
+};
+
+describe('fieldset_multiplicity case from dilosi', () => {
+  const submitHandler = vi.fn();
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="fieldset_multiplicity" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+  let addButton: HTMLButtonElement;
+
+  beforeEach(() => {
+    render(<TestForm />);
+    addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    expect(
+      screen.getByText('Fieldset multiplicity (μέχρι 5)')
+    ).toBeInTheDocument();
+  });
+
+  it('should open dialog on add button click', async () => {
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('"required label"')).toBeInTheDocument();
+    expect(screen.getByText('"optional label"')).toBeInTheDocument();
+  });
+  it('should submit required value', async () => {
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(saveButton);
+
+    expect(submitHandler).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(
+        screen.getByText('Το πεδίο είναι υποχρεωτικό.')
+      ).toBeInTheDocument()
+    );
+
+    const requiredInput = screen.getAllByRole('textbox')[0];
+    fireEvent.change(requiredInput, { target: { value: 'Required value' } });
+
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Required value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledWith({
+        fieldset_multiplicity: [
+          {
+            fieldset_multiplicity_required: 'Required value',
+            fieldset_multiplicity_optional: '',
+          },
+        ],
+      });
+    });
+  });
+  it('should submit both required and optional values', async () => {
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    const requiredInput = screen.getAllByRole('textbox')[0];
+    fireEvent.change(requiredInput, { target: { value: 'Required value' } });
+    const optionalInput = screen.getAllByRole('textbox')[1];
+    fireEvent.change(optionalInput, { target: { value: 'Optional value' } });
+
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Required value')).toBeInTheDocument();
+    expect(screen.getByText('Optional value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledWith({
+        fieldset_multiplicity: [
+          {
+            fieldset_multiplicity_required: 'Required value',
+            fieldset_multiplicity_optional: 'Optional value',
+          },
+        ],
+      });
+    });
+  });
+  it('should allow adding up to max items', async () => {
+    for (let i = 0; i < 5; i++) {
+      fireEvent.click(addButton);
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      const requiredInput = screen.getAllByRole('textbox')[0];
+      fireEvent.change(requiredInput, {
+        target: { value: `Required value ${i}` },
+      });
+      const optionalInput = screen.getAllByRole('textbox')[1];
+      fireEvent.change(optionalInput, {
+        target: { value: `Optional value ${i}` },
+      });
+
+      const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+      expect(screen.getByText(`Required value ${i}`)).toBeInTheDocument();
+      expect(screen.getByText(`Optional value ${i}`)).toBeInTheDocument();
+    }
+
+    expect(addButton).toBeDisabled();
+
+    expect(submitHandler).not.toHaveBeenCalled();
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(submitButton);
+
+    await waitFor(() =>
+      expect(submitHandler).toHaveBeenCalledWith({
+        fieldset_multiplicity: [
+          {
+            fieldset_multiplicity_required: 'Required value 0',
+            fieldset_multiplicity_optional: 'Optional value 0',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 1',
+            fieldset_multiplicity_optional: 'Optional value 1',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 2',
+            fieldset_multiplicity_optional: 'Optional value 2',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 3',
+            fieldset_multiplicity_optional: 'Optional value 3',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 4',
+            fieldset_multiplicity_optional: 'Optional value 4',
+          },
+        ],
+      })
+    );
+  });
+});