diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx
index 2b66b6ab..7c3e24ff 100644
--- a/test/servers/ManageServersRow.test.tsx
+++ b/test/servers/ManageServersRow.test.tsx
@@ -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('', () => {
- const ManageServersRowDropdown = () => null;
- const ManageServersRow = createManageServersRow(ManageServersRowDropdown);
+ const ManageServersRow = createManageServersRow(() => ManageServersRowDropdown);
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();
-
- return wrapper;
- };
-
- afterEach(() => wrapper?.unmount());
+ const setUp = (hasAutoConnect = false, autoConnect = false) => render(
+
+
+ ,
+ );
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();
});
});
diff --git a/test/servers/__snapshots__/ManageServersRow.test.tsx.snap b/test/servers/__snapshots__/ManageServersRow.test.tsx.snap
new file mode 100644
index 00000000..850ff084
--- /dev/null
+++ b/test/servers/__snapshots__/ManageServersRow.test.tsx.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` renders auto-connect icon only if server is autoConnect 1`] = `
+
+
+
+
+
+
+ |
+
+
+ My server
+
+ |
+
+ https://example.com
+ |
+
+
+ ManageServersRowDropdown
+
+ |
+
+
+
+
+`;
+
+exports[` renders auto-connect icon only if server is autoConnect 2`] = `
+
+
+
+
+ |
+
+
+ My server
+
+ |
+
+ https://example.com
+ |
+
+
+ ManageServersRowDropdown
+
+ |
+
+
+
+
+`;