@akinon/akiform-builder 1.0.0 → 1.0.2

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

@@ -19,6 +19,13 @@ describe('AkiformBuilder', () => {
     const mockOnSubmit = vi.fn();
     const mockOnReset = vi.fn();
     const mockOnValueChange = vi.fn();
+    const expandCollapsable = () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const expandIcons = (yield screen.findAllByRole('button')).filter(el => el.className.includes('akinon-collapse-expand-icon'));
+        for (const expandIcon of expandIcons) {
+            yield user.click(expandIcon);
+        }
+    });
     const defaultFields = [
         {
             key: 'name',
@@ -30,7 +37,8 @@ describe('AkiformBuilder', () => {
             key: 'age',
             label: 'Age',
             type: 'number',
-            placeholder: 'Enter your age'
+            placeholder: 'Enter your age',
+            help: 'Description text 2'
         }
     ];
     beforeEach(() => {
@@ -38,13 +46,100 @@ describe('AkiformBuilder', () => {
     });
     describe('AkiformBuilder in uncontrolled mode', () => {
         it('renders form fields correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const newDefaultFields = defaultFields.map((field, key) => (Object.assign(Object.assign({}, field), { help: `Description text ${key}`, labelDescription: `Label description text ${key}` })));
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit }));
+                render(React.createElement(AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
             }));
-            expect(screen.getByLabelText('Name')).toBeInTheDocument();
-            expect(screen.getByLabelText('Age')).toBeInTheDocument();
-            expect(screen.getByPlaceholderText('Enter your name')).toBeInTheDocument();
-            expect(screen.getByPlaceholderText('Enter your age')).toBeInTheDocument();
+            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', () => __awaiter(void 0, void 0, void 0, function* () {
+            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'
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ];
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                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', () => __awaiter(void 0, void 0, void 0, function* () {
             const CustomComponent = ({ field, control }) => {
@@ -166,7 +261,14 @@ describe('AkiformBuilder', () => {
         }));
         it('renders different field types correctly', () => __awaiter(void 0, void 0, void 0, function* () {
             const fields = [
-                { key: 'name', label: 'Name', type: 'text' },
+                {
+                    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',
@@ -184,7 +286,9 @@ describe('AkiformBuilder', () => {
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
             }));
-            expect(screen.getByLabelText('Name')).toHaveAttribute('type', 'text');
+            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');
@@ -192,29 +296,38 @@ describe('AkiformBuilder', () => {
             expect(screen.getByLabelText('Biography')).toBeInTheDocument();
         }));
         it('renders field array correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            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' }
-                    ]
-                }
+                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()
             ];
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
             }));
-            expect(screen.getByText('Add')).toBeInTheDocument();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
-            expect(screen.getByLabelText('Street')).toBeInTheDocument();
-            expect(screen.getByLabelText('City')).toBeInTheDocument();
-            expect(screen.getByText('Remove')).toBeInTheDocument();
+            expect(screen.getByText('Add Addresses')).toBeInTheDocument();
+            yield user.click(screen.getByTestId('addresses-add-button'));
+            yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -241,25 +354,24 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             // Add an item
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByTestId('items-add-button'));
             // Try to submit without filling required fields
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
             }));
             yield waitFor(() => {
-                expect(screen.getByText('Item name is required')).toBeInTheDocument();
+                expect(screen.getByText('An error occurred in here')).toBeInTheDocument();
                 expect(onSubmitMock).not.toHaveBeenCalled();
             });
+            yield expandCollapsable();
             // Fill in valid data
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.change(screen.getByLabelText('Item Name'), {
-                    target: { value: 'Test Item' }
-                });
-                fireEvent.change(screen.getByLabelText('Quantity'), {
-                    target: { value: '2' }
+                const nameInput = screen.getByRole('textbox', { name: /item name/i });
+                const quantityInput = screen.getByRole('spinbutton', {
+                    name: /quantity/i
                 });
+                yield userEvent.type(nameInput, 'Test Item');
+                yield userEvent.type(quantityInput, '2');
             }));
             // Submit the form
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -272,6 +384,7 @@ describe('AkiformBuilder', () => {
             });
         }));
         it('handles field array operations correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -295,9 +408,8 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(TestComponent, null));
             }));
             // Add an item
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByTestId('items-add-button'));
+            yield expandCollapsable();
             // Fill in the fields
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 fireEvent.change(screen.getByLabelText('Item Name'), {
@@ -379,7 +491,7 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
             }));
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.change(screen.getByLabelText('Email'), {
+                fireEvent.change(screen.getByRole('textbox', { name: /email/i }), {
                     target: { value: 'invalid-email' }
                 });
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
@@ -493,6 +605,8 @@ describe('AkiformBuilder', () => {
                     key: 'customField',
                     label: 'Custom Field',
                     type: 'custom',
+                    help: 'Help text',
+                    labelDescription: 'Label description text',
                     render: ({ field }) => (React.createElement(CustomComponent, { field: field }))
                 }
             ];
@@ -500,6 +614,8 @@ describe('AkiformBuilder', () => {
                 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', () => __awaiter(void 0, void 0, void 0, function* () {
             vi.useFakeTimers();
@@ -534,6 +650,33 @@ describe('AkiformBuilder', () => {
             // The form should still be rendered
             expect(screen.getByTestId('akiform-builder')).toBeInTheDocument();
         }));
+        it('renders custom submit and reset button props', () => __awaiter(void 0, void 0, void 0, function* () {
+            const submitButtonProps = {
+                className: 'custom-submit-btn',
+                children: 'submit button'
+            };
+            const resetButtonProps = {
+                className: 'custom-reset-btn',
+                children: 'reset button'
+            };
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                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);
+            yield userEvent.click(resetButton);
+            expect(mockOnReset).toHaveBeenCalled();
+            yield userEvent.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalled();
+        }));
     });
     describe('AkiformBuilder in controlled mode', () => {
         it('uses provided values in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -630,11 +773,12 @@ describe('AkiformBuilder', () => {
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), initialValues: initialValues }));
             }));
