@akinon/akiform-builder 1.0.0 → 1.0.2

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

@@ -21,6 +21,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 = utils_1.userEvent.setup();
+        const expandIcons = (yield utils_1.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',
@@ -32,7 +39,8 @@ describe('AkiformBuilder', () => {
             key: 'age',
             label: 'Age',
             type: 'number',
-            placeholder: 'Enter your age'
+            placeholder: 'Enter your age',
+            help: 'Description text 2'
         }
     ];
     beforeEach(() => {
@@ -40,13 +48,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 (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit }));
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
             }));
-            expect(utils_1.screen.getByLabelText('Name')).toBeInTheDocument();
-            expect(utils_1.screen.getByLabelText('Age')).toBeInTheDocument();
-            expect(utils_1.screen.getByPlaceholderText('Enter your name')).toBeInTheDocument();
-            expect(utils_1.screen.getByPlaceholderText('Enter your age')).toBeInTheDocument();
+            for (const field of newDefaultFields) {
+                if (field.label) {
+                    expect(utils_1.screen.getByText(field.label)).toBeInTheDocument();
+                }
+                if (field.placeholder) {
+                    expect(utils_1.screen.getByPlaceholderText(field.placeholder)).toBeInTheDocument();
+                }
+                expect(utils_1.screen.getByText(field.help)).toBeInTheDocument();
+                expect(utils_1.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 (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
+            }));
+            // Check fields
+            expect(utils_1.screen.getByLabelText('Test Field 1')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Test Field 2')).toBeInTheDocument();
+            expect(utils_1.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 }) => {
@@ -168,7 +263,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',
@@ -186,7 +288,9 @@ describe('AkiformBuilder', () => {
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
             }));
-            expect(utils_1.screen.getByLabelText('Name')).toHaveAttribute('type', 'text');
+            expect(utils_1.screen.getByPlaceholderText('Enter your name')).toHaveAttribute('type', 'text');
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Age')).toHaveClass('akinon-input-number-input');
             expect(utils_1.screen.getByLabelText('Gender')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Subscribe')).toHaveAttribute('type', 'checkbox');
@@ -194,29 +298,38 @@ describe('AkiformBuilder', () => {
             expect(utils_1.screen.getByLabelText('Biography')).toBeInTheDocument();
         }));
         it('renders field array correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
             const fields = [
-                {
-                    key: 'addresses',
-                    label: 'Addresses',
-                    type: 'fieldArray',
-                    fields: [
-                        { key: 'street', label: 'Street', type: 'text' },
-                        { key: 'city', label: 'City', type: 'text' }
-                    ]
-                }
+                (0, field_builder_1.field)()
+                    .key('addresses')
+                    .label('Addresses')
+                    .type('fieldArray')
+                    .defaultExpanded(true)
+                    .fields([
+                    (0, field_builder_1.field)()
+                        .key('street')
+                        .label('Street')
+                        .type('text')
+                        .help('Help text')
+                        .labelDescription('Label description text')
+                        .build(),
+                    (0, field_builder_1.field)().key('city').label('City').type('text').build()
+                ])
+                    .build()
             ];
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
             }));
-            expect(utils_1.screen.getByText('Add')).toBeInTheDocument();
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
-            expect(utils_1.screen.getByLabelText('Street')).toBeInTheDocument();
-            expect(utils_1.screen.getByLabelText('City')).toBeInTheDocument();
-            expect(utils_1.screen.getByText('Remove')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Add Addresses')).toBeInTheDocument();
+            yield user.click(utils_1.screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
+            expect(utils_1.screen.getAllByText('Street')).toHaveLength(1);
+            expect(utils_1.screen.getAllByText('City')).toHaveLength(1);
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.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 = utils_1.userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -243,25 +356,24 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             // Add an item
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
             // Try to submit without filling required fields
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
             }));
             yield (0, utils_1.waitFor)(() => {
-                expect(utils_1.screen.getByText('Item name is required')).toBeInTheDocument();
+                expect(utils_1.screen.getByText('An error occurred in here')).toBeInTheDocument();
                 expect(onSubmitMock).not.toHaveBeenCalled();
             });
