From 49e1f82b039954f881b4b658d1d8d0ed9c26af96 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 4 Jun 2022 10:20:24 +0200
Subject: [PATCH] Migrated ManageServersRowDropdown test to react testing
 library

---
 src/servers/ManageServersRowDropdown.tsx      |  2 +-
 .../servers/ManageServersRowDropdown.test.tsx | 96 +++++++------------
 2 files changed, 37 insertions(+), 61 deletions(-)

diff --git a/src/servers/ManageServersRowDropdown.tsx b/src/servers/ManageServersRowDropdown.tsx
index 51863d58..f0da17a5 100644
--- a/src/servers/ManageServersRowDropdown.tsx
+++ b/src/servers/ManageServersRowDropdown.tsx
@@ -39,7 +39,7 @@ export const ManageServersRowDropdown = (
       <DropdownItem tag={Link} to={`${serverUrl}/edit`}>
         <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
       </DropdownItem>
-      <DropdownItem onClick={() => setAutoConnect(server, !server.autoConnect)}>
+      <DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
         <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
       </DropdownItem>
       <DropdownItem divider />
diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx
index 95470a2a..98ad07ca 100644
--- a/test/servers/ManageServersRowDropdown.test.tsx
+++ b/test/servers/ManageServersRowDropdown.test.tsx
@@ -1,84 +1,60 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
-import { DropdownItem } from 'reactstrap';
+import { MemoryRouter } from 'react-router-dom';
 import { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowDropdown as createManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown';
 
 describe('<ManageServersRowDropdown />', () => {
-  const DeleteServerModal = () => null;
-  const ManageServersRowDropdown = createManageServersRowDropdown(DeleteServerModal);
+  const ManageServersRowDropdown = createManageServersRowDropdown(
+    ({ isOpen }) => <span>DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'}</span>,
+  );
   const setAutoConnect = jest.fn();
-  let wrapper: ShallowWrapper;
-  const createWrapper = (autoConnect = false) => {
+  const setUp = (autoConnect = false) => {
     const server = Mock.of<ServerWithId>({ id: 'abc123', autoConnect });
-
-    wrapper = shallow(<ManageServersRowDropdown setAutoConnect={setAutoConnect} server={server} />);
-
-    return wrapper;
+    return {
+      user: userEvent.setup(),
+      ...render(
+        <MemoryRouter>
+          <ManageServersRowDropdown setAutoConnect={setAutoConnect} server={server} />
+        </MemoryRouter>,
+      ),
+    };
   };
 
   afterEach(jest.clearAllMocks);
 
-  it('renders expected amount of dropdown items', () => {
-    const wrapper = createWrapper();
-    const items = wrapper.find(DropdownItem);
+  it('renders expected amount of dropdown items', async () => {
+    const { user } = setUp();
 
-    expect(items).toHaveLength(5);
-    expect(items.find('[divider]')).toHaveLength(1);
-    expect(items.at(0).prop('to')).toEqual('/server/abc123');
-    expect(items.at(1).prop('to')).toEqual('/server/abc123/edit');
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+
+    expect(screen.getAllByRole('menuitem')).toHaveLength(4);
+    expect(screen.getByRole('menuitem', { name: 'Connect' })).toHaveAttribute('href', '/server/abc123');
+    expect(screen.getByRole('menuitem', { name: 'Edit server' })).toHaveAttribute('href', '/server/abc123/edit');
   });
 
-  it('allows toggling auto-connect', () => {
-    const wrapper = createWrapper();
+  it('allows toggling auto-connect', async () => {
+    const { user } = setUp();
 
     expect(setAutoConnect).not.toHaveBeenCalled();
-    wrapper.find(DropdownItem).at(2).simulate('click');
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('menuitem', { name: 'Auto-connect' }));
     expect(setAutoConnect).toHaveBeenCalledWith(expect.objectContaining({ id: 'abc123' }), true);
   });
 
-  it('renders a modal', () => {
-    const wrapper = createWrapper();
-    const modal = wrapper.find(DeleteServerModal);
+  it('renders deletion modal', async () => {
+    const { user } = setUp();
 
-    expect(modal).toHaveLength(1);
-    expect(modal.prop('redirectHome')).toEqual(false);
-    expect(modal.prop('server')).toEqual(expect.objectContaining({ id: 'abc123' }));
-    expect(modal.prop('isOpen')).toEqual(false);
-  });
+    expect(screen.queryByText('DeleteServerModal [OPEN]')).not.toBeInTheDocument();
+    expect(screen.getByText('DeleteServerModal [CLOSED]')).toBeInTheDocument();
 
-  it('allows toggling the modal', () => {
-    const wrapper = createWrapper();
-    const modalToggle = wrapper.find(DropdownItem).last();
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove server' }));
 
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
-
-    modalToggle.simulate('click');
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(true);
-
-    (wrapper.find(DeleteServerModal).prop('toggle') as Function)();
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
-  });
-
-  it('can be toggled', () => {
-    const wrapper = createWrapper();
-
-    expect(wrapper.prop('isOpen')).toEqual(false);
-
-    (wrapper.prop('toggle') as Function)();
-    expect(wrapper.prop('isOpen')).toEqual(true);
-
-    (wrapper.prop('toggle') as Function)();
-    expect(wrapper.prop('isOpen')).toEqual(false);
-  });
-
-  it.each([
-    [true, 'Do not auto-connect'],
-    [false, 'Auto-connect'],
-  ])('shows different auto-connect toggle text depending on current server status', (autoConnect, expectedText) => {
-    const wrapper = createWrapper(autoConnect);
-    const item = wrapper.find(DropdownItem).at(2);
-
-    expect(item.html()).toContain(expectedText);
+    expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();
+    expect(screen.queryByText('DeleteServerModal [CLOSED]')).not.toBeInTheDocument();
   });
 });