KaotoIO · lordrip · Feb 9, 2024 · Feb 9, 2024
diff --git a/packages/ui/src/components/Form/customField/TypeaheadField.test.tsx b/packages/ui/src/components/Form/customField/TypeaheadField.test.tsx
@@ -1,9 +1,10 @@
 import { AutoField } from '@kaoto-next/uniforms-patternfly';
+
 import { fireEvent, render, screen } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { AutoForm } from 'uniforms';
-import { SchemaService } from '../schema.service';
 import { CustomAutoFieldDetector } from '../CustomAutoField';
+import { SchemaService } from '../schema.service';
 import { TypeaheadField } from './TypeaheadField';
 
 describe('TypeaheadField', () => {
@@ -41,7 +42,7 @@ describe('TypeaheadField', () => {
     expect(inputElement).toBeInTheDocument();
   });
 
-  it('should display the options when the input is clicked', () => {
+  it('should display the options when the input is clicked', async () => {
     render(
       <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
         <AutoForm schema={schemaBridge!}>
@@ -50,12 +51,14 @@ describe('TypeaheadField', () => {
       </AutoField.componentDetectorContext.Provider>,
     );
     const inputElement = screen.getByRole('combobox');
-    fireEvent.click(inputElement);
+    await act(async () => {
+      fireEvent.click(inputElement);
+    });
     const optionElements = screen.getAllByRole('option');
     expect(optionElements).toHaveLength(3);
   });
 
-  it('should select an option when clicked', () => {
+  it('should select an option when clicked', async () => {
     render(
       <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
         <AutoForm schema={schemaBridge!}>
@@ -64,31 +67,33 @@ describe('TypeaheadField', () => {
       </AutoField.componentDetectorContext.Provider>,
     );
     const inputElement = screen.getByRole('combobox');
-    fireEvent.click(inputElement);
+    await act(async () => {
+      fireEvent.click(inputElement);
+    });
     const optionElement = screen.getByText('option1');
-    act(() => {
+    await act(() => {
       fireEvent.click(optionElement);
     });
     expect(mockOnChange).toHaveBeenCalledWith('option1');
   });
 
-  it('should create a new option when a custom value is entered', () => {
-    const wrapper = render(
+  it('should create a new option when a custom value is entered', async () => {
+    render(
       <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
         <AutoForm schema={schemaBridge!}>
           <TypeaheadField name="rejectedPolicy" onChange={mockOnChange} />
         </AutoForm>
       </AutoField.componentDetectorContext.Provider>,
     );
-    const inputElement = wrapper.getByRole('combobox');
-    act(() => {
+    const inputElement = screen.getByRole('combobox');
+    await act(async () => {
       fireEvent.change(inputElement, { target: { value: 'customValue' } });
       fireEvent.keyDown(inputElement, { key: 'Enter' });
     });
     expect(inputElement).toHaveValue('customValue');
   });
 
-  it('should clear the input value when the clear button is clicked', () => {
+  it('should clear the input value when the clear button is clicked', async () => {
     render(
       <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
         <AutoForm schema={schemaBridge!}>
@@ -97,11 +102,11 @@ describe('TypeaheadField', () => {
       </AutoField.componentDetectorContext.Provider>,
     );
     const inputElement = screen.getByRole('combobox');
-    act(() => {
+    await act(async () => {
       fireEvent.change(inputElement, { target: { value: 'customValue' } });
     });
     const clearButton = screen.getByLabelText('Clear input value');
-    act(() => {
+    await act(async () => {
       fireEvent.click(clearButton);
     });
     expect(inputElement).toHaveValue('');

diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx
@@ -7,6 +7,7 @@ import { JSONSchemaType } from 'ajv';
 import { IVisualizationNode, VisualComponentSchema } from '../../../models/visualization/base-visual-entity';
 import { DataFormatEditor } from './DataFormatEditor';
 import { MetadataEditor } from '../../MetadataEditor';
+import { act } from 'react-dom/test-utils';
 
 describe('DataFormatEditor', () => {
   let mockNode: CanvasNode;
@@ -47,10 +48,12 @@ describe('DataFormatEditor', () => {
     };
   });
 
-  it('should render', () => {
+  it('should render', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
     const buttons = screen.getAllByRole('button');
-    fireEvent.click(buttons[1]);
+    await act(async () => {
+      fireEvent.click(buttons[1]);
+    });
     const json = screen.getByTestId('dataformat-dropdownitem-json');
     fireEvent.click(json.getElementsByTagName('button')[0]);
     const form = screen.getByTestId('metadata-editor-form-dataformat');

diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx
@@ -1,12 +1,13 @@
 import * as catalogIndex from '@kaoto-next/camel-catalog/index.json';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { CamelCatalogService } from '../../../models/visualization/flows';
-import { CatalogKind, ICamelLoadBalancerDefinition } from '../../../models';
-import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { JSONSchemaType } from 'ajv';
+import { act } from 'react-dom/test-utils';
+import { CatalogKind, ICamelLoadBalancerDefinition } from '../../../models';
 import { IVisualizationNode, VisualComponentSchema } from '../../../models/visualization/base-visual-entity';
-import { LoadBalancerEditor } from './LoadBalancerEditor';
+import { CamelCatalogService } from '../../../models/visualization/flows';
 import { MetadataEditor } from '../../MetadataEditor';
+import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
+import { LoadBalancerEditor } from './LoadBalancerEditor';
 
 describe('LoadBalancerEditor', () => {
   let mockNode: CanvasNode;
@@ -47,11 +48,12 @@ describe('LoadBalancerEditor', () => {
     };
   });
 
-  it('should render', () => {
+  it('should render', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
     const launchExpressionModalBtn = screen.getAllByRole('button')[1];
-
-    fireEvent.click(launchExpressionModalBtn);
+    await act(async () => {
+      fireEvent.click(launchExpressionModalBtn);
+    });
     expect(screen.getByTestId('loadbalancer-dropdown')).toBeTruthy();
   });
 

diff --git a/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.test.tsx b/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.test.tsx
@@ -8,6 +8,7 @@ import { JSONSchemaType } from 'ajv';
 import { IVisualizationNode, VisualComponentSchema } from '../../../models/visualization/base-visual-entity';
 import { MetadataEditor } from '../../MetadataEditor';
 import { SchemaService } from '../schema.service';
+import { act } from 'react-dom/test-utils';
 
 describe('StepExpressionEditor', () => {
   let mockNode: CanvasNode;
@@ -48,14 +49,18 @@ describe('StepExpressionEditor', () => {
     };
   });
 
-  it('should render', () => {
+  it('should render', async () => {
     render(<StepExpressionEditor selectedNode={mockNode} />);
     const launcherButton = screen.getAllByRole('button', { name: 'Configure Expression' });
-    fireEvent.click(launcherButton[0]);
+    await act(async () => {
+      fireEvent.click(launcherButton[0]);
+    });
     const dropdownButton = screen
       .getAllByRole('button')
       .filter((button) => button.innerHTML.includes(SchemaService.DROPDOWN_PLACEHOLDER));
-    fireEvent.click(dropdownButton[0]);
+    await act(async () => {
+      fireEvent.click(dropdownButton[0]);
+    });
     const jsonpath = screen.getByTestId('expression-dropdownitem-jsonpath');
     fireEvent.click(jsonpath.getElementsByTagName('button')[0]);
     const form = screen.getByTestId('metadata-editor-form-expression');

diff --git a/packages/ui/src/components/MetadataEditor/PipeErrorHandlerEditor.test.tsx b/packages/ui/src/components/MetadataEditor/PipeErrorHandlerEditor.test.tsx
@@ -2,6 +2,7 @@ import { PipeErrorHandlerEditor } from './PipeErrorHandlerEditor';
 import { within } from '@testing-library/dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as catalogIndex from '@kaoto-next/camel-catalog/index.json';
+import { act } from 'react-dom/test-utils';
 
 describe('PipeErrorHandlerEditor', () => {
   let pipeErrorHandlerSchema: Record<string, unknown>;
@@ -32,7 +33,7 @@ describe('PipeErrorHandlerEditor', () => {
     expect(element).toBeFalsy();
   });
 
-  it('should render a form if sink ErrorHandler is selected', () => {
+  it('should render a form if sink ErrorHandler is selected', async () => {
     let model: Record<string, unknown> = {};
     render(
       <PipeErrorHandlerEditor
@@ -44,7 +45,9 @@ describe('PipeErrorHandlerEditor', () => {
       />,
     );
     const button = screen.getByRole('button');
-    fireEvent(button!, new MouseEvent('click', { bubbles: true }));
+    await act(async () => {
+      fireEvent(button!, new MouseEvent('click', { bubbles: true }));
+    });
     const options = screen.getAllByTestId(/pipe-error-handler-select-option.*/);
     options.forEach((option) => {
       if (option.innerHTML.includes('Log Pipe ErrorHandler')) {

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
@@ -324,18 +324,18 @@ describe('CanvasForm', () => {
       const button = screen
         .getAllByRole('button')
         .filter((button) => button.innerHTML.includes(SchemaService.DROPDOWN_PLACEHOLDER));
-      act(() => {
+      await act(async () => {
         fireEvent.click(button[0]);
       });
       const avro = screen.getByTestId('dataformat-dropdownitem-avro');
-      act(() => {
+      await act(async () => {
         fireEvent.click(avro.getElementsByTagName('button')[0]);
       });
       expect(camelRoute.from.steps[0].marshal!.avro).toBeDefined();
       expect(camelRoute.from.steps[0].marshal!.id).toEqual('ms');
 
       const idInput = screen.getAllByRole('textbox').filter((textbox) => textbox.getAttribute('label') === 'Id');
-      act(() => {
+      await act(async () => {
         fireEvent.input(idInput[1], { target: { value: 'modified' } });
       });
       expect(camelRoute.from.steps[0].marshal!.avro).toBeDefined();
@@ -372,7 +372,7 @@ describe('CanvasForm', () => {
         </EntitiesContext.Provider>,
       );
       const idInput = screen.getAllByRole('textbox').filter((textbox) => textbox.getAttribute('label') === 'Id');
-      act(() => {
+      await act(async () => {
         fireEvent.input(idInput[0], { target: { value: 'modified' } });
       });
       expect(camelRoute.from.steps[0].marshal!.avro).toBeUndefined();
@@ -381,11 +381,11 @@ describe('CanvasForm', () => {
       const button = screen
         .getAllByRole('button')
         .filter((button) => button.innerHTML.includes(SchemaService.DROPDOWN_PLACEHOLDER));
-      act(() => {
+      await act(async () => {
         fireEvent.click(button[0]);
       });
       const avro = screen.getByTestId('dataformat-dropdownitem-avro');
-      act(() => {
+      await act(async () => {
         fireEvent.click(avro.getElementsByTagName('button')[0]);
       });
       expect(camelRoute.from.steps[0].marshal!.avro).toBeDefined();
@@ -426,18 +426,18 @@ describe('CanvasForm', () => {
       const button = screen
         .getAllByRole('button')
         .filter((button) => button.innerHTML.includes(SchemaService.DROPDOWN_PLACEHOLDER));
-      act(() => {
+      await act(async () => {
         fireEvent.click(button[0]);
       });
       const avro = screen.getByTestId('loadbalancer-dropdownitem-weighted');
-      act(() => {
+      await act(async () => {
         fireEvent.click(avro.getElementsByTagName('button')[0]);
       });
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeDefined();
       expect(camelRoute.from.steps[0].loadBalance!.id).toEqual('lb');
 
       const idInput = screen.getAllByRole('textbox').filter((textbox) => textbox.getAttribute('label') === 'Id');
-      act(() => {
+      await act(async () => {
         fireEvent.input(idInput[1], { target: { value: 'modified' } });
       });
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeDefined();
@@ -474,21 +474,20 @@ describe('CanvasForm', () => {
         </EntitiesContext.Provider>,
       );
       const idInput = screen.getAllByRole('textbox').filter((textbox) => textbox.getAttribute('label') === 'Id');
-      act(() => {
+      await act(async () => {
         fireEvent.input(idInput[0], { target: { value: 'modified' } });
       });
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeUndefined();
       expect(camelRoute.from.steps[0].loadBalance!.id).toEqual('modified');
 
-      screen.debug(screen.getAllByRole('button'));
       const button = screen
         .getAllByRole('button')
         .filter((button) => button.innerHTML.includes(SchemaService.DROPDOWN_PLACEHOLDER));
-      act(() => {
+      await act(async () => {
         fireEvent.click(button[0]);
       });
       const avro = screen.getByTestId('loadbalancer-dropdownitem-weighted');
-      act(() => {
+      await act(async () => {
         fireEvent.click(avro.getElementsByTagName('button')[0]);
       });
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeDefined();

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.test.tsx
@@ -1,11 +1,11 @@
-import { FlowsMenu } from './FlowsMenu';
-import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { EntitiesContextResult } from '../../../../hooks';
 import { SourceSchemaType } from '../../../../models/camel';
 import { CamelRouteVisualEntity } from '../../../../models/visualization/flows';
-import { EntitiesContextResult } from '../../../../hooks';
-import { EntitiesContext } from '../../../../providers/entities.provider';
-import { VisibleFlowsContext, VisibleFLowsContextResult } from '../../../../providers/visible-flows.provider';
 import { IVisibleFlows } from '../../../../models/visualization/flows/flows-visibility';
+import { EntitiesContext } from '../../../../providers/entities.provider';
+import { VisibleFLowsContextResult, VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
+import { FlowsMenu } from './FlowsMenu';
 
 const FlowsMenuWithContext: React.FunctionComponent<{
   visibleFlows?: IVisibleFlows;
@@ -29,7 +29,7 @@ const FlowsMenuWithContext: React.FunctionComponent<{
 };
 
 describe('FlowsMenu.tsx', () => {
-  test('should open the flows list when clicking the dropdown', async () => {
+  it('should open the flows list when clicking the dropdown', async () => {
     const wrapper = render(<FlowsMenuWithContext />);
     const dropdown = await wrapper.findByTestId('flows-list-dropdown');
 
@@ -39,13 +39,13 @@ describe('FlowsMenu.tsx', () => {
     });
 
     /** Wait for the List to appear */
-    waitFor(() => {
+    await act(async () => {
       const flowsList = wrapper.queryByTestId('flows-list-table');
       expect(flowsList).toBeInTheDocument();
     });
   });
 
-  test('should open the flows list when clicking the action button', async () => {
+  it('should open the flows list when clicking the action button', async () => {
     const wrapper = render(<FlowsMenuWithContext />);
     const dropdown = await wrapper.findByTestId('flows-list-btn');
 
@@ -55,13 +55,13 @@ describe('FlowsMenu.tsx', () => {
     });
 
     /** Wait for the List to appear */
-    waitFor(() => {
+    await act(async () => {
       const flowsList = wrapper.queryByTestId('flows-list-table');
       expect(flowsList).toBeInTheDocument();
     });
   });
 
-  test('should close the flows list when pressing ESC', async () => {
+  it('should close the flows list when pressing ESC', async () => {
     const wrapper = render(<FlowsMenuWithContext />);
     const dropdown = await wrapper.findByTestId('flows-list-btn');
 
@@ -78,33 +78,33 @@ describe('FlowsMenu.tsx', () => {
     });
 
     /** Wait for the List to appear */
-    waitFor(() => {
+    await act(async () => {
       expect(flowsList).not.toBeInTheDocument();
     });
   });
 
-  test('should render the route id when a single route is visible', async () => {
+  it('should render the route id when a single route is visible', async () => {
     const wrapper = render(<FlowsMenuWithContext />);
     const routeId = await wrapper.findByTestId('flows-list-route-id');
 
     expect(routeId).toHaveTextContent('entity1');
   });
 
-  test('should NOT render the route id but "Routes" when there is no flow visible', async () => {
+  it('should NOT render the route id but "Routes" when there is no flow visible', async () => {
     const wrapper = render(<FlowsMenuWithContext visibleFlows={{ ['entity1']: false, ['entity2']: false }} />);
     const routeId = await wrapper.findByTestId('flows-list-route-id');
 
     expect(routeId).toHaveTextContent('Routes');
   });
 
-  test('should NOT render the route id but "Routes" when there is more than 1 flow visible', async () => {
+  it('should NOT render the route id but "Routes" when there is more than 1 flow visible', async () => {
     const wrapper = render(<FlowsMenuWithContext visibleFlows={{ ['entity1']: true, ['entity2']: true }} />);
     const routeId = await wrapper.findByTestId('flows-list-route-id');
 
     expect(routeId).toHaveTextContent('Routes');
   });
 
-  test('should render the visible routes count', async () => {
+  it('should render the visible routes count', async () => {
     const wrapper = render(<FlowsMenuWithContext visibleFlows={{ ['entity1']: true, ['entity2']: true }} />);
     const routeCount = await wrapper.findByTestId('flows-list-route-count');
     expect(routeCount).toHaveTextContent('2/2');