@digigov/form 2.0.0-a32ad9b2 → 2.0.0-a594a958

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()
+    );
+  });
+});