+            yield expandCollapsable();
             // Fill in valid data
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Item Name'), {
-                    target: { value: 'Test Item' }
-                });
-                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Quantity'), {
-                    target: { value: '2' }
+                const nameInput = utils_1.screen.getByRole('textbox', { name: /item name/i });
+                const quantityInput = utils_1.screen.getByRole('spinbutton', {
+                    name: /quantity/i
                 });
+                yield utils_1.userEvent.type(nameInput, 'Test Item');
+                yield utils_1.userEvent.type(quantityInput, '2');
             }));
             // Submit the form
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -274,6 +386,7 @@ describe('AkiformBuilder', () => {
             });
         }));
         it('handles field array operations correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -297,9 +410,8 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(TestComponent, null));
             }));
             // Add an item
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            yield expandCollapsable();
             // Fill in the fields
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 utils_1.fireEvent.change(utils_1.screen.getByLabelText('Item Name'), {
@@ -381,7 +493,7 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
             }));
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Email'), {
+                utils_1.fireEvent.change(utils_1.screen.getByRole('textbox', { name: /email/i }), {
                     target: { value: 'invalid-email' }
                 });
                 utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
@@ -495,6 +607,8 @@ describe('AkiformBuilder', () => {
                     key: 'customField',
                     label: 'Custom Field',
                     type: 'custom',
+                    help: 'Help text',
+                    labelDescription: 'Label description text',
                     render: ({ field }) => (React.createElement(CustomComponent, { field: field }))
                 }
             ];
@@ -502,6 +616,8 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
             expect(utils_1.screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
         }));
         it('cleans up throttle timeout on unmount', () => __awaiter(void 0, void 0, void 0, function* () {
             vi.useFakeTimers();
@@ -536,6 +652,33 @@ describe('AkiformBuilder', () => {
             // The form should still be rendered
             expect(utils_1.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 (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, showResetButton: true, onReset: mockOnReset, submitButtonProps: submitButtonProps, resetButtonProps: resetButtonProps }));
+            }));
+            const submitButton = utils_1.screen
+                .getByText(submitButtonProps.children)
+                .closest('button');
+            const resetButton = utils_1.screen
+                .getByText(resetButtonProps.children)
+                .closest('button');
+            expect(submitButton).toBeInTheDocument();
+            expect(resetButton).toBeInTheDocument();
+            expect(submitButton).toHaveClass(submitButtonProps.className);
+            expect(resetButton).toHaveClass(resetButtonProps.className);
+            yield utils_1.userEvent.click(resetButton);
+            expect(mockOnReset).toHaveBeenCalled();
+            yield utils_1.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* () {
@@ -632,11 +775,12 @@ describe('AkiformBuilder', () => {
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn(), initialValues: initialValues }));
             }));
+            yield expandCollapsable();
             expect(utils_1.screen.getAllByLabelText('Item Name')).toHaveLength(2);
             expect(utils_1.screen.getAllByLabelText('Quantity')).toHaveLength(2);