+            yield expandCollapsable();
             expect(screen.getAllByLabelText('Item Name')).toHaveLength(2);
             expect(screen.getAllByLabelText('Quantity')).toHaveLength(2);
-            expect(screen.getAllByText('Remove')).toHaveLength(2);
         }));
         it('adds and removes field array items', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -647,22 +791,20 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
             // Add an item
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByTestId('items-add-button'));
+            yield expandCollapsable();
             expect(screen.getByLabelText('Item Name')).toBeInTheDocument();
             // Add another item
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
             expect(screen.getAllByLabelText('Item Name')).toHaveLength(2);
             // Remove an item
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getAllByText('Remove')[0]);
-            }));
+            yield user.click(screen.getAllByLabelText('Remove Items')[0]);
+            yield expandCollapsable();
             expect(screen.getAllByLabelText('Item Name')).toHaveLength(1);
         }));
         it('handles field array with conditional fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -682,10 +824,10 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const { rerender } = render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            yield expandCollapsable();
             // Add an item
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
             // Description should not be visible initially
             expect(screen.queryByLabelText('Description')).not.toBeInTheDocument();
             // Enter a name longer than 5 characters
@@ -716,9 +858,10 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
             // The field array should be rendered with an "Add" button
-            expect(screen.getByText('Add')).toBeInTheDocument();
+            expect(screen.getByTestId('emptyFieldArray-add-button')).toBeInTheDocument();
         }));
         it('handles form submission with field array', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -735,10 +878,9 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             // Add two items
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByTestId('items-add-button'));
+            yield user.click(screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
             // Fill in the fields
             const itemNames = screen.getAllByLabelText('Item Name');
             const quantities = screen.getAllByLabelText('Quantity');
@@ -796,7 +938,7 @@ describe('AkiformBuilder', () => {
             expect(screen.getByLabelText('Checkbox')).toBeInTheDocument();
             expect(screen.getByLabelText('Date')).toBeInTheDocument();
             expect(screen.getByLabelText('Textarea')).toBeInTheDocument();
-            expect(screen.getByText('Add')).toBeInTheDocument(); // For field array
+            expect(screen.getByTestId('fieldArray-add-button')).toBeInTheDocument(); // For field array
             expect(screen.getByTestId('custom-field')).toBeInTheDocument();
         }));
         it('handles form with inline layout', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -825,6 +967,8 @@ describe('AkiformBuilder', () => {
                     .label('Name')
                     .type('text')
                     .placeholder('Enter your name')
+                    .help('Help text')
+                    .labelDescription('Label description text')
                     .build(),
                 field()
                     .key('age')
@@ -852,7 +996,9 @@ describe('AkiformBuilder', () => {
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
-            expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            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();
@@ -879,10 +1025,10 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.change(screen.getByLabelText('Name'), {
+                fireEvent.change(screen.getByRole('textbox', { name: /name/i }), {
                     target: { value: 'John Doe' }
                 });
-                fireEvent.change(screen.getByLabelText('Age'), {
+                fireEvent.change(screen.getByRole('spinbutton', { name: /age/i }), {
                     target: { value: '25' }
                 });
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
@@ -901,6 +1047,8 @@ describe('AkiformBuilder', () => {
                     .key('customField')
                     .label('Custom Field')
                     .type('custom')
+                    .help('Help text')
+                    .labelDescription('Label description text')
                     .render(({ field }) => React.createElement(CustomComponent, { field: field }))
                     .build()
             ];
@@ -908,15 +1056,25 @@ describe('AkiformBuilder', () => {
                 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', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 field()
                     .key('addresses')
                     .label('Addresses')
                     .type('fieldArray')
                     .fields([
-                    field().key('street').label('Street').type('text').build(),
+                    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()
@@ -926,12 +1084,16 @@ describe('AkiformBuilder', () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             // Add an address
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(screen.getByText('Add'));
-            }));
+            yield user.click(screen.getByTestId('addresses-add-button'));
+            yield 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
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.change(screen.getByLabelText('Street'), {
+                fireEvent.change(screen.getByPlaceholderText('Enter your street'), {
                     target: { value: '123 Main St' }
                 });
                 fireEvent.change(screen.getByLabelText('City'), {
@@ -998,10 +1160,10 @@ describe('AkiformBuilder', () => {
             }));
             const form = screen.getByRole('form');
             expect(form).toHaveAttribute('aria-label', 'Form');
-            const nameInput = screen.getByLabelText('Name');
+            const nameInput = screen.getByRole('textbox', { name: /name/i });
             expect(nameInput).toHaveAttribute('aria-required', 'true');
             expect(nameInput).toHaveAttribute('aria-invalid', 'false');
-            const ageInput = screen.getByLabelText('Age');
+            const ageInput = screen.getByRole('spinbutton', { name: /age/i });
             expect(ageInput).toHaveAttribute('aria-required', 'false');
             expect(ageInput).toHaveAttribute('aria-invalid', 'false');
         }));
@@ -1017,7 +1179,7 @@ describe('AkiformBuilder', () => {
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
-            const nameInput = screen.getByLabelText('Name');
+            const nameInput = screen.getByRole('textbox', { name: /name/i });
             expect(nameInput).toHaveAttribute('aria-invalid', 'false');
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 fireEvent.submit(screen.getByRole('form'));
@@ -1028,6 +1190,7 @@ describe('AkiformBuilder', () => {
             });
         }));
         it('renders field array with proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = userEvent.setup();
             const fields = [
                 {
                     key: 'addresses',
@@ -1042,16 +1205,15 @@ describe('AkiformBuilder', () => {
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
+            yield user.click(screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
             const fieldArrayGroup = screen.getByRole('group', { name: 'Addresses' });
             expect(fieldArrayGroup).toBeInTheDocument();
-            const addButton = screen.getByRole('button', { name: 'Add Addresses' });
+            const addButton = screen.getByLabelText('Add Addresses');
             expect(addButton).toBeInTheDocument();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                fireEvent.click(addButton);
-            }));
-            const removeButton = screen.getByRole('button', {
-                name: 'Remove Addresses 1'
-            });
+            yield user.click(addButton);
+            yield expandCollapsable();
+            const removeButton = screen.getAllByLabelText('Remove Addresses')[1];
             expect(removeButton).toBeInTheDocument();
         }));
         it('supports keyboard navigation', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -1085,15 +1247,24 @@ describe('AkiformBuilder', () => {
                     .label('Personal Information')
                     .type('section')
                     .fields([
-                    field().key('name').label('Name').type('text').build(),
+                    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()
@@ -1105,10 +1276,12 @@ describe('AkiformBuilder', () => {
             }));
             expect(screen.getByText('Personal Information')).toBeInTheDocument();
             expect(screen.getByText('Contact Information')).toBeInTheDocument();
-            expect(screen.getByLabelText('Name')).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.getByLabelText('Name')).toBeVisible();
+            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
@@ -1164,18 +1337,19 @@ describe('AkiformBuilder', () => {
                 delay: 1
             });
             // Wait for submit button to become interactable
+            const submitButton = screen.getByRole('button', { name: /submit/i });
             yield waitFor(() => {
-                expect(screen.getByRole('button', { name: 'Submit' })).toBeEnabled();
+                expect(submitButton).toBeEnabled();
             });
             // Submit the form
-            yield userEvent.click(screen.getByRole('button', { name: 'SUBMIT' }));
+            yield userEvent.click(submitButton);
             // Validate submission
             expect(onSubmitMock).toHaveBeenCalledWith({
                 name: 'John Doe',
                 age: 30,
                 email: 'john@example.com'
             }, expect.anything());
-        }), 10000);
+        }));
         it('handles conditional rendering within sections', () => __awaiter(void 0, void 0, void 0, function* () {
             const fields = [
                 field()
@@ -1212,7 +1386,7 @@ describe('AkiformBuilder', () => {
                     .key('name')
                     .label('Name')
                     .type('text')
-                    .tooltip({ title: 'Enter your full name' })
+                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
                     .build()
             ];
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -1235,7 +1409,7 @@ describe('AkiformBuilder', () => {
                     .key('email')
                     .label('Email')
                     .type('text')
-                    .tooltip('Enter your email address')
+                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
                     .build()
             ];
             yield act(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -1249,7 +1423,7 @@ describe('AkiformBuilder', () => {
             }));
             // Wait for the tooltip to appear
             yield waitFor(() => {
-                expect(screen.getByText('Enter your email address')).toBeInTheDocument();
+                expect(screen.getByText('Enter your full name')).toBeInTheDocument();
             });
         }));
     });