From ecd6e6a066043ae959586749883147adaef20c85 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 28 Dec 2021 22:48:35 +0100
Subject: [PATCH] Created DomainStatusIcon test

---
 src/domains/helpers/DomainStatusIcon.tsx      |  4 +-
 .../domains/helpers/DomainStatusIcon.test.tsx | 57 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 test/domains/helpers/DomainStatusIcon.test.tsx

diff --git a/src/domains/helpers/DomainStatusIcon.tsx b/src/domains/helpers/DomainStatusIcon.tsx
index 3bb22677..9cc71acb 100644
--- a/src/domains/helpers/DomainStatusIcon.tsx
+++ b/src/domains/helpers/DomainStatusIcon.tsx
@@ -29,12 +29,12 @@ export const DomainStatusIcon: FC<{ status: DomainStatus }> = ({ status }) => {
       </span>
       <UncontrolledTooltip target={(() => ref.current) as any} placement="bottom" autohide={status === 'valid'}>
         {status === 'valid' ? 'Congratulations! This domain is properly configured.' : (
-          <>
+          <span>
             Oops! There is some missing configuration, and short URLs shared with this domain will not work.
             <br />
             Follow <ExternalLink href="https://slnk.to/multi-domain-docs">the documentation</ExternalLink> in order to
             find out what is missing.
-          </>
+          </span>
         )}
       </UncontrolledTooltip>
     </>
diff --git a/test/domains/helpers/DomainStatusIcon.test.tsx b/test/domains/helpers/DomainStatusIcon.test.tsx
new file mode 100644
index 00000000..457be26e
--- /dev/null
+++ b/test/domains/helpers/DomainStatusIcon.test.tsx
@@ -0,0 +1,57 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { UncontrolledTooltip } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBan, faCheck, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import { DomainStatus } from '../../../src/domains/data';
+import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon';
+
+describe('<DomainStatusIcon />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (status: DomainStatus) => {
+    wrapper = shallow(<DomainStatusIcon status={status} />);
+
+    return wrapper;
+  };
+
+  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([
+    [
+      'invalid' as DomainStatus,
+      faBan,
+      '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');
+
+      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);
+  });
+});