@digigov/form 2.0.0-60d81ed8 → 2.0.0-66d7c5e2

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

@@ -0,0 +1,131 @@
+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'],
+    });
+  });
+});