@evoke-platform/ui-components 1.10.0-testing.9 → 1.10.0

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

@@ -1,5 +1,4 @@
-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';
@@ -8,22 +7,18 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRendererContainer from '../FormRendererContainer';
-import { createSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
-expect.extend(matchers);
+import { createSpecialtyForm, licenseForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
     observe() { }
     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 +66,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 +75,12 @@ 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' } }));
+            // 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 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 +93,978 @@ describe('Form component', () => {
             });
         });
     });
+    describe('autosave functionality', () => {
+        it('should trigger autosave when field loses focus', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: 'Original Name',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: body.input.name,
+                    specialtyType: null,
+                    license: null,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            // Clear the existing value and type new value
+            await user.clear(nameField);
+            await user.type(nameField, 'Test Specialty');
+            await user.tab(); // Blur the field
+            // Verify the data being saved
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    name: 'Test Specialty',
+                }),
+            }));
+        });
+        it('should show saving indicator during autosave', async () => {
+            const user = userEvent.setup();
+            let resolveSave;
+            const savePromise = new Promise((resolve) => {
+                resolveSave = resolve;
+            });
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                await savePromise; // Wait for manual resolution
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: body.input.name,
+                    specialtyType: null,
+                    license: null,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            await user.type(nameField, 'Test Specialty');
+            await user.tab();
+            // Should show saving indicator
+            await waitFor(() => {
+                expect(screen.getByText('Saving')).toBeInTheDocument();
+            });
+            // Verify the API was called
+            expect(autosaveActionSpy).toHaveBeenCalled();
+            // Complete the save
+            resolveSave({
+                id: 'test-instance',
+                name: 'Test Specialty',
+                specialtyType: null,
+                license: null,
+            });
+            // Saving indicator should disappear
+            await waitFor(() => {
+                expect(screen.queryByText('Saving')).not.toBeInTheDocument();
+            });
+        });
+        it('should hide saving indicator after autosave fails', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', () => {
+                autosaveActionSpy();
+                return HttpResponse.json({ error: 'Save failed' }, { status: 500 });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            await user.type(nameField, 'Test Specialty');
+            await user.tab();
+            // Wait for autosave to complete
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalled();
+            });
+            // Saving indicator should be hidden after error
+            await waitFor(() => {
+                expect(screen.queryByText('Saving')).not.toBeInTheDocument();
+            });
+        });
+        it('should not trigger autosave when field value has not changed', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: 'Original Name',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: body.input.name,
+                    specialtyType: null,
+                    license: null,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            // Click into the field and blur it without changing value
+            await user.click(nameField);
+            await user.tab(); // Blur the field
+            await waitFor(() => {
+                expect(nameField).not.toHaveFocus();
+            });
+            // Wait a bit to ensure no autosave is triggered
+            await new Promise((r) => setTimeout(r, 500));
+            // Verify autosave was NOT called since value didn't change
+            expect(autosaveActionSpy).not.toHaveBeenCalled();
+        });
+        it('should trigger autosave when address field loses focus after change', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: {
+                        line1: '123 Main St',
+                        city: 'Boston',
+                        state: 'MA',
+                        zipCode: '02101',
+                    },
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json({
+                    ...licenseForm,
+                    autosaveActionId: '_autosave',
+                });
+            }), http.get('/api/data/locations/search', () => {
+                return HttpResponse.json([]);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: body.input.name || 'RN-123456',
+                    address: body.input.address || {
+                        line1: '123 Main St',
+                        city: 'Boston',
+                        state: 'MA',
+                        zipCode: '02101',
+                    },
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Find the city field
+            const cityField = await screen.findByRole('textbox', { name: 'City' });
+            // Clear and type new value
+            await user.clear(cityField);
+            await user.type(cityField, 'Cambridge');
+            await user.tab(); // Blur the field
+            // Verify autosave was eventually called and the final call contains the updated city
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalled();
+            });
+            const lastCall = autosaveActionSpy.mock.lastCall?.[0];
+            expect(lastCall).toEqual(expect.objectContaining({
+                input: expect.objectContaining({
+                    address: expect.objectContaining({
+                        city: 'Cambridge',
+                    }),
+                }),
+            }));
+        });
+        it('should not trigger autosave when address field loses focus without changes', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: {
+                        line1: '123 Main St',
+                        city: 'Boston',
+                        state: 'MA',
+                        zipCode: '02101',
+                    },
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/objects/license/effective', (req) => {
+                const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+                if (sanitizedVersion === 'true') {
+                    return HttpResponse.json(licenseObject);
+                }
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json({
+                    ...licenseForm,
+                    autosaveActionId: '_autosave',
+                });
+            }), http.get('/api/data/locations/search', () => {
+                return HttpResponse.json([]);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: body.input.address,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Find the city field
+            const cityField = await screen.findByRole('textbox', { name: 'City' });
+            // Click into field and blur without changing
+            await user.click(cityField);
+            await user.tab();
+            // Wait to ensure no autosave is triggered
+            await new Promise((r) => setTimeout(r, 500));
+            // Verify autosave was NOT called since value didn't change
+            expect(autosaveActionSpy).not.toHaveBeenCalled();
+        });
+        it('should trigger autosave for multiple address fields when line1 autocompletes', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: {
+                        line1: '',
+                        city: '',
+                        state: '',
+                        zipCode: '',
+                    },
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/objects/license/effective', (req) => {
+                const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+                if (sanitizedVersion === 'true') {
+                    return HttpResponse.json(licenseObject);
+                }
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json({
+                    ...licenseForm,
+                    autosaveActionId: '_autosave',
+                });
+            }), http.get('/api/data/locations/search', () => {
+                return HttpResponse.json([
+                    {
+                        address: {
+                            line1: '456 Oak Street',
+                            city: 'Springfield',
+                            state: 'MA',
+                            zipCode: '01101',
+                            county: 'Hampden',
+                        },
+                    },
+                ]);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: body.input.address,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Find the line1 field (it's a searchbox because of address autocomplete)
+            const line1Field = await screen.findByRole('searchbox', { name: 'Address Line 1' });
+            // Type to trigger autocomplete
+            await user.type(line1Field, '456');
+            // Wait for and select the autocomplete option
+            const autocompleteOption = await screen.findByText('456 Oak Street');
+            await user.click(autocompleteOption);
+            // Verify autosave was eventually called and the final call contains the expected address values
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalled();
+            });
+            // 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];
+            expect(lastCall).toEqual(expect.objectContaining({
+                input: expect.objectContaining({
+                    address: expect.objectContaining({
+                        line1: '456 Oak Street',
+                        city: 'Springfield',
+                        state: 'MA',
+                        zipCode: '01101',
+                    }),
+                }),
+            }));
+        });
+        it('should hide discard changes button when autosave is configured', async () => {
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // When autosaveActionId is present the discard button should be hidden
+            expect(screen.queryByRole('button', { name: /discard/i })).not.toBeInTheDocument();
+        });
+        it('should not trigger autosave when field changes but auto save is not configured', async () => {
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                });
+            }));
+            const autosaveActionSpy = vi.fn();
+            server.use(http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    ...body.input,
+                });
+            }));
+            const user = userEvent.setup();
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Change a field value
+            const nameInput = screen.getByRole('textbox', { name: /name/i });
+            await user.clear(nameInput);
+            await user.type(nameInput, 'Test Specialty');
+            await user.tab();
+            // Wait a bit to ensure no autosave happens
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            // Verify autosave was not triggered
+            expect(autosaveActionSpy).not.toHaveBeenCalled();
+        });
+    });
+    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(''));
+    });
+    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',
+            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();
+        });
+    });
+    it('renders the auto-generated delete confirmation form when formId is "_auto_"', async () => {
+        server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+            return HttpResponse.json({
+                id: 'test-instance',
+                name: 'Persons Name',
+                specialtyType: null,
+                license: null,
+            });
+        }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+            return HttpResponse.json(specialtyObject);
+        }));
+        render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: '_auto_', dataType: 'objectInstances', actionId: '_delete', instanceId: 'test-instance' }));
+        // Wait for the delete confirmation message to appear
+        const confirmation = await screen.findByText(/you are about to delete/i);
+        expect(confirmation).toBeInTheDocument();
+        // Validate that the message includes the instance name
+        expect(confirmation).toHaveTextContent(/Persons Name/);
+        // Ensure the "Delete" button is rendered
+        await screen.findByRole('button', { name: /delete/i });
+    });
 });