@digigov/form 2.0.0-555d1027 → 2.0.0-5701c39b

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

@@ -0,0 +1,280 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import user from '@testing-library/user-event';
+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: 'attachment_multiplicity',
+  type: 'array',
+  editable: true,
+  required: false,
+  label: {
+    primary: 'attachment multiplicity',
+    secondary: 'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+  },
+  extra: {
+    border: false,
+    editVariant: 'optional',
+    label: {
+      object: {
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        append: {
+          label: 'Αποθήκευση',
+        },
+        cancel: {
+          label: 'Ακύρωση',
+        },
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        edit: {
+          label: 'Αποθήκευση',
+        },
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+        nothing_added_props: {
+          margin: 0,
+          paddingLeft: 2,
+          style: {
+            color: 'var(--color-gray-600)',
+          },
+        },
+      },
+    },
+    limit: {
+      maxSize: 5242880,
+    },
+    max: 10,
+    min: 0,
+    noHeader: true,
+    noIndex: true,
+    of: {
+      editable: true,
+      name: undefined,
+      key: undefined,
+      label: {},
+      type: 'file',
+      extra: {
+        containerProps: {
+          variant: 'border',
+        },
+        limit: {
+          maxSize: 5242880,
+        },
+        noResetButton: true,
+        resetButtonProps: {
+          color: 'warning',
+        },
+        uploadButtonProps: {
+          variant: 'link',
+        },
+      },
+    },
+    stackProps: {
+      direction: 'row',
+      justifyContent: 'flex-end',
+      spacing: 2,
+    },
+    tableContainer: {
+      mb: 0,
+    },
+    variant: 'dialog',
+  },
+};
+
+describe('multiplicity_attachment case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="multiplicity_attachment" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(screen.getByText('attachment multiplicity')).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();
+    expect(screen.getByText('Επιλογή αρχείου')).toBeInTheDocument();
+  });
+  it('should add a new item on dialog form submission', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+    const fileInput = screen.getByLabelText('Επιλογή αρχείου');
+    const file = new File(['file content'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+    fireEvent.change(fileInput, { target: { files: [file] } });
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(saveButton);
+    expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+  });
+  it('should submit added item on main form', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    await user.click(addButton);
+    const fileInput = screen.getByLabelText('Επιλογή αρχείου');
+    const file = new File(['file content'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(fileInput, file);
+    await waitFor(() => {
+      expect(screen.getByText(/test-file.txt/)).toBeInTheDocument();
+    });
+
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Επεξεργασία')).toBeInTheDocument();
+    expect(screen.getByText('Διαγραφή')).toBeInTheDocument();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+      expect(submitHandler).toHaveBeenCalledWith({
+        multiplicity_attachment: expect.any(Array),
+      });
+    });
+
+    const callArgs = submitHandler.mock.calls[0][0];
+
+    expect(Array.isArray(callArgs.multiplicity_attachment)).toBe(true);
+    expect(callArgs.multiplicity_attachment).toHaveLength(1);
+    expect(callArgs.multiplicity_attachment[0]).toBeInstanceOf(FileList);
+    expect(callArgs.multiplicity_attachment[0][0].name).toBe('test-file.txt');
+  });
+  it('should submit multiple added items', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+
+    // First file
+    await user.click(addButton);
+    const file1 = new File(['file content'], 'file-1.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(screen.getByLabelText('Επιλογή αρχείου'), file1);
+    await waitFor(() => {
+      expect(screen.getByText(/file-1.txt/)).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('file-1.txt')).toBeInTheDocument();
+    expect(screen.getByText('Επεξεργασία')).toBeInTheDocument();
+    expect(screen.getByText('Διαγραφή')).toBeInTheDocument();
+
+    // Second file
+    await user.click(addButton);
+    const file2 = new File(['file content'], 'file-2.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(screen.getByLabelText('Επιλογή αρχείου'), file2);
+    await waitFor(() => {
+      expect(screen.getByText(/file-2.txt/)).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('file-1.txt')).toBeInTheDocument();
+    expect(screen.getByText('file-2.txt')).toBeInTheDocument();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+      expect(submitHandler).toHaveBeenCalledWith({
+        multiplicity_attachment: [expect.any(FileList), expect.any(FileList)],
+      });
+    });
+
+    const callArgs = submitHandler.mock.calls[0][0];
+
+    expect(Array.isArray(callArgs.multiplicity_attachment)).toBe(true);
+    expect(callArgs.multiplicity_attachment).toHaveLength(2);
+    expect(callArgs.multiplicity_attachment[0]).toBeInstanceOf(FileList);
+    expect(callArgs.multiplicity_attachment[0][0].name).toBe('file-1.txt');
+
+    expect(callArgs.multiplicity_attachment[1]).toBeInstanceOf(FileList);
+    expect(callArgs.multiplicity_attachment[1][0].name).toBe('file-2.txt');
+  });
+  it('should allow editing of added item', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    await user.click(addButton);
+    const fileInput = screen.getByLabelText('Επιλογή αρχείου');
+    const file = new File(['file content'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(fileInput, file);
+    expect(screen.getByText(/test-file.txt/)).toBeInTheDocument();
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    await user.click(saveButton);
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    );
+    expect(screen.getByText(/test-file.txt/)).toBeInTheDocument();
+
+    const editButton = screen.getByRole('button', { name: 'Επεξεργασία' });
+    await user.click(editButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      const dialog = screen.getByRole('dialog');
+
+      expect(dialog).toHaveTextContent(/test-file.txt/);
+    });
+    const editFileInput = screen.getByLabelText(/Αντικατάσταση/);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    const newFile = new File(['new content'], 'new-file.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(editFileInput, newFile);
+    const saveEditButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    await user.click(saveEditButton);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.getByText(/new-file.txt/)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,232 @@
+import React from 'react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} 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: 'multiplicity_optional',
+  editable: true,
+  type: 'array',
+  required: false,
+  label: {
+    primary: '"optional" μέχρι 10',
+    secondary: 'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+  },
+  extra: {
+    variant: 'dialog',
+    editVariant: 'optional',
+    min: 0,
+    max: 10,
+    noHeader: true,
+    noIndex: true,
+    label: {
+      object: {
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        append: {
+          label: 'Αποθήκευση',
+        },
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        cancel: {
+          label: 'Ακύρωση',
+        },
+        edit: {
+          label: 'Αποθήκευση',
+        },
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+      },
+    },
+    of: {
+      editable: true,
+      key: undefined,
+      name: undefined,
+      type: 'string',
+      required: false,
+      label: {},
+    },
+  },
+};
+
+describe('multiplicity_optional case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="multiplicity_optional" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(screen.getByText('"optional" μέχρι 10')).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();
+  });
+  it('should add a new item on dialog form submission', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+
+    const inputField = screen.getByRole('textbox');
+    fireEvent.change(inputField, { target: { value: 'Test Value' } });
+    expect(inputField).toHaveValue('Test Value');
+    const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+
+    expect(screen.getByText('Test Value')).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 inputField = screen.getByRole('textbox');
+    fireEvent.change(inputField, { target: { value: 'Test Value' } });
+    expect(inputField).toHaveValue('Test Value');
+    const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      multiplicity_optional: ['Test Value'],
+    });
+  });
+  it('should allow submitting empty form', async () => {
+    render(<TestForm />);
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+
+    fireEvent.click(continueButton);
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({ multiplicity_optional: [] });
+  });
+  it('should allow adding up to max items', async () => {
+    render(<TestForm />);
+
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+
+    for (let i = 1; i <= 10; i++) {
+      fireEvent.click(addButton);
+      await waitFor(() =>
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      );
+      const inputField = screen.getByRole('textbox');
+      fireEvent.change(inputField, { target: { value: `Test ${i}` } });
+      expect(inputField).toHaveValue(`Test ${i}`);
+      const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+      fireEvent.click(submitButton);
+      await waitForElementToBeRemoved(screen.getByRole('dialog'));
+    }
+
+    expect(addButton).toBeDisabled();
+
+    for (let i = 1; i <= 10; i++) {
+      expect(screen.getByText(`Test ${i}`)).toBeInTheDocument();
+    }
+
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+
+    expect(submitHandler).toHaveBeenCalledWith({
+      multiplicity_optional: [
+        'Test 1',
+        'Test 2',
+        'Test 3',
+        'Test 4',
+        'Test 5',
+        'Test 6',
+        'Test 7',
+        'Test 8',
+        'Test 9',
+        'Test 10',
+      ],
+    });
+  });
+  it('should allow submitting empty item to the main form', async () => {
+    render(<TestForm />);
+
+    expect(
+      screen.getByText('Δεν έχουν προστεθεί στοιχεία')
+    ).toBeInTheDocument();
+
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+
+    // Just focus and submit without entering any value
+    fireEvent.click(addButton);
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
+    fireEvent.focus(screen.getByRole('textbox'));
+    fireEvent.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+    await waitForElementToBeRemoved(screen.getByRole('dialog'));
+
+    expect(
+      screen.getByText('Δεν έχουν προστεθεί στοιχεία')
+    ).toBeInTheDocument();
+
+    // Submit empty string
+    fireEvent.click(addButton);
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+    await waitForElementToBeRemoved(screen.getByRole('dialog'));
+
+    expect(
+      screen.getByText('Δεν έχουν προστεθεί στοιχεία')
+    ).toBeInTheDocument();
+
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({ multiplicity_optional: [] });
+  });
+});

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

