From 65f739499fd279eeed97953ade85a02e0cf54b01 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 8 Jul 2022 11:03:58 +0200
Subject: [PATCH] Migrated InfoTooltip test to react testing library

---
 src/utils/InfoTooltip.tsx       |  2 +-
 test/utils/InfoTooltip.test.tsx | 47 ++++++++++++++++++++-------------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/utils/InfoTooltip.tsx b/src/utils/InfoTooltip.tsx
index 2070c76e..15ecae62 100644
--- a/src/utils/InfoTooltip.tsx
+++ b/src/utils/InfoTooltip.tsx
@@ -5,7 +5,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 import { Placement } from '@popperjs/core';
 import { mutableRefToElementRef } from './helpers/components';
 
-type InfoTooltipProps = PropsWithChildren<{
+export type InfoTooltipProps = PropsWithChildren<{
   className?: string;
   placement: Placement;
 }>;
diff --git a/test/utils/InfoTooltip.test.tsx b/test/utils/InfoTooltip.test.tsx
index efbe3af3..661e6bf0 100644
--- a/test/utils/InfoTooltip.test.tsx
+++ b/test/utils/InfoTooltip.test.tsx
@@ -1,30 +1,40 @@
-import { shallow } from 'enzyme';
-import { UncontrolledTooltip } from 'reactstrap';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Placement } from '@popperjs/core';
-import { InfoTooltip } from '../../src/utils/InfoTooltip';
+import { InfoTooltip, InfoTooltipProps } from '../../src/utils/InfoTooltip';
 
 describe('<InfoTooltip />', () => {
+  const setUp = (props: Partial<InfoTooltipProps> = {}) => ({
+    user: userEvent.setup(),
+    ...render(<InfoTooltip placement="right" {...props} />),
+  });
+
   it.each([
     [undefined],
     ['foo'],
     ['bar'],
   ])('renders expected className on span', (className) => {
-    const wrapper = shallow(<InfoTooltip placement="right" className={className} />);
-    const span = wrapper.find('span');
+    const { container } = setUp({ className });
 
-    expect(span.prop('className')).toEqual(className ?? '');
+    if (className) {
+      expect(container.firstChild).toHaveClass(className);
+    } else {
+      expect(container.firstChild).toHaveAttribute('class', '');
+    }
   });
 
   it.each([
-    [<span key={1} />],
-    ['Foo'],
-    ['Hello'],
-    [['One', 'Two', <span key={3} />]],
-  ])('passes children down to the nested tooltip component', (children) => {
-    const wrapper = shallow(<InfoTooltip placement="right">{children}</InfoTooltip>);
-    const tooltip = wrapper.find(UncontrolledTooltip);
+    [<span key={1}>foo</span>, 'foo'],
+    ['Foo', 'Foo'],
+    ['Hello', 'Hello'],
+    [['One', 'Two', <span key={3} />], 'OneTwo'],
+  ])('passes children down to the nested tooltip component', async (children, expectedContent) => {
+    const { container, user } = setUp({ children });
 
-    expect(tooltip.prop('children')).toEqual(children);
+    container.firstElementChild && await user.hover(container.firstElementChild);
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
+    screen.debug(screen.getByRole('tooltip'));
+    expect(screen.getByRole('tooltip')).toHaveTextContent(expectedContent);
   });
 
   it.each([
@@ -32,10 +42,11 @@ describe('<InfoTooltip />', () => {
     ['left' as Placement],
     ['top' as Placement],
     ['bottom' as Placement],
-  ])('places tooltip where requested', (placement) => {
-    const wrapper = shallow(<InfoTooltip placement={placement} />);
-    const tooltip = wrapper.find(UncontrolledTooltip);
+  ])('places tooltip where requested', async (placement) => {
+    const { container, user } = setUp({ placement });
 
-    expect(tooltip.prop('placement')).toEqual(placement);
+    container.firstElementChild && await user.hover(container.firstElementChild);
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
+    expect(screen.getByRole('tooltip').parentNode).toHaveAttribute('data-popper-placement', placement);
   });
 });