From 56150e870726fa8778ff12a77dad3249db3e9f56 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 28 May 2022 12:16:17 +0200
Subject: [PATCH] Migrated TagCard test to react testing library

---
 src/tags/TagCard.tsx                       | 10 ++-
 src/tags/helpers/DeleteTagConfirmModal.tsx |  4 +-
 test/tags/TagCard.test.tsx                 | 91 ++++++++++------------
 3 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/src/tags/TagCard.tsx b/src/tags/TagCard.tsx
index 29d90828..a82eb3e1 100644
--- a/src/tags/TagCard.tsx
+++ b/src/tags/TagCard.tsx
@@ -40,10 +40,16 @@ export const TagCard = (
   return (
     <Card className="tag-card">
       <CardHeader className="tag-card__header">
-        <Button color="link" size="sm" className="tag-card__btn tag-card__btn--last" onClick={toggleDelete}>
+        <Button
+          aria-label="Delete tag"
+          color="link"
+          size="sm"
+          className="tag-card__btn tag-card__btn--last"
+          onClick={toggleDelete}
+        >
           <FontAwesomeIcon icon={deleteIcon} />
         </Button>
-        <Button color="link" size="sm" className="tag-card__btn" onClick={toggleEdit}>
+        <Button aria-label="Edit tag" color="link" size="sm" className="tag-card__btn" onClick={toggleEdit}>
           <FontAwesomeIcon icon={editIcon} />
         </Button>
         <h5
diff --git a/src/tags/helpers/DeleteTagConfirmModal.tsx b/src/tags/helpers/DeleteTagConfirmModal.tsx
index fd9e4a5a..6828af13 100644
--- a/src/tags/helpers/DeleteTagConfirmModal.tsx
+++ b/src/tags/helpers/DeleteTagConfirmModal.tsx
@@ -22,9 +22,7 @@ export const DeleteTagConfirmModal = (
 
   return (
     <Modal toggle={toggle} isOpen={isOpen} centered>
-      <ModalHeader toggle={toggle}>
-        <span className="text-danger">Delete tag</span>
-      </ModalHeader>
+      <ModalHeader toggle={toggle} className="text-danger">Delete tag</ModalHeader>
       <ModalBody>
         Are you sure you want to delete tag <b>{tag}</b>?
         {error && (
diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx
index 914f143e..cb31f3ad 100644
--- a/test/tags/TagCard.test.tsx
+++ b/test/tags/TagCard.test.tsx
@@ -1,69 +1,60 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Link } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
 import { TagCard as createTagCard } from '../../src/tags/TagCard';
-import { TagBullet } from '../../src/tags/helpers/TagBullet';
 import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
 import { ReachableServer } from '../../src/servers/data';
 
 describe('<TagCard />', () => {
-  let wrapper: ShallowWrapper;
-  const DeleteTagConfirmModal = jest.fn();
-  const EditTagModal = jest.fn();
-  const TagCard = createTagCard(DeleteTagConfirmModal, EditTagModal, Mock.all<ColorGenerator>());
-  const createWrapper = (tag = 'ssr') => {
-    wrapper = shallow(
-      <TagCard
-        tag={{ tag, visits: 23257, shortUrls: 48 }}
-        selectedServer={Mock.of<ReachableServer>({ id: '1' })}
-        displayed
-        toggle={() => {}}
-      />,
-    );
+  const TagCard = createTagCard(
+    ({ isOpen }) => <span>DeleteTagConfirmModal {isOpen ? '[Open]' : '[Closed]'}</span>,
+    ({ isOpen }) => <span>EditTagModal {isOpen ? '[Open]' : '[Closed]'}</span>,
+    Mock.of<ColorGenerator>({ getColorForKey: () => '' }),
+  );
+  const setUp = (tag = 'ssr') => ({
+    user: userEvent.setup(),
+    ...render(
+      <MemoryRouter>
+        <TagCard
+          tag={{ tag, visits: 23257, shortUrls: 48 }}
+          selectedServer={Mock.of<ReachableServer>({ id: '1' })}
+          displayed
+          toggle={() => {}}
+        />
+      </MemoryRouter>,
+    ),
+  });
 
-    return wrapper;
-  };
-
-  beforeEach(() => createWrapper());
-
-  afterEach(() => wrapper.unmount());
   afterEach(jest.resetAllMocks);
 
   it.each([
-    ['ssr', '/server/1/list-short-urls/1?tags=ssr'],
-    ['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo'],
-  ])('shows a TagBullet and a link to the list filtering by the tag', (tag, expectedLink) => {
-    const wrapper = createWrapper(tag);
-    const links = wrapper.find(Link);
-    const bullet = wrapper.find(TagBullet);
+    ['ssr', '/server/1/list-short-urls/1?tags=ssr', '/server/1/tag/ssr/visits'],
+    ['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo', '/server/1/tag/ssr-&-foo/visits'],
+  ])('shows expected links for provided tags', (tag, shortUrlsLink, visitsLink) => {
+    setUp(tag);
 
-    expect(links.at(0).prop('to')).toEqual(expectedLink);
-    expect(bullet.prop('tag')).toEqual(tag);
+    expect(screen.getByText('48').parentNode).toHaveAttribute('href', shortUrlsLink);
+    expect(screen.getByText('23,257').parentNode).toHaveAttribute('href', visitsLink);
   });
 
-  it('displays delete modal when delete btn is clicked', () => {
-    const delBtn = wrapper.find('.tag-card__btn').at(0);
+  it('displays delete modal when delete btn is clicked', async () => {
+    const { user } = setUp();
 
-    expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false);
-    delBtn.simulate('click');
-    expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true);
+    expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Open]');
+    expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Closed]');
+    await user.click(screen.getByLabelText('Delete tag'));
+    expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Open]');
+    expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Closed]');
   });
 
-  it('displays edit modal when edit btn is clicked', () => {
-    const editBtn = wrapper.find('.tag-card__btn').at(1);
+  it('displays edit modal when edit btn is clicked', async () => {
+    const { user } = setUp();
 
-    expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false);
-    editBtn.simulate('click');
-    expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true);
-  });
-
-  it('shows expected tag stats', () => {
-    const links = wrapper.find(Link);
-
-    expect(links).toHaveLength(2);
-    expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tags=ssr');
-    expect(links.at(0).text()).toContain('48');
-    expect(links.at(1).prop('to')).toEqual('/server/1/tag/ssr/visits');
-    expect(links.at(1).text()).toContain('23,257');
+    expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Open]');
+    expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Closed]');
+    await user.click(screen.getByLabelText('Edit tag'));
+    expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Open]');
+    expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Closed]');
   });
 });