From c00aaa90180154b0e8c8ddc3644f725fd41b7215 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 2 May 2022 18:54:19 +0200
Subject: [PATCH] Migrated UseExistingIfFoundInfoIcon test from enzyme to react
 testing library

---
 src/short-urls/ShortUrlForm.tsx               |  2 +-
 src/short-urls/UseExistingIfFoundInfoIcon.tsx |  4 +---
 .../UseExistingIfFoundInfoIcon.test.tsx       | 24 ++++++-------------
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx
index c6b9800d..23406833 100644
--- a/src/short-urls/ShortUrlForm.tsx
+++ b/src/short-urls/ShortUrlForm.tsx
@@ -12,7 +12,7 @@ import { SelectedServer } from '../servers/data';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import { DomainSelectorProps } from '../domains/DomainSelector';
 import { formatIsoDate } from '../utils/helpers/date';
-import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
+import { UseExistingIfFoundInfoIcon } from './UseExistingIfFoundInfoIcon';
 import { ShortUrlData } from './data';
 import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup';
 import './ShortUrlForm.scss';
diff --git a/src/short-urls/UseExistingIfFoundInfoIcon.tsx b/src/short-urls/UseExistingIfFoundInfoIcon.tsx
index 6024c810..2732247e 100644
--- a/src/short-urls/UseExistingIfFoundInfoIcon.tsx
+++ b/src/short-urls/UseExistingIfFoundInfoIcon.tsx
@@ -36,7 +36,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void })
   </Modal>
 );
 
-const UseExistingIfFoundInfoIcon = () => {
+export const UseExistingIfFoundInfoIcon = () => {
   const [isModalOpen, toggleModal] = useToggle();
 
   return (
@@ -48,5 +48,3 @@ const UseExistingIfFoundInfoIcon = () => {
     </>
   );
 };
-
-export default UseExistingIfFoundInfoIcon;
diff --git a/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx b/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx
index 354bd4d9..86a792c7 100644
--- a/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx
+++ b/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx
@@ -1,22 +1,12 @@
-import { mount, ReactWrapper } from 'enzyme';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Modal } from 'reactstrap';
-import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { UseExistingIfFoundInfoIcon } from '../../src/short-urls/UseExistingIfFoundInfoIcon';
 
 describe('<UseExistingIfFoundInfoIcon />', () => {
-  let wrapped: ReactWrapper;
+  it('shows modal when icon is clicked', async () => {
+    render(<UseExistingIfFoundInfoIcon />);
 
-  beforeEach(() => {
-    wrapped = mount(<UseExistingIfFoundInfoIcon />);
-  });
-
-  afterEach(() => wrapped.unmount());
-
-  it('shows modal when icon is clicked', () => {
-    const icon = wrapped.find(FontAwesomeIcon);
-
-    expect(wrapped.find(Modal).prop('isOpen')).toEqual(false);
-    icon.simulate('click');
-    expect(wrapped.find(Modal).prop('isOpen')).toEqual(true);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTitle('What does this mean?').firstChild as Node);
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
   });
 });