@evoke-platform/ui-components 1.10.0-dev.3 → 1.10.0-dev.31

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

@@ -1,4 +1,3 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render as baseRender, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEmpty, isEqual, set } from 'lodash';
@@ -9,7 +8,6 @@ import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRenderer from '../FormRenderer';
 import { accessibility508Object, createSpecialtyForm, jsonLogicDisplayTestSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, simpleConditionDisplayTestSpecialtyForm, specialtyObject, specialtyTypeObject, UpdateAccessibilityFormOne, UpdateAccessibilityFormTwo, users, } from './test-data';
-expect.extend(matchers);
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
     observe() { }
@@ -20,7 +18,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 +57,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 +648,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 +697,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 +720,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 +743,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 +838,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', () => {
@@ -913,24 +995,25 @@ describe('Form component', () => {
             });
             describe('when mode is default (allows both new and existing)', () => {
                 const form = {
-                    id: 'relatedObjectTestForm',
+                    id: 'dropdownRelatedObjectTestForm',
                     name: 'Related Object Test Form',
                     entries: [
                         {
                             type: 'input',
-                            parameterId: 'specialtyType',
+                            parameterId: 'licenseType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'License Type',
                                 relatedObjectDisplay: 'dropdown',
+                                createActionId: '_create',
                             },
                         },
                     ],
                     actionId: '_update',
-                    objectId: 'relatedObjectTestForm',
+                    objectId: 'dropdownRelatedTestObject',
                 };
                 beforeEach(() => {
-                    const relatedObjectTestFormObject = {
-                        id: 'relatedObjectTestForm',
+                    const dropdownRelatedTestObject = {
+                        id: 'dropdownRelatedTestObject',
                         name: 'Related Object Test Form',
                         actions: [
                             {
@@ -939,10 +1022,10 @@ describe('Form component', () => {
                                 type: 'update',
                                 parameters: [
                                     {
-                                        id: 'specialtyType',
+                                        id: 'licenseType',
                                         name: 'Related Object',
                                         type: 'object',
-                                        objectId: 'specialtyType',
+                                        objectId: 'licenseType',
                                     },
                                 ],
                                 outputEvent: 'updated',
@@ -950,45 +1033,61 @@ describe('Form component', () => {
                         ],
                         properties: [
                             {
-                                id: 'specialtyType',
+                                id: 'licenseType',
                                 name: 'Related Object',
                                 type: 'object',
+                                objectId: 'licenseType',
                             },
                         ],
                     };
-                    setupTestMocks(relatedObjectTestFormObject, form);
-                    const specialtyTypeObject = {
-                        id: 'specialtyType',
-                        name: 'Specialty Type',
+                    setupTestMocks(dropdownRelatedTestObject, form);
+                    const licenseTypeObject = {
+                        id: 'licenseType',
+                        name: 'License Type',
                         actions: [
                             {
                                 id: '_create',
                                 name: 'Create',
                                 type: 'create',
-                                parameters: [],
+                                parameters: [
+                                    {
+                                        type: 'string',
+                                        id: 'name',
+                                        name: 'License Type Name',
+                                    },
+                                ],
                                 outputEvent: 'created',
-                                defaultFormId: 'specialtyTypeForm',
+                                defaultFormId: 'licenseTypeForm',
+                            },
+                        ],
+                        properties: [
+                            {
+                                type: 'string',
+                                id: 'name',
+                                name: 'License Type Name',
                             },
                         ],
-                        properties: [],
                     };
-                    const specialtyTypeForm = {
-                        id: 'specialtyTypeForm',
-                        name: 'Specialty Type Form',
+                    const licenseTypeForm = {
+                        id: 'licenseTypeForm',
+                        name: 'License Type Form',
                         entries: [
                             {
-                                type: 'content',
-                                html: '<div>Specialty Type Form Content</div>',
+                                type: 'input',
+                                parameterId: 'name',
+                                display: {
+                                    label: 'License Type Name',
+                                },
                             },
                         ],
                         actionId: '_create',
-                        objectId: 'specialtyType',
+                        objectId: 'licenseType',
                     };
-                    setupTestMocks(specialtyTypeObject, specialtyTypeForm, [
+                    setupTestMocks(licenseTypeObject, licenseTypeForm, [
                         {
-                            id: 'rnSpecialtyType1',
-                            name: 'RN Specialty Type #1',
-                            objectId: 'specialtyType',
+                            id: 'licenseType1',
+                            name: 'License Type #1',
+                            objectId: 'licenseType',
                         },
                     ]);
                 });
@@ -996,27 +1095,34 @@ describe('Form component', () => {
                     const user = userEvent.setup();
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     // Navigate to and open dropdown
-                    const dropdown = await screen.findByRole('combobox', { name: 'Speciality Type' });
+                    const dropdown = await screen.findByRole('combobox', { name: 'License Type' });
                     await user.click(dropdown);
-                    await waitFor(() => {
-                        expect(screen.getByText('+ Add New')).toBeInTheDocument();
-                    });
-                    await user.click(screen.getByText('+ Add New'));
+                    await screen.findByRole('listbox');
+                    await user.click(await screen.findByRole('option', { name: '+ Add New' }));
+                });
+                it('opens create related object instance form in dialog when add new is clicked', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    // Navigate to and open dropdown
+                    const dropdown = await screen.findByRole('combobox', { name: 'License Type' });
+                    await user.click(dropdown);
+                    await screen.findByRole('listbox');
+                    await user.click(await screen.findByRole('option', { name: '+ Add New' }));
                     await screen.findByRole('dialog');
-                    await screen.findByText('Specialty Type Form Content');
+                    await screen.findByRole('textbox', { name: 'License Type Name' });
                 });
                 it('allows related object instance selection', async () => {
                     const user = userEvent.setup();
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     // Navigate to and open dropdown
-                    const dropdown = await screen.findByRole('combobox', { name: 'Speciality Type' });
+                    const dropdown = await screen.findByRole('combobox', { name: 'License Type' });
                     await user.click(dropdown);
-                    const option = await screen.findByRole('option', { name: 'RN Specialty Type #1' });
+                    const option = await screen.findByRole('option', { name: 'License Type #1' });
                     await user.click(option);
                     // Verify option has been removed from the document
                     expect(option).not.toBeInTheDocument();
                     // Verify selection
-                    screen.getByText('RN Specialty Type #1');
+                    screen.getByText('License Type #1');
                 });
             });
         });
@@ -1041,13 +1147,19 @@ describe('Form component', () => {
                     },
                     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',
@@ -1105,6 +1217,7 @@ describe('Form component', () => {
                                 objectId: 'testObjectForCollections',
                             },
                         ],
+                        defaultFormId: 'collectionObjectForm',
                     },
                 ],
             };
@@ -1117,6 +1230,7 @@ describe('Form component', () => {
                         parameterId: 'name',
                         display: {
                             label: 'Name',
+                            required: true,
                         },
                     },
                     {
@@ -1130,9 +1244,15 @@ describe('Form component', () => {
                 ],
                 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');
@@ -1191,7 +1311,7 @@ describe('Form component', () => {
             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: 'Submit' });
+            await screen.findByRole('button', { name: 'Create Collection Item' });
         });
         it('should hide related object field in collection item form', async () => {
             const user = userEvent.setup();
@@ -1200,7 +1320,7 @@ describe('Form component', () => {
             await user.click(addButton);
             await screen.findByRole('dialog');
             // Make sure other form entry is present
-            await screen.findByRole('textbox', { name: 'Name' });
+            await screen.findByRole('textbox', { name: 'Name *' });
             const relatedObjectField = screen.queryByRole('textbox', { name: 'Related Object' });
             expect(relatedObjectField).not.toBeInTheDocument();
         });
@@ -1219,12 +1339,136 @@ describe('Form component', () => {
             const addButton = await screen.findByRole('button', { name: /add/i });
             await user.click(addButton);
             await screen.findByRole('dialog');
-            const nameField = screen.getByRole('textbox', { name: 'Name' });
+            const nameField = screen.getByRole('textbox', { name: 'Name *' });
             await user.type(nameField, 'New Collection Item');
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
+            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');
+        });
     });
 });