@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

package/src/components/FormStation/FormStation.spec.tsx

@@ -1,24 +1,22 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 import React, { useEffect } from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
+import type { Mock } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
 import { initializeUi } from '../../initialize';
-import { ActionData, Actions } from '../Actions';
-import { Action } from '../Actions/Action';
-import { MessageBar } from '../MessageBar/MessageBar';
-import { PageHeader, PageHeaderAction } from '../PageHeader';
+import { ActionData } from '../Actions';
 import { FormStation } from './FormStation';
 import { ObjectSchemaDefinition } from './FormStation.models';
-import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 
-jest.mock('../../initialize');
+vi.mock('../../initialize');
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 
-const mockActions = (onActionSelected: jest.Mock): ActionData[] => [
+const mockActions = (onActionSelected: Mock): ActionData[] => [
   {
     label: 'Action One',
     onActionSelected: onActionSelected,
@@ -31,8 +29,8 @@ const defaultProps = {
 };
 
 // Temporarily disable console.log() from FormStation until proper error handling
-// jest.spyOn(console, 'log').mockImplementation(() => null);
-jest.spyOn(console, 'error').mockImplementation(() => null);
+// vi.spyOn(console, 'log').mockImplementation(() => null);
+vi.spyOn(console, 'error').mockImplementation(() => null);
 
 const MakeDirty: React.FC = () => {
   const context = useFormikContext();
@@ -45,14 +43,12 @@ const MakeDirty: React.FC = () => {
 };
 
 describe('Details', () => {
-  global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-  }));
+  global.ResizeObserver = vi.fn().mockImplementation(function () {
+    return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+  }) as unknown as typeof ResizeObserver;
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     initializeUi({
       showNotification: () => {
@@ -70,74 +66,105 @@ describe('Details', () => {
   });
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<FormStation {...defaultProps} />);
+    const { container } = render(<FormStation {...defaultProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   describe('Actions', () => {
     it('hides actions by default', () => {
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation {...defaultProps} />
         </MemoryRouter>,
       );
 
-      const actions = wrapper.find(Actions);
+      const actionsPanel = container.querySelector('[data-test-id="actions"]');
 
-      expect(actions.exists()).toBe(false);
+      expect(actionsPanel).not.toBeInTheDocument();
     });
 
-    it.each([
-      [true, true],
-      [false, false],
-      [undefined, false],
-    ])('alwaysShowActionsPanel working correctly', (value, isVisible) => {
-      const wrapper = mount(
+    it('shows actions panel when alwaysShowActionsPanel is true', () => {
+      const { container } = render(
         <MemoryRouter>
-          <FormStation {...defaultProps} alwaysShowActionsPanel={value} />,
+          <FormStation {...defaultProps} alwaysShowActionsPanel={true} />,
         </MemoryRouter>,
       );
 
-      const actions = wrapper.find(Actions);
+      const actionsPanel = container.querySelector('[data-test-id="actions"]');
 
-      expect(actions.exists()).toBe(isVisible);
+      expect(actionsPanel).toBeInTheDocument();
+    });
+
+    it('does not show actions panel when alwaysShowActionsPanel is false', () => {
+      const { container } = render(
+        <MemoryRouter>
+          <FormStation {...defaultProps} alwaysShowActionsPanel={false} />,
+        </MemoryRouter>,
+      );
+
+      const actionsPanel = container.querySelector('[data-test-id="actions"]');
+
+      expect(actionsPanel).not.toBeInTheDocument();
+    });
+
+    it('does not show actions panel when alwaysShowActionsPanel is undefined', () => {
+      const { container } = render(
+        <MemoryRouter>
+          <FormStation {...defaultProps} alwaysShowActionsPanel={undefined} />,
+        </MemoryRouter>,
+      );
+
+      const actionsPanel = container.querySelector('[data-test-id="actions"]');
+
+      expect(actionsPanel).not.toBeInTheDocument();
     });
 
     it('always shows Actions when at least one action is passed into prop "actions"', () => {
-      const sampleActions = mockActions(jest.fn());
-      const wrapper = mount(
+      const sampleActions = mockActions(vi.fn());
+      const { container } = render(
         <MemoryRouter>
           <FormStation {...defaultProps} actions={sampleActions} />
         </MemoryRouter>,
       );
-      const actions = wrapper.find(Actions);
+      const actions = container.querySelector('.actions');
 
-      expect(actions.exists()).toBe(true);
+      expect(actions).toBeInTheDocument();
     });
 
     describe('raising logic', () => {
       it('raises the action selected event if form is valid', async () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const sampleActions = mockActions(spy);
-        const wrapper = mount(
+        const { container } = render(
           <MemoryRouter>
             <FormStation {...defaultProps} actions={sampleActions} />
           </MemoryRouter>,
         );
 
-        const actionSelected = wrapper
-          .find(Action)
-          .prop('action').onActionSelected;
+        await waitFor(() => {
+          const actionsPanel = container.querySelector(
+            '[data-test-id="actions"]',
+          );
+          expect(actionsPanel).toBeInTheDocument();
+        });
+
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        const actionButton = actionsPanel?.querySelector(
+          '[data-test-id="action"]',
+        ) as HTMLElement;
+
         await act(async () => {
-          actionSelected && actionSelected();
+          fireEvent.click(actionButton);
         });
 
         expect(spy).toHaveBeenCalledTimes(1);
       });
 
       it("doesn't raise the action selected event if the form is invalid", async () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const sampleActions = mockActions(spy);
         const ForceValidation: React.FC = () => {
           const context = useFormikContext();
@@ -148,7 +175,7 @@ describe('Details', () => {
           return null;
         };
 
-        const wrapper = mount(
+        const { container } = render(
           <MemoryRouter>
             <FormStation
               {...defaultProps}
@@ -165,27 +192,35 @@ describe('Details', () => {
         );
 
         await act(async () => {
-          wrapper.update();
+          // Wait for validation
+          await new Promise((resolve) => setTimeout(resolve, 0));
         });
 
-        await act(async () => {
-          wrapper.update();
+        await waitFor(() => {
+          const actionsPanel = container.querySelector(
+            '[data-test-id="actions"]',
+          );
+          expect(actionsPanel).toBeInTheDocument();
         });
 
-        const actionSelected = wrapper
-          .find(Action)
-          .prop('action').onActionSelected;
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        const actionButton = actionsPanel?.querySelector(
+          '[data-test-id="action"]',
+        ) as HTMLElement;
+
         await act(async () => {
-          actionSelected && actionSelected();
+          fireEvent.click(actionButton);
         });
 
         expect(spy).not.toHaveBeenCalled();
       });
 
       it('does not raise the action selected event if saveData throws', async () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const sampleActions = mockActions(spy);
-        const wrapper = mount(
+        const { container } = render(
           <MemoryRouter>
             <FormStation
               {...defaultProps}
@@ -200,21 +235,32 @@ describe('Details', () => {
           </MemoryRouter>,
         );
 
-        const actionSelected = wrapper
-          .find(Action)
-          .prop('action').onActionSelected;
+        await waitFor(() => {
+          const actionsPanel = container.querySelector(
+            '[data-test-id="actions"]',
+          );
+          expect(actionsPanel).toBeInTheDocument();
+        });
+
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        const actionButton = actionsPanel?.querySelector(
+          '[data-test-id="action"]',
+        ) as HTMLElement;
+
         await act(async () => {
-          actionSelected && actionSelected();
+          fireEvent.click(actionButton);
         });
 
         expect(spy).not.toHaveBeenCalled();
       });
 
       it('does not attempt to save and call the action directly when form untouched', async () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const sampleActions = mockActions(spy);
-        const saveSpy = jest.fn();
-        const wrapper = mount(
+        const saveSpy = vi.fn();
+        const { container } = render(
           <MemoryRouter>
             <FormStation
               {...defaultProps}
@@ -225,11 +271,19 @@ describe('Details', () => {
           </MemoryRouter>,
         );
 
-        const actionSelected = wrapper
-          .find(Action)
-          .prop('action').onActionSelected;
+        let actionButton: HTMLElement | null = null;
+        await waitFor(() => {
+          const actionsPanel = container.querySelector(
+            '[data-test-id="actions"]',
+          );
+          actionButton = actionsPanel?.querySelector(
+            '[data-test-id="action"]',
+          ) as HTMLElement;
+          expect(actionButton).toBeInTheDocument();
+        });
+
         await act(async () => {
-          actionSelected && actionSelected();
+          fireEvent.click(actionButton!);
         });
 
         expect(saveSpy).not.toHaveBeenCalled();
@@ -240,7 +294,7 @@ describe('Details', () => {
 
   describe('Header', () => {
     it('uses titleProperty as preferred header', () => {
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -254,12 +308,14 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      const header = wrapper.find(PageHeader);
-      expect(header.prop('title')).toBe('Test title');
+      const header = container.querySelector(
+        '[data-test-id="page-header-title"]',
+      );
+      expect(header?.textContent).toContain('Test title');
     });
 
     it('uses defaultTitle as fallback', () => {
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -276,8 +332,10 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      const header = wrapper.find(PageHeader);
-      expect(header.prop('title')).toBe('default');
+      const header = container.querySelector(
+        '[data-test-id="page-header-title"]',
+      );
+      expect(header?.textContent).toContain('default');
     });
 
     describe('Reset Save and Cancel operations', () => {
@@ -301,7 +359,7 @@ describe('Details', () => {
           return null;
         };
 
-        const wrapper = mount(
+        const { container } = render(
           <MemoryRouter>
             <FormStation
               {...defaultProps}
@@ -314,13 +372,15 @@ describe('Details', () => {
         );
 
         await act(async () => {
-          wrapper.update();
+          await new Promise((resolve) => setTimeout(resolve, 0));
         });
 
-        const headerActions = wrapper.find(PageHeaderAction);
+        const headerActions = container.querySelectorAll(
+          '[data-test-id="page-header-actions"] [data-test-id="action"]',
+        );
         expect(headerActions).toHaveLength(2);
 
-        headerActions.at(0).simulate('click');
+        fireEvent.click(headerActions[0]);
 
         expect(value).toBe('initial');
       });
@@ -328,7 +388,7 @@ describe('Details', () => {
       it('allows saving of a dirty form', async () => {
         let path: string;
 
-        const wrapper = mount(
+        const { container } = render(
           <MemoryRouter>
             <FormStation
               {...defaultProps}
@@ -346,16 +406,18 @@ describe('Details', () => {
           </MemoryRouter>,
         );
         await act(async () => {
-          wrapper.update();
+          await new Promise((resolve) => setTimeout(resolve, 0));
         });
 
-        const headerActions = wrapper.find(PageHeaderAction);
+        const headerActions = container.querySelectorAll(
+          '[data-test-id="page-header-actions"] [data-test-id="action"]',
+        );
         expect(headerActions).toHaveLength(2);
 
-        headerActions.at(1).simulate('click');
+        fireEvent.click(headerActions[1]);
 
         await act(async () => {
-          wrapper.update();
+          await new Promise((resolve) => setTimeout(resolve, 0));
         });
 
         expect(path!).toBe('/');
@@ -364,7 +426,7 @@ describe('Details', () => {
       it('allows cancellation if wanted', async () => {
         let path: string;
 
-        const wrapper = mount(
+        const { container } = render(
           <MemoryRouter>
             <FormStation
               {...defaultProps}
@@ -388,16 +450,18 @@ describe('Details', () => {
         );
 
         await act(async () => {
-          wrapper.update();
+          await new Promise((resolve) => setTimeout(resolve, 0));
         });
 
-        const headerActions = wrapper.find(PageHeaderAction);
+        const headerActions = container.querySelectorAll(
+          '[data-test-id="page-header-actions"] [data-test-id="action"]',
+        );
         expect(headerActions).toHaveLength(3);
 
-        headerActions.at(2).simulate('click');
+        fireEvent.click(headerActions[2]);
 
         await act(async () => {
-          wrapper.update();
+          await new Promise((resolve) => setTimeout(resolve, 0));
         });
 
         expect(path!).toBe('/home');
@@ -407,15 +471,17 @@ describe('Details', () => {
 
   describe('station message', () => {
     it('station message is not rendered by default', () => {
-      const wrapper = shallow(<FormStation {...defaultProps} />);
+      const { container } = render(<FormStation {...defaultProps} />);
 
-      const messageBar = wrapper.find(MessageBar);
+      const messageBar = container.querySelector(
+        '[data-test-id="message-bar"]',
+      );
 
-      expect(messageBar.exists()).toBe(false);
+      expect(messageBar).not.toBeInTheDocument();
     });
 
     it('renders a MessageBar component if stationMessage is set', () => {
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -428,14 +494,16 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      const messageBar = wrapper.find(MessageBar);
+      const messageBar = container.querySelector(
+        '[data-test-id="message-bar"]',
+      );
 
-      expect(messageBar.exists()).toBe(true);
+      expect(messageBar).toBeInTheDocument();
     });
 
     it(`raises MessageBar's 'onClose' callback`, () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -452,9 +520,11 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      const messageBar = wrapper.find(MessageBar);
+      const closeButton = container.querySelector(
+        '[data-test-id="message-bar-close-button"]',
+      ) as HTMLButtonElement;
 
-      messageBar.prop('onClose')!();
+      fireEvent.click(closeButton);
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
@@ -463,10 +533,10 @@ describe('Details', () => {
   describe('station error', () => {
     it(`displays an error message when submitting throws an error and closes the message when 'X' is clicked`, async () => {
       const formError = new Error('Error on saving, not executing action');
-      const spy = jest.fn();
+      const spy = vi.fn();
       const sampleActions = mockActions(spy);
 
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -481,44 +551,54 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      const actionSelected = wrapper
-        .find(Action)
-        .prop('action').onActionSelected;
-      await act(async () => {
-        actionSelected && actionSelected();
+      await waitFor(() => {
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        expect(actionsPanel).toBeInTheDocument();
       });
 
-      wrapper.update();
-
-      let messageBar = wrapper.find(MessageBar);
-
-      expect(messageBar.exists()).toBe(true);
+      const actionsPanel = container.querySelector('[data-test-id="actions"]');
+      const actionButton = actionsPanel?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
 
-      const toggle = wrapper.find('.detailsIcon');
+      await act(async () => {
+        fireEvent.click(actionButton);
+      });
 
-      toggle.simulate('click');
+      let messageBar: Element | null = null;
+      await waitFor(() => {
+        messageBar = container.querySelector('[data-test-id="message-bar"]');
+        expect(messageBar).toBeInTheDocument();
+      });
 
-      wrapper.update();
+      const toggle = container.querySelector(
+        '[data-test-id="message-bar-details-button"]',
+      ) as HTMLElement;
 
-      const body = wrapper.find('.body').first();
+      fireEvent.click(toggle);
 
-      expect(body.text()).toContain(formError.message);
+      const body = container.querySelector('.body') as HTMLElement;
 
-      messageBar.prop('onClose')!();
+      expect(body.textContent).toContain(formError.message);
 
-      wrapper.update();
+      const closeButton = container.querySelector(
+        '[data-test-id="message-bar-close-button"]',
+      ) as HTMLButtonElement;
+      fireEvent.click(closeButton);
 
-      messageBar = wrapper.find(MessageBar);
+      messageBar = container.querySelector('.messageBar');
 
-      expect(messageBar.exists()).toBe(false);
+      expect(messageBar).not.toBeInTheDocument();
     });
 
     it(`displays an error body when a body is attached to the error object`, async () => {
       const formError = new Error('Submitting failed');
-      const spy = jest.fn();
+      const spy = vi.fn();
       const sampleActions = mockActions(spy);
 
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -533,31 +613,42 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      const actionSelected = wrapper
-        .find(Action)
-        .prop('action').onActionSelected;
-      await act(async () => {
-        actionSelected && actionSelected();
+      await waitFor(() => {
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        expect(actionsPanel).toBeInTheDocument();
       });
 
-      wrapper.update();
+      const actionsPanel = container.querySelector('[data-test-id="actions"]');
+      const actionButton = actionsPanel?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
 
-      const toggle = wrapper.find('.detailsIcon');
+      await act(async () => {
+        fireEvent.click(actionButton);
+      });
 
-      toggle.simulate('click');
+      let toggle: HTMLElement | null = null;
+      await waitFor(() => {
+        toggle = container.querySelector(
+          '[data-test-id="message-bar-details-button"]',
+        ) as HTMLElement;
+        expect(toggle).toBeInTheDocument();
+      });
 
-      wrapper.update();
+      fireEvent.click(toggle!);
 
-      const body = wrapper.find('.body').first();
+      const body = container.querySelector('.body') as HTMLElement;
 
-      expect(body.text()).toContain(formError.message);
+      expect(body.textContent).toContain(formError.message);
     });
   });
 
   describe('Prevent multiple form submissions', () => {
     it(`disables actions and 'SaveOnNavigate' while a form is being submitted`, async () => {
-      jest.useFakeTimers();
-      const spy = jest.fn();
+      vi.useFakeTimers();
+      const spy = vi.fn();
       const sampleActions = mockActions(spy);
       const onSubmit = (): Promise<{ id: number }> => {
         return new Promise((resolve) => {
@@ -567,7 +658,7 @@ describe('Details', () => {
         });
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -580,61 +671,53 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      let saveOnNavigate = wrapper.find(SaveOnNavigate);
-      let action = wrapper.find(Action);
-      let isDisabled = action.prop('action').isDisabled;
-
-      // assert SaveOnNavigate is aware the form is not being submitted
-      saveOnNavigate = wrapper.find(SaveOnNavigate);
-      expect(saveOnNavigate.prop('isSubmitting')).toBe(false);
-
       // assert form actions are initially enabled
-      action = wrapper.find(Action);
-      isDisabled = action.prop('action').isDisabled;
-      expect(isDisabled).toBe(false);
+      await waitFor(() => {
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        expect(actionsPanel).toBeInTheDocument();
+      });
+
+      let actionsPanel = container.querySelector('[data-test-id="actions"]');
+      let actionButton = actionsPanel?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
+      expect(actionButton).toBeInTheDocument();
 
       // submit form
-      const actionSelected = wrapper
-        .find(Action)
-        .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected && actionSelected();
+        fireEvent.click(actionButton);
       });
 
       // place form into 'submitting' state
       await act(async () => {
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
       });
-      wrapper.update();
-
-      // assert SaveOnNavigate is aware the form is currently being submitted
-      saveOnNavigate = wrapper.find(SaveOnNavigate);
-      expect(saveOnNavigate.prop('isSubmitting')).toBe(true);
 
       // assert form actions are disabled while form is being submitted
-      action = wrapper.find(Action);
-      isDisabled = action.prop('action').isDisabled;
-      expect(isDisabled).toBe(true);
+      actionsPanel = container.querySelector('[data-test-id="actions"]');
+      actionButton = actionsPanel?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
+      expect(actionButton).toHaveClass('isDisabled');
 
       // complete form submission
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
-      wrapper.update();
-
-      // assert SaveOnNavigate is aware the form is no longer being submitted
-      saveOnNavigate = wrapper.find(SaveOnNavigate);
-      expect(saveOnNavigate.prop('isSubmitting')).toBe(false);
 
       // assert form actions are enabled again after form is submitted
-      action = wrapper.find(Action);
-      isDisabled = action.prop('action').isDisabled;
-      expect(isDisabled).toBe(false);
+      actionsPanel = container.querySelector('[data-test-id="actions"]');
+      actionButton = actionsPanel?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
+      expect(actionButton).not.toHaveClass('isDisabled');
     });
 
     it(`enables actions and 'SaveOnNavigate' if form submission fails`, async () => {
-      jest.useFakeTimers();
-      const spy = jest.fn();
+      vi.useFakeTimers();
+      const spy = vi.fn();
       const sampleActions = mockActions(spy);
       const onSubmit = (): Promise<{ id: number }> => {
         return new Promise((_resolve, reject) => {
@@ -644,7 +727,7 @@ describe('Details', () => {
         });
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <MemoryRouter>
           <FormStation
             {...defaultProps}
@@ -657,56 +740,48 @@ describe('Details', () => {
         </MemoryRouter>,
       );
 
-      let saveOnNavigate = wrapper.find(SaveOnNavigate);
-      let action = wrapper.find(Action);
-      let isDisabled = action.prop('action').isDisabled;
-
-      // assert SaveOnNavigate is aware the form is not being submitted
-      saveOnNavigate = wrapper.find(SaveOnNavigate);
-      expect(saveOnNavigate.prop('isSubmitting')).toBe(false);
-
       // assert form actions are initially enabled
-      action = wrapper.find(Action);
-      isDisabled = action.prop('action').isDisabled;
-      expect(isDisabled).toBe(false);
+      let actionButton: HTMLElement | null = null;
+      await waitFor(() => {
+        const actionsPanel = container.querySelector(
+          '[data-test-id="actions"]',
+        );
+        actionButton = actionsPanel?.querySelector(
+          '[data-test-id="action"]',
+        ) as HTMLElement;
+        expect(actionButton).toBeInTheDocument();
+      });
+
+      expect(actionButton).toBeInTheDocument();
 
       // submit form
-      const actionSelected = wrapper
-        .find(Action)
-        .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected && actionSelected();
+        fireEvent.click(actionButton!);
       });
 
       // place form into 'submitting' state
       await act(async () => {
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
       });
-      wrapper.update();
-
-      // assert SaveOnNavigate is aware the form is currently being submitted
-      saveOnNavigate = wrapper.find(SaveOnNavigate);
-      expect(saveOnNavigate.prop('isSubmitting')).toBe(true);
 
       // assert form actions are disabled while form is being submitted
-      action = wrapper.find(Action);
-      isDisabled = action.prop('action').isDisabled;
-      expect(isDisabled).toBe(true);
+      const actionsPanel2 = container.querySelector('[data-test-id="actions"]');
+      actionButton = actionsPanel2?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
+      expect(actionButton).toHaveClass('isDisabled');
 
       // complete form submission
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
-      wrapper.update();
-
-      // assert SaveOnNavigate is aware the form is no longer being submitted
-      saveOnNavigate = wrapper.find(SaveOnNavigate);
-      expect(saveOnNavigate.prop('isSubmitting')).toBe(false);
 
       // assert form actions are enabled again after form is submitted
-      action = wrapper.find(Action);
-      isDisabled = action.prop('action').isDisabled;
-      expect(isDisabled).toBe(false);
+      const actionsPanel3 = container.querySelector('[data-test-id="actions"]');
+      actionButton = actionsPanel3?.querySelector(
+        '[data-test-id="action"]',
+      ) as HTMLElement;
+      expect(actionButton).not.toHaveClass('isDisabled');
     });
   });
 });