-            expect(utils_1.screen.getAllByText('Remove')).toHaveLength(2);
         }));
         it('adds and removes field array items', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -649,22 +793,20 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
             // Add an item
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            yield expandCollapsable();
             expect(utils_1.screen.getByLabelText('Item Name')).toBeInTheDocument();
             // Add another item
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
             expect(utils_1.screen.getAllByLabelText('Item Name')).toHaveLength(2);
             // Remove an item
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getAllByText('Remove')[0]);
-            }));
+            yield user.click(utils_1.screen.getAllByLabelText('Remove Items')[0]);
+            yield expandCollapsable();
             expect(utils_1.screen.getAllByLabelText('Item Name')).toHaveLength(1);
         }));
         it('handles field array with conditional fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -684,10 +826,10 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const { rerender } = (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            yield expandCollapsable();
             // Add an item
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
             // Description should not be visible initially
             expect(utils_1.screen.queryByLabelText('Description')).not.toBeInTheDocument();
             // Enter a name longer than 5 characters
@@ -718,9 +860,10 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
             // The field array should be rendered with an "Add" button
-            expect(utils_1.screen.getByText('Add')).toBeInTheDocument();
+            expect(utils_1.screen.getByTestId('emptyFieldArray-add-button')).toBeInTheDocument();
         }));
         it('handles form submission with field array', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
             const fields = [
                 {
                     key: 'items',
@@ -737,10 +880,9 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             // Add two items
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            yield user.click(utils_1.screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
             // Fill in the fields
             const itemNames = utils_1.screen.getAllByLabelText('Item Name');
             const quantities = utils_1.screen.getAllByLabelText('Quantity');
@@ -798,7 +940,7 @@ describe('AkiformBuilder', () => {
             expect(utils_1.screen.getByLabelText('Checkbox')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Date')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Textarea')).toBeInTheDocument();
-            expect(utils_1.screen.getByText('Add')).toBeInTheDocument(); // For field array
+            expect(utils_1.screen.getByTestId('fieldArray-add-button')).toBeInTheDocument(); // For field array
             expect(utils_1.screen.getByTestId('custom-field')).toBeInTheDocument();
         }));
         it('handles form with inline layout', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -827,6 +969,8 @@ describe('AkiformBuilder', () => {
                     .label('Name')
                     .type('text')
                     .placeholder('Enter your name')
+                    .help('Help text')
+                    .labelDescription('Label description text')
                     .build(),
                 (0, field_builder_1.field)()
                     .key('age')
@@ -854,7 +998,9 @@ describe('AkiformBuilder', () => {
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
-            expect(utils_1.screen.getByLabelText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Age')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Country')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Subscribe to newsletter')).toBeInTheDocument();
@@ -881,10 +1027,10 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                utils_1.fireEvent.change(utils_1.screen.getByRole('textbox', { name: /name/i }), {
                     target: { value: 'John Doe' }
                 });
-                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Age'), {
+                utils_1.fireEvent.change(utils_1.screen.getByRole('spinbutton', { name: /age/i }), {
                     target: { value: '25' }
                 });
                 utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
@@ -903,6 +1049,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()
             ];
@@ -910,15 +1058,25 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
             expect(utils_1.screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.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 = utils_1.userEvent.setup();
             const fields = [
                 (0, field_builder_1.field)()
                     .key('addresses')
                     .label('Addresses')
                     .type('fieldArray')
                     .fields([
-                    (0, field_builder_1.field)().key('street').label('Street').type('text').build(),
+                    (0, field_builder_1.field)()
+                        .key('street')
+                        .label('Street')
+                        .type('text')
+                        .help('Help text')
+                        .labelDescription('Label description text')
+                        .placeholder('Enter your street')
+                        .build(),
                     (0, field_builder_1.field)().key('city').label('City').type('text').build()
                 ])
                     .build()
@@ -928,12 +1086,16 @@ describe('AkiformBuilder', () => {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
             }));
             // Add an address
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(utils_1.screen.getByText('Add'));
-            }));
+            yield user.click(utils_1.screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
+            //Check rendered fields
+            expect(utils_1.screen.getByText('Street')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('City')).toBeInTheDocument();
             // Fill in the fields
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Street'), {
+                utils_1.fireEvent.change(utils_1.screen.getByPlaceholderText('Enter your street'), {
                     target: { value: '123 Main St' }
                 });
                 utils_1.fireEvent.change(utils_1.screen.getByLabelText('City'), {
@@ -1000,10 +1162,10 @@ describe('AkiformBuilder', () => {
             }));
             const form = utils_1.screen.getByRole('form');
             expect(form).toHaveAttribute('aria-label', 'Form');
-            const nameInput = utils_1.screen.getByLabelText('Name');
+            const nameInput = utils_1.screen.getByRole('textbox', { name: /name/i });
             expect(nameInput).toHaveAttribute('aria-required', 'true');
             expect(nameInput).toHaveAttribute('aria-invalid', 'false');
-            const ageInput = utils_1.screen.getByLabelText('Age');
+            const ageInput = utils_1.screen.getByRole('spinbutton', { name: /age/i });
             expect(ageInput).toHaveAttribute('aria-required', 'false');
             expect(ageInput).toHaveAttribute('aria-invalid', 'false');
         }));
@@ -1019,7 +1181,7 @@ describe('AkiformBuilder', () => {
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
-            const nameInput = utils_1.screen.getByLabelText('Name');
+            const nameInput = utils_1.screen.getByRole('textbox', { name: /name/i });
             expect(nameInput).toHaveAttribute('aria-invalid', 'false');
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 utils_1.fireEvent.submit(utils_1.screen.getByRole('form'));
@@ -1030,6 +1192,7 @@ describe('AkiformBuilder', () => {
             });
         }));
         it('renders field array with proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
             const fields = [
                 {
                     key: 'addresses',
@@ -1044,16 +1207,15 @@ describe('AkiformBuilder', () => {
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
                 (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             }));
+            yield user.click(utils_1.screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
             const fieldArrayGroup = utils_1.screen.getByRole('group', { name: 'Addresses' });
             expect(fieldArrayGroup).toBeInTheDocument();
-            const addButton = utils_1.screen.getByRole('button', { name: 'Add Addresses' });
+            const addButton = utils_1.screen.getByLabelText('Add Addresses');
             expect(addButton).toBeInTheDocument();
-            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-                utils_1.fireEvent.click(addButton);
-            }));
-            const removeButton = utils_1.screen.getByRole('button', {
-                name: 'Remove Addresses 1'
-            });
+            yield user.click(addButton);
+            yield expandCollapsable();
+            const removeButton = utils_1.screen.getAllByLabelText('Remove Addresses')[1];
             expect(removeButton).toBeInTheDocument();
         }));
         it('supports keyboard navigation', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -1087,15 +1249,24 @@ describe('AkiformBuilder', () => {
                     .label('Personal Information')
                     .type('section')
                     .fields([
-                    (0, field_builder_1.field)().key('name').label('Name').type('text').build(),
+                    (0, field_builder_1.field)()
+                        .key('name')
+                        .label('Name')
+                        .type('text')
+                        .help('Help text')
+                        .labelDescription('Label description text')
+                        .build(),
                     (0, field_builder_1.field)().key('age').label('Age').type('number').build()
                 ])
+                    .collapsible(true)
                     .defaultExpanded(true)
                     .build(),
                 (0, field_builder_1.field)()
                     .key('contactInfo')
                     .label('Contact Information')
                     .type('section')
+                    .collapsible(true)
+                    .defaultExpanded(false)
                     .fields([
                     (0, field_builder_1.field)().key('email').label('Email').type('text').build(),
                     (0, field_builder_1.field)().key('phone').label('Phone').type('text').build()
@@ -1107,10 +1278,12 @@ describe('AkiformBuilder', () => {
             }));
             expect(utils_1.screen.getByText('Personal Information')).toBeInTheDocument();
             expect(utils_1.screen.getByText('Contact Information')).toBeInTheDocument();
-            expect(utils_1.screen.getByLabelText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
             expect(utils_1.screen.getByLabelText('Age')).toBeInTheDocument();
             // Check if the first section is expanded by default
-            expect(utils_1.screen.getByLabelText('Name')).toBeVisible();
+            expect(utils_1.screen.getByText('Name').closest('label')).toBeVisible();
             // Check if the second section is collapsed by default
             expect(utils_1.screen.queryByLabelText('Email')).not.toBeInTheDocument();
             // Expand the second section
@@ -1166,18 +1339,19 @@ describe('AkiformBuilder', () => {
                 delay: 1
             });
             // Wait for submit button to become interactable
+            const submitButton = utils_1.screen.getByRole('button', { name: /submit/i });
             yield (0, utils_1.waitFor)(() => {
-                expect(utils_1.screen.getByRole('button', { name: 'Submit' })).toBeEnabled();
+                expect(submitButton).toBeEnabled();
             });
             // Submit the form
-            yield utils_1.userEvent.click(utils_1.screen.getByRole('button', { name: 'SUBMIT' }));
+            yield utils_1.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 = [
                 (0, field_builder_1.field)()
@@ -1214,7 +1388,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 (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -1237,7 +1411,7 @@ describe('AkiformBuilder', () => {
                     .key('email')
                     .label('Email')
                     .type('text')
-                    .tooltip('Enter your email address')
+                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
                     .build()
             ];
             yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -1251,7 +1425,7 @@ describe('AkiformBuilder', () => {
             }));
             // Wait for the tooltip to appear
             yield (0, utils_1.waitFor)(() => {
-                expect(utils_1.screen.getByText('Enter your email address')).toBeInTheDocument();
+                expect(utils_1.screen.getByText('Enter your full name')).toBeInTheDocument();
             });
         }));
     });