Migrated ManageServersRow test to react testing library

test/servers/ManageServersRow.test.tsx

@@ -1,66 +1,58 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { UncontrolledTooltip } from 'reactstrap';
+import { MemoryRouter } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } 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(() => <span>ManageServersRowDropdown</span>);
-  const ManageServersRow = createManageServersRow(ManageServersRowDropdown);
   const server: ServerWithId = {
     name: 'My server',
     url: 'https://example.com',
     apiKey: '123',
     id: 'abc',
   };
-  let wrapper: ShallowWrapper;
+  const setUp = (hasAutoConnect = false, autoConnect = false) => render(
-  const createWrapper = (hasAutoConnect = false, autoConnect = false) => {
+    <MemoryRouter>
-    wrapper = shallow(<ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />);
+      <table>
-
+        <tbody>
-    return wrapper;
+          <ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />
-  };
+        </tbody>
-
+      </table>
-  afterEach(() => wrapper?.unmount());
+    </MemoryRouter>,
+  );
 
   it.each([
     [true, 4],
     [false, 3],
   ])('renders expected amount of columns', (hasAutoConnect, expectedCols) => {
-    const wrapper = createWrapper(hasAutoConnect);
+    setUp(hasAutoConnect);
-    const td = wrapper.find('td');
+
-    const th = wrapper.find('th');
+    const td = screen.getAllByRole('cell');
+    const th = screen.getAllByRole('columnheader');
 
     expect(td.length + th.length).toEqual(expectedCols);
   });
 
   it('renders a dropdown', () => {
-    const wrapper = createWrapper();
+    setUp();
-    const dropdown = wrapper.find(ManageServersRowDropdown);
+    expect(screen.getByText('ManageServersRowDropdown')).toBeInTheDocument();
-
-    expect(dropdown).toHaveLength(1);
-    expect(dropdown.prop('server')).toEqual(expect.objectContaining(server));
   });
 
   it.each([
-    [true, 1],
+    [true],
-    [false, 0],
+    [false],
-  ])('renders auto-connect icon only if server is autoConnect', (autoConnect, expectedIcons) => {
+  ])('renders auto-connect icon only if server is autoConnect', (autoConnect) => {
-    const wrapper = createWrapper(true, autoConnect);
+    const { container } = setUp(true, autoConnect);
-    const icon = wrapper.find(FontAwesomeIcon);
+    expect(container).toMatchSnapshot();
-    const iconTooltip = wrapper.find(UncontrolledTooltip);
-
-    expect(icon).toHaveLength(expectedIcons);
-    expect(iconTooltip).toHaveLength(expectedIcons);
   });
 
   it('renders server props where appropriate', () => {
-    const wrapper = createWrapper();
+    setUp();
-    const link = wrapper.find(Link);
-    const td = wrapper.find('td').first();
 
-    expect(link.prop('to')).toEqual(`/server/${server.id}`);
+    const link = screen.getByRole('link');
-    expect(link.prop('children')).toEqual(server.name);
+
-    expect(td.prop('children')).toEqual(server.url);
+    expect(link).toHaveAttribute('href', `/server/${server.id}`);
+    expect(link).toHaveTextContent(server.name);
+    expect(screen.getByText(server.url)).toBeInTheDocument();
   });
 });

test/servers/__snapshots__/ManageServersRow.test.tsx.snap

@@ -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>
+`;