@evoke-platform/ui-components 1.10.0-dev.30 → 1.10.0-dev.32

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -1,5 +1,6 @@
 import { ExpandMore, InfoRounded } from '@mui/icons-material';
 import { InputLabel, Autocomplete as MUIAutocomplete } from '@mui/material';
+import { omit } from 'lodash';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
@@ -37,6 +38,7 @@ const Autocomplete = (props) => {
             return props.instructionText;
         }
     };
+    const muiAutocompleteProps = omit(props, 'sortBy', 'error', 'errorMessage', 'labelPlacement', 'instructionText');
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
             React.createElement(InputLabel, { htmlFor: props.id ?? '', sx: { display: 'flex', paddingBottom: '0px', fontSize: '14px' } },
@@ -50,7 +52,7 @@ const Autocomplete = (props) => {
                             color: (theme) => theme.palette.text.secondary,
                         } })))),
             renderInstructionText(),
-            React.createElement(MUIAutocomplete, { ...props, sx: {
+            React.createElement(MUIAutocomplete, { ...muiAutocompleteProps, sx: {
                     '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',
@@ -67,7 +69,7 @@ const Autocomplete = (props) => {
     }
     else {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(MUIAutocomplete, { ...props, sx: {
+            React.createElement(MUIAutocomplete, { ...muiAutocompleteProps, sx: {
                     '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',

package/dist/published/components/core/Autocomplete/Autocomplete.test.js

@@ -1,11 +1,120 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { it } from 'vitest';
 import TextField from '../TextField';
 import Autocomplete from './Autocomplete';
-const renderInput = (params) => React.createElement(TextField, { ...params });
+const renderInputFactory = (label) => (params) => React.createElement(TextField, { ...params, label: label });
 const options = [];
-it('renders with label outside outline', () => {
-    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
+it('should render with label outside outline', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInputFactory(), options: options }));
     screen.getByRole('combobox', { name: 'Title' });
 });
+it('should render label outside outline with asterisk when required', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInputFactory(), options: options, required: true }));
+    screen.getByRole('combobox', { name: 'Title *' });
+});
+it('should render instruction text when provided when there is an outside-top label', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", instructionText: "This is an instruction", renderInput: renderInputFactory(), options: options }));
+    screen.getByText('This is an instruction');
+});
+it('should not render instruction text when there is not an outside-top label', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", instructionText: "This is an instruction", renderInput: renderInputFactory(), options: options }));
+    const instructionText = screen.queryByText('This is an instruction');
+    expect(instructionText).not.toBeInTheDocument();
+});
+it('should render a tooltip if one is provided and there is an outside-top label', async () => {
+    const user = userEvent.setup();
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", tooltip: "This is a tooltip", renderInput: renderInputFactory(), options: options }));
+    expect(screen.queryByText('This is a tooltip')).not.toBeInTheDocument();
+    await user.hover(screen.getByLabelText('This is a tooltip'));
+    await screen.findByText('This is a tooltip');
+});
+it('should sort options in ascending order if sortBy is ASC', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "ASC", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should sort options in descending order if sortBy is DESC', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "DESC", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Cherry', 'Banana', 'Apple']);
+});
+it('should not sort options if sortBy is NONE', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "NONE", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Banana', 'Apple', 'Cherry']);
+});
+it('should sort options in ascending order by default', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should sort string options', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = ['Banana', 'Apple', 'Cherry'];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "ASC", renderInput: renderInputFactory('Fruit Options'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruit Options' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should render an error when error prop is true', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", error: true, errorMessage: "This is an error", labelPlacement: "outside-top", renderInput: renderInputFactory(), options: options }));
+    screen.getByText('This is an error');
+});
+it('should show popupIcon when not disabled', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", disabled: false, renderInput: renderInputFactory(), options: options }));
+    screen.getByTestId('ExpandMoreIcon');
+});
+it('should hide popupIcon when disabled', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", disabled: true, renderInput: renderInputFactory(), options: options }));
+    const popupIcon = screen.queryByTestId('ExpandMoreIcon');
+    expect(popupIcon).not.toBeInTheDocument();
+});
+it('should hide popupIcon when readOnly', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", readOnly: true, renderInput: renderInputFactory(), options: options }));
+    const popupIcon = screen.queryByTestId('ExpandMoreIcon');
+    expect(popupIcon).not.toBeInTheDocument();
+});
+it('should show custom popupIcon when provided', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", popupIcon: React.createElement("span", { "data-testid": "custom-icon" }, "^"), renderInput: renderInputFactory(), options: options }));
+    screen.getByTestId('custom-icon');
+});

package/dist/published/components/core/TextField/TextField.js

