diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx index aa7f33bd69..1c48d16a0d 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx @@ -42,7 +42,7 @@ const ListItem: React.FC = ({ task, restartTask }) => {
} right> - Clear Messages + Restart task
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx index 856e769b75..457d11b543 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx @@ -1,73 +1,73 @@ import React from 'react'; -import { create } from 'react-test-renderer'; -import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; -import { containerRendersView, TestRouterWrapper } from 'lib/testHelpers'; +import { render } from 'lib/testHelpers'; import { clusterConnectConnectorTasksPath } from 'lib/paths'; -import ListItemContainer from 'components/Connect/Details/Tasks/ListItem/ListItemContainer'; import ListItem, { ListItemProps, } from 'components/Connect/Details/Tasks/ListItem/ListItem'; import { tasks } from 'redux/reducers/connect/__test__/fixtures'; -import { ThemeProvider } from 'styled-components'; -import theme from 'theme/theme'; +import { Route } from 'react-router-dom'; +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; -describe('ListItem', () => { - containerRendersView( - - - - -
, - ListItem - ); +const pathname = clusterConnectConnectorTasksPath( + ':clusterName', + ':connectName', + ':connectorName' +); +const clusterName = 'my-cluster'; +const connectName = 'my-connect'; +const connectorName = 'my-connector'; +const restartTask = jest.fn(); +const task = tasks[0]; - describe('view', () => { - const pathname = clusterConnectConnectorTasksPath( - ':clusterName', - ':connectName', - ':connectorName' - ); - const clusterName = 'my-cluster'; - const connectName = 'my-connect'; - const connectorName = 'my-connector'; - - const setupWrapper = (props: Partial = {}) => ( - - - - - - -
-
-
- ); - - it('matches snapshot', () => { - const wrapper = create(setupWrapper()); - expect(wrapper.toJSON()).toMatchSnapshot(); - }); - - it('calls restartTask on button click', async () => { - const restartTask = jest.fn(); - const wrapper = mount(setupWrapper({ restartTask })); - await act(async () => { - wrapper.find('svg').simulate('click'); - }); - await act(async () => { - wrapper.find('span').simulate('click'); - }); - expect(restartTask).toHaveBeenCalledTimes(1); - expect(restartTask).toHaveBeenCalledWith( +const renderComponent = (props: ListItemProps = { task, restartTask }) => { + return render( + + + + + +
+
, + { + pathname: clusterConnectConnectorTasksPath( clusterName, connectName, - connectorName, - tasks[0].id?.task - ); - }); + connectorName + ), + } + ); +}; + +describe('ListItem', () => { + it('renders', () => { + renderComponent(); + expect(screen.getByRole('row')).toBeInTheDocument(); + expect( + screen.getByRole('cell', { name: task.status.id.toString() }) + ).toBeInTheDocument(); + expect( + screen.getByRole('cell', { name: task.status.workerId }) + ).toBeInTheDocument(); + expect( + screen.getByRole('cell', { name: task.status.state }) + ).toBeInTheDocument(); + expect(screen.getByRole('button')).toBeInTheDocument(); + expect(screen.getByRole('menu')).toBeInTheDocument(); + expect(screen.getByRole('menuitem')).toBeInTheDocument(); + }); + it('calls restartTask on button click', () => { + renderComponent(); + + expect(restartTask).not.toBeCalled(); + userEvent.click(screen.getByRole('button')); + userEvent.click(screen.getByRole('menuitem')); + expect(restartTask).toBeCalledTimes(1); + expect(restartTask).toHaveBeenCalledWith( + clusterName, + connectName, + connectorName, + task.id?.task + ); }); }); diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap deleted file mode 100644 index 753ad3c7e2..0000000000 --- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap +++ /dev/null @@ -1,133 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ListItem view matches snapshot 1`] = ` -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - -.c2 { - background: transparent; - border: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: 'center'; - -webkit-box-align: 'center'; - -ms-flex-align: 'center'; - align-items: 'center'; - -webkit-box-pack: 'center'; - -webkit-justify-content: 'center'; - -ms-flex-pack: 'center'; - justify-content: 'center'; -} - -.c2:hover { - cursor: pointer; -} - -.c3 { - color: #E51A1A; -} - -.c0 { - border: none; - border-radius: 16px; - height: 20px; - line-height: 20px; - background-color: #FFEECC; - color: #171A1C; - font-size: 12px; - display: inline-block; - padding-left: 0.75em; - padding-right: 0.75em; - text-align: center; -} - - - - - - - - - - - -
- 1 - - kafka-connect0:8083 - -

- RUNNING -

-
- null - -
-
-
- -
- -
-
-
-`;