From d582a0f9e551370c2767e8e6e8c7a70146d24e64 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 9 May 2022 19:45:09 +0200
Subject: [PATCH] Migrated DomainStatusIcon test to react testing library

---
 .../domains/helpers/DomainStatusIcon.test.tsx | 73 ++++-----------
 .../DomainStatusIcon.test.tsx.snap            | 89 +++++++++++++++++++
 2 files changed, 104 insertions(+), 58 deletions(-)
 create mode 100644 test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap

diff --git a/test/domains/helpers/DomainStatusIcon.test.tsx b/test/domains/helpers/DomainStatusIcon.test.tsx
index 7683a3b5..e7e1913b 100644
--- a/test/domains/helpers/DomainStatusIcon.test.tsx
+++ b/test/domains/helpers/DomainStatusIcon.test.tsx
@@ -1,73 +1,30 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
-import { faTimes, faCheck, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 import { DomainStatus } from '../../../src/domains/data';
 import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon';
 
 describe('<DomainStatusIcon />', () => {
   const matchMedia = jest.fn().mockReturnValue(Mock.of<MediaQueryList>({ matches: false }));
-  let wrapper: ShallowWrapper;
-  const createWrapper = (status: DomainStatus) => {
-    wrapper = shallow(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
-
-    return wrapper;
-  };
+  const setUp = (status: DomainStatus) => render(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
 
   beforeEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
-  it('renders loading icon when status is "validating"', () => {
-    const wrapper = createWrapper('validating');
-    const tooltip = wrapper.find(UncontrolledTooltip);
-    const faIcon = wrapper.find(FontAwesomeIcon);
-
-    expect(tooltip).toHaveLength(0);
-    expect(faIcon).toHaveLength(1);
-    expect(faIcon.prop('icon')).toEqual(faCircleNotch);
-    expect(faIcon.prop('spin')).toEqual(true);
+  it.each([
+    ['validating' as DomainStatus],
+    ['invalid' as DomainStatus],
+    ['valid' as DomainStatus],
+  ])('renders expected icon and tooltip when status is not validating', (status) => {
+    const { container } = setUp(status);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it.each([
-    [
-      'invalid' as DomainStatus,
-      faTimes,
-      'Oops! There is some missing configuration, and short URLs shared with this domain will not work.',
-    ],
-    ['valid' as DomainStatus, faCheck, 'Congratulations! This domain is properly configured.'],
-  ])('renders expected icon and tooltip when status is not validating', (status, expectedIcon, expectedText) => {
-    const wrapper = createWrapper(status);
-    const tooltip = wrapper.find(UncontrolledTooltip);
-    const faIcon = wrapper.find(FontAwesomeIcon);
-    const getTooltipText = (): string => {
-      const children = tooltip.prop('children');
+    ['invalid' as DomainStatus],
+    ['valid' as DomainStatus],
+  ])('renders proper tooltip based on state', async (status) => {
+    const { container } = setUp(status);
 
-      if (typeof children === 'string') {
-        return children;
-      }
-
-      return tooltip.find('span').html();
-    };
-
-    expect(tooltip).toHaveLength(1);
-    expect(tooltip.prop('autohide')).toEqual(status === 'valid');
-    expect(getTooltipText()).toContain(expectedText);
-    expect(faIcon).toHaveLength(1);
-    expect(faIcon.prop('icon')).toEqual(expectedIcon);
-    expect(faIcon.prop('spin')).toEqual(false);
-  });
-
-  it.each([
-    [true, 'top-start'],
-    [false, 'left'],
-  ])('places the tooltip properly based on query match', (isMobile, expectedPlacement) => {
-    matchMedia.mockReturnValue(Mock.of<MediaQueryList>({ matches: isMobile }));
-
-    const wrapper = createWrapper('valid');
-    const tooltip = wrapper.find(UncontrolledTooltip);
-
-    expect(tooltip).toHaveLength(1);
-    expect(tooltip.prop('placement')).toEqual(expectedPlacement);
+    container.firstChild && fireEvent.mouseOver(container.firstChild);
+    expect(await screen.findByRole('tooltip')).toMatchSnapshot();
   });
 });
diff --git a/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap b/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap
new file mode 100644
index 00000000..0b4d6173
--- /dev/null
+++ b/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-circle-notch fa-spin fa-fw "
+  data-icon="circle-notch"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 2`] = `
+<span>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-xmark fa-fw text-danger"
+    data-icon="xmark"
+    data-prefix="fas"
+    focusable="false"
+    role="img"
+    viewBox="0 0 320 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
+      fill="currentColor"
+    />
+  </svg>
+</span>
+`;
+
+exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 3`] = `
+<span>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-check fa-fw text-muted"
+    data-icon="check"
+    data-prefix="fas"
+    focusable="false"
+    role="img"
+    viewBox="0 0 448 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"
+      fill="currentColor"
+    />
+  </svg>
+</span>
+`;
+
+exports[`<DomainStatusIcon /> renders proper tooltip based on state 1`] = `
+<div
+  class="tooltip-inner"
+  role="tooltip"
+>
+  <span>
+    Oops! There is some missing configuration, and short URLs shared with this domain will not work.
+    <br />
+    Check the 
+    <a
+      href="https://slnk.to/multi-domain-docs"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      documentation
+    </a>
+     in order to find out what is missing.
+  </span>
+</div>
+`;
+
+exports[`<DomainStatusIcon /> renders proper tooltip based on state 2`] = `
+<div
+  class="tooltip-inner"
+  role="tooltip"
+>
+  Congratulations! This domain is properly configured.
+</div>
+`;