@@ -36,7 +36,7 @@ const TextField = (props) => {
                     ...props.sx,
                 } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage }))) : (React.createElement(React.Fragment, null,
-        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...props, sx: readOnly
+        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...muiProps, sx: readOnly
                 ? { ...readOnlyStyles, ...props.sx }
                 : { '& fieldset': { borderRadius: '8px' }, ...props.sx } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage })))));

package/dist/published/components/core/TextField/TextField.test.js

@@ -1,9 +1,7 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { expect, it } from 'vitest';
 import TextField from './index';
-expect.extend(matchers);
 it('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
     render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
     const textField = screen.getByRole('textbox', { name: 'Title' });

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.test.js

@@ -1,10 +1,8 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { expect, it } from 'vitest';
 import CriteriaBuilder from './CriteriaBuilder';
-expect.extend(matchers);
 const mockProperties = [
     {
         id: 'name',

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -42,7 +42,8 @@ export const Document = (props) => {
         if (canUpdateProperty) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`))
-                .then((accessCheck) => setHasUpdatePermission(accessCheck.result));
+                .then((accessCheck) => setHasUpdatePermission(accessCheck.result))
+                .catch(() => setHasUpdatePermission(false));
         }
     };
     const handleUpload = async (files) => {

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -1,5 +1,4 @@
 import { ApiServices } from '@evoke-platform/context';
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import axios from 'axios';
@@ -10,7 +9,6 @@ import React from 'react';
 import { expect, it } from 'vitest';
 import Form from '../Common/Form';
 import { accessibility508Object, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, users, } from './test-data';
-expect.extend(matchers);
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
     portalSelectors.forEach((selector) => {

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js

@@ -1,10 +1,8 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import InputField from './InputFieldComponent';
-expect.extend(matchers);
 describe('Free-text input', () => {
     // Right now an object property is required for this to function, but eventually this should go
     // away.

package/dist/published/components/custom/FormField/Select/Select.test.js

@@ -1,10 +1,8 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import Select from './Select';
-expect.extend(matchers);
 describe('Single select', () => {
     // Right now an object property is required for this to function, but eventually this should go
     // away.

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

@@ -70,9 +70,8 @@ function FormRendererContainer(props) {
                 }
                 else {
                     if (instanceId) {
-                        objectStore.getInstance(instanceId).then((instance) => {
-                            setInstance(instance);
-                        });
+                        const instance = await objectStore.getInstance(instanceId);
+                        setInstance(instance);
                     }
                     const object = await apiServices.get(getPrefixedUrl(`/objects/${form?.objectId || objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
                     setSanitizedObject(object);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -42,6 +42,12 @@ export const Document = (props) => {
                     [`${id}UpdatePermission`]: accessCheck.result,
                 });
                 setHasUpdatePermission(accessCheck.result);
+            })
+                .catch(() => {
+                setFetchedOptions({
+                    [`${id}UpdatePermission`]: false,
+                });
+                setHasUpdatePermission(false);
             });
         }
     }, [canUpdateProperty, fetchedOptions, instance, object]);

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() { }
@@ -997,25 +995,25 @@ describe('FormRenderer', () => {
             });
             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: [
                             {
@@ -1024,10 +1022,10 @@ describe('FormRenderer', () => {
                                 type: 'update',
                                 parameters: [
                                     {
-                                        id: 'specialtyType',
+                                        id: 'licenseType',
                                         name: 'Related Object',
                                         type: 'object',
-                                        objectId: 'specialtyType',
+                                        objectId: 'licenseType',
                                     },
                                 ],
                                 outputEvent: 'updated',
@@ -1035,45 +1033,61 @@ describe('FormRenderer', () => {
                         ],
                         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',
                         },
                     ]);
                 });
@@ -1081,27 +1095,34 @@ describe('FormRenderer', () => {
                     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');
                 });
             });
         });

package/dist/published/components/custom/FormV2/tests/FormRendererContainer.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 { isEqual } from 'lodash';
@@ -9,7 +8,6 @@ import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRendererContainer from '../FormRendererContainer';
 import { createSpecialtyForm, licenseForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
-expect.extend(matchers);
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
     observe() { }
@@ -78,10 +76,11 @@ describe('FormRendererContainer', () => {
                 return HttpResponse.json(createSpecialtyForm);
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } }));
+            // Give the form renderer some time to load
+            const specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' }, { timeout: 3000 });
             // 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 user.click(specialtyType);
             const openAutocomplete = await screen.findByRole('listbox');
             await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
