@evoke-platform/ui-components 1.10.0-dev.2 → 1.10.0-dev.21

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -10,7 +10,7 @@ export declare function isAddressProperty(key: string): boolean;
 /**
  * Determine if a form entry is visible or not.
  */
-export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+export declare const entryIsVisible: (entry: FormEntry, instance?: FieldValues, formValues?: FieldValues) => boolean;
 /**
  * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
  *
@@ -86,7 +86,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     message?: string;
     isError: boolean;
 }>>): Promise<FieldValues>;
-export declare function filterEmptySections(entry: Sections | Columns, formData: FieldValues, instance?: FieldValues): Sections | Columns | null;
+export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
 export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object?: Obj, parameters?: InputParameter[]): FormEntry[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.

package/dist/published/components/custom/FormV2/components/utils.js

@@ -68,7 +68,7 @@ export function isAddressProperty(key) {
 /**
  * Determine if a form entry is visible or not.
  */
-export const entryIsVisible = (entry, formValues, instance) => {
+export const entryIsVisible = (entry, instance, formValues) => {
     const display = 'display' in entry ? entry.display : undefined;
     const { visibility } = display ?? ('visibility' in entry ? entry : {});
     if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
@@ -482,11 +482,6 @@ export function convertDocToEntries(document) {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                { label: 'Public', value: 'Public' },
-                { label: 'Private', value: 'Private' },
-                { label: 'Portal', value: 'Portal' },
-            ],
         });
     }
     entries.push({
@@ -507,8 +502,8 @@ export function formatDataToDoc(data) {
         uploadedDate: data.uploadedDate,
         versionId: data.versionId,
         metadata: {
-            type: data.type,
-            view_permission: data.view_permission,
+            type: data.type ?? '',
+            view_permission: data.view_permission ?? '',
         },
     };
 }
@@ -567,6 +562,7 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
     const allDocuments = [];
     const formData = new FormData();
     for (const [index, file] of files.entries()) {
+        // Only upload File instances; SavedDocumentReference objects are already uploaded
         if ('size' in file) {
             formData.append(`files[${index}]`, file);
         }
@@ -628,6 +624,7 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
 export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
     for (const [key, value] of Object.entries(submission)) {
         if (isArray(value)) {
+            // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {
@@ -672,21 +669,21 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     }
     return submission;
 }
-export function filterEmptySections(entry, formData, instance) {
+export function filterEmptySections(entry, instance, formData) {
     if (entry.type === 'sections' && isArray(entry.sections)) {
         const visibleSections = entry.sections.filter((section) => {
             if (!section.entries || section.entries.length === 0)
                 return false;
             for (const sectionEntry of section.entries) {
                 if (sectionEntry.type === 'sections' || sectionEntry.type === 'columns') {
-                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, formData, instance)) {
+                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, instance, formData)) {
                         return false;
                     }
-                    else if (filterEmptySections(sectionEntry, formData, instance)) {
+                    else if (filterEmptySections(sectionEntry, instance, formData)) {
                         return true;
                     }
                 }
-                else if (entryIsVisible(sectionEntry, formData, instance)) {
+                else if (entryIsVisible(sectionEntry, instance, formData)) {
                     return true;
                 }
             }
@@ -706,13 +703,13 @@ export function filterEmptySections(entry, formData, instance) {
             let hasVisibleEntry = false;
             for (const columnEntry of column.entries) {
                 if (columnEntry.type === 'sections' || columnEntry.type === 'columns') {
-                    if (filterEmptySections(columnEntry, formData, instance)) {
+                    if (filterEmptySections(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }
                 }
                 else {
-                    if (entryIsVisible(columnEntry, formData, instance)) {
+                    if (entryIsVisible(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }

package/dist/published/components/custom/FormV2/tests/FormRenderer.test.js

@@ -20,7 +20,7 @@ const WithProviders = ({ children }) => {
     return React.createElement(MemoryRouter, null, children);
 };
 const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
-describe('Form component', () => {
+describe('FormRenderer', () => {
     let server;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
@@ -59,9 +59,9 @@ describe('Form component', () => {
                         npSpecialtyType1,
                         npSpecialtyType2,
                     ]);
-                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] }))
+                else if (isEqual(whereFilter, { 'licenseType.id': 'rnLicenseType' }))
                     return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
-                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
+                else if (isEqual(whereFilter, { 'licenseType.id': 'npLicenseType' }))
                     return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
             }
         }), http.get('/api/accessManagement/users', () => HttpResponse.json(users)));
@@ -650,13 +650,19 @@ describe('Form component', () => {
                             parameterId: 'specialtyType',
                             display: {
                                 label: 'Speciality Type',
+                                createActionId: '_create',
                             },
                         },
                     ],
                     actionId: '_update',
                     objectId: 'relatedObjectTestForm',
                 };
+                let scrollIntoViewMock;
+                let originalScrollIntoView;
                 beforeEach(async () => {
+                    scrollIntoViewMock = vitest.fn();
+                    originalScrollIntoView = Element.prototype.scrollIntoView;
+                    Element.prototype.scrollIntoView = scrollIntoViewMock;
                     const relatedObjectTestFormObject = {
                         id: 'relatedObjectTestForm',
                         name: 'Related Object Test Form',
@@ -693,9 +699,20 @@ describe('Form component', () => {
                                 type: 'content',
                                 html: '<div>Specialty Type Form Content</div>',
                             },
+                            {
+                                type: 'input',
+                                parameterId: 'requiredField',
+                                display: {
+                                    label: 'Required Field',
+                                    required: true,
+                                },
+                            },
                         ],
                         actionId: '_create',
                         objectId: 'specialtyType',
+                        display: {
+                            submitLabel: 'Create Specialty Type',
+                        },
                     };
                     const specialtyTypeObject = {
                         id: 'specialtyType',
@@ -705,7 +722,14 @@ describe('Form component', () => {
                                 id: '_create',
                                 name: 'Create',
                                 type: 'create',
-                                parameters: [],
+                                parameters: [
+                                    {
+                                        id: 'requiredField',
+                                        name: 'Required Field',
+                                        type: 'string',
+                                        required: true,
+                                    },
+                                ],
                                 outputEvent: 'created',
                                 defaultFormId: 'specialtyTypeForm',
                             },
@@ -721,6 +745,9 @@ describe('Form component', () => {
                     };
                     setupTestMocks(specialtyTypeObject, specialtyTypeForm);
                 });
+                afterEach(() => {
+                    Element.prototype.scrollIntoView = originalScrollIntoView;
+                });
                 it('displays an add button for related object fields', async () => {
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     await screen.findByRole('button', { name: 'Add' });
@@ -813,6 +840,63 @@ describe('Form component', () => {
                     await user.click(newRecordButton);
                     await screen.findByText(/not found/i);
                 });
+                it('should show validation errors in record creation mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    const errorMessage = await screen.findByRole('listitem');
+                    expect(errorMessage).toHaveTextContent('Required Field is required');
+                });
+                it('should clear validation errors after they have been resolved', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    // Make sure error elements appear
+                    screen.getByRole('listitem');
+                    const requiredField = screen.getByRole('textbox', { name: /Required Field */i });
+                    await user.type(requiredField, 'Some content here...');
+                    expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+                });
+                it('should scroll to validation errors after submission', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    expect(scrollIntoViewMock).toHaveBeenCalled();
+                });
+                it('should not scroll to validation errors if there are none', async () => async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    // Make sure error elements appear
+                    screen.getByRole('listitem');
+                    const requiredField = await screen.findByRole('textbox', { name: /Required Field */i });
+                    await user.type(requiredField, 'Some content here...');
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+                });
             });
         });
         describe('when in dropdown view', () => {
@@ -922,6 +1006,7 @@ describe('Form component', () => {
                             display: {
                                 label: 'Speciality Type',
                                 relatedObjectDisplay: 'dropdown',
+                                createActionId: '_create',
                             },
                         },
                     ],
@@ -1021,4 +1106,348 @@ describe('Form component', () => {
             });
         });
     });
+    describe('when passed a one-to-many collection entry', () => {
+        const setupTestMocks = (object, form, instances) => {
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])), http.get(`/api/data/objects/${object.id}/instances/checkAccess`, () => HttpResponse.json({
+                result: true,
+            })));
+        };
+        const form = {
+            id: 'collectionTestForm',
+            name: 'Collection Test Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'collection',
+                        type: 'collection',
+                        objectId: 'collectionObject',
+                        relatedPropertyId: 'relatedObject',
+                    },
+                    display: {
+                        label: 'Collection',
+                        createActionId: '_create',
+                    },
+                },
+            ],
+            actionId: '_update',
+            objectId: 'testObjectForCollections',
+        };
+        let scrollIntoViewMock;
+        let originalScrollIntoView;
+        beforeEach(() => {
+            scrollIntoViewMock = vitest.fn();
+            originalScrollIntoView = Element.prototype.scrollIntoView;
+            Element.prototype.scrollIntoView = scrollIntoViewMock;
+            const collectionFormObject = {
+                id: 'testObjectForCollections',
+                name: 'Object for one-to-many collections tests',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [
+                    {
+                        id: 'collection',
+                        name: 'Collection',
+                        type: 'collection',
+                        objectId: 'collectionObject',
+                        relatedPropertyId: 'relatedObject',
+                    },
+                ],
+            };
+            setupTestMocks(collectionFormObject, form);
+            const collectionObject = {
+                id: 'collectionObject',
+                name: 'Collection Object',
+                properties: [
+                    {
+                        name: 'Name',
+                        id: 'name',
+                        type: 'string',
+                    },
+                    {
+                        name: 'Related Object',
+                        id: 'relatedObject',
+                        type: 'object',
+                        objectId: 'testObjectForCollections',
+                    },
+                ],
+                actions: [
+                    {
+                        id: '_create',
+                        name: 'Create',
+                        type: 'create',
+                        outputEvent: 'created',
+                        parameters: [
+                            {
+                                id: 'name',
+                                name: 'Name',
+                                type: 'string',
+                            },
+                            {
+                                id: 'relatedObject',
+                                name: 'Related Object',
+                                type: 'object',
+                                objectId: 'testObjectForCollections',
+                            },
+                        ],
+                        defaultFormId: 'collectionObjectForm',
+                    },
+                ],
+            };
+            const collectionObjectForm = {
+                id: 'collectionObjectForm',
+                name: 'Collection Object Form',
+                entries: [
+                    {
+                        type: 'input',
+                        parameterId: 'name',
+                        display: {
+                            label: 'Name',
+                            required: true,
+                        },
+                    },
+                    {
+                        type: 'input',
+                        parameterId: 'relatedObject',
+                        display: {
+                            label: 'Related Object',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+                actionId: '_create',
+                objectId: 'collectionObject',
+                display: {
+                    submitLabel: 'Create Collection Item',
+                },
+            };
+            setupTestMocks(collectionObject, collectionObjectForm);
+        });
+        afterEach(() => {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        });
+        it('should render collection field', async () => {
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByText('Collection');
+        });
+        it('should not render an add button if user does not have permission to create collection items', async () => {
+            server.use(http.get('/api/data/objects/collectionObject/instances/checkAccess', () => HttpResponse.json({
+                result: false,
+            })));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = screen.queryByRole('button', { name: /add/i });
+            expect(addButton).not.toBeInTheDocument();
+        });
+        it('should render an add button for the collection when user has permission to create collection items', async () => {
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByRole('button', { name: /add/i });
+        });
+        it('should open a dialog when clicking the add button', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+        });
+        it('should render a close button in the collection dialog', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('button', { name: 'Close' });
+        });
+        it('should allow closing the collection dialog using the close button', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            const dialog = await screen.findByRole('dialog');
+            const closeButton = await screen.findByRole('button', { name: 'Close' });
+            await user.click(closeButton);
+            await waitFor(() => expect(dialog).not.toBeInTheDocument());
+        });
+        it('shows a cancel button in the collection dialog', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            await screen.findByRole('button', { name: 'Cancel' });
+        });
+        it('closes dialog in the collection dialog clicking cancel', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            const dialog = await screen.findByRole('dialog');
+            await user.click(await screen.findByRole('button', { name: 'Cancel' }));
+            await waitFor(() => expect(dialog).not.toBeInTheDocument());
+        });
+        it('displays a submit button in the collection dialog', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            await screen.findByRole('button', { name: 'Create Collection Item' });
+        });
+        it('should hide related object field in collection item form', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            // Make sure other form entry is present
+            await screen.findByRole('textbox', { name: 'Name *' });
+            const relatedObjectField = screen.queryByRole('textbox', { name: 'Related Object' });
+            expect(relatedObjectField).not.toBeInTheDocument();
+        });
+        it('should add newly created collection item to the collection list upon submission', async () => {
+            const user = userEvent.setup();
+            server.use(http.post('/api/data/objects/collectionObject/instances/actions', () => HttpResponse.json({
+                id: 'newCollectionItemId',
+                name: 'New Collection Item',
+                objectId: 'collectionObject',
+                relatedObject: {
+                    id: 'testInstanceId',
+                    name: 'Test Instance',
+                },
+            })));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const nameField = screen.getByRole('textbox', { name: 'Name *' });
+            await user.type(nameField, 'New Collection Item');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            await screen.findByRole('columnheader', { name: 'Name' });
+            screen.getByRole('cell', { name: 'New Collection Item' });
+        });
+        it('should show validation errors', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            const errorMessage = await screen.findByRole('listitem');
+            expect(errorMessage).toHaveTextContent('Name is required');
+        });
+        it('should hide validation errors after they have been resolved', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            // Make sure error elements appear
+            screen.getByRole('listitem');
+            const requiredField = screen.getByRole('textbox', { name: /Name */i });
+            await user.type(requiredField, 'Some content here...');
+            expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+        });
+        it('should scroll to validation errors on submit', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('should not scroll to validation errors if there are none', async () => async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const requiredField = await screen.findByRole('textbox', { name: /Name */i });
+            await user.type(requiredField, 'Some content here...');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when passed a text field entry', () => {
+        it('should render text field', async () => {
+            const form = {
+                id: 'textFieldTestForm',
+                name: 'Text Field Test Form',
+                entries: [
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'textField',
+                            type: 'string',
+                        },
+                        display: {
+                            label: 'Text Field',
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'textFieldTestObject',
+            };
+            const textFieldTestObject = {
+                id: 'textFieldTestObject',
+                name: 'Text Field Test Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/${textFieldTestObject.id}/effective`, () => HttpResponse.json(textFieldTestObject)));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByRole('textbox', { name: 'Text Field' });
+        });
+        it('should allow text input in text field', async () => {
+            const user = userEvent.setup();
+            const form = {
+                id: 'textFieldTestForm',
+                name: 'Text Field Test Form',
+                entries: [
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'textField',
+                            type: 'string',
+                        },
+                        display: {
+                            label: 'Text Field',
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'textFieldTestObject',
+            };
+            const textFieldTestObject = {
+                id: 'textFieldTestObject',
+                name: 'Text Field Test Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/${textFieldTestObject.id}/effective`, () => HttpResponse.json(textFieldTestObject)));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const textField = await screen.findByRole('textbox', { name: 'Text Field' });
+            await user.type(textField, 'Test Input');
+            expect(textField).toHaveValue('Test Input');
+        });
+    });
 });