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

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

@@ -1,7 +1,7 @@
 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, set } from 'lodash';
+import { isEmpty, isEqual, set } from 'lodash';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -16,13 +16,10 @@ global.ResizeObserver = class ResizeObserver {
     unobserve() { }
     disconnect() { }
 };
-const removePoppers = () => {
-    const portalSelectors = ['.MuiAutocomplete-popper'];
-    portalSelectors.forEach((selector) => {
-        // eslint-disable-next-line testing-library/no-node-access
-        document.querySelectorAll(selector).forEach((el) => el.remove());
-    });
+const WithProviders = ({ children }) => {
+    return React.createElement(MemoryRouter, null, children);
 };
+const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
 describe('Form component', () => {
     let server;
     beforeAll(() => {
@@ -46,7 +43,7 @@ describe('Form component', () => {
             if (sanitizedVersion === 'true') {
                 return HttpResponse.json(accessibility508Object);
             }
-        }), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
+        }), http.get('/api/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
             return HttpResponse.json([rnLicense, npLicense]);
         }), http.get('/api/data/objects/specialtyType/instances', (req) => {
             const filter = new URL(req.request.url).searchParams.get('filter');
@@ -55,7 +52,7 @@ describe('Form component', () => {
                 // The two objects in the array of conditions in the "where" filter represent the potential filters that can be applied when retrieving "specialty" instances.
                 // The first object is for the the validation criteria, but it is empty if the "license" field, which is referenced in the validation criteria, hasn't been filled out yet.
                 // The second object is for the search criteria which the user enters in the "specialty" field, but it is empty if no search text has been entered.
-                if (isEqual(whereFilter, { and: [{}, {}] }))
+                if (isEqual(whereFilter, { and: [{}, {}] }) || isEmpty(whereFilter))
                     return HttpResponse.json([
                         rnSpecialtyType1,
                         rnSpecialtyType2,
@@ -75,7 +72,6 @@ describe('Form component', () => {
     });
     afterEach(() => {
         server.resetHandlers();
-        removePoppers();
     });
     describe('validation criteria', () => {
         it(`filters related object field with validation criteria that references a related object's nested data`, async () => {
@@ -103,8 +99,7 @@ describe('Form component', () => {
                     return React.createElement("div", null, "Render error");
                 }
             };
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormWithState, null)));
+            render(React.createElement(FormWithState, null));
             const license = await screen.findByRole('combobox', { name: 'License' });
             // Step 1: Open Specialty Type and verify all options
             await user.click(await screen.findByRole('combobox', { name: 'Specialty Type' }));
@@ -134,23 +129,21 @@ describe('Form component', () => {
     describe('visibility configuration', () => {
         it('shows fields based on instance data using JsonLogic', async () => {
             server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: jsonLogicDisplayTestSpecialtyForm, onChange: () => { }, instance: {
-                        id: '123',
-                        objectId: 'specialty',
-                        name: 'Test Specialty Object Instance',
-                    } })));
+            render(React.createElement(FormRenderer, { form: jsonLogicDisplayTestSpecialtyForm, onChange: () => { }, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
             // Validate that specialty type dropdown renders
             await screen.findByRole('combobox', { name: 'Specialty Type' });
         });
         it('hides fields based on instance data using JsonLogic', async () => {
             server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: jsonLogicDisplayTestSpecialtyForm, onChange: () => { }, instance: {
-                        id: '123',
-                        objectId: 'specialty',
-                        name: 'Test Specialty Object Instance -- hidden',
-                    } })));
+            render(React.createElement(FormRenderer, { form: jsonLogicDisplayTestSpecialtyForm, onChange: () => { }, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
             // Validate that license dropdown renders
             await screen.findByRole('combobox', { name: 'License' });
             // Validate that specialty type dropdown does not render
@@ -158,23 +151,21 @@ describe('Form component', () => {
         });
         it('shows fields based on instance data using simple conditions', async () => {
             server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: simpleConditionDisplayTestSpecialtyForm, onChange: () => { }, instance: {
-                        id: '123',
-                        objectId: 'specialty',
-                        name: 'Test Specialty Object Instance',
-                    } })));
+            render(React.createElement(FormRenderer, { form: simpleConditionDisplayTestSpecialtyForm, onChange: () => { }, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
             // Validate that specialty type dropdown renders
             await screen.findByRole('combobox', { name: 'Specialty Type' });
         });
         it('hides fields based on instance data using simple conditions', async () => {
             server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: simpleConditionDisplayTestSpecialtyForm, onChange: () => { }, instance: {
-                        id: '123',
-                        objectId: 'specialty',
-                        name: 'Test Specialty Object Instance -- hidden',
-                    } })));
+            render(React.createElement(FormRenderer, { form: simpleConditionDisplayTestSpecialtyForm, onChange: () => { }, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
             // Validate that license dropdown renders
             await screen.findByRole('combobox', { name: 'License' });
             // Validate that specialty type dropdown does not render
@@ -185,9 +176,7 @@ describe('Form component', () => {
     describe('508 accessibility compliance', () => {
         it('supports keyboard navigation back and forth through Related Object dropdowns', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });
@@ -203,9 +192,7 @@ describe('Form component', () => {
         });
         it('supports keyboard navigation back and forth through User dropdowns', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });
@@ -223,9 +210,7 @@ describe('Form component', () => {
         });
         it('supports keyboard selection of dropdown values using Enter key on Related Objects', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });
@@ -234,6 +219,8 @@ describe('Form component', () => {
             await user.tab();
             // Open dropdown with Enter
             await user.keyboard('{Enter}');
+            // Wait for options to load
+            await screen.findByText('RN License');
             // Navigate to first option
             await user.keyboard('{ArrowDown}');
             // Select option with Enter
@@ -244,9 +231,7 @@ describe('Form component', () => {
         });
         it('supports keyboard selection of dropdown values using Enter key on Users', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });
@@ -266,9 +251,7 @@ describe('Form component', () => {
         });
         it('supports navigating between dropdown options using arrow keys on Related Objects', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('License')).toBeInTheDocument();
             });
@@ -288,9 +271,7 @@ describe('Form component', () => {
         });
         it('supports navigating between dropdown options using arrow keys on User dropdowns', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });
@@ -308,16 +289,15 @@ describe('Form component', () => {
         });
         it('supports clearing selection with the clear button on Related Objects', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { }, value: {
-                        id: '123',
-                        objectId: 'accessibility508Object',
-                        name: 'Test Accessibility 508 Object Instance',
-                        license: {
-                            id: 'rnLicense',
-                            name: 'RN License',
-                        },
-                    } })));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { }, value: {
+                    id: '123',
+                    objectId: 'accessibility508Object',
+                    name: 'Test Accessibility 508 Object Instance',
+                    license: {
+                        id: 'rnLicense',
+                        name: 'RN License',
+                    },
+                } }));
             // Set up a selection first
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
@@ -337,16 +317,15 @@ describe('Form component', () => {
         });
         it('supports clearing selection with the clear button on User dropdowns', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { }, value: {
-                        id: '123',
-                        objectId: 'accessibility508Object',
-                        name: 'Test Accessibility 508 Object Instance',
-                        user: {
-                            id: 'user1',
-                            name: 'User 1',
-                        },
-                    } })));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { }, value: {
+                    id: '123',
+                    objectId: 'accessibility508Object',
+                    name: 'Test Accessibility 508 Object Instance',
+                    user: {
+                        id: 'user1',
+                        name: 'User 1',
+                    },
+                } }));
             // Set up a selection first
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
@@ -368,9 +347,7 @@ describe('Form component', () => {
         });
         it('supports navigating to Add New option with arrow keys and opens modal', async () => {
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
-                ","));
+            render(React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });
@@ -388,4 +365,660 @@ describe('Form component', () => {
             });
         });
     });
