@evoke-platform/ui-components 1.10.0-testing.1 → 1.10.0-testing.10

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