Migrated DomainStatusIcon test to react testing library

test/domains/helpers/DomainStatusIcon.test.tsx

@@ -1,73 +1,30 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 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 setUp = (status: DomainStatus) => render(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
-  const createWrapper = (status: DomainStatus) => {
-    wrapper = shallow(<DomainStatusIcon status={status} matchMedia={matchMedia} />);
-
-    return wrapper;
-  };
 
   beforeEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
-  it('renders loading icon when status is "validating"', () => {
+  it.each([
-    const wrapper = createWrapper('validating');
+    ['validating' as DomainStatus],
-    const tooltip = wrapper.find(UncontrolledTooltip);
+    ['invalid' as DomainStatus],
-    const faIcon = wrapper.find(FontAwesomeIcon);
+    ['valid' as DomainStatus],
-
+  ])('renders expected icon and tooltip when status is not validating', (status) => {
-    expect(tooltip).toHaveLength(0);
+    const { container } = setUp(status);
-    expect(faIcon).toHaveLength(1);
+    expect(container.firstChild).toMatchSnapshot();
-    expect(faIcon.prop('icon')).toEqual(faCircleNotch);
-    expect(faIcon.prop('spin')).toEqual(true);
   });
 
   it.each([
-    [
+    ['invalid' as DomainStatus],
-      'invalid' as DomainStatus,
+    ['valid' as DomainStatus],
-      faTimes,
+  ])('renders proper tooltip based on state', async (status) => {
-      'Oops! There is some missing configuration, and short URLs shared with this domain will not work.',
+    const { container } = setUp(status);
-    ],
-    ['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');
 
-      if (typeof children === 'string') {
+    container.firstChild && fireEvent.mouseOver(container.firstChild);
-        return children;
+    expect(await screen.findByRole('tooltip')).toMatchSnapshot();
-      }
-
-      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);
   });
 });

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>
+`;