+    describe('when passed a related object entry', () => {
+        const setupTestMocks = (object, form, instances) => {
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
+        };
+        describe('when in table view', () => {
+            describe('when mode is existing records only', () => {
+                const form = {
+                    id: 'relatedObjectTestForm',
+                    name: 'Related Object Test Form',
+                    entries: [
+                        {
+                            type: 'input',
+                            parameterId: 'specialtyType',
+                            display: {
+                                label: 'Speciality Type',
+                                mode: 'existingOnly',
+                            },
+                        },
+                    ],
+                    actionId: '_update',
+                    objectId: 'relatedObjectTestForm',
+                };
+                beforeEach(() => {
+                    const relatedObjectTestFormObject = {
+                        id: 'relatedObjectTestForm',
+                        name: 'Related Object Test Form',
+                        actions: [
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [
+                                    {
+                                        id: 'specialtyType',
+                                        name: 'Related Object',
+                                        type: 'object',
+                                        objectId: 'specialtyType',
+                                    },
+                                ],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                    };
+                    setupTestMocks(relatedObjectTestFormObject, form);
+                    const specialtyTypeObject = {
+                        id: 'specialtyType',
+                        name: 'Specialty  Type',
+                        actions: [
+                            {
+                                id: '_create',
+                                name: 'Create',
+                                type: 'create',
+                                parameters: [],
+                                outputEvent: 'created',
+                                defaultFormId: 'specialtyType',
+                            },
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [],
+                    };
+                    const specialtyTypeForm = {
+                        id: 'specialtyTypeForm',
+                        name: 'Specialty Type Form',
+                        entries: [],
+                        actionId: '_update',
+                        objectId: 'specialtyType',
+                    };
+                    setupTestMocks(specialtyTypeObject, specialtyTypeForm);
+                });
+                it('does not display radio buttons if mode is existing records only', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    // Make sure dialog loads
+                    await screen.findByRole('dialog');
+                    expect(screen.queryByRole('radiogroup', { name: 'Relation Type' })).not.toBeInTheDocument();
+                });
+            });
+            describe('when object has no searchable properties', () => {
+                const form = {
+                    id: 'relatedObjectTestForm',
+                    name: 'Related Object Test Form',
+                    entries: [
+                        {
+                            type: 'input',
+                            parameterId: 'specialtyType',
+                            display: {
+                                label: 'Speciality Type',
+                            },
+                        },
+                    ],
+                    actionId: '_update',
+                    objectId: 'relatedObjectTestForm',
+                };
+                beforeEach(async () => {
+                    const relatedObjectTestFormObject = {
+                        id: 'relatedObjectTestForm',
+                        name: 'Related Object Test Form',
+                        actions: [
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [
+                                    {
+                                        id: 'specialtyType',
+                                        name: 'Related Object',
+                                        type: 'object',
+                                        objectId: 'specialtyType',
+                                    },
+                                ],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                    };
+                    setupTestMocks(relatedObjectTestFormObject, form);
+                    const specialtyTypeObject = {
+                        id: 'specialtyType',
+                        name: 'Specialty  Type',
+                        actions: [
+                            {
+                                id: '_create',
+                                name: 'Create',
+                                type: 'create',
+                                parameters: [],
+                                outputEvent: 'created',
+                                defaultFormId: 'specialtyType',
+                            },
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [],
+                    };
+                    const specialtyTypeForm = {
+                        id: 'specialtyTypeForm',
+                        name: 'Specialty Type Form',
+                        entries: [],
+                        actionId: '_update',
+                        objectId: 'specialtyType',
+                    };
+                    setupTestMocks(specialtyTypeObject, specialtyTypeForm);
+                });
+                it("displays an error message if there aren't any searchable properties on a related object", async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    await screen.findByRole('dialog');
+                    await waitFor(() => {
+                        expect(screen.getByText('There are no searchable properties configured for this object')).toBeInTheDocument();
+                    });
+                });
+            });
+            describe('when object has searchable properties', () => {
+                const form = {
+                    id: 'relatedObjectTestForm',
+                    name: 'Related Object Test Form',
+                    entries: [
+                        {
+                            type: 'input',
+                            parameterId: 'specialtyType',
+                            display: {
+                                label: 'Speciality Type',
+                                relatedObjectDisplay: 'dialogBox',
+                                mode: 'existingOnly',
+                            },
+                        },
+                    ],
+                    actionId: '_update',
+                    objectId: 'relatedObjectTestForm',
+                };
+                beforeEach(async () => {
+                    const relatedObjectTestFormObject = {
+                        id: 'relatedObjectTestForm',
+                        name: 'Related Object Test Form',
+                        actions: [
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [
+                                    {
+                                        id: 'specialtyType',
+                                        name: 'Related Object',
+                                        type: 'object',
+                                        objectId: 'specialtyType',
+                                    },
+                                ],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                    };
+                    setupTestMocks(relatedObjectTestFormObject, form);
+                    const specialtyTypeObject = {
+                        id: 'specialtyType',
+                        name: 'Specialty Type',
+                        actions: [
+                            {
+                                id: '_create',
+                                name: 'Create',
+                                type: 'create',
+                                parameters: [],
+                                outputEvent: 'created',
+                                defaultFormId: 'specialtyType',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'name',
+                                name: 'Name',
+                                type: 'string',
+                                searchable: true,
+                            },
+                        ],
+                    };
+                    const specialtyTypeForm = {
+                        id: 'specialtyTypeForm',
+                        name: 'Specialty Type Form',
+                        entries: [
+                            {
+                                type: 'input',
+                                parameterId: 'specialtyType',
+                                display: {
+                                    label: 'Speciality Type',
+                                    relatedObjectDisplay: 'dialogBox',
+                                    mode: 'existingOnly',
+                                },
+                            },
+                        ],
+                        actionId: '_update',
+                        objectId: 'specialtyType',
+                    };
+                    setupTestMocks(specialtyTypeObject, specialtyTypeForm);
+                });
+                it('displays message to refine search if no search results are found', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    await screen.findByRole('dialog');
+                    const searchField = screen.getByRole('textbox', { name: 'Search' });
+                    await user.type(searchField, 'Nonexistent Instance');
+                    await screen.findByText(/refine your search/i);
+                });
+            });
+            describe('when mode is default (allows both new and existing)', () => {
+                const form = {
+                    id: 'relatedObjectTestForm',
+                    name: 'Related Object Test Form',
+                    entries: [
+                        {
+                            type: 'input',
+                            parameterId: 'specialtyType',
+                            display: {
+                                label: 'Speciality Type',
+                            },
+                        },
+                    ],
+                    actionId: '_update',
+                    objectId: 'relatedObjectTestForm',
+                };
+                beforeEach(async () => {
+                    const relatedObjectTestFormObject = {
+                        id: 'relatedObjectTestForm',
+                        name: 'Related Object Test Form',
+                        actions: [
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [
+                                    {
+                                        id: 'specialtyType',
+                                        name: 'Related Object',
+                                        type: 'object',
+                                        objectId: 'specialtyType',
+                                    },
+                                ],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                    };
+                    setupTestMocks(relatedObjectTestFormObject, form);
+                    const specialtyTypeForm = {
+                        id: 'specialtyTypeForm',
+                        name: 'Specialty Type Form',
+                        entries: [
+                            {
+                                type: 'content',
+                                html: '<div>Specialty Type Form Content</div>',
+                            },
+                        ],
+                        actionId: '_create',
+                        objectId: 'specialtyType',
+                    };
+                    const specialtyTypeObject = {
+                        id: 'specialtyType',
+                        name: 'Specialty Type',
+                        actions: [
+                            {
+                                id: '_create',
+                                name: 'Create',
+                                type: 'create',
+                                parameters: [],
+                                outputEvent: 'created',
+                                defaultFormId: 'specialtyTypeForm',
+                            },
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [],
+                    };
+                    setupTestMocks(specialtyTypeObject, specialtyTypeForm);
+                });
+                it('displays an add button for related object fields', async () => {
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await screen.findByRole('button', { name: 'Add' });
+                });
+                it('shows a close icon in instance lookup mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    await screen.findByRole('button', { name: 'Close' });
+                });
+                it('allows users to close modal using close icon in instance lookup mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const dialog = await screen.findByRole('dialog');
+                    await user.click(await screen.findByRole('button', { name: 'Close' }));
+                    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+                });
+                it('shows a cancel button in instance lookup mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    await screen.findByRole('button', { name: 'Cancel' });
+                });
+                it('closes dialog in instance lookup mode when clicking cancel', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const dialog = await screen.findByRole('dialog');
+                    await user.click(await screen.findByRole('button', { name: 'Cancel' }));
+                    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+                });
+                it('displays radio buttons for new or existing record selection', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    await screen.findByRole('radiogroup', { name: 'Relation Type' });
+                });
+                it('closes dialog if cancel button is clicked when creating a new record', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const dialog = await screen.findByRole('dialog');
+                    await screen.findByRole('radiogroup', { name: 'Relation Type' });
+                    const existingRecordButton = await screen.findByRole('radio', { name: /existing/i });
+                    expect(existingRecordButton).toBeChecked();
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+                    await user.click(cancelButton);
+                    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+                });
+                it('displays form if user switches to creating a new record', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    await screen.findByRole('radiogroup', { name: 'Relation Type' });
+                    const existingRecordButton = await screen.findByRole('radio', { name: /existing/i });
+                    expect(existingRecordButton).toBeChecked();
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    await screen.findByText('Specialty Type Form Content');
+                });
+                it('displays a close icon in record creation mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    await screen.findByText('Specialty Type Form Content');
+                    await screen.findByRole('button', { name: 'Close' });
+                });
+                it('displays a cancel button in record creation mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    await screen.findByText('Specialty Type Form Content');
+                    await screen.findByRole('button', { name: 'Cancel' });
+                });
+                it('displays a not found error in record creation mode if a form could not be found', async () => {
+                    const user = userEvent.setup();
+                    server.use(http.get('/api/data/forms/specialtyTypeForm', () => {
+                        return HttpResponse.json({ error: 'Not found' }, { status: 404 });
+                    }));
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    await screen.findByText(/not found/i);
+                });
+            });
+        });
+        describe('when in dropdown view', () => {
+            describe('when mode is existing records only', () => {
+                const form = {
+                    id: 'relatedObjectTestForm',
+                    name: 'Related Object Test Form',
+                    entries: [
+                        {
+                            type: 'input',
+                            parameterId: 'specialtyType',
+                            display: {
+                                label: 'Speciality Type',
+                                relatedObjectDisplay: 'dropdown',
+                                mode: 'existingOnly',
+                            },
+                        },
+                    ],
+                    actionId: '_update',
+                    objectId: 'relatedObjectTestForm',
+                };
+                beforeEach(() => {
+                    const relatedObjectTestFormObject = {
+                        id: 'relatedObjectTestForm',
+                        name: 'Related Object Test Form',
+                        actions: [
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [
+                                    {
+                                        id: 'specialtyType',
+                                        name: 'Related Object',
+                                        type: 'object',
+                                        objectId: 'specialtyType',
+                                    },
+                                ],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                    };
+                    setupTestMocks(relatedObjectTestFormObject, form);
+                    const specialtyTypeObject = {
+                        id: 'specialtyType',
+                        name: 'Specialty Type',
+                        actions: [
+                            {
+                                id: '_create',
+                                name: 'Create',
+                                type: 'create',
+                                parameters: [],
+                                outputEvent: 'created',
+                                defaultFormId: 'specialtyType',
+                            },
+                        ],
+                        properties: [],
+                    };
+                    const specialtyTypeForm = {
+                        id: 'specialtyTypeForm',
+                        name: 'Specialty Type Form',
+                        entries: [
+                            {
+                                type: 'content',
+                                html: '<div>Specialty Type Form Content</div>',
+                            },
+                        ],
+                        actionId: '_update',
+                        objectId: 'specialtyType',
+                    };
+                    setupTestMocks(specialtyTypeObject, specialtyTypeForm, [
+                        {
+                            id: 'rnSpecialtyType1',
+                            name: 'RN Specialty Type #1',
+                            objectId: 'specialtyType',
+                        },
+                    ]);
+                });
+                it('does not provide option to add new object instances if mode is set to existing only', 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' });
+                    await user.click(dropdown);
+                    await screen.findByRole('listbox');
+                    // Verify that the existing option is present
+                    await screen.findByRole('option', { name: 'RN Specialty Type #1' });
+                    // Verify that the "Add New" option is not present
+                    expect(screen.queryByText('+ Add New')).not.toBeInTheDocument();
+                });
+            });
+            describe('when mode is default (allows both new and existing)', () => {
+                const form = {
+                    id: 'relatedObjectTestForm',
+                    name: 'Related Object Test Form',
+                    entries: [
+                        {
+                            type: 'input',
+                            parameterId: 'specialtyType',
+                            display: {
+                                label: 'Speciality Type',
+                                relatedObjectDisplay: 'dropdown',
+                            },
+                        },
+                    ],
+                    actionId: '_update',
+                    objectId: 'relatedObjectTestForm',
+                };
+                beforeEach(() => {
+                    const relatedObjectTestFormObject = {
+                        id: 'relatedObjectTestForm',
+                        name: 'Related Object Test Form',
+                        actions: [
+                            {
+                                id: '_update',
+                                name: 'Update',
+                                type: 'update',
+                                parameters: [
+                                    {
+                                        id: 'specialtyType',
+                                        name: 'Related Object',
+                                        type: 'object',
+                                        objectId: 'specialtyType',
+                                    },
+                                ],
+                                outputEvent: 'updated',
+                            },
+                        ],
+                        properties: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                    };
+                    setupTestMocks(relatedObjectTestFormObject, form);
+                    const specialtyTypeObject = {
+                        id: 'specialtyType',
+                        name: 'Specialty Type',
+                        actions: [
+                            {
+                                id: '_create',
+                                name: 'Create',
+                                type: 'create',
+                                parameters: [],
+                                outputEvent: 'created',
+                                defaultFormId: 'specialtyTypeForm',
+                            },
+                        ],
+                        properties: [],
+                    };
+                    const specialtyTypeForm = {
+                        id: 'specialtyTypeForm',
+                        name: 'Specialty Type Form',
+                        entries: [
+                            {
+                                type: 'content',
+                                html: '<div>Specialty Type Form Content</div>',
+                            },
+                        ],
+                        actionId: '_create',
+                        objectId: 'specialtyType',
+                    };
+                    setupTestMocks(specialtyTypeObject, specialtyTypeForm, [
+                        {
+                            id: 'rnSpecialtyType1',
+                            name: 'RN Specialty Type #1',
+                            objectId: 'specialtyType',
+                        },
+                    ]);
+                });
+                it('provides option to add new object instances', 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' });
+                    await user.click(dropdown);
+                    await waitFor(() => {
+                        expect(screen.getByText('+ Add New')).toBeInTheDocument();
+                    });
+                    await user.click(screen.getByText('+ Add New'));
+                    await screen.findByRole('dialog');
+                    await screen.findByText('Specialty Type Form Content');
+                });
+                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' });
+                    await user.click(dropdown);
+                    const option = await screen.findByRole('option', { name: 'RN Specialty 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');
+                });
+            });
+        });
+    });
 });