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

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

@@ -1,5 +1,5 @@
 import * as matchers from '@testing-library/jest-dom/matchers';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { render as baseRender, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEqual } from 'lodash';
 import { http, HttpResponse } from 'msw';
@@ -16,14 +16,11 @@ global.ResizeObserver = class ResizeObserver {
     unobserve() { }
     disconnect() { }
 };
-const removePoppers = () => {
-    const portalSelectors = ['.MuiAutocomplete-popper'];
-    portalSelectors.forEach((selector) => {
-        // eslint-disable-next-line testing-library/no-node-access
-        document.querySelectorAll(selector).forEach((el) => el.remove());
-    });
+const WithProviders = ({ children }) => {
+    return React.createElement(MemoryRouter, null, children);
 };
-describe('Form component', () => {
+const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
+describe('FormRendererContainer', () => {
     let server;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
@@ -71,7 +68,6 @@ describe('Form component', () => {
     });
     afterEach(() => {
         server.resetHandlers();
-        removePoppers();
     });
     describe('validation criteria', () => {
         it(`filters related object field with validation criteria that references a defaulted related object's nested data`, async () => {
@@ -81,13 +77,11 @@ describe('Form component', () => {
             }), http.get('/api/data/forms/specialtyForm', () => {
                 return HttpResponse.json(createSpecialtyForm);
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } }));
             // Validate that the license field is hidden
             await waitFor(() => expect(screen.queryByRole('combobox', { name: 'License' })).not.toBeInTheDocument());
             // Validate that specialty type dropdown is only rendering specialty types that are associated with the selected license.
             const specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
-            await new Promise((r) => setTimeout(r, 5000));
             await user.click(specialtyType);
             const openAutocomplete = await screen.findByRole('listbox');
             await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
@@ -100,4 +94,200 @@ describe('Form component', () => {
             });
         });
     });
+    it('should display a submit button', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        await screen.findByRole('button', { name: 'Submit' });
+    });
+    it('should display a button to discard changes', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        await screen.findByRole('button', { name: 'Discard Changes' });
+    });
+    it('should reset the form when discarding changes', async () => {
+        const form = {
+            id: 'simpleForm2',
+            name: 'Simple Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'firstName',
+                        type: 'string',
+                    },
+                    display: {
+                        label: 'First Name',
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'simpleObject2',
+        };
+        const simpleObject = {
+            id: 'simpleObject2',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'firstName',
+                    name: 'First Name',
+                    type: 'string',
+                },
+            ],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        const user = userEvent.setup();
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        const firstNameInput = await screen.findByRole('textbox', { name: 'First Name' });
+        await user.type(firstNameInput, 'John');
+        const discardButton = await screen.findByRole('button', { name: 'Discard Changes' });
+        await user.click(discardButton);
+        await waitFor(() => expect(firstNameInput).toHaveValue(''));
+    });
+    describe('when submitting a form with validation', () => {
+        const form = {
+            id: 'validationTestForm',
+            name: 'Validation Test Form',
+            entries: [
+                {
+                    type: 'input',
+                    parameterId: 'requiredField',
+                    display: {
+                        label: 'Required Field',
+                        required: true,
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'validationTestObject',
+        };
+        let scrollIntoViewMock;
+        let originalScrollIntoView;
+        beforeEach(() => {
+            scrollIntoViewMock = vitest.fn();
+            originalScrollIntoView = Element.prototype.scrollIntoView;
+            Element.prototype.scrollIntoView = scrollIntoViewMock;
+        });
+        afterEach(() => {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        });
+        const validationTestObject = {
+            id: 'validationTestObject',
+            name: 'Validation Test Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [
+                        {
+                            id: 'requiredField',
+                            name: 'Required Field',
+                            type: 'string',
+                            required: true,
+                        },
+                    ],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'requiredField',
+                    name: 'Required Field',
+                    type: 'string',
+                },
+            ],
+        };
+        beforeEach(() => {
+            server.use(http.get(`/api/data/objects/${validationTestObject.id}/effective`, () => HttpResponse.json(validationTestObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        });
+        it('should display validation errors after trying to submit the form', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            // List items are named by author, but they don't
+            // need to be given an accessible name here because their text content is clear enough.
+            // As such, we use getByRole and ensure it has the correct text
+            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(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            // 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(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('should not scroll to validation errors after submission if there are none', async () => {
+            const user = userEvent.setup();
+            server.use(http.post(`/api/data/objects/${validationTestObject.id}/instances/actions`, () => HttpResponse.json({}, { status: 200 })));
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const requiredField = await screen.findByRole('textbox', { name: /Required Field */i });
+            await user.type(requiredField, 'Some content here...');
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
 });

package/dist/published/components/custom/FormV2/tests/test-data.js

@@ -116,6 +116,8 @@ export const UpdateAccessibilityFormOne = {
             display: {
                 label: 'License',
                 relatedObjectDisplay: 'dropdown',
+                createActionId: '_create',
+                createFormId: 'specialtyForm',
             },
         },
     ],

package/dist/published/stories/FormRendererContainer.stories.d.ts

@@ -10,8 +10,6 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
         fieldHeight?: "medium" | "small" | undefined;
     } | undefined;
     actionId?: string | undefined;
-    stickyFooter?: boolean | undefined;
-    hideButtons?: boolean | undefined;
     objectId: string;
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
@@ -39,8 +37,6 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
         fieldHeight?: "medium" | "small" | undefined;
     } | undefined;
     actionId?: string | undefined;
-    stickyFooter?: boolean | undefined;
-    hideButtons?: boolean | undefined;
     objectId: string;
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
@@ -67,8 +63,6 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
         fieldHeight?: "medium" | "small" | undefined;
     } | undefined;
     actionId?: string | undefined;
-    stickyFooter?: boolean | undefined;
-    hideButtons?: boolean | undefined;
     objectId: string;
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
@@ -95,8 +89,6 @@ export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<i
         fieldHeight?: "medium" | "small" | undefined;
     } | undefined;
     actionId?: string | undefined;
