fix(test): replace raw DOM .click() with userEvent in ComponentMode tests

Relates to #3816

Author: lhein

packages/ui/src/components/ComponentMode/ComponentMode.test.tsx

@@ -1,4 +1,5 @@
-import { act, render, waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Mock, MockedFunction, vi } from 'vitest';
 
 import { useProcessorTooltips } from '../../hooks/use-processor-tooltips.hook';
@@ -60,35 +61,34 @@ describe('ComponentMode', () => {
   });
 
   it('should not call updateSourceCodeFromEntities if we are switching to the same EIP', async () => {
+    const user = userEvent.setup();
     const vizNode = getMockVizNode('to');
     const wrapper = render(<ComponentMode vizNode={vizNode} />);
 
     const toButton = wrapper.getByText('Static');
     expect(toButton).toBeInTheDocument();
 
-    await act(async () => {
-      toButton.click();
-    });
+    await user.click(toButton);
 
     expect(mockUpdateSourceCodeFromEntities).not.toHaveBeenCalled();
   });
 
   it('should not call updateSourceCodeFromEntities if the vizNode does not contain a path', async () => {
+    const user = userEvent.setup();
     const vizNode = getMockVizNode('to');
     vizNode.data.path = undefined;
     const wrapper = render(<ComponentMode vizNode={vizNode} />);
 
     const toButton = wrapper.getByText('Static');
     expect(toButton).toBeInTheDocument();
 
-    await act(async () => {
-      toButton.click();
-    });
+    await user.click(toButton);
 
     expect(mockUpdateSourceCodeFromEntities).not.toHaveBeenCalled();
   });
 
   it('calls updateModel when switching from "to" to "poll"', async () => {
+    const user = userEvent.setup();
     const vizNode = getMockVizNode('to');
     const wrapper = render(<ComponentMode vizNode={vizNode} />);
 
@@ -100,16 +100,15 @@ describe('ComponentMode', () => {
       expect(vizNode.getParsedDefinition as ReturnType<typeof vi.fn>).toHaveBeenCalled();
     });
 
-    await act(async () => {
-      pollButton.click();
-    });
+    await user.click(pollButton);
 
     expect(vizNode.updateModel).toHaveBeenCalledWith(undefined);
     expect(vizNode.data.path).toBe('route.from.steps.0.poll');
     expect(vizNode.updateModel).toHaveBeenCalledTimes(2);
   });
 
   it('calls updateModel when switching from "to" to "toD"', async () => {
+    const user = userEvent.setup();
     const vizNode = getMockVizNode('to');
     const wrapper = render(<ComponentMode vizNode={vizNode} />);
 
@@ -121,16 +120,15 @@ describe('ComponentMode', () => {
       expect(vizNode.getParsedDefinition as ReturnType<typeof vi.fn>).toHaveBeenCalled();
     });
 
-    await act(async () => {
-      toDButton.click();
-    });
+    await user.click(toDButton);
 
     expect(vizNode.updateModel).toHaveBeenCalledWith(undefined);
     expect(vizNode.data.path).toBe('route.from.steps.0.toD');
     expect(vizNode.updateModel).toHaveBeenCalledTimes(2);
   });
 
   it('calls updateModel when switching from "poll" to "to"', async () => {
+    const user = userEvent.setup();
     const vizNode = getMockVizNode('poll');
     const wrapper = render(<ComponentMode vizNode={vizNode} />);
 
@@ -141,20 +139,16 @@ describe('ComponentMode', () => {
     await waitFor(() => {
       expect(vizNode.getParsedDefinition as ReturnType<typeof vi.fn>).toHaveBeenCalled();
     });
-    await act(async () => {
-      await Promise.resolve();
-    });
 
-    await act(async () => {
-      toButton.click();
-    });
+    await user.click(toButton);
 
     expect(vizNode.updateModel).toHaveBeenCalledWith(undefined);
     expect(vizNode.data.path).toBe('route.from.steps.0.to');
     expect(vizNode.updateModel).toHaveBeenCalledTimes(2);
   });
 
   it('calls updateSourceCodeFromEntities when switching from "poll" to "to"', async () => {
+    const user = userEvent.setup();
     const vizNode = getMockVizNode('poll');
     const wrapper = render(<ComponentMode vizNode={vizNode} />);
 
@@ -165,13 +159,8 @@ describe('ComponentMode', () => {
     await waitFor(() => {
       expect(vizNode.getParsedDefinition as ReturnType<typeof vi.fn>).toHaveBeenCalled();
     });
-    await act(async () => {
-      await Promise.resolve();
-    });
 
-    await act(async () => {
-      toButton.click();
-    });
+    await user.click(toButton);
 
     expect(mockUpdateSourceCodeFromEntities).toHaveBeenCalled();
   });