@akinon/akiform-builder 1.5.6 → 1.5.8

package/dist/esm/__tests__/akiform-builder.test.js

@@ -1,1421 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useController } from '@akinon/akiform';
-import { akival } from '@akinon/akival';
-import { fireEvent, render, screen, userEvent, waitFor } from '@akinon/utils';
-import * as React from 'react';
-import { act } from 'react';
-import { AkiformBuilder, THROTTLE_DELAY } from '../src/akiform-builder';
-import { field } from '../src/field-builder';
-describe('AkiformBuilder', () => {
-    const mockOnSubmit = vi.fn();
-    const mockOnReset = vi.fn();
-    const mockOnValueChange = vi.fn();
-    const expandCollapsable = async () => {
-        const user = userEvent.setup();
-        const expandIcons = (await screen.findAllByRole('button')).filter(el => el.className.includes('akinon-collapse-expand-icon'));
-        for (const expandIcon of expandIcons) {
-            await user.click(expandIcon);
-        }
-    };
-    const defaultFields = [
-        {
-            key: 'name',
-            label: 'Name',
-            type: 'text',
-            placeholder: 'Enter your name'
-        },
-        {
-            key: 'age',
-            label: 'Age',
-            type: 'number',
-            placeholder: 'Enter your age',
-            help: 'Description text 2'
-        }
-    ];
-    beforeEach(() => {
-        vi.clearAllMocks();
-    });
-    describe('AkiformBuilder in uncontrolled mode', () => {
-        it('renders form fields correctly', async () => {
-            const newDefaultFields = defaultFields.map((field, key) => (Object.assign(Object.assign({}, field), { help: `Description text ${key}`, labelDescription: `Label description text ${key}` })));
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
-            });
-            for (const field of newDefaultFields) {
-                if (field.label) {
-                    expect(screen.getByText(field.label)).toBeInTheDocument();
-                }
-                if (field.placeholder) {
-                    expect(screen.getByPlaceholderText(field.placeholder)).toBeInTheDocument();
-                }
-                expect(screen.getByText(field.help)).toBeInTheDocument();
-                expect(screen.getByText(field.labelDescription)).toBeInTheDocument();
-            }
-        });
-        it('renders form fields correctly with row and column fields', async () => {
-            const newDefaultFields = [
-                {
-                    type: 'row',
-                    key: 'mainrow',
-                    rowProps: {
-                        align: 'middle'
-                    },
-                    columnFields: [
-                        {
-                            type: 'column',
-                            key: 'col1',
-                            columnProps: {
-                                span: '24'
-                            },
-                            fields: [
-                                {
-                                    type: 'row',
-                                    key: 'row1',
-                                    columnFields: [
-                                        {
-                                            type: 'column',
-                                            key: 'col1_1',
-                                            fields: [
-                                                {
-                                                    type: 'text',
-                                                    key: 'test1',
-                                                    label: 'Test Field 1'
-                                                }
-                                            ]
-                                        }
-                                    ]
-                                },
-                                {
-                                    type: 'row',
-                                    key: 'row2',
-                                    columnFields: [
-                                        {
-                                            type: 'column',
-                                            key: 'col2_1',
-                                            fields: [
-                                                {
-                                                    type: 'text',
-                                                    key: 'test2',
-                                                    label: 'Test Field 2'
-                                                }
-                                            ]
-                                        },
-                                        {
-                                            type: 'column',
-                                            key: 'col2_2',
-                                            fields: [
-                                                {
-                                                    type: 'text',
-                                                    key: 'test3',
-                                                    label: 'Test Field 3'
-                                                }
-                                            ]
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
-            });
-            // Check fields
-            expect(screen.getByLabelText('Test Field 1')).toBeInTheDocument();
-            expect(screen.getByLabelText('Test Field 2')).toBeInTheDocument();
-            expect(screen.getByLabelText('Test Field 3')).toBeInTheDocument();
-            // Check row and column count
-            expect(document.querySelectorAll('.akinon-col')).toHaveLength(11);
-            expect(document.querySelectorAll('.akinon-row')).toHaveLength(7);
-            // Check props
-            expect(document.querySelector('.akinon-row-middle')).toBeInTheDocument();
-            expect(document.querySelector('.akinon-col-24')).toBeInTheDocument();
-        });
-        it('handles form with custom field and onChange', async () => {
-            const CustomComponent = ({ field, control }) => {
-                const { field: controllerField } = useController({
-                    name: field.key,
-                    control
-                });
-                return React.createElement("input", Object.assign({ "data-testid": "custom-input" }, controllerField));
-            };
-            const fields = [
-                {
-                    key: 'customField',
-                    label: 'Custom Field',
-                    type: 'custom',
-                    render: ({ field, formValues, control }) => (React.createElement(CustomComponent, { field: field, formValues: formValues, control: control }))
-                }
-            ];
-            const onValueChangeMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit, onValueChange: onValueChangeMock }));
-            });
-            const customInput = screen.getByTestId('custom-input');
-            expect(customInput).toBeInTheDocument();
-            await act(async () => {
-                await userEvent.type(customInput, 'test value');
-            });
-            await waitFor(() => {
-                expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({
-                    customField: 'test value'
-                }));
-            });
-        });
-        it('resets form when reset button is clicked', async () => {
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onReset: mockOnReset, showResetButton: true }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-                fireEvent.change(screen.getByLabelText('Age'), {
-                    target: { value: '30' }
-                });
-                fireEvent.click(screen.getByText('RESET'));
-            });
-            await waitFor(() => {
-                expect(mockOnReset).toHaveBeenCalled();
-                expect(screen.getByLabelText('Name')).toHaveValue('');
-                expect(screen.getByLabelText('Age')).toHaveValue('');
-            });
-        });
-        it('exposes reset method through ref', async () => {
-            const ref = React.createRef();
-            const onResetMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { ref: ref, fields: defaultFields, onSubmit: mockOnSubmit, onReset: onResetMock }));
-            });
-            // Fill in some values
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-            });
-            // Call reset through ref
-            await act(async () => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset();
-            });
-            // Check if form is reset and onReset is called
-            expect(screen.getByLabelText('Name')).toHaveValue('');
-            expect(onResetMock).toHaveBeenCalled();
-            // Test partial reset
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-                fireEvent.change(screen.getByLabelText('Age'), {
-                    target: { value: '30' }
-                });
-            });
-            await act(async () => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset({ name: 'Jane Doe' });
-            });
-            expect(screen.getByLabelText('Name')).toHaveValue('Jane Doe');
-            expect(screen.getByLabelText('Age')).toHaveValue('30');
-        });
-        it('calls onValueChange when form values change in uncontrolled mode', async () => {
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-            });
-            await waitFor(() => {
-                expect(mockOnValueChange).toHaveBeenCalledWith(expect.objectContaining({
-                    name: 'John Doe'
-                }));
-            });
-        });
-        it('applies throttling in uncontrolled mode', async () => {
-            vi.useFakeTimers();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-            });
-            expect(mockOnValueChange).not.toHaveBeenCalled();
-            await act(async () => {
-                vi.advanceTimersByTime(THROTTLE_DELAY);
-            });
-            expect(mockOnValueChange).toHaveBeenCalledWith(expect.objectContaining({ name: 'John Doe' }));
-            vi.useRealTimers();
-        });
-        it('renders different field types correctly', async () => {
-            const fields = [
-                {
-                    key: 'name',
-                    label: 'Name',
-                    type: 'text',
-                    help: 'Help text',
-                    labelDescription: 'Label description text',
-                    placeholder: 'Enter your name'
-                },
-                { key: 'age', label: 'Age', type: 'number' },
-                {
-                    key: 'gender',
-                    label: 'Gender',
-                    type: 'select',
-                    options: [
-                        { value: 'male', label: 'Male' },
-                        { value: 'female', label: 'Female' }
-                    ]
-                },
-                { key: 'subscribe', label: 'Subscribe', type: 'checkbox' },
-                { key: 'birthdate', label: 'Birth Date', type: 'date' },
-                { key: 'bio', label: 'Biography', type: 'textarea' }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            });
-            expect(screen.getByPlaceholderText('Enter your name')).toHaveAttribute('type', 'text');
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-            expect(screen.getByLabelText('Age')).toHaveClass('akinon-input-number-input');
-            expect(screen.getByLabelText('Gender')).toBeInTheDocument();
-            expect(screen.getByLabelText('Subscribe')).toHaveAttribute('type', 'checkbox');
-            expect(screen.getByLabelText('Birth Date')).toBeInTheDocument();
-            expect(screen.getByLabelText('Biography')).toBeInTheDocument();
-        });
-        it('renders field array correctly', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                field()
-                    .key('addresses')
-                    .label('Addresses')
-                    .type('fieldArray')
-                    .defaultExpanded(true)
-                    .fields([
-                    field()
-                        .key('street')
-                        .label('Street')
-                        .type('text')
-                        .help('Help text')
-                        .labelDescription('Label description text')
-                        .build(),
-                    field().key('city').label('City').type('text').build()
-                ])
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            });
-            expect(screen.getByText('Add Addresses')).toBeInTheDocument();
-            await user.click(screen.getByTestId('addresses-add-button'));
-            await expandCollapsable();
-            expect(screen.getAllByText('Street')).toHaveLength(1);
-            expect(screen.getAllByText('City')).toHaveLength(1);
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-        });
-        it('handles form with field array and nested validation', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                {
-                    key: 'items',
-                    label: 'Items',
-                    type: 'fieldArray',
-                    fields: [
-                        {
-                            key: 'name',
-                            label: 'Item Name',
-                            type: 'text',
-                            validation: akival.string().required('Item name is required')
-                        },
-                        {
-                            key: 'quantity',
-                            label: 'Quantity',
-                            type: 'number',
-                            validation: akival.number().min(1, 'Quantity must be at least 1')
-                        }
-                    ]
-                }
-            ];
-            const onSubmitMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            });
-            // Add an item
-            await user.click(screen.getByTestId('items-add-button'));
-            // Try to submit without filling required fields
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('An error occurred in here')).toBeInTheDocument();
-                expect(onSubmitMock).not.toHaveBeenCalled();
-            });
-            await expandCollapsable();
-            // Fill in valid data
-            await act(async () => {
-                const nameInput = screen.getByRole('textbox', { name: /item name/i });
-                const quantityInput = screen.getByRole('spinbutton', {
-                    name: /quantity/i
-                });
-                await userEvent.type(nameInput, 'Test Item');
-                await userEvent.type(quantityInput, '2');
-            });
-            // Submit the form
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
-                    items: [{ name: 'Test Item', quantity: 2 }]
-                }), expect.anything());
-            });
-        });
-        it('handles field array operations correctly', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                {
-                    key: 'items',
-                    label: 'Items',
-                    type: 'fieldArray',
-                    fields: [
-                        { key: 'name', label: 'Item Name', type: 'text' },
-                        { key: 'quantity', label: 'Quantity', type: 'number' }
-                    ]
-                }
-            ];
-            const TestComponent = () => {
-                const [formValues, setFormValues] = React.useState({});
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit, onValueChange: values => {
-                            setFormValues(values);
-                        } }),
-                    React.createElement("div", { "data-testid": "form-values" }, JSON.stringify(formValues))));
-            };
-            await act(async () => {
-                render(React.createElement(TestComponent, null));
-            });
-            // Add an item
-            await user.click(screen.getByTestId('items-add-button'));
-            await expandCollapsable();
-            // Fill in the fields
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Item Name'), {
-                    target: { value: 'Test Item' }
-                });
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Quantity'), {
-                    target: { value: '5' }
-                });
-            });
-            // Wait for the form values to update
-            await waitFor(() => {
-                const formValuesElement = screen.getByTestId('form-values');
-                const formValues = JSON.parse(formValuesElement.textContent || '{}');
-                expect(formValues).toEqual(expect.objectContaining({
-                    items: [{ name: 'Test Item', quantity: 5 }]
-                }));
-            });
-            // Submit the form
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            // Check the submitted values
-            await waitFor(() => {
-                expect(mockOnSubmit).toHaveBeenCalledWith(expect.objectContaining({
-                    items: [{ name: 'Test Item', quantity: 5 }]
-                }), expect.anything());
-            });
-        });
-        it('applies layout options correctly', async () => {
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, layout: "horizontal", layoutOptions: { labelCol: { span: 8 }, wrapperCol: { span: 16 } } }));
-            });
-            const form = screen.getByTestId('akiform-builder');
-            expect(form).toHaveClass('akinon-form-horizontal');
-        });
-        it('conditionally renders and disables fields', async () => {
-            const fields = [
-                { key: 'showField', label: 'Show Field', type: 'checkbox' },
-                {
-                    key: 'conditionalField',
-                    label: 'Conditional Field',
-                    type: 'text',
-                    config: { visible: values => values.showField }
-                },
-                { key: 'enableField', label: 'Enable Field', type: 'checkbox' },
-                {
-                    key: 'disableableField',
-                    label: 'Disableable Field',
-                    type: 'text',
-                    config: { disabled: values => !values.enableField }
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            });
-            expect(screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
-            await act(async () => {
-                fireEvent.click(screen.getByLabelText('Show Field'));
-            });
-            expect(screen.getByLabelText('Conditional Field')).toBeInTheDocument();
-            expect(screen.getByLabelText('Disableable Field')).toBeDisabled();
-            await act(async () => {
-                fireEvent.click(screen.getByLabelText('Enable Field'));
-            });
-            expect(screen.getByLabelText('Disableable Field')).not.toBeDisabled();
-        });
-        it('applies custom validation', async () => {
-            const fields = [
-                {
-                    key: 'email',
-                    label: 'Email',
-                    type: 'text',
-                    validation: akival.string().email('Invalid email format')
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByRole('textbox', { name: /email/i }), {
-                    target: { value: 'invalid-email' }
-                });
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Invalid email format')).toBeInTheDocument();
-            });
-        });
-        it('resets form using ref', async () => {
-            const ref = React.createRef();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { ref: ref, fields: defaultFields, onSubmit: mockOnSubmit }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-                fireEvent.change(screen.getByLabelText('Age'), {
-                    target: { value: '30' }
-                });
-            });
-            await act(async () => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset();
-            });
-            expect(screen.getByLabelText('Name')).toHaveValue('');
-            expect(screen.getByLabelText('Age')).toHaveValue('');
-        });
-        it('displays error states', async () => {
-            const fields = [
-                {
-                    key: 'name',
-                    label: 'Name',
-                    type: 'text',
-                    validation: akival.string().required('Name is required')
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            });
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Name is required')).toBeInTheDocument();
-            });
-        });
-        it('handles form submission', async () => {
-            const onSubmit = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: onSubmit }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-                fireEvent.change(screen.getByLabelText('Age'), {
-                    target: { value: '30' }
-                });
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
-                    name: 'John Doe',
-                    age: 30
-                }), expect.anything());
-            });
-        });
-        it('handles form submission with errors', async () => {
-            const fields = [
-                {
-                    key: 'name',
-                    label: 'Name',
-                    type: 'text',
-                    validation: akival.string().required('Name is required')
-                }
-            ];
-            const onSubmit = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmit }));
-            });
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Name is required')).toBeInTheDocument();
-                expect(onSubmit).not.toHaveBeenCalled();
-            });
-        });
-        it('handles form with initial values', async () => {
-            const initialValues = { name: 'John Doe', age: 30 };
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, initialValues: initialValues }));
-            });
-            await waitFor(() => {
-                expect(screen.getByLabelText('Name')).toHaveValue('John Doe');
-                expect(screen.getByLabelText('Age')).toHaveValue('30');
-            });
-        });
-        it('handles form with custom layout', async () => {
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, layout: "vertical" }));
-            });
-            const form = screen.getByTestId('akiform-builder');
-            expect(form).toHaveClass('akinon-form-vertical');
-        });
-        it('renders custom field correctly', async () => {
-            const CustomComponent = ({ field }) => (React.createElement("div", { "data-testid": "custom-field" }, field.label));
-            const fields = [
-                {
-                    key: 'customField',
-                    label: 'Custom Field',
-                    type: 'custom',
-                    help: 'Help text',
-                    labelDescription: 'Label description text',
-                    render: ({ field }) => (React.createElement(CustomComponent, { field: field }))
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-        });
-        it('cleans up throttle timeout on unmount', async () => {
-            vi.useFakeTimers();
-            const { unmount } = render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'John Doe' }
-                });
-            });
-            unmount();
-            // Advance timers and ensure onValueChange is not called
-            await act(async () => {
-                vi.advanceTimersByTime(THROTTLE_DELAY + 100);
-            });
-            expect(mockOnValueChange).not.toHaveBeenCalled();
-            vi.useRealTimers();
-        });
-        it('handles custom field with undefined render prop', async () => {
-            const fields = [
-                {
-                    key: 'customField',
-                    label: 'Custom Field',
-                    type: 'custom',
-                    render: undefined
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            // The custom field should not be rendered, but the form should not crash
-            expect(screen.queryByLabelText('Custom Field')).not.toBeInTheDocument();
-            // The form should still be rendered
-            expect(screen.getByTestId('akiform-builder')).toBeInTheDocument();
-        });
-        it('renders custom submit and reset button props', async () => {
-            const submitButtonProps = {
-                className: 'custom-submit-btn',
-                children: 'submit button'
-            };
-            const resetButtonProps = {
-                className: 'custom-reset-btn',
-                children: 'reset button'
-            };
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, showResetButton: true, onReset: mockOnReset, submitButtonProps: submitButtonProps, resetButtonProps: resetButtonProps }));
-            });
-            const submitButton = screen
-                .getByText(submitButtonProps.children)
-                .closest('button');
-            const resetButton = screen
-                .getByText(resetButtonProps.children)
-                .closest('button');
-            expect(submitButton).toBeInTheDocument();
-            expect(resetButton).toBeInTheDocument();
-            expect(submitButton).toHaveClass(submitButtonProps.className);
-            expect(resetButton).toHaveClass(resetButtonProps.className);
-            await userEvent.click(resetButton);
-            expect(mockOnReset).toHaveBeenCalled();
-            await userEvent.click(submitButton);
-            expect(mockOnSubmit).toHaveBeenCalled();
-        });
-    });
-    describe('AkiformBuilder in controlled mode', () => {
-        it('uses provided values in controlled mode', async () => {
-            const fields = [
-                { key: 'name', label: 'Name', type: 'text' },
-                { key: 'age', label: 'Age', type: 'number' }
-            ];
-            const controlledValues = { name: 'John Doe', age: 30 };
-            const onChangeMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: controlledValues, onValueChange: onChangeMock }));
-            });
-            expect(screen.getByLabelText('Name')).toHaveValue('John Doe');
-            expect(screen.getByLabelText('Age')).toHaveValue('30');
-        });
-        it('calls onValueChange when form values change in controlled mode', async () => {
-            const fields = [
-                { key: 'name', label: 'Name', type: 'text' }
-            ];
-            const onChangeMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: { name: '' }, onValueChange: onChangeMock }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Name'), {
-                    target: { value: 'Jane Doe' }
-                });
-            });
-            await waitFor(() => {
-                expect(onChangeMock).toHaveBeenCalledWith(expect.objectContaining({ name: 'Jane Doe' }));
-            });
-        });
-        it('calls onValueChange immediately in controlled mode', async () => {
-            const onValueChangeMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, controlled: true, values: { name: 'John Doe', age: 30 }, onValueChange: onValueChangeMock }));
-            });
-            expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({ name: 'John Doe', age: 30 }));
-        });
-        it('handles conditional rendering and disabling of fields', async () => {
-            const fields = [
-                { key: 'showField', label: 'Show Field', type: 'checkbox' },
-                {
-                    key: 'conditionalField',
-                    label: 'Conditional Field',
-                    type: 'text',
-                    config: { visible: values => values.showField }
-                },
-                { key: 'enableField', label: 'Enable Field', type: 'checkbox' },
-                {
-                    key: 'disableableField',
-                    label: 'Disableable Field',
-                    type: 'text',
-                    config: { disabled: values => !values.enableField }
-                }
-            ];
-            const onValueChangeMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: { showField: false, enableField: false }, onValueChange: onValueChangeMock }));
-            });
-            expect(screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
-            expect(screen.getByLabelText('Disableable Field')).toBeDisabled();
-            await act(async () => {
-                fireEvent.click(screen.getByLabelText('Show Field'));
-                fireEvent.click(screen.getByLabelText('Enable Field'));
-            });
-            expect(screen.getByLabelText('Conditional Field')).toBeInTheDocument();
-            expect(screen.getByLabelText('Disableable Field')).not.toBeDisabled();
-            expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({
-                showField: true,
-                enableField: true
-            }));
-        });
-    });
-    describe('FieldArrayComponent', () => {
-        it('renders field array with initial values', async () => {
-            const fields = [
-                {
-                    key: 'items',
-                    label: 'Items',
-                    type: 'fieldArray',
-                    fields: [
-                        { key: 'name', label: 'Item Name', type: 'text' },
-                        { key: 'quantity', label: 'Quantity', type: 'number' }
-                    ]
-                }
-            ];
-            const initialValues = {
-                items: [
-                    { name: 'Item 1', quantity: 1 },
-                    { name: 'Item 2', quantity: 2 }
-                ]
-            };
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), initialValues: initialValues }));
-            });
-            await expandCollapsable();
-            expect(screen.getAllByLabelText('Item Name')).toHaveLength(2);
-            expect(screen.getAllByLabelText('Quantity')).toHaveLength(2);
-        });
-        it('adds and removes field array items', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                {
-                    key: 'items',
-                    label: 'Items',
-                    type: 'fieldArray',
-                    fields: [{ key: 'name', label: 'Item Name', type: 'text' }]
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            // Add an item
-            await user.click(screen.getByTestId('items-add-button'));
-            await expandCollapsable();
-            expect(screen.getByLabelText('Item Name')).toBeInTheDocument();
-            // Add another item
-            await user.click(screen.getByLabelText('Add Items'));
-            await expandCollapsable();
-            expect(screen.getAllByLabelText('Item Name')).toHaveLength(2);
-            // Remove an item
-            await user.click(screen.getAllByLabelText('Remove Items')[0]);
-            await expandCollapsable();
-            expect(screen.getAllByLabelText('Item Name')).toHaveLength(1);
-        });
-        it('handles field array with conditional fields', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                {
-                    key: 'items',
-                    label: 'Items',
-                    type: 'fieldArray',
-                    fields: [
-                        { key: 'name', label: 'Item Name', type: 'text' },
-                        {
-                            key: 'description',
-                            label: 'Description',
-                            type: 'text',
-                            config: {
-                                visible: values => values.name && values.name.length > 5
-                            }
-                        }
-                    ]
-                }
-            ];
-            const { rerender } = render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            await expandCollapsable();
-            // Add an item
-            await user.click(screen.getByLabelText('Add Items'));
-            await expandCollapsable();
-            // Description should not be visible initially
-            expect(screen.queryByLabelText('Description')).not.toBeInTheDocument();
-            // Enter a name longer than 5 characters
-            await act(async () => {
-                fireEvent.change(screen.getByLabelText('Item Name'), {
-                    target: { value: 'Long Name' }
-                });
-            });
-            // Force a re-render to trigger the conditional rendering
-            rerender(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            // Description should now be visible
-            await waitFor(() => {
-                expect(screen.getByLabelText('Description')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('Edge cases and uncovered scenarios', () => {
-        it('handles field array with no fields', async () => {
-            const fields = [
-                {
-                    key: 'emptyFieldArray',
-                    label: 'Empty Field Array',
-                    type: 'fieldArray',
-                    fields: []
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            // The field array should be rendered with an "Add" button
-            expect(screen.getByTestId('emptyFieldArray-add-button')).toBeInTheDocument();
-        });
-        it('handles form submission with field array', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                {
-                    key: 'items',
-                    label: 'Items',
-                    type: 'fieldArray',
-                    fields: [
-                        { key: 'name', label: 'Item Name', type: 'text' },
-                        { key: 'quantity', label: 'Quantity', type: 'number' }
-                    ]
-                }
-            ];
-            const onSubmitMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            });
-            // Add two items
-            await user.click(screen.getByTestId('items-add-button'));
-            await user.click(screen.getByLabelText('Add Items'));
-            await expandCollapsable();
-            // Fill in the fields
-            const itemNames = screen.getAllByLabelText('Item Name');
-            const quantities = screen.getAllByLabelText('Quantity');
-            await act(async () => {
-                fireEvent.change(itemNames[0], { target: { value: 'Item 1' } });
-                fireEvent.change(quantities[0], { target: { value: '5' } });
-                fireEvent.change(itemNames[1], { target: { value: 'Item 2' } });
-                fireEvent.change(quantities[1], { target: { value: '10' } });
-            });
-            // Submit the form
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
-                    items: [
-                        { name: 'Item 1', quantity: 5 },
-                        { name: 'Item 2', quantity: 10 }
-                    ]
-                }), expect.anything());
-            });
-        });
-        it('handles form with all field types', async () => {
-            const fields = [
-                { key: 'text', label: 'Text', type: 'text' },
-                { key: 'number', label: 'Number', type: 'number' },
-                {
-                    key: 'select',
-                    label: 'Select',
-                    type: 'select',
-                    options: [{ value: 'option1', label: 'Option 1' }]
-                },
-                { key: 'checkbox', label: 'Checkbox', type: 'checkbox' },
-                { key: 'date', label: 'Date', type: 'date' },
-                { key: 'textarea', label: 'Textarea', type: 'textarea' },
-                {
-                    key: 'fieldArray',
-                    label: 'Field Array',
-                    type: 'fieldArray',
-                    fields: [{ key: 'subfield', label: 'Subfield', type: 'text' }]
-                },
-                {
-                    key: 'custom',
-                    label: 'Custom',
-                    type: 'custom',
-                    render: () => React.createElement("div", { "data-testid": "custom-field" }, "Custom Field")
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByLabelText('Text')).toBeInTheDocument();
-            expect(screen.getByLabelText('Number')).toBeInTheDocument();
-            expect(screen.getByLabelText('Select')).toBeInTheDocument();
-            expect(screen.getByLabelText('Checkbox')).toBeInTheDocument();
-            expect(screen.getByLabelText('Date')).toBeInTheDocument();
-            expect(screen.getByLabelText('Textarea')).toBeInTheDocument();
-            expect(screen.getByTestId('fieldArray-add-button')).toBeInTheDocument(); // For field array
-            expect(screen.getByTestId('custom-field')).toBeInTheDocument();
-        });
-        it('handles form with inline layout', async () => {
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: vi.fn(), layout: "inline" }));
-            });
-            const form = screen.getByTestId('akiform-builder');
-            expect(form).toHaveClass('akinon-form-inline');
-        });
-        it('handles form reset with custom reset handler', async () => {
-            const onResetMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: vi.fn(), onReset: onResetMock, showResetButton: true }));
-            });
-            await act(async () => {
-                fireEvent.click(screen.getByText('RESET'));
-            });
-            expect(onResetMock).toHaveBeenCalled();
-        });
-    });
-    describe('AkiformBuilder with FieldBuilder', () => {
-        it('renders form fields created with FieldBuilder', async () => {
-            const fields = [
-                field()
-                    .key('name')
-                    .label('Name')
-                    .type('text')
-                    .placeholder('Enter your name')
-                    .help('Help text')
-                    .labelDescription('Label description text')
-                    .build(),
-                field()
-                    .key('age')
-                    .label('Age')
-                    .type('number')
-                    .placeholder('Enter your age')
-                    .build(),
-                field()
-                    .key('country')
-                    .label('Country')
-                    .type('select')
-                    .options([
-                    { value: 'us', label: 'United States' },
-                    { value: 'ca', label: 'Canada' }
-                ])
-                    .build(),
-                field()
-                    .key('subscribe')
-                    .label('Subscribe to newsletter')
-                    .type('checkbox')
-                    .build(),
-                field().key('birthdate').label('Birth Date').type('date').build(),
-                field().key('description').label('Description').type('textarea').build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByText('Name')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByLabelText('Age')).toBeInTheDocument();
-            expect(screen.getByLabelText('Country')).toBeInTheDocument();
-            expect(screen.getByLabelText('Subscribe to newsletter')).toBeInTheDocument();
-            expect(screen.getByLabelText('Birth Date')).toBeInTheDocument();
-            expect(screen.getByLabelText('Description')).toBeInTheDocument();
-        });
-        it('handles form submission with fields created by FieldBuilder', async () => {
-            const fields = [
-                field()
-                    .key('name')
-                    .label('Name')
-                    .type('text')
-                    .validation(akival.string().required('Name is required'))
-                    .build(),
-                field()
-                    .key('age')
-                    .label('Age')
-                    .type('number')
-                    .validation(akival.number().min(18, 'Must be at least 18'))
-                    .build()
-            ];
-            const onSubmitMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            });
-            await act(async () => {
-                fireEvent.change(screen.getByRole('textbox', { name: /name/i }), {
-                    target: { value: 'John Doe' }
-                });
-                fireEvent.change(screen.getByRole('spinbutton', { name: /age/i }), {
-                    target: { value: '25' }
-                });
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
-                    name: 'John Doe',
-                    age: 25
-                }), expect.anything());
-            });
-        });
-        it('handles form with custom field created by FieldBuilder', async () => {
-            const CustomComponent = ({ field }) => (React.createElement("div", { "data-testid": "custom-field" }, field.label));
-            const fields = [
-                field()
-                    .key('customField')
-                    .label('Custom Field')
-                    .type('custom')
-                    .help('Help text')
-                    .labelDescription('Label description text')
-                    .render(({ field }) => React.createElement(CustomComponent, { field: field }))
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-        });
-        it('handles form with field array created by FieldBuilder', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                field()
-                    .key('addresses')
-                    .label('Addresses')
-                    .type('fieldArray')
-                    .fields([
-                    field()
-                        .key('street')
-                        .label('Street')
-                        .type('text')
-                        .help('Help text')
-                        .labelDescription('Label description text')
-                        .placeholder('Enter your street')
-                        .build(),
-                    field().key('city').label('City').type('text').build()
-                ])
-                    .build()
-            ];
-            const onSubmitMock = vi.fn();
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            });
-            // Add an address
-            await user.click(screen.getByTestId('addresses-add-button'));
-            await expandCollapsable();
-            //Check rendered fields
-            expect(screen.getByText('Street')).toBeInTheDocument();
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-            expect(screen.getByLabelText('City')).toBeInTheDocument();
-            // Fill in the fields
-            await act(async () => {
-                fireEvent.change(screen.getByPlaceholderText('Enter your street'), {
-                    target: { value: '123 Main St' }
-                });
-                fireEvent.change(screen.getByLabelText('City'), {
-                    target: { value: 'Anytown' }
-                });
-            });
-            // Submit the form
-            await act(async () => {
-                fireEvent.submit(screen.getByTestId('akiform-builder'));
-            });
-            await waitFor(() => {
-                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
-                    addresses: [{ street: '123 Main St', city: 'Anytown' }]
-                }), expect.anything());
-            });
-        });
-        it('handles conditional rendering with FieldBuilder', async () => {
-            const fields = [
-                field().key('showField').label('Show Field').type('checkbox').build(),
-                field()
-                    .key('conditionalField')
-                    .label('Conditional Field')
-                    .type('text')
-                    .config({ visible: (values) => values.showField })
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
-            await act(async () => {
-                fireEvent.click(screen.getByLabelText('Show Field'));
-            });
-            expect(screen.getByLabelText('Conditional Field')).toBeInTheDocument();
-        });
-        it('handles disabled fields with FieldBuilder', async () => {
-            const fields = [
-                field()
-                    .key('disabledField')
-                    .label('Disabled Field')
-                    .type('text')
-                    .config({ disabled: true })
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByLabelText('Disabled Field')).toBeDisabled();
-        });
-    });
-    describe('Accessibility features', () => {
-        it('renders form with proper ARIA attributes', async () => {
-            const fields = [
-                {
-                    key: 'name',
-                    label: 'Name',
-                    type: 'text',
-                    validation: akival.string().required()
-                },
-                { key: 'age', label: 'Age', type: 'number' }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            const form = screen.getByRole('form');
-            expect(form).toHaveAttribute('aria-label', 'Form');
-            const nameInput = screen.getByRole('textbox', { name: /name/i });
-            expect(nameInput).toHaveAttribute('aria-required', 'true');
-            expect(nameInput).toHaveAttribute('aria-invalid', 'false');
-            const ageInput = screen.getByRole('spinbutton', { name: /age/i });
-            expect(ageInput).toHaveAttribute('aria-required', 'false');
-            expect(ageInput).toHaveAttribute('aria-invalid', 'false');
-        });
-        it('updates aria-invalid attribute when form is submitted with errors', async () => {
-            const fields = [
-                {
-                    key: 'name',
-                    label: 'Name',
-                    type: 'text',
-                    validation: akival.string().required('Name is required')
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            const nameInput = screen.getByRole('textbox', { name: /name/i });
-            expect(nameInput).toHaveAttribute('aria-invalid', 'false');
-            await act(async () => {
-                fireEvent.submit(screen.getByRole('form'));
-            });
-            await waitFor(() => {
-                expect(nameInput).toHaveAttribute('aria-invalid', 'true');
-                expect(screen.getByText('Name is required')).toBeInTheDocument();
-            });
-        });
-        it('renders field array with proper ARIA attributes', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                {
-                    key: 'addresses',
-                    label: 'Addresses',
-                    type: 'fieldArray',
-                    fields: [
-                        { key: 'street', label: 'Street', type: 'text' },
-                        { key: 'city', label: 'City', type: 'text' }
-                    ]
-                }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            await user.click(screen.getByTestId('addresses-add-button'));
-            await expandCollapsable();
-            const fieldArrayGroup = screen.getByRole('group', { name: 'Addresses' });
-            expect(fieldArrayGroup).toBeInTheDocument();
-            const addButton = screen.getByLabelText('Add Addresses');
-            expect(addButton).toBeInTheDocument();
-            await user.click(addButton);
-            await expandCollapsable();
-            const removeButton = screen.getAllByLabelText('Remove Addresses')[1];
-            expect(removeButton).toBeInTheDocument();
-        });
-        it('supports keyboard navigation', async () => {
-            const user = userEvent.setup();
-            const fields = [
-                { key: 'name', label: 'Name', type: 'text' },
-                { key: 'age', label: 'Age', type: 'number' }
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), showResetButton: true }));
-            });
-            const nameInput = screen.getByLabelText('Name');
-            const ageInput = screen.getByLabelText('Age');
-            const submitButton = screen.getByRole('button', { name: 'SUBMIT' });
-            const resetButton = screen.getByRole('button', { name: 'RESET' });
-            await user.tab();
-            expect(document.activeElement).toBe(nameInput);
-            await user.tab();
-            expect(document.activeElement).toBe(ageInput);
-            await user.tab();
-            expect(document.activeElement).toBe(submitButton);
-            await user.tab();
-            expect(document.activeElement).toBe(resetButton);
-        });
-    });
-    describe('AkiformBuilder with sections', () => {
-        it('renders form with sections', async () => {
-            const fields = [
-                field()
-                    .key('personalInfo')
-                    .label('Personal Information')
-                    .type('section')
-                    .fields([
-                    field()
-                        .key('name')
-                        .label('Name')
-                        .type('text')
-                        .help('Help text')
-                        .labelDescription('Label description text')
-                        .build(),
-                    field().key('age').label('Age').type('number').build()
-                ])
-                    .collapsible(true)
-                    .defaultExpanded(true)
-                    .build(),
-                field()
-                    .key('contactInfo')
-                    .label('Contact Information')
-                    .type('section')
-                    .collapsible(true)
-                    .defaultExpanded(false)
-                    .fields([
-                    field().key('email').label('Email').type('text').build(),
-                    field().key('phone').label('Phone').type('text').build()
-                ])
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByText('Personal Information')).toBeInTheDocument();
-            expect(screen.getByText('Contact Information')).toBeInTheDocument();
-            expect(screen.getByText('Name')).toBeInTheDocument();
-            expect(screen.getByText('Help text')).toBeInTheDocument();
-            expect(screen.getByText('Label description text')).toBeInTheDocument();
-            expect(screen.getByLabelText('Age')).toBeInTheDocument();
-            // Check if the first section is expanded by default
-            expect(screen.getByText('Name').closest('label')).toBeVisible();
-            // Check if the second section is collapsed by default
-            expect(screen.queryByLabelText('Email')).not.toBeInTheDocument();
-            // Expand the second section
-            const contactInfoSection = screen.getByText('Contact Information');
-            await userEvent.click(contactInfoSection);
-            // Wait for the section to expand
-            await waitFor(() => {
-                expect(screen.getByLabelText('Email')).toBeInTheDocument();
-            });
-            // Check if the Email field is now visible
-            // const emailInput = screen.getByLabelText('Email');
-            // expect(emailInput).toBeVisible();
-            // Additional debug information
-            // if (!emailInput.isConnected) {
-            //   console.error('Email input is not connected to the DOM');
-            // }
-            // console.log(
-            //   'Email input visibility:',
-            //   window.getComputedStyle(emailInput).display
-            // );
-        });
-        it('handles form submission with sections', async () => {
-            const onSubmitMock = vi.fn();
-            const fields = [
-                field()
-                    .key('personalInfo')
-                    .label('Personal Information')
-                    .type('section')
-                    .fields([
-                    field().key('name').label('Name').type('text').build(),
-                    field().key('age').label('Age').type('number').build()
-                ])
-                    .build(),
-                field()
-                    .key('contactInfo')
-                    .label('Contact Information')
-                    .type('section')
-                    .fields([field().key('email').label('Email').type('text').build()])
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            });
-            // Expand both sections
-            await userEvent.click(screen.getByText('Personal Information'));
-            await userEvent.click(screen.getByText('Contact Information'));
-            // Fill in the form
-            await userEvent.type(screen.getByLabelText('Name'), 'John Doe', {
-                delay: 1
-            });
-            await userEvent.type(screen.getByLabelText('Age'), '30', { delay: 1 });
-            await userEvent.type(screen.getByLabelText('Email'), 'john@example.com', {
-                delay: 1
-            });
-            // Wait for submit button to become interactable
-            const submitButton = screen.getByRole('button', { name: /submit/i });
-            await waitFor(() => {
-                expect(submitButton).toBeEnabled();
-            });
-            // Submit the form
-            await userEvent.click(submitButton);
-            // Validate submission
-            expect(onSubmitMock).toHaveBeenCalledWith({
-                name: 'John Doe',
-                age: 30,
-                email: 'john@example.com'
-            }, expect.anything());
-        });
-        it('handles conditional rendering within sections', async () => {
-            const fields = [
-                field()
-                    .key('personalInfo')
-                    .label('Personal Information')
-                    .type('section')
-                    .fields([
-                    field().key('name').label('Name').type('text').build(),
-                    field().key('showAge').label('Show Age').type('checkbox').build(),
-                    field()
-                        .key('age')
-                        .label('Age')
-                        .type('number')
-                        .config({ visible: (values) => values.showAge })
-                        .build()
-                ])
-                    .defaultExpanded(true)
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            expect(screen.getByLabelText('Name')).toBeInTheDocument();
-            expect(screen.getByLabelText('Show Age')).toBeInTheDocument();
-            expect(screen.queryByLabelText('Age')).not.toBeInTheDocument();
-            await userEvent.click(screen.getByLabelText('Show Age'));
-            expect(await screen.findByLabelText('Age')).toBeInTheDocument();
-        });
-    });
-    describe('AkiformBuilder with tooltip', () => {
-        it('renders form field with tooltip as TooltipProps', async () => {
-            const fields = [
-                field()
-                    .key('name')
-                    .label('Name')
-                    .type('text')
-                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            const tooltipTrigger = screen.getByLabelText('Name');
-            expect(tooltipTrigger).toBeInTheDocument();
-            // Simulate hovering over the field to show the tooltip
-            await act(async () => {
-                fireEvent.mouseEnter(tooltipTrigger);
-            });
-            // Wait for the tooltip to appear
-            await waitFor(() => {
-                expect(screen.getByText('Enter your full name')).toBeInTheDocument();
-            });
-        });
-        it('renders form field with tooltip as string', async () => {
-            const fields = [
-                field()
-                    .key('email')
-                    .label('Email')
-                    .type('text')
-                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
-                    .build()
-            ];
-            await act(async () => {
-                render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            });
-            const tooltipTrigger = screen.getByLabelText('Email');
-            expect(tooltipTrigger).toBeInTheDocument();
-            // Simulate hovering over the field to show the tooltip
-            await act(async () => {
-                fireEvent.mouseEnter(tooltipTrigger);
-            });
-            // Wait for the tooltip to appear
-            await waitFor(() => {
-                expect(screen.getByText('Enter your full name')).toBeInTheDocument();
-            });
-        });
-    });
-});