@@ -0,0 +1,170 @@
+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: 'multiplicity_required',
+  editable: true,
+  type: 'array',
+  required: true,
+  label: {
+    primary: '"required" μέχρι 10',
+    secondary: 'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+  },
+  extra: {
+    variant: 'dialog',
+    editVariant: 'required',
+    min: 1,
+    max: 10,
+    noHeader: true,
+    noIndex: true,
+    label: {
+      object: {
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        append: {
+          label: 'Αποθήκευση',
+        },
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        cancel: {
+          label: 'Ακύρωση',
+        },
+        edit: {
+          label: 'Αποθήκευση',
+        },
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+      },
+    },
+    of: {
+      editable: true,
+      key: undefined,
+      name: undefined,
+      type: 'string',
+      required: true,
+      label: {},
+    },
+  },
+};
+
+describe('multiplicity_required case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="multiplicity_required" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(screen.getByText('"required" μέχρι 10')).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();
+  });
+  it('should add a new item on dialog form submission', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+
+    const inputField = screen.getByRole('textbox');
+    fireEvent.change(inputField, { target: { value: 'Test Value' } });
+    expect(inputField).toHaveValue('Test Value');
+    const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+
+    expect(screen.getByText('Test Value')).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 inputField = screen.getByRole('textbox');
+    fireEvent.change(inputField, { target: { value: 'Test Value' } });
+    expect(inputField).toHaveValue('Test Value');
+    const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      multiplicity_required: ['Test Value'],
+    });
+  });
+  it('should show validation error if submitted empty', async () => {
+    render(<TestForm />);
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).not.toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Το πεδίο πρέπει να έχει τουλάχιστον 1 εγγραφές/)
+      ).toBeInTheDocument();
+    });
+  });
+  it('should show validation error if item is empty', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+
+    fireEvent.click(addButton);
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
+
+    // Just focus the input
+    fireEvent.focus(screen.getByRole('textbox'));
+    fireEvent.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+
+    await waitFor(() =>
+      expect(screen.getByText(/Το πεδίο είναι υποχρεωτικό/)).toBeInTheDocument()
+    );
+
+    // Add empty string
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+
+    await waitFor(() =>
+      expect(screen.getByText(/Το πεδίο είναι υποχρεωτικό/)).toBeInTheDocument()
+    );
+  });
+});