diff --git a/kafka-ui-react-app/package.json b/kafka-ui-react-app/package.json index 7420b8bddf..fa1842dedb 100644 --- a/kafka-ui-react-app/package.json +++ b/kafka-ui-react-app/package.json @@ -82,7 +82,7 @@ "@openapitools/openapi-generator-cli": "^2.5.1", "@testing-library/dom": "^8.11.1", "@testing-library/jest-dom": "^5.16.4", - "@testing-library/user-event": "^13.5.0", + "@testing-library/user-event": "^14.4.3", "@types/eventsource": "^1.1.8", "@types/jest": "^29.0.1", "@types/lodash": "^4.14.172", diff --git a/kafka-ui-react-app/pnpm-lock.yaml b/kafka-ui-react-app/pnpm-lock.yaml index aabb45ce34..88fcfac42e 100644 --- a/kafka-ui-react-app/pnpm-lock.yaml +++ b/kafka-ui-react-app/pnpm-lock.yaml @@ -19,7 +19,7 @@ specifiers: '@testing-library/dom': ^8.11.1 '@testing-library/jest-dom': ^5.16.4 '@testing-library/react': ^13.2.0 - '@testing-library/user-event': ^13.5.0 + '@testing-library/user-event': ^14.4.3 '@types/eventsource': ^1.1.8 '@types/jest': ^29.0.1 '@types/lodash': ^4.14.172 @@ -144,7 +144,7 @@ devDependencies: '@openapitools/openapi-generator-cli': 2.5.1 '@testing-library/dom': 8.13.0 '@testing-library/jest-dom': 5.16.4 - '@testing-library/user-event': 13.5.0_tlwynutqiyp5mns3woioasuxnq + '@testing-library/user-event': 14.4.3_tlwynutqiyp5mns3woioasuxnq '@types/eventsource': 1.1.8 '@types/jest': 29.0.1 '@types/lodash': 4.14.177 @@ -3337,13 +3337,12 @@ packages: react-dom: 18.1.0_react@18.1.0 dev: false - /@testing-library/user-event/13.5.0_tlwynutqiyp5mns3woioasuxnq: - resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==} - engines: {node: '>=10', npm: '>=6'} + /@testing-library/user-event/14.4.3_tlwynutqiyp5mns3woioasuxnq: + resolution: {integrity: sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==} + engines: {node: '>=12', npm: '>=6'} peerDependencies: '@testing-library/dom': '>=7.21.4' dependencies: - '@babel/runtime': 7.17.9 '@testing-library/dom': 8.13.0 dev: true diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx index bb48fde32a..b8ae5bcd58 100644 --- a/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, WithRoute } from 'lib/testHelpers'; import { screen } from '@testing-library/dom'; import { clusterBrokerPath } from 'lib/paths'; -import { act } from '@testing-library/react'; import { brokerLogDirsPayload } from 'lib/fixtures/brokers'; import { useBrokerLogDirs } from 'lib/hooks/api/brokers'; import { BrokerLogdirs } from 'generated-sources'; @@ -20,16 +19,14 @@ describe('BrokerLogdir Component', () => { (useBrokerLogDirs as jest.Mock).mockImplementation(() => ({ data: payload, })); - await act(() => { - render( - - - , - { - initialEntries: [clusterBrokerPath(clusterName, brokerId)], - } - ); - }); + await render( + + + , + { + initialEntries: [clusterBrokerPath(clusterName, brokerId)], + } + ); }; it('shows warning when server returns undefined logDirs response', async () => { diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/Configs/__test__/Configs.spec.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/Configs/__test__/Configs.spec.tsx index 500e65cfdc..d82065eb32 100644 --- a/kafka-ui-react-app/src/components/Brokers/Broker/Configs/__test__/Configs.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Broker/Configs/__test__/Configs.spec.tsx @@ -6,7 +6,6 @@ import { useBrokerConfig } from 'lib/hooks/api/brokers'; import { brokerConfigPayload } from 'lib/fixtures/brokers'; import Configs from 'components/Brokers/Broker/Configs/Configs'; import userEvent from '@testing-library/user-event'; -import { act } from '@testing-library/react'; const clusterName = 'Cluster_Name'; const brokerId = 'Broker_Id'; @@ -42,9 +41,7 @@ describe('Configs', () => { }); it('updates textbox value', async () => { - await act(() => { - userEvent.click(screen.getAllByLabelText('editAction')[0]); - }); + await userEvent.click(screen.getAllByLabelText('editAction')[0]); const textbox = screen.getByLabelText('inputValue'); expect(textbox).toBeInTheDocument(); @@ -59,9 +56,9 @@ describe('Configs', () => { screen.getByRole('button', { name: 'cancelAction' }) ).toBeInTheDocument(); - await act(() => { - userEvent.click(screen.getByRole('button', { name: 'confirmAction' })); - }); + await userEvent.click( + screen.getByRole('button', { name: 'confirmAction' }) + ); expect( screen.getByText('Are you sure you want to change the value?') diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx index b90cef0a43..b11d477b60 100644 --- a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, WithRoute } from 'lib/testHelpers'; import { screen, waitFor } from '@testing-library/dom'; import { clusterBrokerPath, clusterBrokersPath } from 'lib/paths'; -import { act } from '@testing-library/react'; import BrokersList from 'components/Brokers/BrokersList/BrokersList'; import userEvent from '@testing-library/user-event'; import { useBrokers } from 'lib/hooks/api/brokers'; @@ -57,9 +56,8 @@ describe('BrokersList Component', () => { }); it('opens broker when row clicked', async () => { renderComponent(); - await act(() => { - userEvent.click(screen.getByRole('cell', { name: '0' })); - }); + await userEvent.click(screen.getByRole('cell', { name: '0' })); + await waitFor(() => expect(mockedUsedNavigate).toBeCalledWith( clusterBrokerPath(clusterName, '0') diff --git a/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx b/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx index b718db8b29..9fcb77a79a 100644 --- a/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx +++ b/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx @@ -13,7 +13,6 @@ import { clusterSchemasPath, clusterTopicsPath, } from 'lib/paths'; -import { act } from 'react-dom/test-utils'; import { useClusters } from 'lib/hooks/api/clusters'; import { onlineClusterPayload } from 'lib/fixtures/clusters'; @@ -54,14 +53,12 @@ describe('Cluster', () => { (useClusters as jest.Mock).mockImplementation(() => ({ data: payload, })); - await act(() => { - render( - - - , - { initialEntries: [pathname] } - ); - }); + await render( + + + , + { initialEntries: [pathname] } + ); }; it('renders Brokers', async () => { diff --git a/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx b/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx index 878e8bcee6..c3c4cff8f1 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx @@ -33,10 +33,10 @@ const expectActionButtonsExists = () => { expect(screen.getByText('Restart Failed Tasks')).toBeInTheDocument(); expect(screen.getByText('Delete')).toBeInTheDocument(); }; -const afterClickDropDownButton = () => { +const afterClickDropDownButton = async () => { const dropDownButton = screen.getAllByRole('button'); expect(dropDownButton.length).toEqual(1); - userEvent.click(dropDownButton[0]); + await userEvent.click(dropDownButton[0]); }; describe('Actions', () => { afterEach(() => { @@ -61,48 +61,48 @@ describe('Actions', () => { { initialEntries: [path] } ); - it('renders buttons when paused', () => { + it('renders buttons when paused', async () => { (useConnector as jest.Mock).mockImplementation(() => ({ data: set({ ...connector }, 'status.state', ConnectorState.PAUSED), })); renderComponent(); - afterClickDropDownButton(); + await afterClickDropDownButton(); expect(screen.getAllByRole('menuitem').length).toEqual(5); expect(screen.getByText('Resume')).toBeInTheDocument(); expect(screen.queryByText('Pause')).not.toBeInTheDocument(); expectActionButtonsExists(); }); - it('renders buttons when failed', () => { + it('renders buttons when failed', async () => { (useConnector as jest.Mock).mockImplementation(() => ({ data: set({ ...connector }, 'status.state', ConnectorState.FAILED), })); renderComponent(); - afterClickDropDownButton(); + await afterClickDropDownButton(); expect(screen.getAllByRole('menuitem').length).toEqual(4); expect(screen.queryByText('Resume')).not.toBeInTheDocument(); expect(screen.queryByText('Pause')).not.toBeInTheDocument(); expectActionButtonsExists(); }); - it('renders buttons when unassigned', () => { + it('renders buttons when unassigned', async () => { (useConnector as jest.Mock).mockImplementation(() => ({ data: set({ ...connector }, 'status.state', ConnectorState.UNASSIGNED), })); renderComponent(); - afterClickDropDownButton(); + await afterClickDropDownButton(); expect(screen.getAllByRole('menuitem').length).toEqual(4); expect(screen.queryByText('Resume')).not.toBeInTheDocument(); expect(screen.queryByText('Pause')).not.toBeInTheDocument(); expectActionButtonsExists(); }); - it('renders buttons when running connector action', () => { + it('renders buttons when running connector action', async () => { (useConnector as jest.Mock).mockImplementation(() => ({ data: set({ ...connector }, 'status.state', ConnectorState.RUNNING), })); renderComponent(); - afterClickDropDownButton(); + await afterClickDropDownButton(); expect(screen.getAllByRole('menuitem').length).toEqual(5); expect(screen.queryByText('Resume')).not.toBeInTheDocument(); expect(screen.getByText('Pause')).toBeInTheDocument(); @@ -118,34 +118,34 @@ describe('Actions', () => { it('opens confirmation modal when delete button clicked', async () => { renderComponent(); - afterClickDropDownButton(); - await waitFor(() => + await afterClickDropDownButton(); + await waitFor(async () => userEvent.click(screen.getByRole('menuitem', { name: 'Delete' })) ); expect(screen.getByRole('dialog')).toBeInTheDocument(); }); - it('calls restartConnector when restart button clicked', () => { + it('calls restartConnector when restart button clicked', async () => { const restartConnector = jest.fn(); (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({ mutateAsync: restartConnector, })); renderComponent(); - afterClickDropDownButton(); - userEvent.click( + await afterClickDropDownButton(); + await userEvent.click( screen.getByRole('menuitem', { name: 'Restart Connector' }) ); expect(restartConnector).toHaveBeenCalledWith(ConnectorAction.RESTART); }); - it('calls restartAllTasks', () => { + it('calls restartAllTasks', async () => { const restartAllTasks = jest.fn(); (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({ mutateAsync: restartAllTasks, })); renderComponent(); - afterClickDropDownButton(); - userEvent.click( + await afterClickDropDownButton(); + await userEvent.click( screen.getByRole('menuitem', { name: 'Restart All Tasks' }) ); expect(restartAllTasks).toHaveBeenCalledWith( @@ -153,14 +153,14 @@ describe('Actions', () => { ); }); - it('calls restartFailedTasks', () => { + it('calls restartFailedTasks', async () => { const restartFailedTasks = jest.fn(); (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({ mutateAsync: restartFailedTasks, })); renderComponent(); - afterClickDropDownButton(); - userEvent.click( + await afterClickDropDownButton(); + await userEvent.click( screen.getByRole('menuitem', { name: 'Restart Failed Tasks' }) ); expect(restartFailedTasks).toHaveBeenCalledWith( @@ -168,18 +168,18 @@ describe('Actions', () => { ); }); - it('calls pauseConnector when pause button clicked', () => { + it('calls pauseConnector when pause button clicked', async () => { const pauseConnector = jest.fn(); (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({ mutateAsync: pauseConnector, })); renderComponent(); - afterClickDropDownButton(); - userEvent.click(screen.getByRole('menuitem', { name: 'Pause' })); + await afterClickDropDownButton(); + await userEvent.click(screen.getByRole('menuitem', { name: 'Pause' })); expect(pauseConnector).toHaveBeenCalledWith(ConnectorAction.PAUSE); }); - it('calls resumeConnector when resume button clicked', () => { + it('calls resumeConnector when resume button clicked', async () => { const resumeConnector = jest.fn(); (useConnector as jest.Mock).mockImplementation(() => ({ data: set({ ...connector }, 'status.state', ConnectorState.PAUSED), @@ -188,8 +188,8 @@ describe('Actions', () => { mutateAsync: resumeConnector, })); renderComponent(); - afterClickDropDownButton(); - userEvent.click(screen.getByRole('menuitem', { name: 'Resume' })); + await afterClickDropDownButton(); + await userEvent.click(screen.getByRole('menuitem', { name: 'Resume' })); expect(resumeConnector).toHaveBeenCalledWith(ConnectorAction.RESUME); }); }); diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/Tasks.spec.tsx b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/Tasks.spec.tsx index da38068a20..dba12d4b0e 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/Tasks.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/Tasks.spec.tsx @@ -57,7 +57,7 @@ describe('Tasks', () => { ).toBeInTheDocument(); }); - it('renders truncates long trace and expands', () => { + it('renders truncates long trace and expands', async () => { renderComponent(tasks); const trace = tasks[2]?.status?.trace || ''; @@ -72,7 +72,7 @@ describe('Tasks', () => { // Full trace is not visible expect(expandedDetails).not.toBeInTheDocument(); - userEvent.click(thirdRow); + await userEvent.click(thirdRow); expect( screen.getByRole('row', { @@ -82,7 +82,7 @@ describe('Tasks', () => { }); describe('Action button', () => { - const expectDropdownExists = () => { + const expectDropdownExists = async () => { const firstTaskRow = screen.getByRole('row', { name: '1 kafka-connect0:8083 RUNNING', }); @@ -91,13 +91,13 @@ describe('Tasks', () => { name: 'Dropdown Toggle', }); expect(extBtn).toBeEnabled(); - userEvent.click(extBtn); + await userEvent.click(extBtn); expect(screen.getByRole('menu')).toBeInTheDocument(); }; - it('renders action button', () => { + it('renders action button', async () => { renderComponent(tasks); - expectDropdownExists(); + await expectDropdownExists(); expect( screen.getAllByRole('button', { name: 'Dropdown Toggle' }).length ).toEqual(tasks.length); @@ -108,11 +108,11 @@ describe('Tasks', () => { it('works as expected', async () => { renderComponent(tasks); - expectDropdownExists(); + await expectDropdownExists(); const actionBtn = screen.getAllByRole('menuitem'); expect(actionBtn[0]).toHaveTextContent('Restart task'); - userEvent.click(actionBtn[0]); + await userEvent.click(actionBtn[0]); expect( screen.getByText('Are you sure you want to restart the task?') ).toBeInTheDocument(); diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx b/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx index 04a7ba8150..9de28f38ff 100644 --- a/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx @@ -5,7 +5,7 @@ import ClusterContext, { initialValue, } from 'components/contexts/ClusterContext'; import List from 'components/Connect/List/List'; -import { act, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { render, WithRoute } from 'lib/testHelpers'; import { clusterConnectConnectorPath, clusterConnectorsPath } from 'lib/paths'; @@ -52,13 +52,11 @@ describe('Connectors List', () => { it('opens broker when row clicked', async () => { renderComponent(); - await act(() => { - userEvent.click( - screen.getByRole('row', { - name: 'hdfs-source-connector first SOURCE FileStreamSource a b c RUNNING 2 of 2', - }) - ); - }); + await userEvent.click( + screen.getByRole('row', { + name: 'hdfs-source-connector first SOURCE FileStreamSource a b c RUNNING 2 of 2', + }) + ); await waitFor(() => expect(mockedUsedNavigate).toBeCalledWith( clusterConnectConnectorPath( @@ -105,7 +103,7 @@ describe('Connectors List', () => { const submitButton = screen.getAllByRole('button', { name: 'Confirm', })[0]; - await act(() => userEvent.click(submitButton)); + await userEvent.click(submitButton); expect(mockDelete).toHaveBeenCalledWith(); }); diff --git a/kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx b/kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx index bbb710a8af..3b93c2d86c 100644 --- a/kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx @@ -31,16 +31,14 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({ describe('New', () => { const clusterName = 'my-cluster'; const simulateFormSubmit = async () => { - await act(() => { - userEvent.type( - screen.getByPlaceholderText('Connector Name'), - 'my-connector' - ); - userEvent.type( - screen.getByPlaceholderText('json'), - '{"class":"MyClass"}'.replace(/[{[]/g, '$&$&') - ); - }); + await userEvent.type( + screen.getByPlaceholderText('Connector Name'), + 'my-connector' + ); + await userEvent.type( + screen.getByPlaceholderText('json'), + '{"class":"MyClass"}'.replace(/[{[]/g, '$&$&') + ); expect(screen.getByPlaceholderText('json')).toHaveValue( '{"class":"MyClass"}' diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx index 963600b797..9b0682f04f 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx @@ -33,25 +33,24 @@ const resetConsumerGroupOffsetsMockCalled = () => ).toBeTruthy(); const selectresetTypeAndPartitions = async (resetType: string) => { - userEvent.click(screen.getByLabelText('Reset Type')); - userEvent.click(screen.getByText(resetType)); - userEvent.click(screen.getByText('Select...')); - await waitFor(() => { - userEvent.click(screen.getByText('Partition #0')); - }); + await userEvent.click(screen.getByLabelText('Reset Type')); + await userEvent.click(screen.getByText(resetType)); + await userEvent.click(screen.getByText('Select...')); + + await userEvent.click(screen.getByText('Partition #0')); }; const resetConsumerGroupOffsetsWith = async ( resetType: string, offset: null | number = null ) => { - userEvent.click(screen.getByLabelText('Reset Type')); + await userEvent.click(screen.getByLabelText('Reset Type')); const options = screen.getAllByText(resetType); - userEvent.click(options.length > 1 ? options[1] : options[0]); - userEvent.click(screen.getByText('Select...')); - await waitFor(() => { - userEvent.click(screen.getByText('Partition #0')); - }); + await userEvent.click(options.length > 1 ? options[1] : options[0]); + await userEvent.click(screen.getByText('Select...')); + + await userEvent.click(screen.getByText('Partition #0')); + fetchMock.postOnce( `/api/clusters/${clusterName}/consumer-groups/${groupId}/offsets`, 200, @@ -64,7 +63,7 @@ const resetConsumerGroupOffsetsWith = async ( }, } ); - userEvent.click(screen.getByText('Submit')); + await userEvent.click(screen.getByText('Submit')); await waitFor(() => resetConsumerGroupOffsetsMockCalled()); }; @@ -116,14 +115,14 @@ describe('ResetOffsets', () => { }, } ); - await waitFor(() => { - userEvent.click(screen.getAllByLabelText('Partition #0')[1]); - }); - await waitFor(() => { - userEvent.keyboard('10'); - }); - userEvent.click(screen.getByText('Submit')); - await waitFor(() => resetConsumerGroupOffsetsMockCalled()); + + await userEvent.click(screen.getAllByLabelText('Partition #0')[1]); + + await userEvent.keyboard('10'); + + await userEvent.click(screen.getByText('Submit')); + + await resetConsumerGroupOffsetsMockCalled(); }); it('calls resetConsumerGroupOffsets with TIMESTAMP', async () => { await selectresetTypeAndPartitions('TIMESTAMP'); @@ -139,7 +138,7 @@ describe('ResetOffsets', () => { }, } ); - userEvent.click(screen.getByText('Submit')); + await userEvent.click(screen.getByText('Submit')); await waitFor(() => expect( screen.getByText("This field shouldn't be empty!") diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx index e086de8b63..195e71411a 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx @@ -13,7 +13,6 @@ import { waitForElementToBeRemoved, } from '@testing-library/dom'; import userEvent from '@testing-library/user-event'; -import { act } from '@testing-library/react'; const clusterName = 'cluster1'; const { groupId } = consumerGroupPayload; @@ -71,7 +70,7 @@ describe('Details component', () => { }); it('handles [Reset offset] click', async () => { - userEvent.click(screen.getByText('Reset offset')); + await userEvent.click(screen.getByText('Reset offset')); expect(mockNavigate).toHaveBeenLastCalledWith( clusterConsumerGroupResetRelativePath ); @@ -86,19 +85,19 @@ describe('Details component', () => { it('shows confirmation modal on consumer group delete', async () => { expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); - userEvent.click(screen.getByText('Delete consumer group')); + await userEvent.click(screen.getByText('Delete consumer group')); await waitFor(() => expect(screen.queryByRole('dialog')).toBeInTheDocument() ); - userEvent.click(screen.getByText('Cancel')); + await userEvent.click(screen.getByText('Cancel')); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); }); it('handles [Delete consumer group] click', async () => { expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); - await act(() => { - userEvent.click(screen.getByText('Delete consumer group')); - }); + + await userEvent.click(screen.getByText('Delete consumer group')); + expect(screen.queryByRole('dialog')).toBeInTheDocument(); const deleteConsumerGroupMock = fetchMock.deleteOnce( `/api/clusters/${clusterName}/consumer-groups/${groupId}`, diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx index 5bbce7a927..c4906e9209 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx @@ -39,8 +39,8 @@ describe('ListItem', () => { expect(screen.getByRole('row')).toBeInTheDocument(); }); - it('should renders list item with topic content open', () => { - userEvent.click(screen.getAllByRole('cell')[0].children[0]); + it('should renders list item with topic content open', async () => { + await userEvent.click(screen.getAllByRole('cell')[0].children[0]); expect(screen.getByText('Consumer ID')).toBeInTheDocument(); }); }); diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/__test__/List.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List/__test__/List.spec.tsx index 500549c0aa..a1393c2ccd 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/List/__test__/List.spec.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/__test__/List.spec.tsx @@ -48,10 +48,10 @@ describe('List', () => { expect(screen.getByText('groupId2')).toBeInTheDocument(); }); - it('handles onRowClick', () => { + it('handles onRowClick', async () => { const row = screen.getByRole('row', { name: 'groupId1 0 1 1' }); expect(row).toBeInTheDocument(); - userEvent.click(row); + await userEvent.click(row); expect(mockedUsedNavigate).toHaveBeenCalledWith( clusterConsumerGroupDetailsPath(':clusterName', 'groupId1') ); diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx index dfdcb34179..2d6f967e2c 100644 --- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx +++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { act, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import ClustersWidget from 'components/Dashboard/ClustersWidget/ClustersWidget'; import userEvent from '@testing-library/user-event'; import { render } from 'lib/testHelpers'; @@ -16,18 +16,16 @@ describe('ClustersWidget', () => { data: clustersPayload, isSuccess: true, })); - await act(() => { - render(); - }); + await render(); }); it('renders clusterWidget list', () => { expect(screen.getAllByRole('row').length).toBe(3); }); - it('hides online cluster widgets', () => { + it('hides online cluster widgets', async () => { expect(screen.getAllByRole('row').length).toBe(3); - userEvent.click(screen.getByRole('checkbox')); + await userEvent.click(screen.getByRole('checkbox')); expect(screen.getAllByRole('row').length).toBe(2); }); diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/KsqlDbItem/__test__/KsqlDbItem.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/KsqlDbItem/__test__/KsqlDbItem.spec.tsx index 366f01c020..ea6705b6a4 100644 --- a/kafka-ui-react-app/src/components/KsqlDb/List/KsqlDbItem/__test__/KsqlDbItem.spec.tsx +++ b/kafka-ui-react-app/src/components/KsqlDb/List/KsqlDbItem/__test__/KsqlDbItem.spec.tsx @@ -7,7 +7,6 @@ import KsqlDbItem, { } from 'components/KsqlDb/List/KsqlDbItem/KsqlDbItem'; import { screen } from '@testing-library/dom'; import { fetchKsqlDbTablesPayload } from 'redux/reducers/ksqlDb/__test__/fixtures'; -import { act } from '@testing-library/react'; describe('KsqlDbItem', () => { const tablesPathname = clusterKsqlDbTablesPath(); @@ -27,37 +26,34 @@ describe('KsqlDbItem', () => { ); }; - it('renders progressbar when fetching tables and streams', async () => { - await act(() => renderComponent({ fetching: true })); + it('renders progressbar when fetching tables and streams', () => { + renderComponent({ fetching: true }); expect(screen.getByRole('progressbar')).toBeInTheDocument(); }); - it('show no text if no data found', async () => { - await act(() => renderComponent({})); + it('show no text if no data found', () => { + renderComponent({}); expect(screen.getByText('No tables or streams found')).toBeInTheDocument(); }); - it('renders with tables', async () => { - await act(() => - renderComponent({ - rows: { - tables: fetchKsqlDbTablesPayload.tables, - streams: [], - }, - }) - ); + it('renders with tables', () => { + renderComponent({ + rows: { + tables: fetchKsqlDbTablesPayload.tables, + streams: [], + }, + }); + expect(screen.getByRole('table').querySelectorAll('td')).toHaveLength(10); }); - it('renders with streams', async () => { - await act(() => - renderComponent({ - type: KsqlDbItemType.Streams, - rows: { - tables: [], - streams: fetchKsqlDbTablesPayload.streams, - }, - }) - ); + it('renders with streams', () => { + renderComponent({ + type: KsqlDbItemType.Streams, + rows: { + tables: [], + streams: fetchKsqlDbTablesPayload.streams, + }, + }); expect(screen.getByRole('table').querySelectorAll('td')).toHaveLength(10); }); }); diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/__test__/QueryForm.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/__test__/QueryForm.spec.tsx index 0b8aa60b78..76f8b21335 100644 --- a/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/__test__/QueryForm.spec.tsx +++ b/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/__test__/QueryForm.spec.tsx @@ -3,7 +3,6 @@ import React from 'react'; import QueryForm, { Props } from 'components/KsqlDb/Query/QueryForm/QueryForm'; import { screen, waitFor, within } from '@testing-library/dom'; import userEvent from '@testing-library/user-event'; -import { act } from '@testing-library/react'; const renderComponent = (props: Props) => render(); @@ -57,10 +56,9 @@ describe('QueryForm', () => { submitHandler: submitFn, }); - await act(() => - userEvent.click(screen.getByRole('button', { name: 'Execute' })) - ); - waitFor(() => { + await userEvent.click(screen.getByRole('button', { name: 'Execute' })); + + await waitFor(() => { expect(screen.getByText('ksql is a required field')).toBeInTheDocument(); expect(submitFn).not.toBeCalled(); }); @@ -76,12 +74,16 @@ describe('QueryForm', () => { submitHandler: submitFn, }); - await act(() => { - userEvent.paste(screen.getAllByRole('textbox')[0], 'show tables;'); - userEvent.paste(screen.getByRole('textbox', { name: 'key' }), 'test'); - userEvent.paste(screen.getByRole('textbox', { name: 'value' }), 'test'); - userEvent.click(screen.getByRole('button', { name: 'Execute' })); - }); + const textbox = screen.getAllByRole('textbox'); + textbox[0].focus(); + await userEvent.paste('show tables;'); + const key = screen.getByRole('textbox', { name: 'key' }); + key.focus(); + await userEvent.paste('test'); + const value = screen.getByRole('textbox', { name: 'value' }); + value.focus(); + await userEvent.paste('test'); + await userEvent.click(screen.getByRole('button', { name: 'Execute' })); expect( screen.queryByText('ksql is a required field') @@ -106,8 +108,8 @@ describe('QueryForm', () => { expect(screen.getByRole('button', { name: 'Clear results' })).toBeEnabled(); - await act(() => - userEvent.click(screen.getByRole('button', { name: 'Clear results' })) + await userEvent.click( + screen.getByRole('button', { name: 'Clear results' }) ); expect(clearFn).toBeCalled(); @@ -125,39 +127,12 @@ describe('QueryForm', () => { expect(screen.getByRole('button', { name: 'Stop query' })).toBeEnabled(); - await act(() => - userEvent.click(screen.getByRole('button', { name: 'Stop query' })) - ); + await userEvent.click(screen.getByRole('button', { name: 'Stop query' })); expect(cancelFn).toBeCalled(); }); - it('submits form with ctrl+enter on KSQL editor', async () => { - const submitFn = jest.fn(); - renderComponent({ - fetching: false, - hasResults: false, - handleClearResults: jest.fn(), - handleSSECancel: jest.fn(), - submitHandler: submitFn, - }); - - await act(() => { - userEvent.paste( - within(screen.getByLabelText('KSQL')).getByRole('textbox'), - 'show tables;' - ); - - userEvent.type( - within(screen.getByLabelText('KSQL')).getByRole('textbox'), - '{ctrl}{enter}' - ); - }); - - expect(submitFn.mock.calls.length).toBe(1); - }); - - it('adds new property', async () => { + it('add new property', async () => { renderComponent({ fetching: false, hasResults: false, @@ -168,11 +143,9 @@ describe('QueryForm', () => { const textbox = screen.getByLabelText('key'); await userEvent.type(textbox, 'prop_name'); - await act(() => { - userEvent.click( - screen.getByRole('button', { name: 'Add Stream Property' }) - ); - }); + await userEvent.click( + screen.getByRole('button', { name: 'Add Stream Property' }) + ); expect(screen.getAllByRole('textbox', { name: 'key' }).length).toEqual(2); }); @@ -185,11 +158,9 @@ describe('QueryForm', () => { submitHandler: jest.fn(), }); - await act(() => { - userEvent.click( - screen.getByRole('button', { name: 'Add Stream Property' }) - ); - }); + await userEvent.click( + screen.getByRole('button', { name: 'Add Stream Property' }) + ); expect(screen.getAllByRole('textbox', { name: 'key' }).length).toEqual(1); }); @@ -201,16 +172,18 @@ describe('QueryForm', () => { handleSSECancel: jest.fn(), submitHandler: jest.fn(), }); + const textBoxes = screen.getAllByRole('textbox', { name: 'key' }); + textBoxes[0].focus(); + await userEvent.paste('test'); + await userEvent.click( + screen.getByRole('button', { name: 'Add Stream Property' }) + ); + await userEvent.click(screen.getAllByLabelText('deleteProperty')[0]); - await act(() => { - userEvent.paste(screen.getByRole('textbox', { name: 'key' }), 'test'); - userEvent.click( - screen.getByRole('button', { name: 'Add Stream Property' }) - ); - }); - await act(() => { - userEvent.click(screen.getAllByLabelText('deleteProperty')[0]); - }); - expect(screen.getAllByRole('textbox', { name: 'key' }).length).toEqual(1); + await screen.getByRole('button', { name: 'Add Stream Property' }); + + await userEvent.click(screen.getAllByLabelText('deleteProperty')[0]); + + expect(textBoxes.length).toEqual(1); }); }); diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx index 985ebde5e5..705d86be5f 100644 --- a/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx +++ b/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx @@ -6,7 +6,6 @@ import Query, { import { screen } from '@testing-library/dom'; import fetchMock from 'fetch-mock'; import { clusterKsqlDbQueryPath } from 'lib/paths'; -import { act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; const clusterName = 'testLocal'; @@ -41,10 +40,10 @@ describe('Query', () => { }); const inputs = screen.getAllByRole('textbox'); const textAreaElement = inputs[0] as HTMLTextAreaElement; - await act(() => { - userEvent.paste(textAreaElement, 'show tables;'); - userEvent.click(screen.getByRole('button', { name: 'Execute' })); - }); + + textAreaElement.focus(); + await userEvent.paste('show tables;'); + await userEvent.click(screen.getByRole('button', { name: 'Execute' })); expect(mock.calls().length).toBe(1); }); @@ -59,18 +58,20 @@ describe('Query', () => { Object.defineProperty(window, 'EventSource', { value: EventSourceMock, }); - await act(() => { - const inputs = screen.getAllByRole('textbox'); - const textAreaElement = inputs[0] as HTMLTextAreaElement; - userEvent.paste(textAreaElement, 'show tables;'); - }); - await act(() => { - userEvent.paste(screen.getByLabelText('key'), 'key'); - userEvent.paste(screen.getByLabelText('value'), 'value'); - }); - await act(() => { - userEvent.click(screen.getByRole('button', { name: 'Execute' })); - }); + + const inputs = screen.getAllByRole('textbox'); + const textAreaElement = inputs[0] as HTMLTextAreaElement; + textAreaElement.focus(); + await userEvent.paste('show tables;'); + + const key = screen.getByLabelText('key'); + key.focus(); + await userEvent.paste('key'); + const value = screen.getByLabelText('value'); + value.focus(); + await userEvent.paste('value'); + + await userEvent.click(screen.getByRole('button', { name: 'Execute' })); expect(mock.calls().length).toBe(1); }); diff --git a/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx b/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx index 11d273c6ec..22bc1eabf5 100644 --- a/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx +++ b/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx @@ -19,19 +19,19 @@ describe('ClusterMenu', () => { const getKafkaConnect = () => screen.getByTitle('Kafka Connect'); const getCluster = () => screen.getByText(onlineClusterPayload.name); - it('renders cluster menu with default set of features', () => { + it('renders cluster menu with default set of features', async () => { render(setupComponent(onlineClusterPayload)); expect(getCluster()).toBeInTheDocument(); expect(getMenuItems().length).toEqual(1); - userEvent.click(getMenuItem()); + await userEvent.click(getMenuItem()); expect(getMenuItems().length).toEqual(4); expect(getBrokers()).toBeInTheDocument(); expect(getTopics()).toBeInTheDocument(); expect(getConsumers()).toBeInTheDocument(); }); - it('renders cluster menu with correct set of features', () => { + it('renders cluster menu with correct set of features', async () => { render( setupComponent({ ...onlineClusterPayload, @@ -43,7 +43,7 @@ describe('ClusterMenu', () => { }) ); expect(getMenuItems().length).toEqual(1); - userEvent.click(getMenuItem()); + await userEvent.click(getMenuItem()); expect(getMenuItems().length).toEqual(7); expect(getBrokers()).toBeInTheDocument(); @@ -64,7 +64,7 @@ describe('ClusterMenu', () => { expect(getTopics()).toBeInTheDocument(); expect(getConsumers()).toBeInTheDocument(); }); - it('makes Kafka Connect link active', () => { + it('makes Kafka Connect link active', async () => { render( setupComponent({ ...onlineClusterPayload, @@ -73,7 +73,7 @@ describe('ClusterMenu', () => { { initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)] } ); expect(getMenuItems().length).toEqual(1); - userEvent.click(getMenuItem()); + await userEvent.click(getMenuItem()); expect(getMenuItems().length).toEqual(5); const kafkaConnect = getKafkaConnect(); diff --git a/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx b/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx index 023fdfdba7..582c341411 100644 --- a/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx +++ b/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx @@ -2,7 +2,6 @@ import React from 'react'; import Nav from 'components/Nav/Nav'; import { screen } from '@testing-library/react'; import { render } from 'lib/testHelpers'; -import { act } from 'react-dom/test-utils'; import { Cluster } from 'generated-sources'; import { useClusters } from 'lib/hooks/api/clusters'; import { @@ -15,28 +14,26 @@ jest.mock('lib/hooks/api/clusters', () => ({ })); describe('Nav', () => { - const renderComponent = async (payload: Cluster[] = []) => { + const renderComponent = (payload: Cluster[] = []) => { (useClusters as jest.Mock).mockImplementation(() => ({ data: payload, isSuccess: true, })); - await act(() => { - render(