@@ -331,7 +330,7 @@ describe('FormRendererContainer', () => {
             await waitFor(() => {
                 expect(autosaveActionSpy).toHaveBeenCalled();
             });
-            const lastCall = autosaveActionSpy.mock.lastCall[0];
+            const lastCall = autosaveActionSpy.mock.lastCall?.[0];
             expect(lastCall).toEqual(expect.objectContaining({
                 input: expect.objectContaining({
                     address: expect.objectContaining({
@@ -456,7 +455,7 @@ describe('FormRendererContainer', () => {
             // The autosave is triggered twice when selecting the autocomplete option,
             // once by the selection and once by the onBlur event. We want to verify the last call
             // has the correct data.
-            const lastCall = autosaveActionSpy.mock.lastCall[0];
+            const lastCall = autosaveActionSpy.mock.lastCall?.[0];
             expect(lastCall).toEqual(expect.objectContaining({
                 input: expect.objectContaining({
                     address: expect.objectContaining({
@@ -632,6 +631,325 @@ describe('FormRendererContainer', () => {
         await user.click(discardButton);
         await waitFor(() => expect(firstNameInput).toHaveValue(''));
     });
+    it('should show a not found error if the instance cannot be found', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'name',
+                        type: 'string',
+                    },
+                    display: {
+                        label: 'Name',
+                    },
+                },
+            ],
+            actionId: '_update',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_update',
+                    name: 'Update',
+                    type: 'update',
+                    parameters: [
+                        {
+                            id: 'name',
+                            name: 'Name',
+                            type: 'string',
+                        },
+                    ],
+                    outputEvent: 'updated',
+                },
+            ],
+            properties: [
+                {
+                    id: 'name',
+                    name: 'Name',
+                    type: 'string',
+                },
+            ],
+        };
+        server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)), http.get('/api/data/objects/simpleObject/instances/123', () => HttpResponse.json({
+            message: 'Not Found',
+        }, { status: 404 })), http.get('/api/data/objects/simpleObject/instances/123/object', () => HttpResponse.json({
+            message: 'Not Found',
+        }, { status: 404 })));
+        render(React.createElement(FormRendererContainer, { formId: form.id, actionId: "_update", objectId: "simpleObject", instanceId: '123', dataType: "objectInstances" }));
+        await screen.findByText('The requested content could not be found.');
+    });
+    it('should show an unauthorized error if the instance access is unauthorized', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'name',
+                        type: 'string',
+                    },
+                    display: {
+                        label: 'Name',
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [
+                        {
+                            id: 'name',
+                            name: 'Name',
+                            type: 'string',
+                        },
+                    ],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'name',
+                    name: 'Name',
+                    type: 'string',
+                },
+            ],
+        };
+        server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)), http.get('/api/data/objects/simpleObject/instances/123', () => HttpResponse.json({
+            message: 'Unauthorized',
+        }, { status: 403 })), http.get('/api/data/objects/simpleObject/instances/123/object', () => HttpResponse.json({
+            message: 'Unauthorized',
+        }, { status: 403 })));
+        render(React.createElement(FormRendererContainer, { formId: form.id, actionId: "_create", objectId: "simpleObject", instanceId: '123', dataType: "objectInstances" }));
+        await screen.findByText('You do not have permission to view this content.');
+    });
+    it('should show a misconfiguration error when action with actionId does not exist', async () => {
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)));
+        render(React.createElement(FormRendererContainer, { objectId: "simpleObject", actionId: "_create", dataType: "objectInstances" }));
+        await screen.findByText('It looks like something is missing.');
+    });
+    it('should show a not found error when object cannot be found', async () => {
+        server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json({ error: 'Not Found' }, { status: 404 })));
+        render(React.createElement(FormRendererContainer, { objectId: "simpleObject", dataType: "objectInstances" }));
+        await screen.findByText('The requested content could not be found.');
+    });
+    describe('when trying to show a specific form', () => {
+        it("should not show the action's default form", 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',
+                        defaultFormId: 'notSimpleForm',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)));
+            render(React.createElement(FormRendererContainer, { formId: form.id, objectId: "simpleObject", dataType: "objectInstances" }));
+            await screen.findByText('Simple Form');
+        });
+        it('should show a not found error when the form cannot be found', async () => {
+            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/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/notAForm`, () => HttpResponse.json({ error: 'Not Found' }, { status: 404 })));
+            render(React.createElement(FormRendererContainer, { formId: 'notAForm', objectId: "simpleObject", dataType: "objectInstances" }));
+            await screen.findByText('The requested content could not be found.');
+        });
+        it("should show a misconfiguration error when the form's action does not exist", async () => {
+            const form = {
+                id: 'simpleForm',
+                name: 'Simple Form',
+                entries: [],
+                actionId: '_create',
+                objectId: 'simpleObject',
+            };
+            const simpleObject = {
+                id: 'simpleObject',
+                name: 'Simple Object',
+                actions: [
+                    {
+                        id: 'notTheRightAction',
+                        name: 'Create',
+                        type: 'create',
+                        parameters: [],
+                        outputEvent: 'created',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)));
+            render(React.createElement(FormRendererContainer, { formId: form.id, objectId: "simpleObject", dataType: "objectInstances" }));
+            await screen.findByText('It looks like something is missing.');
+        });
+        it("should show a misconfiguration error when actionId doesn't match form's action id", async () => {
+            const form = {
+                id: 'simpleForm',
+                name: 'Simple Form',
+                entries: [],
+                actionId: '_notCreate',
+                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/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)));
+            render(React.createElement(FormRendererContainer, { formId: form.id, objectId: "simpleObject", actionId: "_create", dataType: "objectInstances" }));
+            await screen.findByText('It looks like something is missing.');
+        });
+    });
+    describe('when trying to show a default form', () => {
+        // object id and action id are provided, but form id is not => use default form
+        it('should use the default form when provided with an object and action with a default form id', 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',
+                        defaultFormId: 'simpleForm',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)));
+            render(React.createElement(FormRendererContainer, { objectId: "simpleObject", actionId: "_create", dataType: "objectInstances" }));
+            await screen.findByText('Simple Form');
+        });
+        // object id and action id are provided, and defaultFormId is defined but the form doesn't exist
+        it('should show a not found error when the default form cannot be found', async () => {
+            const simpleObject = {
+                id: 'simpleObject',
+                name: 'Simple Object',
+                actions: [
+                    {
+                        id: '_create',
+                        name: 'Create',
+                        type: 'create',
+                        parameters: [],
+                        outputEvent: 'created',
+                        defaultFormId: 'notAForm',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/notAForm`, () => HttpResponse.json({ error: 'Not Found' }, { status: 404 })));
+            render(React.createElement(FormRendererContainer, { objectId: "simpleObject", actionId: "_create", dataType: "objectInstances" }));
+            await screen.findByText('The requested content could not be found.');
+        });
+        it('should show a misconfiguration error when the default form is not defined', async () => {
+            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/effective`, () => HttpResponse.json(simpleObject)));
+            render(React.createElement(FormRendererContainer, { objectId: "simpleObject", actionId: "_create", dataType: "objectInstances" }));
+            await screen.findByText('It looks like something is missing.');
+        });
+        it("should show a misconfiguration error if actionId doesn't match the form's actionId", async () => {
+            const form = {
+                id: 'simpleForm',
+                name: 'Simple Form',
+                entries: [],
+                actionId: 'notCreate',
+                objectId: 'simpleObject',
+            };
+            const simpleObject = {
+                id: 'simpleObject',
+                name: 'Simple Object',
+                actions: [
+                    {
+                        id: '_create',
+                        name: 'Create',
+                        type: 'create',
+                        parameters: [],
+                        outputEvent: 'created',
+                        defaultFormId: 'simpleForm',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)));
+            render(React.createElement(FormRendererContainer, { objectId: "simpleObject", actionId: "_create", dataType: "objectInstances" }));
+            await screen.findByText('It looks like something is missing.');
+        });
+    });
     describe('when submitting a form with validation', () => {
         const form = {
             id: 'validationTestForm',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-dev.30",
+    "version": "1.10.0-dev.32",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -21,6 +21,7 @@
         "test": "vitest",
         "test:ui": "vitest --ui",
         "test:preview": "vitest-preview",
+        "coverage": "vitest run --coverage",
         "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",
@@ -52,22 +53,23 @@
         "@storybook/react": "^7.6.20",
         "@storybook/react-webpack5": "^7.6.20",
         "@storybook/testing-library": "^0.0.11",
-        "@testing-library/jest-dom": "^6.8.0",
-        "@testing-library/react": "^14.3.1",
-        "@testing-library/user-event": "^14.5.2",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/flat": "^5.0.5",
         "@types/jest": "^28.1.4",
         "@types/json-logic-js": "^2.0.8",
         "@types/luxon": "^3.4.2",
         "@types/nanoid-dictionary": "^4.2.3",
-        "@types/node": "^18.0.0",
+        "@types/node": "^24.10.0",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.5",
         "@types/react-input-mask": "^2.0.4",
         "@typescript-eslint/eslint-plugin": "^5.52.0",
         "@typescript-eslint/parser": "^5.35.1",
         "@typescript-eslint/typescript-estree": "^5.35.1",
-        "@vitest/ui": "^1.6.0",
+        "@vitest/coverage-v8": "^3.2.4",
+        "@vitest/ui": "^3.2.4",
         "babel-jest": "^28.1.2",
         "babel-loader": "^8.2.5",
         "copyfiles": "^2.4.1",
@@ -88,7 +90,7 @@
         "rimraf": "^3.0.2",
         "storybook": "^7.6.20",
         "typescript": "^4.7.3",
-        "vitest": "^1.6.0",
+        "vitest": "^3.2.4",
         "vitest-preview": "^0.0.3",
         "webpack": "^5.74.0",
         "yalc": "^1.0.0-pre.53"