mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 09:47:28 +03:00
Migrated ManageServersRow test to react testing library
This commit is contained in:
Alejandro Celaya
parent
5dda4731a0
commit
cfe84e1275
2 changed files with 127 additions and 37 deletions
|
|
@ -1,66 +1,58 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { UncontrolledTooltip } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { ManageServersRow as createManageServersRow } from '../../src/servers/ManageServersRow';
|
||||
import { ServerWithId } from '../../src/servers/data';
|
||||
|
||||
describe('<ManageServersRow />', () => {
|
||||
const ManageServersRowDropdown = () => null;
|
||||
const ManageServersRow = createManageServersRow(ManageServersRowDropdown);
|
||||
const ManageServersRow = createManageServersRow(() => <span>ManageServersRowDropdown</span>);
|
||||
const server: ServerWithId = {
|
||||
name: 'My server',
|
||||
url: 'https://example.com',
|
||||
apiKey: '123',
|
||||
id: 'abc',
|
||||
};
|
||||
let wrapper: ShallowWrapper;
|
||||
const createWrapper = (hasAutoConnect = false, autoConnect = false) => {
|
||||
wrapper = shallow(<ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
const setUp = (hasAutoConnect = false, autoConnect = false) => render(
|
||||
<MemoryRouter>
|
||||
<table>
|
||||
<tbody>
|
||||
<ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />
|
||||
</tbody>
|
||||
</table>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it.each([
|
||||
[true, 4],
|
||||
[false, 3],
|
||||
])('renders expected amount of columns', (hasAutoConnect, expectedCols) => {
|
||||
const wrapper = createWrapper(hasAutoConnect);
|
||||
const td = wrapper.find('td');
|
||||
const th = wrapper.find('th');
|
||||
setUp(hasAutoConnect);
|
||||
|
||||
const td = screen.getAllByRole('cell');
|
||||
const th = screen.getAllByRole('columnheader');
|
||||
|
||||
expect(td.length + th.length).toEqual(expectedCols);
|
||||
});
|
||||
|
||||
it('renders a dropdown', () => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdown = wrapper.find(ManageServersRowDropdown);
|
||||
|
||||
expect(dropdown).toHaveLength(1);
|
||||
expect(dropdown.prop('server')).toEqual(expect.objectContaining(server));
|
||||
setUp();
|
||||
expect(screen.getByText('ManageServersRowDropdown')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
[true, 1],
|
||||
[false, 0],
|
||||
])('renders auto-connect icon only if server is autoConnect', (autoConnect, expectedIcons) => {
|
||||
const wrapper = createWrapper(true, autoConnect);
|
||||
const icon = wrapper.find(FontAwesomeIcon);
|
||||
const iconTooltip = wrapper.find(UncontrolledTooltip);
|
||||
|
||||
expect(icon).toHaveLength(expectedIcons);
|
||||
expect(iconTooltip).toHaveLength(expectedIcons);
|
||||
[true],
|
||||
[false],
|
||||
])('renders auto-connect icon only if server is autoConnect', (autoConnect) => {
|
||||
const { container } = setUp(true, autoConnect);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders server props where appropriate', () => {
|
||||
const wrapper = createWrapper();
|
||||
const link = wrapper.find(Link);
|
||||
const td = wrapper.find('td').first();
|
||||
setUp();
|
||||
|
||||
expect(link.prop('to')).toEqual(`/server/${server.id}`);
|
||||
expect(link.prop('children')).toEqual(server.name);
|
||||
expect(td.prop('children')).toEqual(server.url);
|
||||
const link = screen.getByRole('link');
|
||||
|
||||
expect(link).toHaveAttribute('href', `/server/${server.id}`);
|
||||
expect(link).toHaveTextContent(server.name);
|
||||
expect(screen.getByText(server.url)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
98
test/servers/__snapshots__/ManageServersRow.test.tsx.snap
Normal file
98
test/servers/__snapshots__/ManageServersRow.test.tsx.snap
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ManageServersRow /> renders auto-connect icon only if server is autoConnect 1`] = `
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="responsive-table__row"
|
||||
>
|
||||
<td
|
||||
class="responsive-table__cell"
|
||||
data-th="Auto-connect"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-check text-primary"
|
||||
data-icon="check"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
id="autoConnectIcon"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</td>
|
||||
<th
|
||||
class="responsive-table__cell"
|
||||
data-th="Name"
|
||||
>
|
||||
<a
|
||||
href="/server/abc"
|
||||
>
|
||||
My server
|
||||
</a>
|
||||
</th>
|
||||
<td
|
||||
class="responsive-table__cell"
|
||||
data-th="Base URL"
|
||||
>
|
||||
https://example.com
|
||||
</td>
|
||||
<td
|
||||
class="responsive-table__cell text-end"
|
||||
>
|
||||
<span>
|
||||
ManageServersRowDropdown
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ManageServersRow /> renders auto-connect icon only if server is autoConnect 2`] = `
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="responsive-table__row"
|
||||
>
|
||||
<td
|
||||
class="responsive-table__cell"
|
||||
data-th="Auto-connect"
|
||||
/>
|
||||
<th
|
||||
class="responsive-table__cell"
|
||||
data-th="Name"
|
||||
>
|
||||
<a
|
||||
href="/server/abc"
|
||||
>
|
||||
My server
|
||||
</a>
|
||||
</th>
|
||||
<td
|
||||
class="responsive-table__cell"
|
||||
data-th="Base URL"
|
||||
>
|
||||
https://example.com
|
||||
</td>
|
||||
<td
|
||||
class="responsive-table__cell text-end"
|
||||
>
|
||||
<span>
|
||||
ManageServersRowDropdown
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in a new issue