From c7c32b494e60556b70cce5ca5911670879d2de1a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 23 Oct 2021 10:34:20 +0200
Subject: [PATCH] Created ManageServersRow test

---
 src/servers/ManageServersRow.tsx       |  6 +--
 test/servers/ManageServersRow.test.tsx | 66 ++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 test/servers/ManageServersRow.test.tsx

diff --git a/src/servers/ManageServersRow.tsx b/src/servers/ManageServersRow.tsx
index c881a5fe..396c30e0 100644
--- a/src/servers/ManageServersRow.tsx
+++ b/src/servers/ManageServersRow.tsx
@@ -11,13 +11,9 @@ export interface ManageServersRowProps {
   hasAutoConnect: boolean;
 }
 
-interface ManageServersRowPropsConnectProps extends ManageServersRowProps {
-  setAutoConnect: (server: ServerWithId, autoConnect: boolean) => void;
-}
-
 export const ManageServersRow = (
   ManageServersRowDropdown: FC<ManageServersRowDropdownProps>,
-): FC<ManageServersRowPropsConnectProps> => ({ server, hasAutoConnect }) => (
+): FC<ManageServersRowProps> => ({ server, hasAutoConnect }) => (
   <tr className="responsive-table__row">
     {hasAutoConnect && (
       <td className="responsive-table__cell" data-th="Auto-connect">
diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx
new file mode 100644
index 00000000..7a1a7658
--- /dev/null
+++ b/test/servers/ManageServersRow.test.tsx
@@ -0,0 +1,66 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { UncontrolledTooltip } from 'reactstrap';
+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(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(<ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  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');
+
+    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));
+  });
+
+  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);
+  });
+
+  it('renders server props where appropriate', () => {
+    const wrapper = createWrapper();
+    const link = wrapper.find(Link);
+    const td = wrapper.find('td').first();
+
+    expect(link.prop('to')).toEqual(`/server/${server.id}`);
+    expect(link.prop('children')).toEqual(server.name);
+    expect(td.prop('children')).toEqual(server.url);
+  });
+});