0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Testing library update to 14.4.3 (#2741)

Browse source 
* Update RTL to v14.4.3

* fixed test cases QueryForm.spec.tsx, SchemaVersion.spec.tsx

Co-authored-by: Oleg Shur <workshur@gmail.com>
Co-authored-by: davitbejanyan <dbejanyan@provectus.com>
This commit is contained in:
David 2022-10-26 23:15:25 +04:00 • committed by GitHub
parent e67d940981
commit b43ba68405
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 612 additions and 626 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
kafka-ui-react-app/package.json
View file

@ -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",

11
kafka-ui-react-app/pnpm-lock.yaml generated
View file

@ -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

19
kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx
View file

@ -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(
<WithRoute path={clusterBrokerPath()}>
<BrokerLogdir />
</WithRoute>,
{
initialEntries: [clusterBrokerPath(clusterName, brokerId)],
}
);
});
await render(
<WithRoute path={clusterBrokerPath()}>
<BrokerLogdir />
</WithRoute>,
{
initialEntries: [clusterBrokerPath(clusterName, brokerId)],
}
);
};
it('shows warning when server returns undefined logDirs response', async () => {

11
kafka-ui-react-app/src/components/Brokers/Broker/Configs/__test__/Configs.spec.tsx
View file

@ -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?')

6
kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
View file

@ -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')

15
kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx
View file

@ -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(
<WithRoute path={`${clusterPath()}/*`}>
<ClusterComponent />
</WithRoute>,
{ initialEntries: [pathname] }
);
});
await render(
<WithRoute path={`${clusterPath()}/*`}>
<ClusterComponent />
</WithRoute>,
{ initialEntries: [pathname] }
);
};
it('renders Brokers', async () => {

54
kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx
View file

@ -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);
});
});

16
kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/Tasks.spec.tsx
View file

@ -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();

16
kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx
View file

@ -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();
});

18
kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx
View file

@ -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"}'

43
kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx
View file

@ -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!")

13
kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
View file

