From 1bd8636c199033534990a3ffa4ca733a2cdcf37f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 4 Jun 2022 09:59:19 +0200
Subject: [PATCH] Migrated ServersListGroup test to react testing library

---
 test/servers/ServersListGroup.test.tsx | 46 ++++++++++----------------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/test/servers/ServersListGroup.test.tsx b/test/servers/ServersListGroup.test.tsx
index 2f1b8e81..401777e7 100644
--- a/test/servers/ServersListGroup.test.tsx
+++ b/test/servers/ServersListGroup.test.tsx
@@ -1,6 +1,6 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { ListGroup } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
+import { MemoryRouter } from 'react-router-dom';
 import { ServersListGroup } from '../../src/servers/ServersListGroup';
 import { ServerWithId } from '../../src/servers/data';
 
@@ -9,44 +9,36 @@ describe('<ServersListGroup />', () => {
     Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
     Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
   ];
-  let wrapped: ShallowWrapper;
-  const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
+  const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
     const { servers = [], withChildren = true, embedded } = params;
 
-    wrapped = shallow(
-      <ServersListGroup servers={servers} embedded={embedded}>
-        {withChildren ? 'The list of servers' : undefined}
-      </ServersListGroup>,
+    return render(
+      <MemoryRouter>
+        <ServersListGroup servers={servers} embedded={embedded}>
+          {withChildren ? 'The list of servers' : undefined}
+        </ServersListGroup>
+      </MemoryRouter>,
     );
-
-    return wrapped;
   };
 
-  afterEach(() => wrapped?.unmount());
-
   it('renders title', () => {
-    const wrapped = createComponent({});
-    const title = wrapped.find('h5');
-
-    expect(title).toHaveLength(1);
-    expect(title.text()).toEqual('The list of servers');
+    setUp({});
+    expect(screen.getByRole('heading')).toHaveTextContent('The list of servers');
   });
 
   it('does not render title when children is not provided', () => {
-    const wrapped = createComponent({ withChildren: false });
-    const title = wrapped.find('h5');
-
-    expect(title).toHaveLength(0);
+    setUp({ withChildren: false });
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
   });
 
   it.each([
     [servers],
     [[]],
   ])('shows servers list', (servers) => {
-    const wrapped = createComponent({ servers });
+    setUp({ servers });
 
-    expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0);
-    expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
+    expect(screen.queryAllByRole('list')).toHaveLength(servers.length ? 1 : 0);
+    expect(screen.queryAllByRole('link')).toHaveLength(servers.length);
   });
 
   it.each([
@@ -54,9 +46,7 @@ describe('<ServersListGroup />', () => {
     [false, 'servers-list__list-group'],
     [undefined, 'servers-list__list-group'],
   ])('renders proper classes for embedded', (embedded, expectedClasses) => {
-    const wrapped = createComponent({ servers, embedded });
-    const listGroup = wrapped.find(ListGroup);
-
-    expect(listGroup.prop('className')).toEqual(expectedClasses);
+    setUp({ servers, embedded });
+    expect(screen.getByRole('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
   });
 });