From 63433864d30d868745892095099aecda69320689 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 17 May 2022 22:31:02 +0200
Subject: [PATCH] Migrated ServersDropdown to react testing library

---
 src/servers/ServersDropdown.tsx         |  4 +-
 src/servers/services/provideServices.ts |  2 +-
 test/servers/ServersDropdown.test.tsx   | 68 ++++++++++++++-----------
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index cf619228..e549471a 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@@ -10,7 +10,7 @@ export interface ServersDropdownProps {
   selectedServer: SelectedServer;
 }
 
-const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
+export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
   const serversList = values(servers);
 
   const renderServers = () => {
@@ -46,5 +46,3 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
     </UncontrolledDropdown>
   );
 };
-
-export default ServersDropdown;
diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts
index fcb04a46..9f177cb6 100644
--- a/src/servers/services/provideServices.ts
+++ b/src/servers/services/provideServices.ts
@@ -1,6 +1,6 @@
 import Bottle from 'bottlejs';
 import CreateServer from '../CreateServer';
-import ServersDropdown from '../ServersDropdown';
+import { ServersDropdown } from '../ServersDropdown';
 import DeleteServerModal from '../DeleteServerModal';
 import DeleteServerButton from '../DeleteServerButton';
 import { EditServer } from '../EditServer';
diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx
index eab1eca2..19e8e616 100644
--- a/test/servers/ServersDropdown.test.tsx
+++ b/test/servers/ServersDropdown.test.tsx
@@ -1,44 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { values } from 'ramda';
 import { Mock } from 'ts-mockery';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { DropdownItem, DropdownToggle } from 'reactstrap';
-import ServersDropdown from '../../src/servers/ServersDropdown';
-import { ServerWithId } from '../../src/servers/data';
+import { MemoryRouter } from 'react-router-dom';
+import { ServersDropdown } from '../../src/servers/ServersDropdown';
+import { ServersMap, ServerWithId } from '../../src/servers/data';
 
 describe('<ServersDropdown />', () => {
-  let wrapped: ShallowWrapper;
-  const servers = {
+  const fallbackServers: ServersMap = {
     '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
     '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
     '3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
   };
-
-  beforeEach(() => {
-    wrapped = shallow(<ServersDropdown servers={servers} selectedServer={null} />);
-  });
-  afterEach(() => wrapped.unmount());
-
-  it('contains the list of servers, the divider, the create button and the export button', () =>
-    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
-
-  it('contains a toggle with proper title', () =>
-    expect(wrapped.find(DropdownToggle)).toHaveLength(1));
-
-  it('contains a button to export servers', () => {
-    const items = wrapped.find(DropdownItem);
-
-    expect(items.filter('[divider]')).toHaveLength(1);
-    expect(items.filterWhere((item) => item.prop('to') === '/manage-servers')).toHaveLength(1);
+  const setUp = (servers: ServersMap = fallbackServers) => ({
+    user: userEvent.setup(),
+    ...render(<MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>),
   });
 
-  it('shows only create link when no servers exist yet', () => {
-    wrapped = shallow(
-      <ServersDropdown servers={{}} selectedServer={null} />,
-    );
-    const item = wrapped.find(DropdownItem);
+  it('contains the list of servers and the "mange servers" button', async () => {
+    const { user } = setUp();
 
-    expect(item).toHaveLength(1);
-    expect(item.prop('to')).toEqual('/server/create');
-    expect(item.find('span').text()).toContain('Add a server');
+    await user.click(screen.getByText('Servers'));
+    const items = screen.getAllByRole('menuitem');
+    expect(items).toHaveLength(values(fallbackServers).length + 1);
+    expect(items[0]).toHaveTextContent('foo');
+    expect(items[1]).toHaveTextContent('bar');
+    expect(items[2]).toHaveTextContent('baz');
+    expect(items[3]).toHaveTextContent('Manage servers');
+  });
+
+  it('contains a toggle with proper text', () => {
+    setUp();
+    expect(screen.getByRole('link')).toHaveTextContent('Servers');
+  });
+
+  it('contains a button to manage servers', async () => {
+    const { user } = setUp();
+
+    await user.click(screen.getByText('Servers'));
+    expect(screen.getByRole('menuitem', { name: 'Manage servers' })).toHaveAttribute('href', '/manage-servers');
+  });
+
+  it('shows only create link when no servers exist yet', async () => {
+    const { user } = setUp({});
+
+    await user.click(screen.getByText('Servers'));
+    expect(screen.getByRole('menuitem')).toHaveTextContent('Add a server');
   });
 });