Changes Connect/Details/Tasks/ListItem compoenents label to restart task from 'Clear messages' to 'Restart task' and refactors ListItem's test to use testing library (#1507)

Co-authored-by: Damir Abdulganiev <dabdulganiev@provectus.com>

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx

@@ -42,7 +42,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
         <div>
           <Dropdown label={<VerticalElipsisIcon />} right>
             <DropdownItem onClick={restartTaskHandler} danger>
-              <span>Clear Messages</span>
+              <span>Restart task</span>
             </DropdownItem>
           </Dropdown>
         </div>

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 { render } from 'lib/testHelpers';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { containerRendersView, TestRouterWrapper } 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 { Route } from 'react-router-dom';
-import theme from 'theme/theme';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-describe('ListItem', () => {
+const pathname = clusterConnectConnectorTasksPath(
-  containerRendersView(
-    <table>
-      <tbody>
-        <ListItemContainer task={tasks[0]} />
-      </tbody>
-    </table>,
-    ListItem
-  );
-
-  describe('view', () => {
-    const pathname = clusterConnectConnectorTasksPath(
   ':clusterName',
   ':connectName',
   ':connectorName'
-    );
+);
-    const clusterName = 'my-cluster';
+const clusterName = 'my-cluster';
-    const connectName = 'my-connect';
+const connectName = 'my-connect';
-    const connectorName = 'my-connector';
+const connectorName = 'my-connector';
+const restartTask = jest.fn();
+const task = tasks[0];
 
-    const setupWrapper = (props: Partial<ListItemProps> = {}) => (
+const renderComponent = (props: ListItemProps = { task, restartTask }) => {
-      <ThemeProvider theme={theme}>
+  return render(
-        <TestRouterWrapper
+    <Route path={pathname}>
-          pathname={pathname}
-          urlParams={{ clusterName, connectName, connectorName }}
-        >
       <table>
         <tbody>
-              <ListItem task={tasks[0]} restartTask={jest.fn()} {...props} />
+          <ListItem {...props} />
         </tbody>
       </table>
-        </TestRouterWrapper>
+    </Route>,
-      </ThemeProvider>
+    {
+      pathname: clusterConnectConnectorTasksPath(
+        clusterName,
+        connectName,
+        connectorName
+      ),
+    }
   );
+};
 
-    it('matches snapshot', () => {
+describe('ListItem', () => {
-      const wrapper = create(setupWrapper());
+  it('renders', () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+    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();
 
-    it('calls restartTask on button click', async () => {
+    expect(restartTask).not.toBeCalled();
-      const restartTask = jest.fn();
+    userEvent.click(screen.getByRole('button'));
-      const wrapper = mount(setupWrapper({ restartTask }));
+    userEvent.click(screen.getByRole('menuitem'));
-      await act(async () => {
+    expect(restartTask).toBeCalledTimes(1);
-        wrapper.find('svg').simulate('click');
-      });
-      await act(async () => {
-        wrapper.find('span').simulate('click');
-      });
-      expect(restartTask).toHaveBeenCalledTimes(1);
     expect(restartTask).toHaveBeenCalledWith(
       clusterName,
       connectName,
       connectorName,
-        tasks[0].id?.task
+      task.id?.task
     );
   });
-  });
 });

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -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;
-}
-
-<table>
-  <tbody>
-    <tr>
-      <td>
-        1
-      </td>
-      <td>
-        kafka-connect0:8083
-      </td>
-      <td>
-        <p
-          className="c0"
-          color="yellow"
-        >
-          RUNNING
-        </p>
-      </td>
-      <td>
-        null
-      </td>
-      <td
-        style={
-          Object {
-            "width": "5%",
-          }
-        }
-      >
-        <div>
-          <div
-            className="dropdown is-right"
-          >
-            <div
-              className="c1"
-            >
-              <button
-                className="c2"
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  fill="none"
-                  height="16"
-                  viewBox="0 0 4 16"
-                  width="4"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-                    fill="#73848C"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              className="dropdown-menu"
-              id="dropdown-menu"
-              role="menu"
-            >
-              <div
-                className="dropdown-content has-text-left"
-              >
-                <a
-                  className="c3 dropdown-item is-link"
-                  href="#end"
-                  onClick={[Function]}
-                  role="menuitem"
-                  type="button"
-                >
-                  <span>
-                    Clear Messages
-                  </span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;