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>
This commit is contained in:
Damir Abdulganiev
GitHub
parent
91a99794bb
commit
9bd881a97b
3 changed files with 62 additions and 195 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<table>
|
||||
<tbody>
|
||||
<ListItemContainer task={tasks[0]} />
|
||||
</tbody>
|
||||
</table>,
|
||||
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<ListItemProps> = {}) => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<TestRouterWrapper
|
||||
pathname={pathname}
|
||||
urlParams={{ clusterName, connectName, connectorName }}
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<ListItem task={tasks[0]} restartTask={jest.fn()} {...props} />
|
||||
</tbody>
|
||||
</table>
|
||||
</TestRouterWrapper>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
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(
|
||||
<Route path={pathname}>
|
||||
<table>
|
||||
<tbody>
|
||||
<ListItem {...props} />
|
||||
</tbody>
|
||||
</table>
|
||||
</Route>,
|
||||
{
|
||||
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
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
Loading…
Add table
Reference in a new issue