@ -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}`,

4
kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx
View file

@ -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();
});
});

4
kafka-ui-react-app/src/components/ConsumerGroups/List/__test__/List.spec.tsx
View file

@ -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')
);

10
kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
View file

@ -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(<ClustersWidget />);
});
await render(<ClustersWidget />);
});
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);
});

44
kafka-ui-react-app/src/components/KsqlDb/List/KsqlDbItem/__test__/KsqlDbItem.spec.tsx
View file

@ -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);
});
});

97
kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/__test__/QueryForm.spec.tsx
View file

@ -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(<QueryForm {...props} />);
@ -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);
});
});

35
kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx
View file

@ -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);
});

12
kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx
View file

@ -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();

15
kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx
View file

@ -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(<Nav />);
});
render(<Nav />);
};
const getDashboard = () => screen.getByText('Dashboard');
const getMenuItemsCount = () => screen.getAllByRole('menuitem').length;
it('renders loader', async () => {
await renderComponent();
it('renders loader', () => {
renderComponent();
expect(getMenuItemsCount()).toEqual(1);
expect(getDashboard()).toBeInTheDocument();
});
it('renders ClusterMenu', async () => {
await renderComponent([onlineClusterPayload, offlineClusterPayload]);
it('renders ClusterMenu', () => {
renderComponent([onlineClusterPayload, offlineClusterPayload]);
expect(screen.getAllByRole('menu').length).toEqual(3);
expect(getMenuItemsCount()).toEqual(3);
expect(getDashboard()).toBeInTheDocument();

4
kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
View file

@ -56,9 +56,7 @@ describe('Details', () => {
schemasAPIVersionsUrl,
404
);
await act(() => {
renderComponent();
});
await renderComponent();
await waitFor(() => {
expect(schemasAPILatestMock.called()).toBeTruthy();

2
kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
View file

@ -19,7 +19,7 @@ const renderComponent = () => {
};
describe('SchemaVersion', () => {
it('renders versions', () => {
it('renders versions', async () => {
renderComponent();
});
});

4
kafka-ui-react-app/src/components/Schemas/Edit/__tests__/Edit.spec.tsx
View file

@ -45,9 +45,7 @@ describe('Edit', () => {
describe('fetch failed', () => {
it('renders page loader', async () => {
const schemasAPILatestMock = fetchMock.getOnce(schemasAPILatestUrl, 404);
await act(() => {
renderComponent();
});
await renderComponent();
await waitFor(() => expect(schemasAPILatestMock.called()).toBeTruthy());
expect(screen.getByRole('progressbar')).toBeInTheDocument();
expect(screen.queryByText(schemaVersion.subject)).not.toBeInTheDocument();

16
kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/__test__/GlobalSchemaSelector.spec.tsx
View file

@ -9,11 +9,11 @@ import fetchMock from 'fetch-mock';
const clusterName = 'testClusterName';
const selectForwardOption = () => {
const selectForwardOption = async () => {
const dropdownElement = screen.getByRole('listbox');
// clicks to open dropdown
userEvent.click(within(dropdownElement).getByRole('option'));
userEvent.click(
await userEvent.click(within(dropdownElement).getByRole('option'));
await userEvent.click(
screen.getByText(CompatibilityLevelCompatibilityEnum.FORWARD)
);
};
@ -59,19 +59,19 @@ describe('GlobalSchemaSelector', () => {
it('shows popup when select value is changed', async () => {
expectOptionIsSelected(CompatibilityLevelCompatibilityEnum.FULL);
selectForwardOption();
await selectForwardOption();
expect(screen.getByText('Confirm the action')).toBeInTheDocument();
});
it('resets select value when cancel is clicked', () => {
selectForwardOption();
userEvent.click(screen.getByText('Cancel'));
it('resets select value when cancel is clicked', async () => {
await selectForwardOption();
await userEvent.click(screen.getByText('Cancel'));
expect(screen.queryByText('Confirm the action')).not.toBeInTheDocument();
expectOptionIsSelected(CompatibilityLevelCompatibilityEnum.FULL);
});
it('sets new schema when confirm is clicked', async () => {
selectForwardOption();
await selectForwardOption();
const putNewCompatibilityMock = fetchMock.putOnce(
`api/clusters/${clusterName}/schemas/compatibility`,
200,

4
kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
View file

@ -109,14 +109,14 @@ describe('List', () => {
expect(screen.getByText(schemaVersion1.subject)).toBeInTheDocument();
expect(screen.getByText(schemaVersion2.subject)).toBeInTheDocument();
});
it('handles onRowClick', () => {
it('handles onRowClick', async () => {
const { id, schemaType, subject, version, compatibilityLevel } =
schemaVersion2;
const row = screen.getByRole('row', {
name: `${subject} ${id} ${schemaType} ${version} ${compatibilityLevel}`,
});
expect(row).toBeInTheDocument();
userEvent.click(row);
await userEvent.click(row);
expect(mockedUsedNavigate).toHaveBeenCalledWith(
clusterSchemaPath(clusterName, subject)
);

16
kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
View file

@ -10,8 +10,8 @@ const subjectValue = 'subject';
const schemaValue = 'schema';
describe('New Component', () => {
beforeEach(() => {
render(
beforeEach(async () => {
await render(
<WithRoute path={clusterSchemaNewPath()}>
<New />
</WithRoute>,
@ -33,14 +33,14 @@ describe('New Component', () => {
const schema = screen.getAllByRole('textbox')[1];
const schemaTypeSelect = screen.getByRole('listbox');
await act(() => {
userEvent.type(subject, subjectValue);
await act(async () => {
await userEvent.type(subject, subjectValue);
});
await act(() => {
userEvent.type(schema, schemaValue);
await act(async () => {
await userEvent.type(schema, schemaValue);
});
await act(() => {
userEvent.selectOptions(schemaTypeSelect, ['AVRO']);
await act(async () => {
await userEvent.selectOptions(schemaTypeSelect, ['AVRO']);
});
const submitBtn = screen.getByRole('button', { name: /Submit/i });

6
kafka-ui-react-app/src/components/Topics/List/__tests__/ListPage.spec.tsx
View file

@ -33,14 +33,14 @@ describe('ListPage Component', () => {
renderComponent();
});
it('handles switch of Internal Topics visibility', () => {
it('handles switch of Internal Topics visibility', async () => {
const switchInput = screen.getByLabelText('Show Internal Topics');
expect(switchInput).toBeInTheDocument();
expect(global.localStorage.getItem('hideInternalTopics')).toBeNull();
userEvent.click(switchInput);
await userEvent.click(switchInput);
expect(global.localStorage.getItem('hideInternalTopics')).toBeTruthy();
userEvent.click(switchInput);
await userEvent.click(switchInput);
expect(global.localStorage.getItem('hideInternalTopics')).toBeNull();
});

38
kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx
View file

@ -131,8 +131,8 @@ describe('TopicTable Components', () => {
expect(screen.getAllByRole('checkbox')[2]).toBeEnabled();
});
describe('when only one topic is selected', () => {
beforeEach(() => {
userEvent.click(screen.getAllByRole('checkbox')[1]);
beforeEach(async () => {
await userEvent.click(screen.getAllByRole('checkbox')[1]);
});
it('renders batch actions bar', () => {
expect(getButtonByName('Delete selected topics')).toBeEnabled();
@ -143,9 +143,9 @@ describe('TopicTable Components', () => {
});
});
describe('when more then one topics are selected', () => {
beforeEach(() => {
userEvent.click(screen.getAllByRole('checkbox')[1]);
userEvent.click(screen.getAllByRole('checkbox')[2]);
beforeEach(async () => {
await userEvent.click(screen.getAllByRole('checkbox')[1]);
await userEvent.click(screen.getAllByRole('checkbox')[2]);
});
it('renders batch actions bar', () => {
expect(getButtonByName('Delete selected topics')).toBeEnabled();
@ -190,12 +190,12 @@ describe('TopicTable Components', () => {
});
});
describe('Action buttons', () => {
const expectDropdownExists = () => {
const expectDropdownExists = async () => {
const btn = screen.getByRole('button', {
name: 'Dropdown Toggle',
});
expect(btn).toBeEnabled();
userEvent.click(btn);
await userEvent.click(btn);
expect(screen.getByRole('menu')).toBeInTheDocument();
};
it('renders disable action buttons for read-only cluster', () => {
@ -204,7 +204,7 @@ describe('TopicTable Components', () => {
expect(btns[0]).toBeDisabled();
expect(btns[1]).toBeDisabled();
});
it('renders action buttons', () => {
it('renders action buttons', async () => {
renderComponent({ topics: topicsPayload, pageCount: 1 });
expect(
screen.getAllByRole('button', { name: 'Dropdown Toggle' }).length
@ -228,7 +228,7 @@ describe('TopicTable Components', () => {
name: 'Dropdown Toggle',
});
expect(extBtn).toBeEnabled();
userEvent.click(extBtn);
await userEvent.click(extBtn);
expect(screen.getByRole('menu')).toBeInTheDocument();
});
describe('and clear messages action', () => {
@ -241,7 +241,7 @@ describe('TopicTable Components', () => {
},
],
});
expectDropdownExists();
await expectDropdownExists();
const actionBtn = screen.getAllByRole('menuitem');
expect(actionBtn[0]).toHaveTextContent('Clear Messages');
expect(actionBtn[0]).not.toHaveAttribute('aria-disabled');
@ -255,7 +255,7 @@ describe('TopicTable Components', () => {
},
],
});
expectDropdownExists();
await expectDropdownExists();
const actionBtn = screen.getAllByRole('menuitem');
expect(actionBtn[0]).toHaveTextContent('Clear Messages');
expect(actionBtn[0]).toHaveAttribute('aria-disabled');
@ -269,8 +269,8 @@ describe('TopicTable Components', () => {
},
],
});
expectDropdownExists();
userEvent.click(screen.getByText('Clear Messages'));
await expectDropdownExists();
await userEvent.click(screen.getByText('Clear Messages'));
expect(
screen.getByText('Are you sure want to clear topic messages?')
).toBeInTheDocument();
@ -284,22 +284,22 @@ describe('TopicTable Components', () => {
describe('and remove topic action', () => {
it('is visible only when topic deletion allowed for cluster', async () => {
renderComponent({ topics: [topicsPayload[1]] });
expectDropdownExists();
await expectDropdownExists();
const actionBtn = screen.getAllByRole('menuitem');
expect(actionBtn[2]).toHaveTextContent('Remove Topic');
expect(actionBtn[2]).not.toHaveAttribute('aria-disabled');
});
it('is disabled when topic deletion is not allowed for cluster', async () => {
renderComponent({ topics: [topicsPayload[1]] }, false, false);
expectDropdownExists();
await expectDropdownExists();
const actionBtn = screen.getAllByRole('menuitem');
expect(actionBtn[2]).toHaveTextContent('Remove Topic');
expect(actionBtn[2]).toHaveAttribute('aria-disabled');
});
it('works as expected', async () => {
renderComponent({ topics: [topicsPayload[1]] });
expectDropdownExists();
userEvent.click(screen.getByText('Remove Topic'));
await expectDropdownExists();
await userEvent.click(screen.getByText('Remove Topic'));
expect(screen.getByText('Confirm the action')).toBeInTheDocument();
await waitFor(() =>
userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
@ -310,8 +310,8 @@ describe('TopicTable Components', () => {
describe('and recreate topic action', () => {
it('works as expected', async () => {
renderComponent({ topics: [topicsPayload[1]] });
expectDropdownExists();
userEvent.click(screen.getByText('Recreate Topic'));
await expectDropdownExists();
await userEvent.click(screen.getByText('Recreate Topic'));
expect(screen.getByText('Confirm the action')).toBeInTheDocument();
await waitFor(() =>
userEvent.click(screen.getByRole('button', { name: 'Confirm' }))

22
kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx
View file

@ -60,11 +60,14 @@ describe('New', () => {
it('validates form', async () => {
await act(() => renderComponent(clusterTopicNewPath(clusterName)));
await waitFor(() => {
userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
await waitFor(async () => {
await userEvent.type(
screen.getByPlaceholderText('Topic Name'),
topicName
);
});
await waitFor(() => {
userEvent.clear(screen.getByPlaceholderText('Topic Name'));
await waitFor(async () => {
await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
});
await waitFor(() => {
expect(screen.getByText('name is a required field')).toBeInTheDocument();
@ -87,11 +90,14 @@ describe('New', () => {
it('submits valid form', async () => {
await act(() => renderComponent(clusterTopicNewPath(clusterName)));
await act(() => {
userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
await act(async () => {
await userEvent.type(
screen.getByPlaceholderText('Topic Name'),
topicName
);
});
await act(() => {
userEvent.click(screen.getByText('Create topic'));
await act(async () => {
await userEvent.click(screen.getByText('Create topic'));
});
await waitFor(() => expect(createTopicMock).toHaveBeenCalledTimes(1));
await waitFor(() =>

46
kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/__test__/DangerZone.spec.tsx
View file

@ -34,8 +34,8 @@ const renderComponent = (props?: Partial<DangerZoneProps>) =>
{ initialEntries: [clusterTopicPath(clusterName, topicName)] }
);
const clickOnDialogSubmitButton = () => {
userEvent.click(
const clickOnDialogSubmitButton = async () => {
await userEvent.click(
within(screen.getByRole('dialog')).getByRole('button', {
name: 'Confirm',
})
@ -45,7 +45,7 @@ const clickOnDialogSubmitButton = () => {
const checkDialogThenPressCancel = async () => {
const dialog = screen.getByRole('dialog');
expect(screen.getByRole('dialog')).toBeInTheDocument();
userEvent.click(within(dialog).getByRole('button', { name: 'Cancel' }));
await userEvent.click(within(dialog).getByRole('button', { name: 'Cancel' }));
await waitFor(() =>
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
);
@ -91,11 +91,13 @@ describe('DangerZone', () => {
const numberOfPartitionsEditForm = screen.getByRole('form', {
name: 'Edit number of partitions',
});
userEvent.type(
await userEvent.type(
within(numberOfPartitionsEditForm).getByRole('spinbutton'),
'4'
);
userEvent.click(within(numberOfPartitionsEditForm).getByRole('button'));
await userEvent.click(
within(numberOfPartitionsEditForm).getByRole('button')
);
await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
await waitFor(() => clickOnDialogSubmitButton());
expect(mockIncreaseTopicPartitionsCount).toHaveBeenCalledTimes(1);
@ -119,11 +121,13 @@ describe('DangerZone', () => {
within(replicationFactorEditForm).getByRole('button', { name: 'Submit' })
).toBeInTheDocument();
userEvent.type(
await userEvent.type(
within(replicationFactorEditForm).getByRole('spinbutton'),
'4'
);
userEvent.click(within(replicationFactorEditForm).getByRole('button'));
await userEvent.click(
within(replicationFactorEditForm).getByRole('button')
);
await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
await waitFor(() => clickOnDialogSubmitButton());
@ -139,19 +143,19 @@ describe('DangerZone', () => {
const partitionInputSubmitBtn = screen.getAllByText(/submit/i)[0];
const value = (defaultPartitions - 4).toString();
expect(partitionInputSubmitBtn).toBeDisabled();
await act(() => {
userEvent.clear(partitionInput);
userEvent.type(partitionInput, value);
await act(async () => {
await userEvent.clear(partitionInput);
await userEvent.type(partitionInput, value);
});
expect(partitionInput).toHaveValue(+value);
expect(partitionInputSubmitBtn).toBeEnabled();
await act(() => {
userEvent.click(partitionInputSubmitBtn);
await act(async () => {
await userEvent.click(partitionInputSubmitBtn);
});
expect(
screen.getByText(/You can only increase the number of partitions!/i)
).toBeInTheDocument();
userEvent.clear(partitionInput);
await userEvent.clear(partitionInput);
await waitFor(() =>
expect(screen.getByText(/are required/i)).toBeInTheDocument()
);
@ -166,11 +170,11 @@ describe('DangerZone', () => {
await waitFor(() => userEvent.clear(replicatorFactorInput));
expect(replicatorFactorInputSubmitBtn).toBeEnabled();
userEvent.click(replicatorFactorInputSubmitBtn);
await userEvent.click(replicatorFactorInputSubmitBtn);
await waitFor(() =>
expect(screen.getByText(/are required/i)).toBeInTheDocument()
);
userEvent.type(replicatorFactorInput, '1');
await userEvent.type(replicatorFactorInput, '1');
await waitFor(() =>
expect(screen.queryByText(/are required/i)).not.toBeInTheDocument()
);
@ -182,9 +186,9 @@ describe('DangerZone', () => {
const partitionInput = screen.getByPlaceholderText('Number of partitions');
const partitionInputSubmitBtn = screen.getAllByText(/submit/i)[0];
await act(() => {
userEvent.type(partitionInput, '5');
userEvent.click(partitionInputSubmitBtn);
await act(async () => {
await userEvent.type(partitionInput, '5');
await userEvent.click(partitionInputSubmitBtn);
});
await checkDialogThenPressCancel();
@ -196,9 +200,9 @@ describe('DangerZone', () => {
screen.getByPlaceholderText('Replication Factor');
const replicatorFactorInputSubmitBtn = screen.getAllByText(/submit/i)[1];
await act(() => {
userEvent.type(replicatorFactorInput, '5');
userEvent.click(replicatorFactorInputSubmitBtn);
await act(async () => {
await userEvent.type(replicatorFactorInput, '5');
await userEvent.click(replicatorFactorInputSubmitBtn);
});
await checkDialogThenPressCancel();

83
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
View file

@ -15,16 +15,18 @@ describe('AddEditFilterContainer component', () => {
code: 'mockCode',
};
const renderComponent = (
const renderComponent = async (
props: Partial<AddEditFilterContainerProps> = {}
) => {
render(
<AddEditFilterContainer
cancelBtnHandler={jest.fn()}
submitBtnText={props.submitBtnText || defaultSubmitBtn}
{...props}
/>
);
await act(() => {
render(
<AddEditFilterContainer
cancelBtnHandler={jest.fn()}
submitBtnText={props.submitBtnText || defaultSubmitBtn}
{...props}
/>
);
});
};
describe('default Component Parameters', () => {
@ -43,35 +45,32 @@ describe('AddEditFilterContainer component', () => {
const inputs = screen.getAllByRole('textbox');
const textAreaElement = inputs[0] as HTMLTextAreaElement;
await act(() =>
userEvent.paste(textAreaElement, 'Hello World With TextArea')
);
textAreaElement.focus();
await userEvent.paste('Hello World With TextArea');
const inputNameElement = inputs[1];
await act(() => userEvent.type(inputNameElement, 'Hello World!'));
const inputNameElement = inputs[1] as HTMLTextAreaElement;
await userEvent.type(inputNameElement, 'Hello World!');
expect(submitButtonElem).toBeEnabled();
await act(() => userEvent.clear(inputNameElement));
await userEvent.clear(inputNameElement);
await userEvent.tab();
expect(submitButtonElem).toBeDisabled();
});
it('should view the error message after typing and clearing the input', async () => {
const inputs = screen.getAllByRole('textbox');
const user = userEvent.setup();
const textAreaElement = inputs[0] as HTMLTextAreaElement;
await act(() =>
userEvent.paste(textAreaElement, 'Hello World With TextArea')
);
const inputNameElement = inputs[1];
await act(() => {
userEvent.type(inputNameElement, 'Hello World!');
userEvent.clear(inputNameElement);
userEvent.clear(textAreaElement);
});
await user.type(textAreaElement, 'Hello World With TextArea');
await user.type(inputNameElement, 'Hello World!');
await user.clear(inputNameElement);
await user.keyboard('{Control>}[KeyA]{/Control}{backspace}');
await user.tab();
expect(screen.getByText(/required field/i)).toBeInTheDocument();
});
@ -79,11 +78,12 @@ describe('AddEditFilterContainer component', () => {
describe('Custom setup for the component', () => {
it('should render the input with default data if they are passed', async () => {
renderComponent({
inputDisplayNameDefaultValue: mockData.name,
inputCodeDefaultValue: mockData.code,
await act(() => {
renderComponent({
inputDisplayNameDefaultValue: mockData.name,
inputCodeDefaultValue: mockData.code,
});
});
const inputs = screen.getAllByRole('textbox');
const textAreaElement = inputs[0] as HTMLTextAreaElement;
const inputNameElement = inputs[1];
@ -93,44 +93,43 @@ describe('AddEditFilterContainer component', () => {
it('should test whether the cancel callback is being called', async () => {
const cancelCallback = jest.fn();
renderComponent({
cancelBtnHandler: cancelCallback,
});
await act(() =>
renderComponent({
cancelBtnHandler: cancelCallback,
})
);
const cancelBtnElement = screen.getByText(/cancel/i);
await act(() => userEvent.click(cancelBtnElement));
await userEvent.click(cancelBtnElement);
expect(cancelCallback).toBeCalled();
});
it('should test whether the submit Callback is being called', async () => {
const submitCallback = jest.fn();
renderComponent({
submitCallback,
});
await act(() => renderComponent({ submitCallback }));
const inputs = screen.getAllByRole('textbox');
const textAreaElement = inputs[0] as HTMLTextAreaElement;
userEvent.paste(textAreaElement, 'Hello World With TextArea');
textAreaElement.focus();
await userEvent.paste('Hello World With TextArea');
const inputNameElement = inputs[1];
await act(() => userEvent.type(inputNameElement, 'Hello World!'));
await userEvent.type(inputNameElement, 'Hello World!');
const submitBtnElement = screen.getByText(defaultSubmitBtn);
expect(submitBtnElement).toBeEnabled();
await act(() => userEvent.click(submitBtnElement));
await userEvent.click(submitBtnElement);
expect(submitCallback).toBeCalled();
});
it('should display the checkbox if the props is passed and initially check state', async () => {
renderComponent({ isAdd: true });
await act(() => renderComponent({ isAdd: true }));
const checkbox = screen.getByRole('checkbox');
expect(checkbox).toBeInTheDocument();
expect(checkbox).not.toBeChecked();
await act(() => userEvent.click(checkbox));
await userEvent.click(checkbox);
expect(checkbox).toBeChecked();
});

117
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx
View file

@ -4,7 +4,7 @@ import AddFilter, {
} from 'components/Topics/Topic/Messages/Filters/AddFilter';
import { render } from 'lib/testHelpers';
import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
import { act, screen } from '@testing-library/react';
import { act, fireEvent, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
const filters: MessageFilters[] = [
@ -32,14 +32,12 @@ const renderComponent = (props: Partial<FilterModalProps> = {}) =>
describe('AddFilter component', () => {
describe('', () => {
beforeEach(async () => {
await act(() => {
renderComponent();
});
beforeEach(() => {
renderComponent();
});
it('should test click on Saved Filters redirects to Saved components', () => {
userEvent.click(screen.getByRole('savedFilterText'));
it('should test click on Saved Filters redirects to Saved components', async () => {
await userEvent.click(screen.getByRole('savedFilterText'));
expect(screen.getByText('Saved Filters')).toBeInTheDocument();
expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
});
@ -48,8 +46,8 @@ describe('AddFilter component', () => {
expect(screen.getByRole('button', { name: 'info' })).toBeInTheDocument();
});
it('renders InfoModal', () => {
userEvent.click(screen.getByRole('button', { name: 'info' }));
it('renders InfoModal', async () => {
await userEvent.click(screen.getByRole('button', { name: 'info' }));
expect(screen.getByRole('button', { name: 'Ok' })).toBeInTheDocument();
expect(
screen.getByRole('list', { name: 'info-list' })
@ -57,7 +55,7 @@ describe('AddFilter component', () => {
});
it('should test click on return to custom filter redirects to Saved Filters', async () => {
userEvent.click(screen.getByRole('savedFilterText'));
await userEvent.click(screen.getByRole('savedFilterText'));
expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
@ -66,9 +64,7 @@ describe('AddFilter component', () => {
describe('Add new filter', () => {
beforeEach(async () => {
await act(() => {
renderComponent();
});
renderComponent();
});
it('adding new filter', async () => {
@ -83,9 +79,10 @@ describe('AddFilter component', () => {
expect(addFilterBtn).toBeDisabled();
expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
await act(() => {
userEvent.paste(codeTextBox, codeValue);
userEvent.type(nameTextBox, nameValue);
await act(async () => {
codeTextBox.focus();
await userEvent.paste(codeValue);
await userEvent.type(nameTextBox, nameValue);
});
expect(addFilterBtn).toBeEnabled();
@ -101,7 +98,10 @@ describe('AddFilter component', () => {
const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
expect(addFilterBtn).toBeDisabled();
expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
await act(() => userEvent.paste(codeTextBox, code));
await act(async () => {
codeTextBox.focus();
await userEvent.paste(code);
});
expect(addFilterBtn).toBeEnabled();
expect(codeTextBox).toHaveValue(`${code}\n\n`);
});
@ -110,10 +110,10 @@ describe('AddFilter component', () => {
await act(() => {
renderComponent({ isSavedFiltersOpen: true });
});
userEvent.click(screen.getByText('Saved Filters'));
await userEvent.click(screen.getByText('Saved Filters'));
const index = 0;
const editButton = screen.getAllByText('Edit')[index];
userEvent.click(editButton);
await userEvent.click(editButton);
const { code, name } = filters[index];
expect(editFilterMock).toHaveBeenCalledTimes(1);
expect(editFilterMock).toHaveBeenCalledWith({
@ -133,12 +133,10 @@ describe('AddFilter component', () => {
const nameValue = 'filter name';
beforeEach(async () => {
await act(() => {
renderComponent({
addFilter: addFilterMock,
activeFilterHandler: activeFilterHandlerMock,
toggleIsOpen: toggleModelMock,
});
await renderComponent({
addFilter: addFilterMock,
activeFilterHandler: activeFilterHandlerMock,
toggleIsOpen: toggleModelMock,
});
});
@ -150,12 +148,14 @@ describe('AddFilter component', () => {
describe('OnSubmit conditions with codeValue and nameValue in fields', () => {
beforeEach(async () => {
await act(() => {
userEvent.paste(
screen.getAllByRole('textbox')[0] as HTMLTextAreaElement,
codeValue
);
userEvent.type(screen.getAllByRole('textbox')[1], nameValue);
const textAreaElement = screen.getAllByRole(
'textbox'
)[0] as HTMLTextAreaElement;
const input = screen.getAllByRole('textbox')[1];
await act(async () => {
textAreaElement.focus();
await userEvent.paste(codeValue);
await userEvent.type(input, nameValue);
});
});
@ -166,16 +166,18 @@ describe('AddFilter component', () => {
});
expect(addFilterBtn).toBeEnabled();
await act(() => userEvent.click(addFilterBtn));
await act(async () => {
await userEvent.click(addFilterBtn);
});
expect(activeFilterHandlerMock).toHaveBeenCalled();
expect(addFilterMock).not.toHaveBeenCalled();
});
it('OnSubmit condition with checkbox on functionality', async () => {
await act(() => {
userEvent.click(screen.getByRole('checkbox'));
userEvent.click(screen.getAllByRole('button')[2]);
await act(async () => {
await userEvent.click(screen.getByRole('checkbox'));
await userEvent.click(screen.getAllByRole('button')[2]);
});
expect(activeFilterHandlerMock).not.toHaveBeenCalled();
@ -193,11 +195,15 @@ describe('AddFilter component', () => {
name: /Add filter/i,
});
await act(() => userEvent.clear(nameTextBox));
await act(async () => {
await userEvent.clear(nameTextBox);
});
expect(nameTextBox).toHaveValue('');
await act(() => userEvent.click(addFilterBtn));
await act(async () => {
await userEvent.click(addFilterBtn);
});
expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
expect(activeFilterHandlerMock).toHaveBeenCalledWith(
@ -211,17 +217,25 @@ describe('AddFilter component', () => {
// get reset-ed
expect(codeTextBox).toHaveValue(``);
expect(toggleModelMock).toHaveBeenCalled();
await act(() => userEvent.paste(codeTextBox, codeValue));
codeTextBox.focus();
await act(async () => {
await userEvent.paste(codeValue);
});
expect(codeTextBox).toHaveValue(`${codeValue}\n\n`);
await act(() => userEvent.click(checkbox));
await act(async () => {
await userEvent.click(checkbox);
});
expect(addFilterBtn).toBeDisabled();
await act(() => userEvent.type(nameTextBox, nameValue));
await act(async () => {
await userEvent.type(nameTextBox, nameValue);
});
expect(nameTextBox).toHaveValue(nameValue);
expect(addFilterBtn).toBeEnabled();
await act(() => userEvent.click(addFilterBtn));
await act(async () => {
await userEvent.click(addFilterBtn);
});
expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
expect(addFilterMock).toHaveBeenCalledWith({
@ -238,16 +252,23 @@ describe('AddFilter component', () => {
)[0] as HTMLTextAreaElement;
const nameTextBox = screen.getAllByRole('textbox')[1];
const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
await act(() => {
userEvent.clear(nameTextBox);
userEvent.clear(codeTextBox);
userEvent.paste(codeTextBox, longCodeValue);
act(() => {
// await userEvent.clear(nameTextBox);
// codeTextBox.focus();
// await userEvent.clear(codeTextBox);
fireEvent.input(nameTextBox, {
inputType: '',
});
fireEvent.input(codeTextBox, {
inputType: '',
});
});
codeTextBox.focus();
await userEvent.paste(longCodeValue);
expect(nameTextBox).toHaveValue('');
expect(codeTextBox).toHaveValue(`${longCodeValue}\n\n`);
await act(() => userEvent.click(addFilterBtn));
await userEvent.click(addFilterBtn);
const filterName = `${longCodeValue.slice(0, 16)}...`;

14
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx
View file

@ -35,7 +35,7 @@ describe('EditFilter component', () => {
await act(() => {
renderComponent({ toggleEditModal });
});
userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
expect(toggleEditModal).toHaveBeenCalledTimes(1);
});
@ -43,16 +43,16 @@ describe('EditFilter component', () => {
const toggleEditModal = jest.fn();
const editSavedFilter = jest.fn();
await act(() => {
renderComponent({ toggleEditModal, editSavedFilter });
});
await renderComponent({ toggleEditModal, editSavedFilter });
const inputs = screen.getAllByRole('textbox');
const textAreaElement = inputs[0] as HTMLTextAreaElement;
const inputNameElement = inputs[1];
await act(() => {
userEvent.paste(textAreaElement, 'edited code');
userEvent.type(inputNameElement, 'edited name');
await act(async () => {
textAreaElement.focus();
await userEvent.paste('edited code');
textAreaElement.focus();
await userEvent.type(inputNameElement, 'edited name');
fireEvent.submit(screen.getByRole('form'));
});
expect(toggleEditModal).toHaveBeenCalledTimes(1);

6
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx
View file

@ -32,9 +32,9 @@ describe('FilterModal component', () => {
screen.getByRole('heading', { name: /add filter/i, level: 3 })
).toBeInTheDocument();
});
it('renders component with edit filter modal', () => {
userEvent.click(screen.getByRole('savedFilterText'));
userEvent.click(screen.getByText('Edit'));
it('renders component with edit filter modal', async () => {
await userEvent.click(screen.getByRole('savedFilterText'));
await userEvent.click(screen.getByText('Edit'));
expect(
screen.getByRole('heading', { name: /edit saved filter/i, level: 3 })
).toBeInTheDocument();

69
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx
View file

@ -92,17 +92,17 @@ describe('Filters component', () => {
});
});
it('search input', () => {
it('search input', async () => {
const searchInput = screen.getByPlaceholderText('Search');
expect(searchInput).toHaveValue('');
userEvent.type(searchInput, inputValue);
await userEvent.type(searchInput, inputValue);
expect(searchInput).toHaveValue(inputValue);
});
it('offset input', () => {
it('offset input', async () => {
const offsetInput = screen.getByPlaceholderText('Offset');
expect(offsetInput).toHaveValue('');
userEvent.type(offsetInput, inputValue);
await userEvent.type(offsetInput, inputValue);
expect(offsetInput).toHaveValue(inputValue);
});
@ -110,10 +110,12 @@ describe('Filters component', () => {
const seekTypeSelect = screen.getAllByRole('listbox');
const option = screen.getAllByRole('option');
await act(() => userEvent.click(seekTypeSelect[0]));
await act(async () => {
await userEvent.click(seekTypeSelect[0]);
});
await act(() => {
userEvent.selectOptions(seekTypeSelect[0], ['Timestamp']);
await act(async () => {
await userEvent.selectOptions(seekTypeSelect[0], ['Timestamp']);
});
expect(option[0]).toHaveTextContent('Timestamp');
@ -142,26 +144,28 @@ describe('Filters component', () => {
options = screen.getAllByRole('option');
});
it('seekType select', () => {
it('seekType select', async () => {
expect(options[0]).toHaveTextContent('Offset');
userEvent.click(seekTypeSelects[0]);
userEvent.selectOptions(seekTypeSelects[0], [mockTypeOptionSelectLabel]);
await userEvent.click(seekTypeSelects[0]);
await userEvent.selectOptions(seekTypeSelects[0], [
mockTypeOptionSelectLabel,
]);
expect(options[0]).toHaveTextContent(mockTypeOptionSelectLabel);
expect(screen.getByText('Submit')).toBeInTheDocument();
});
it('seekDirection select', () => {
userEvent.click(seekTypeSelects[3]);
userEvent.selectOptions(seekTypeSelects[3], [
it('seekDirection select', async () => {
await userEvent.click(seekTypeSelects[3]);
await userEvent.selectOptions(seekTypeSelects[3], [
mockDirectionOptionSelectLabel,
]);
expect(options[3]).toHaveTextContent(mockDirectionOptionSelectLabel);
});
});
it('stop loading when live mode is active', () => {
it('stop loading when live mode is active', async () => {
renderComponent();
userEvent.click(screen.getByText('Stop loading'));
await userEvent.click(screen.getByText('Stop loading'));
const option = screen.getAllByRole('option');
expect(option[3]).toHaveTextContent('Oldest First');
expect(screen.getByText('Submit')).toBeInTheDocument();
@ -169,13 +173,13 @@ describe('Filters component', () => {
it('renders addFilter modal', async () => {
renderComponent();
await act(() =>
userEvent.click(
await act(async () => {
await userEvent.click(
screen.getByRole('button', {
name: /add filters/i,
})
)
);
);
});
expect(screen.getByTestId('messageFilterModal')).toBeInTheDocument();
});
@ -183,13 +187,13 @@ describe('Filters component', () => {
beforeEach(async () => {
renderComponent();
await act(() =>
userEvent.click(
await act(async () => {
await userEvent.click(
screen.getByRole('button', {
name: /add filters/i,
})
)
);
);
});
const filterName = 'filter name';
const filterCode = 'filter code';
@ -201,21 +205,22 @@ describe('Filters component', () => {
const textAreaElement = textBoxElements[0] as HTMLTextAreaElement;
const inputNameElement = textBoxElements[1];
await act(() => {
userEvent.paste(textAreaElement, filterName);
userEvent.type(inputNameElement, filterCode);
await act(async () => {
textAreaElement.focus();
await userEvent.paste(filterName);
await userEvent.type(inputNameElement, filterCode);
});
expect(textAreaElement.value).toEqual(`${filterName}\n\n`);
expect(inputNameElement).toHaveValue(filterCode);
await act(() =>
userEvent.click(
await act(async () => {
await userEvent.click(
within(messageFilterModal).getByRole('button', {
name: /add filter/i,
})
)
);
);
});
});
it('shows saved smart filter', () => {
@ -225,7 +230,9 @@ describe('Filters component', () => {
it('delete the active smart Filter', async () => {
const smartFilterElement = screen.getByTestId('activeSmartFilter');
const deleteIcon = within(smartFilterElement).getByText('mock-CloseIcon');
await act(() => userEvent.click(deleteIcon));
await act(async () => {
await userEvent.click(deleteIcon);
});
const anotherSmartFilterElement =
screen.queryByTestId('activeSmartFilter');

4
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/InfoModal.spec.tsx
View file

@ -5,10 +5,10 @@ import React from 'react';
import InfoModal from 'components/Topics/Topic/Messages/Filters/InfoModal';
describe('InfoModal component', () => {
it('closes InfoModal', () => {
it('closes InfoModal', async () => {
const toggleInfoModal = jest.fn();
render(<InfoModal toggleIsOpen={toggleInfoModal} />);
userEvent.click(screen.getByRole('button', { name: 'Ok' }));
await userEvent.click(screen.getByRole('button', { name: 'Ok' }));
expect(toggleInfoModal).toHaveBeenCalledTimes(1);
});
});

54
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
View file

@ -3,12 +3,7 @@ import SavedFilters, {
Props,
} from 'components/Topics/Topic/Messages/Filters/SavedFilters';
import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
import {
screen,
waitFor,
waitForElementToBeRemoved,
within,
} from '@testing-library/react';
import { screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { render } from 'lib/testHelpers';
@ -35,17 +30,17 @@ describe('SavedFilter Component', () => {
const getSavedFilters = () => screen.getAllByRole('savedFilter');
it('should check the Cancel button click', () => {
it('should check the Cancel button click', async () => {
const cancelMock = jest.fn();
setUpComponent({ closeModal: cancelMock });
userEvent.click(screen.getByText(/cancel/i));
await userEvent.click(screen.getByText(/cancel/i));
expect(cancelMock).toHaveBeenCalled();
});
it('should check on go back button click', () => {
it('should check on go back button click', async () => {
const onGoBackMock = jest.fn();
setUpComponent({ onGoBack: onGoBackMock });
userEvent.click(screen.getByText(/back to create filters/i));
await userEvent.click(screen.getByText(/back to create filters/i));
expect(onGoBackMock).toHaveBeenCalled();
});
@ -84,26 +79,26 @@ describe('SavedFilter Component', () => {
expect(screen.getByText(mockFilters[1].name)).toBeInTheDocument();
});
it('should check the Filter edit Button works', () => {
it('should check the Filter edit Button works', async () => {
const savedFilters = getSavedFilters();
userEvent.hover(savedFilters[0]);
userEvent.click(within(savedFilters[0]).getByText(/edit/i));
await userEvent.hover(savedFilters[0]);
await userEvent.click(within(savedFilters[0]).getByText(/edit/i));
expect(onEditMock).toHaveBeenCalled();
userEvent.hover(savedFilters[1]);
userEvent.click(within(savedFilters[1]).getByText(/edit/i));
await userEvent.hover(savedFilters[1]);
await userEvent.click(within(savedFilters[1]).getByText(/edit/i));
expect(onEditMock).toHaveBeenCalledTimes(2);
});
it('should check the select filter', () => {
it('should check the select filter', async () => {
const selectFilterButton = screen.getByText(/Select filter/i);
userEvent.click(selectFilterButton);
await userEvent.click(selectFilterButton);
expect(activeFilterMock).not.toHaveBeenCalled();
const savedFilterElement = getSavedFilters();
userEvent.click(savedFilterElement[0]);
userEvent.click(selectFilterButton);
await userEvent.click(savedFilterElement[0]);
await userEvent.click(selectFilterButton);
expect(activeFilterMock).toHaveBeenCalled();
expect(cancelMock).toHaveBeenCalled();
@ -121,12 +116,12 @@ describe('SavedFilter Component', () => {
deleteMock.mockClear();
});
it('Open Confirmation for the deletion modal', () => {
it('Open Confirmation for the deletion modal', async () => {
setUpComponent({ deleteFilter: deleteMock });
const savedFilters = getSavedFilters();
const deleteIcons = screen.getAllByText('mock-DeleteIcon');
userEvent.hover(savedFilters[0]);
userEvent.click(deleteIcons[0]);
await userEvent.hover(savedFilters[0]);
await userEvent.click(deleteIcons[0]);
const modelDialog = screen.getByRole('dialog');
expect(modelDialog).toBeInTheDocument();
expect(
@ -139,8 +134,8 @@ describe('SavedFilter Component', () => {
const savedFilters = getSavedFilters();
const deleteIcons = screen.getAllByText('mock-DeleteIcon');
userEvent.hover(savedFilters[0]);
userEvent.click(deleteIcons[0]);
await userEvent.hover(savedFilters[0]);
await userEvent.click(deleteIcons[0]);
const modelDialog = screen.getByRole('dialog');
expect(modelDialog).toBeInTheDocument();
@ -156,14 +151,13 @@ describe('SavedFilter Component', () => {
const savedFilters = getSavedFilters();
const deleteIcons = screen.getAllByText('mock-DeleteIcon');
userEvent.hover(savedFilters[0]);
userEvent.click(deleteIcons[0]);
await userEvent.hover(savedFilters[0]);
await userEvent.click(deleteIcons[0]);
await waitFor(() =>
userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
);
expect(screen.queryByRole('dialog')).toBeInTheDocument();
await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
expect(deleteMock).toHaveBeenCalledTimes(1);
await waitForElementToBeRemoved(() => screen.queryByRole('dialog'));
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
});
});

12
kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
View file

@ -50,9 +50,9 @@ describe('MessageContent screen', () => {
});
describe('when switched to display the key', () => {
it('makes key tab active', () => {
it('makes key tab active', async () => {
const keyTab = screen.getAllByText('Key');
userEvent.click(keyTab[0]);
await userEvent.click(keyTab[0]);
expect(keyTab[0]).toHaveStyleRule(
'background-color',
theme.secondaryTab.backgroundColor.active
@ -61,8 +61,8 @@ describe('MessageContent screen', () => {
});
describe('when switched to display the headers', () => {
it('makes headers tab active', () => {
userEvent.click(screen.getByText('Headers'));
it('makes Headers tab active', async () => {
await userEvent.click(screen.getByText('Headers'));
expect(screen.getByText('Headers')).toHaveStyleRule(
'background-color',
theme.secondaryTab.backgroundColor.active
@ -71,9 +71,9 @@ describe('MessageContent screen', () => {
});
describe('when switched to display the value', () => {
it('makes value tab active', () => {
it('makes value tab active', async () => {
const contentTab = screen.getAllByText('Value');
userEvent.click(contentTab[0]);
await userEvent.click(contentTab[0]);
expect(contentTab[0]).toHaveStyleRule(
'background-color',
theme.secondaryTab.backgroundColor.active

10
kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx
View file

@ -66,24 +66,24 @@ describe('Message component', () => {
).not.toBeInTheDocument();
});
it('should check the dropdown being visible during hover', () => {
it('should check the dropdown being visible during hover', async () => {
renderComponent();
const text = 'Save as a file';
const trElement = screen.getByRole('row');
expect(screen.queryByText(text)).not.toBeInTheDocument();
userEvent.hover(trElement);
await userEvent.hover(trElement);
expect(screen.getByText(text)).toBeInTheDocument();
userEvent.unhover(trElement);
await userEvent.unhover(trElement);
expect(screen.queryByText(text)).not.toBeInTheDocument();
});
it('should check open Message Content functionality', () => {
it('should check open Message Content functionality', async () => {
renderComponent();
const messageToggleIcon = screen.getByRole('button', { hidden: true });
expect(screen.queryByText(messageContentText)).not.toBeInTheDocument();
userEvent.click(messageToggleIcon);
await userEvent.click(messageToggleIcon);
expect(screen.getByText(messageContentText)).toBeInTheDocument();
});
});

12
kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx
View file

@ -57,24 +57,24 @@ describe('Messages', () => {
);
const labelValue1 = SeekDirectionOptions[1].label;
userEvent.click(seekDirectionSelect);
userEvent.selectOptions(seekDirectionSelect, [labelValue1]);
await userEvent.click(seekDirectionSelect);
await userEvent.selectOptions(seekDirectionSelect, [labelValue1]);
expect(seekDirectionOption).toHaveTextContent(labelValue1);
const labelValue0 = SeekDirectionOptions[0].label;
userEvent.click(seekDirectionSelect);
userEvent.selectOptions(seekDirectionSelect, [labelValue0]);
await userEvent.click(seekDirectionSelect);
await userEvent.selectOptions(seekDirectionSelect, [labelValue0]);
expect(seekDirectionOption).toHaveTextContent(labelValue0);
const liveOptionConf = SeekDirectionOptions[2];
const labelValue2 = liveOptionConf.label;
userEvent.click(seekDirectionSelect);
await userEvent.click(seekDirectionSelect);
const liveModeLi = screen.getByRole(
(role, element) =>
role === 'option' &&
element?.getAttribute('value') === liveOptionConf.value
);
userEvent.selectOptions(seekDirectionSelect, [liveModeLi]);
await userEvent.selectOptions(seekDirectionSelect, [liveModeLi]);
expect(seekDirectionOption).toHaveTextContent(labelValue2);
await waitFor(() => {

4
kafka-ui-react-app/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx
View file

@ -109,14 +109,14 @@ describe('Overview', () => {
});
describe('when Clear Messages is clicked', () => {
it('should when Clear Messages is clicked', () => {
it('should when Clear Messages is clicked', async () => {
renderComponent({
...externalTopicPayload,
cleanUpPolicy: CleanUpPolicy.DELETE,
});
const clearMessagesButton = screen.getByText('Clear Messages');
userEvent.click(clearMessagesButton);
await userEvent.click(clearMessagesButton);
expect(uwrapMock).toHaveBeenCalledTimes(1);
});
});

30
kafka-ui-react-app/src/components/Topics/Topic/SendMessage/__test__/SendMessage.spec.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import SendMessage from 'components/Topics/Topic/SendMessage/SendMessage';
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 { clusterTopicPath } from 'lib/paths';
@ -47,32 +47,26 @@ const mockOnSubmit = jest.fn();
const renderComponent = async () => {
const path = clusterTopicPath(clusterName, topicName);
await act(() => {
render(
<WithRoute path={clusterTopicPath()}>
<SendMessage onSubmit={mockOnSubmit} />
</WithRoute>,
{ initialEntries: [path] }
);
});
await render(
<WithRoute path={clusterTopicPath()}>
<SendMessage onSubmit={mockOnSubmit} />
</WithRoute>,
{ initialEntries: [path] }
);
};
const renderAndSubmitData = async (error: string[] = []) => {
await renderComponent();
await act(() => {
userEvent.click(screen.getAllByRole('listbox')[0]);
});
await act(() => {
userEvent.click(screen.getAllByRole('option')[1]);
});
await userEvent.click(screen.getAllByRole('listbox')[0]);
await userEvent.click(screen.getAllByRole('option')[1]);
(validateBySchema as Mock).mockImplementation(() => error);
const submitButton = screen.getByRole('button', {
name: 'Produce Message',
});
await waitFor(() => expect(submitButton).toBeEnabled());
await act(() => {
userEvent.click(submitButton);
});
await userEvent.click(submitButton);
};
describe('SendMessage', () => {

8
kafka-ui-react-app/src/components/Topics/Topic/Statistics/__test__/Metrics.spec.tsx
View file

@ -50,10 +50,10 @@ describe('Metrics', () => {
renderComponent();
});
it('renders Stop Analysis button', () => {
it('renders Stop Analysis button', async () => {
const btn = screen.getByRole('button', { name: 'Stop Analysis' });
expect(btn).toBeInTheDocument();
userEvent.click(btn);
await userEvent.click(btn);
expect(cancelMock).toHaveBeenCalled();
});
@ -95,9 +95,9 @@ describe('Metrics', () => {
expect(btns.length).toEqual(2);
expect(screen.queryByText('Partition stats')).not.toBeInTheDocument();
userEvent.click(btns[0]);
await userEvent.click(btns[0]);
expect(screen.getAllByText('Partition stats').length).toEqual(1);
userEvent.click(btns[1]);
await userEvent.click(btns[1]);
expect(screen.getAllByText('Partition stats').length).toEqual(2);
});
});

32
kafka-ui-react-app/src/components/Topics/Topic/__test__/Topic.spec.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { act, screen, waitFor } from '@testing-library/react';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ClusterContext from 'components/contexts/ClusterContext';
import Details from 'components/Topics/Topic/Topic';
@ -110,17 +110,17 @@ describe('Details', () => {
});
describe('when remove topic modal is open', () => {
beforeEach(() => {
beforeEach(async () => {
renderComponent();
const openModalButton = screen.getAllByText('Remove Topic')[0];
userEvent.click(openModalButton);
await userEvent.click(openModalButton);
});
it('calls deleteTopic on confirm', async () => {
const submitButton = screen.getAllByRole('button', {
name: 'Confirm',
})[0];
await act(() => userEvent.click(submitButton));
await userEvent.click(submitButton);
expect(mockDelete).toHaveBeenCalledWith(topic.name);
});
it('closes the modal when cancel button is clicked', async () => {
@ -134,7 +134,7 @@ describe('Details', () => {
beforeEach(async () => {
await renderComponent();
const confirmButton = screen.getAllByText('Clear messages')[0];
await act(() => userEvent.click(confirmButton));
await userEvent.click(confirmButton);
});
it('it calls clearTopicMessages on confirm', async () => {
@ -154,10 +154,10 @@ describe('Details', () => {
});
describe('when edit settings is clicked', () => {
it('redirects to the edit page', () => {
it('redirects to the edit page', async () => {
renderComponent();
const button = screen.getAllByText('Edit settings')[0];
userEvent.click(button);
await userEvent.click(button);
expect(mockNavigate).toHaveBeenCalledWith(clusterTopicEditRelativePath);
});
});
@ -169,24 +169,24 @@ describe('Details', () => {
const submitDeleteButton = screen.getByRole('button', {
name: 'Confirm',
});
await act(() => userEvent.click(submitDeleteButton));
await userEvent.click(submitDeleteButton);
expect(mockNavigate).toHaveBeenCalledWith('../..');
});
it('shows a confirmation popup on deleting topic messages', () => {
it('shows a confirmation popup on deleting topic messages', async () => {
renderComponent();
const clearMessagesButton = screen.getAllByText(/Clear messages/i)[0];
userEvent.click(clearMessagesButton);
await userEvent.click(clearMessagesButton);
expect(
screen.getByText(/Are you sure want to clear topic messages?/i)
).toBeInTheDocument();
});
it('shows a confirmation popup on recreating topic', () => {
it('shows a confirmation popup on recreating topic', async () => {
renderComponent();
const recreateTopicButton = screen.getByText(/Recreate topic/i);
userEvent.click(recreateTopicButton);
await userEvent.click(recreateTopicButton);
expect(
screen.getByText(/Are you sure want to recreate topic?/i)
).toBeInTheDocument();
@ -195,19 +195,19 @@ describe('Details', () => {
it('is calling recreation function after click on Submit button', async () => {
renderComponent();
const recreateTopicButton = screen.getByText(/Recreate topic/i);
userEvent.click(recreateTopicButton);
await userEvent.click(recreateTopicButton);
const confirmBtn = screen.getByRole('button', { name: /Confirm/i });
await waitFor(() => userEvent.click(confirmBtn));
expect(mockRecreate).toBeCalledTimes(1);
});
it('closes popup confirmation window after click on Cancel button', () => {
it('closes popup confirmation window after click on Cancel button', async () => {
renderComponent();
const recreateTopicButton = screen.getByText(/Recreate topic/i);
userEvent.click(recreateTopicButton);
await userEvent.click(recreateTopicButton);
const cancelBtn = screen.getByRole('button', { name: /cancel/i });
userEvent.click(cancelBtn);
await userEvent.click(cancelBtn);
expect(
screen.queryByText(/Are you sure want to recreate topic?/i)
).not.toBeInTheDocument();

8
kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__test__/CustomParamField.spec.tsx
View file

@ -57,7 +57,7 @@ describe('CustomParamsField', () => {
});
describe('core functionality works', () => {
it('click on button triggers remove', () => {
it('click on button triggers remove', async () => {
setupComponent({
field,
isDisabled,
@ -66,11 +66,11 @@ describe('CustomParamsField', () => {
existingFields,
setExistingFields,
});
userEvent.click(screen.getByRole('button'));
await userEvent.click(screen.getByRole('button'));
expect(remove).toHaveBeenCalledTimes(1);
});
it('pressing space on button triggers remove', () => {
it('pressing space on button triggers remove', async () => {
setupComponent({
field,
isDisabled,
@ -79,7 +79,7 @@ describe('CustomParamsField', () => {
existingFields,
setExistingFields,
});
userEvent.type(screen.getByRole('button'), SPACE_KEY);
await userEvent.type(screen.getByRole('button'), SPACE_KEY);
// userEvent.type triggers remove two times as at first it clicks on element and then presses space
expect(remove).toHaveBeenCalledTimes(2);
});

42
kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__test__/CustomParams.spec.tsx
View file

@ -11,10 +11,10 @@ import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
import { defaultValues } from './fixtures';
const selectOption = async (listbox: HTMLElement, option: string) => {
await act(() => {
userEvent.click(listbox);
await act(async () => {
await userEvent.click(listbox);
});
userEvent.click(screen.getByText(option));
await userEvent.click(screen.getByText(option));
};
const expectOptionIsSelected = (listbox: HTMLElement, option: string) => {
@ -28,7 +28,9 @@ const expectOptionAvailability = async (
option: string,
disabled: boolean
) => {
await act(() => userEvent.click(listbox));
await act(async () => {
await userEvent.click(listbox);
});
const selectedOptions = within(listbox).getAllByText(option).reverse();
// its either two or one nodes, we only need last one
const selectedOption = selectedOptions[0];
@ -43,7 +45,9 @@ const expectOptionAvailability = async (
'cursor',
disabled ? 'not-allowed' : 'pointer'
);
await act(() => userEvent.click(listbox));
await act(async () => {
await userEvent.click(listbox);
});
};
const renderComponent = (props: CustomParamsProps, defaults = {}) => {
@ -85,7 +89,9 @@ describe('CustomParams', () => {
beforeEach(async () => {
renderComponent({ isSubmitting: false });
button = screen.getByRole('button');
await act(() => userEvent.click(button));
await act(async () => {
await userEvent.click(button);
});
});
it('button click creates custom param fieldset', async () => {
@ -120,8 +126,12 @@ describe('CustomParams', () => {
});
it('multiple button clicks create multiple fieldsets', async () => {
await act(() => userEvent.click(button));
await act(() => userEvent.click(button));
await act(async () => {
await userEvent.click(button);
});
await act(async () => {
await userEvent.click(button);
});
const listboxes = screen.getAllByRole('listbox');
expect(listboxes.length).toBe(3);
@ -131,7 +141,9 @@ describe('CustomParams', () => {
});
it("can't select already selected option", async () => {
await act(() => userEvent.click(button));
await act(async () => {
await userEvent.click(button);
});
const listboxes = screen.getAllByRole('listbox');
@ -144,8 +156,12 @@ describe('CustomParams', () => {
});
it('when fieldset with selected custom property type is deleted disabled options update correctly', async () => {
await act(() => userEvent.click(button));
await act(() => userEvent.click(button));
await act(async () => {
await userEvent.click(button);
});
await act(async () => {
await userEvent.click(button);
});
const listboxes = screen.getAllByRole('listbox');
@ -172,7 +188,9 @@ describe('CustomParams', () => {
const deleteSecondFieldsetButton = screen.getByTitle(
'Delete customParam field 1'
);
await act(() => userEvent.click(deleteSecondFieldsetButton));
await act(async () => {
await userEvent.click(deleteSecondFieldsetButton);
});
expect(secondListbox).not.toBeInTheDocument();
await expectOptionAvailability(

4
kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
View file

@ -46,9 +46,9 @@ describe('TimeToRetainBtn', () => {
);
expect(buttonElement).toHaveStyle(`border:none`);
});
it('should test the non active state with click becoming active', () => {
it('should test the non active state with click becoming active', async () => {
const buttonElement = screen.getByRole('button');
userEvent.click(buttonElement);
await userEvent.click(buttonElement);
expect(buttonElement).toHaveStyle(
`background-color:${theme.button.secondary.invertedColors.normal}`
);

9
kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.spec.tsx
View file

@ -67,14 +67,17 @@ describe('TopicForm', () => {
onSubmit: onSubmit.mockImplementation((e) => e.preventDefault()),
});
await act(() => {
userEvent.type(screen.getByPlaceholderText('Topic Name'), 'topicName');
await act(async () => {
await userEvent.type(
screen.getByPlaceholderText('Topic Name'),
'topicName'
);
});
await act(() => {
fireEvent.submit(screen.getByLabelText('topic form'));
});
userEvent.click(screen.getByRole('button', { name: 'Create topic' }));
await userEvent.click(screen.getByRole('button', { name: 'Create topic' }));
expect(onSubmit).toBeCalledTimes(1);
});
});

4
kafka-ui-react-app/src/components/__tests__/App.spec.tsx
View file

@ -42,7 +42,7 @@ describe('App', () => {
).toBeInTheDocument();
});
it('handle burger click correctly', () => {
it('handle burger click correctly', async () => {
const burger = within(screen.getByLabelText('Page Header')).getByRole(
'button',
burgerButtonOptions
@ -52,7 +52,7 @@ describe('App', () => {
expect(overlay).toBeInTheDocument();
expect(overlay).toHaveStyleRule('visibility: hidden');
expect(burger).toHaveStyleRule('display: none');
userEvent.click(burger);
await userEvent.click(burger);
expect(overlay).toHaveStyleRule('visibility: visible');
});

4
kafka-ui-react-app/src/components/common/Alert/__tests__/Alert.spec.tsx
View file

@ -26,9 +26,9 @@ describe('Alert', () => {
expect(screen.getByRole('contentinfo')).toHaveTextContent(message);
expect(getButton()).toBeInTheDocument();
});
it('handles dismiss callback', () => {
it('handles dismiss callback', async () => {
setupComponent();
userEvent.click(getButton());
await userEvent.click(getButton());
expect(dismiss).toHaveBeenCalled();
});
});

8
kafka-ui-react-app/src/components/common/Input/__tests__/Input.spec.tsx
View file

@ -25,17 +25,17 @@ describe('Custom Input', () => {
describe('number', () => {
const getInput = () => screen.getByRole('spinbutton');
it('allows user to type only numbers', () => {
it('allows user to type only numbers', async () => {
render(setupWrapper({ type: 'number' }));
const input = getInput();
userEvent.type(input, 'abc131');
await userEvent.type(input, 'abc131');
expect(input).toHaveValue(131);
});
it('allows negative values', () => {
it('allows negative values', async () => {
render(setupWrapper({ type: 'number' }));
const input = getInput();
userEvent.type(input, '-2');
await userEvent.type(input, '-2');
expect(input).toHaveValue(-2);
});
});

59
kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
View file

@ -11,7 +11,6 @@ import { screen, waitFor } from '@testing-library/dom';
import { ColumnDef, Row } from '@tanstack/react-table';
import userEvent from '@testing-library/user-event';
import { formatTimestamp } from 'lib/dateTimeHelpers';
import { act } from '@testing-library/react';
import { ConnectorState, ConsumerGroupState } from 'generated-sources';
const mockedUsedNavigate = jest.fn();
@ -155,15 +154,15 @@ describe('Table', () => {
});
describe('ExpanderCell', () => {
it('renders button', () => {
it('renders button', async () => {
renderComponent({ getRowCanExpand: () => true });
const btns = screen.getAllByRole('button', { name: 'Expand row' });
expect(btns.length).toEqual(data.length);
expect(screen.queryByText('I am expanded row')).not.toBeInTheDocument();
userEvent.click(btns[2]);
await userEvent.click(btns[2]);
expect(screen.getByText('I am expanded row')).toBeInTheDocument();
userEvent.click(btns[0]);
await userEvent.click(btns[0]);
expect(screen.getAllByText('I am expanded row').length).toEqual(2);
});
@ -213,20 +212,20 @@ describe('Table', () => {
expect(lastBtn).toBeInTheDocument();
expect(lastBtn).toBeEnabled();
userEvent.click(nextBtn);
await userEvent.click(nextBtn);
expect(screen.getByText('ipsum')).toBeInTheDocument();
expect(prevBtn).toBeEnabled();
expect(firstBtn).toBeEnabled();
userEvent.click(lastBtn);
await userEvent.click(lastBtn);
expect(screen.getByText('sit')).toBeInTheDocument();
expect(lastBtn).toBeDisabled();
expect(nextBtn).toBeDisabled();
userEvent.click(prevBtn);
await userEvent.click(prevBtn);
expect(screen.getByText('dolor')).toBeInTheDocument();
userEvent.click(firstBtn);
await userEvent.click(firstBtn);
expect(screen.getByText('lorem')).toBeInTheDocument();
});
@ -243,22 +242,22 @@ describe('Table', () => {
expect(goToPage).toBeInTheDocument();
expect(goToPage).toHaveValue(1);
});
it('updates page on Go To page change', () => {
it('updates page on Go To page change', async () => {
const goToPage = getGoToPageInput();
userEvent.clear(goToPage);
userEvent.type(goToPage, '2');
await userEvent.clear(goToPage);
await userEvent.type(goToPage, '2');
expect(goToPage).toHaveValue(2);
expect(screen.getByText('ipsum')).toBeInTheDocument();
});
it('does not update page on Go To page change if page is out of range', () => {
it('does not update page on Go To page change if page is out of range', async () => {
const goToPage = getGoToPageInput();
userEvent.type(goToPage, '5');
await userEvent.type(goToPage, '5');
expect(goToPage).toHaveValue(15);
expect(screen.getByText('No rows found')).toBeInTheDocument();
});
it('does not update page on Go To page change if page is not a number', () => {
it('does not update page on Go To page change if page is not a number', async () => {
const goToPage = getGoToPageInput();
userEvent.type(goToPage, 'abc');
await userEvent.type(goToPage, 'abc');
expect(goToPage).toHaveValue(1);
});
});
@ -266,12 +265,10 @@ describe('Table', () => {
describe('Sorting', () => {
it('sort rows', async () => {
await act(() =>
renderComponent({
path: '/?sortBy=text&&sortDirection=desc',
enableSorting: true,
})
);
await renderComponent({
path: '/?sortBy=text&&sortDirection=desc',
enableSorting: true,
});
expect(screen.getAllByRole('row').length).toEqual(data.length + 1);
const th = screen.getByRole('columnheader', { name: 'Text' });
expect(th).toBeInTheDocument();
@ -319,42 +316,42 @@ describe('Table', () => {
expect(checkboxes[4]).toBeDisabled();
});
it('renders action bar', () => {
it('renders action bar', async () => {
expect(screen.getAllByRole('row').length).toEqual(data.length + 1);
expect(screen.queryByText('I am Action Bar')).not.toBeInTheDocument();
const checkboxes = screen.getAllByRole('checkbox');
expect(checkboxes.length).toEqual(data.length + 1);
userEvent.click(checkboxes[2]);
await userEvent.click(checkboxes[2]);
expect(screen.getByText('I am Action Bar')).toBeInTheDocument();
});
});
describe('Clickable Row', () => {
const onRowClick = jest.fn();
it('handles onRowClick', () => {
it('handles onRowClick', async () => {
renderComponent({ onRowClick });
const rows = screen.getAllByRole('row');
expect(rows.length).toEqual(data.length + 1);
userEvent.click(rows[1]);
await userEvent.click(rows[1]);
expect(onRowClick).toHaveBeenCalledTimes(1);
});
it('does nothing unless onRowClick is provided', () => {
it('does nothing unless onRowClick is provided', async () => {
renderComponent();
const rows = screen.getAllByRole('row');
expect(rows.length).toEqual(data.length + 1);
userEvent.click(rows[1]);
await userEvent.click(rows[1]);
});
it('does not handle onRowClick if enableRowSelection', () => {
it('does not handle onRowClick if enableRowSelection', async () => {
renderComponent({ onRowClick, enableRowSelection: true });
const rows = screen.getAllByRole('row');
expect(rows.length).toEqual(data.length + 1);
userEvent.click(rows[1]);
await userEvent.click(rows[1]);
expect(onRowClick).not.toHaveBeenCalled();
});
it('does not handle onRowClick if expandable rows', () => {
it('does not handle onRowClick if expandable rows', async () => {
renderComponent({ onRowClick, getRowCanExpand: () => true });
const rows = screen.getAllByRole('row');
expect(rows.length).toEqual(data.length + 1);
userEvent.click(rows[1]);
await userEvent.click(rows[1]);
expect(onRowClick).not.toHaveBeenCalled();
});
});

6
kafka-ui-react-app/src/components/common/Search/__tests__/Search.spec.tsx
View file

@ -24,11 +24,11 @@ describe('Search', () => {
setSearchParamsMock,
]);
});
it('calls handleSearch on input', () => {
it('calls handleSearch on input', async () => {
render(<Search placeholder={placeholder} />);
const input = screen.getByPlaceholderText(placeholder);
userEvent.click(input);
userEvent.keyboard('value');
await userEvent.click(input);
await userEvent.keyboard('value');
expect(setSearchParamsMock).toHaveBeenCalledTimes(5);
});

20
kafka-ui-react-app/src/components/common/Select/__tests__/Select.spec.tsx
View file

@ -36,29 +36,29 @@ describe('Custom Select', () => {
expect(getListbox()).toBeInTheDocument();
});
it('show select options when select is being clicked', () => {
it('show select options when select is being clicked', async () => {
expect(getOption()).toBeInTheDocument();
userEvent.click(getListbox());
await userEvent.click(getListbox());
expect(screen.getAllByRole('option')).toHaveLength(3);
});
it('checking select option change', () => {
it('checking select option change', async () => {
const optionLabel = 'test-label1';
userEvent.click(getListbox());
userEvent.selectOptions(getListbox(), [optionLabel]);
await userEvent.click(getListbox());
await userEvent.selectOptions(getListbox(), [optionLabel]);
expect(getOption()).toHaveTextContent(optionLabel);
});
it('trying to select disabled option does not trigger change', () => {
it('trying to select disabled option does not trigger change', async () => {
const normalOptionLabel = 'test-label1';
const disabledOptionLabel = 'test-label2';
userEvent.click(getListbox());
userEvent.selectOptions(getListbox(), [normalOptionLabel]);
userEvent.click(getListbox());
userEvent.selectOptions(getListbox(), [disabledOptionLabel]);
await userEvent.click(getListbox());
await userEvent.selectOptions(getListbox(), [normalOptionLabel]);
await userEvent.click(getListbox());
await userEvent.selectOptions(getListbox(), [disabledOptionLabel]);
expect(getOption()).toHaveTextContent(normalOptionLabel);
});

16
kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx
View file

@ -61,7 +61,7 @@ describe('TableHeaderCell', () => {
expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`);
expect(title).toHaveStyle('cursor: pointer;');
});
it('renders click on title triggers handler', () => {
it('renders click on title triggers handler', async () => {
setupComponent({
title: testTitle,
orderBy: TopicColumnsToSort.NAME,
@ -69,11 +69,11 @@ describe('TableHeaderCell', () => {
handleOrderBy,
});
const title = within(getColumnHeader()).getByRole('button');
userEvent.click(title);
await userEvent.click(title);
expect(handleOrderBy.mock.calls.length).toBe(1);
});
it('renders space on title triggers handler', () => {
it('renders space on title triggers handler', async () => {
setupComponent({
title: testTitle,
orderBy: TopicColumnsToSort.NAME,
@ -81,30 +81,30 @@ describe('TableHeaderCell', () => {
handleOrderBy,
});
const title = within(getColumnHeader()).getByRole('button');
userEvent.type(title, SPACE_KEY);
await userEvent.type(title, SPACE_KEY);
// userEvent.type clicks and only then presses space
expect(handleOrderBy.mock.calls.length).toBe(2);
});
it('click on preview triggers handler', () => {
it('click on preview triggers handler', async () => {
setupComponent({
title: testTitle,
previewText: testPreviewText,
onPreview,
});
const preview = within(getColumnHeader()).getByRole('button');
userEvent.click(preview);
await userEvent.click(preview);
expect(onPreview.mock.calls.length).toBe(1);
});
it('click on preview triggers handler', () => {
it('click on preview triggers handler', async () => {
setupComponent({
title: testTitle,
previewText: testPreviewText,
onPreview,
});
const preview = within(getColumnHeader()).getByRole('button');
userEvent.type(preview, SPACE_KEY);
await userEvent.type(preview, SPACE_KEY);
expect(onPreview.mock.calls.length).toBe(2);
});