-    stickyFooter?: boolean | undefined;
-    hideButtons?: boolean | undefined;
     objectId: string;
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
@@ -123,8 +115,6 @@ export declare const FormWithSections: import("@storybook/types").AnnotatedStory
         fieldHeight?: "medium" | "small" | undefined;
     } | undefined;
     actionId?: string | undefined;
-    stickyFooter?: boolean | undefined;
-    hideButtons?: boolean | undefined;
     objectId: string;
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;

package/dist/published/stories/FormRendererContainer.stories.js

@@ -2,7 +2,7 @@ import { Box } from '@mui/material';
 import { http, HttpResponse } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { FormRendererContainer } from '../components/custom';
+import { FormRenderer, FormRendererContainer } from '../components/custom';
 import { documentInstance } from './FormRendererData';
 import { sharedObjectHandlers } from './sharedMswHandlers';
 export default {
@@ -31,8 +31,12 @@ const mockProps = {
         fieldHeight: 'medium',
     },
     actionId: '_update',
-    stickyFooter: true,
     objectId: 'genericEvokeForm',
+    renderFooter: (footerProps) => (React.createElement(FormRenderer.Footer, { ...footerProps, sx: {
+            background: 'white',
+            position: 'sticky',
+            bottom: 0,
+        } })),
 };
 const Template = (args) => {
     return (React.createElement(MemoryRouter, null,
@@ -45,7 +49,7 @@ Editable.args = {
 export const NoButtons = Template.bind({});
 NoButtons.args = {
     ...mockProps,
-    hideButtons: true,
+    renderFooter: () => null,
 };
 export const DocumentForm = Template.bind({});
 DocumentForm.args = {

package/dist/published/stories/FormRendererData.js

@@ -196,7 +196,7 @@ export const mockMovieObject = {
             id: 'customers',
             name: 'Customers',
             type: 'collection',
-            objectId: 'costomerMovie',
+            objectId: 'customerMovie',
             relatedPropertyId: 'movie',
             manyToManyPropertyId: 'customer',
         },
@@ -533,20 +533,6 @@ export const mockEvokeForm = {
             display: {
                 label: 'Multi-Select',
             },
-            enumWithLabels: [
-                {
-                    label: '1',
-                    value: '1',
-                },
-                {
-                    label: '2',
-                    value: '2',
-                },
-                {
-                    label: '3',
-                    value: '3',
-                },
-            ],
         },
         {
             type: 'input',
@@ -571,6 +557,8 @@ export const mockEvokeForm = {
             parameterId: 'collection',
             display: {
                 label: 'Collection',
+                createActionId: '_create',
+                createFormId: 'customerCreateForm',
             },
         },
         {
@@ -815,20 +803,6 @@ export const mockDocEvokeForm = {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                {
-                    label: 'Public',
-                    value: 'Public',
-                },
-                {
-                    label: 'Private',
-                    value: 'Private',
-                },
-                {
-                    label: 'Portal',
-                    value: 'Portal',
-                },
-            ],
         },
         {
             type: 'readonlyField',
@@ -887,20 +861,6 @@ export const mockEvokeFormWithSections = {
                             display: {
                                 label: 'Multi-Select',
                             },
-                            enumWithLabels: [
-                                {
-                                    label: '1',
-                                    value: '1',
-                                },
-                                {
-                                    label: '2',
-                                    value: '2',
-                                },
-                                {
-                                    label: '3',
-                                    value: '3',
-                                },
-                            ],
                         },
                         {
                             type: 'input',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-testing.0",
+    "version": "1.10.0-testing.10",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -20,6 +20,7 @@
     "scripts": {
         "test": "vitest",
         "test:ui": "vitest --ui",
+        "test:preview": "vitest-preview",
         "copy-styles": "copyfiles -u 1 src/styles/*.css dist/published/",
         "build": "rm -rf ./dist && tsc && npm run copy-styles",
         "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
@@ -88,6 +89,7 @@
         "storybook": "^7.6.20",
         "typescript": "^4.7.3",
         "vitest": "^1.6.0",
+        "vitest-preview": "^0.0.3",
         "webpack": "^5.74.0",
         "yalc": "^1.0.0-pre.53"
     },