From 1a200650537140e3ac9809f3ffe595d99a036a6f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Wed, 6 Jul 2022 18:30:33 +0200
Subject: [PATCH] Migrated CreateShortUrlResult test to react testing library

---
 .../helpers/CreateShortUrlResult.tsx          |  2 +-
 .../helpers/CreateShortUrlResult.test.tsx     | 45 +++++++------------
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/src/short-urls/helpers/CreateShortUrlResult.tsx b/src/short-urls/helpers/CreateShortUrlResult.tsx
index 73d60ba6..218755b3 100644
--- a/src/short-urls/helpers/CreateShortUrlResult.tsx
+++ b/src/short-urls/helpers/CreateShortUrlResult.tsx
@@ -43,7 +43,7 @@ export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
   return (
     <Result type="success" className="mt-3">
       {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
-      <b>Great!</b> The short URL is <b>{shortUrl}</b>
+      <span><b>Great!</b> The short URL is <b>{shortUrl}</b></span>
 
       <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
         <button
diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.tsx b/test/short-urls/helpers/CreateShortUrlResult.test.tsx
index 1fbe1af0..ce35972b 100644
--- a/test/short-urls/helpers/CreateShortUrlResult.test.tsx
+++ b/test/short-urls/helpers/CreateShortUrlResult.test.tsx
@@ -1,56 +1,41 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { Tooltip } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Mock } from 'ts-mockery';
 import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
-import { Result } from '../../../src/utils/Result';
 
 describe('<CreateShortUrlResult />', () => {
-  let wrapper: ShallowWrapper;
   const copyToClipboard = jest.fn();
   const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
   const CreateShortUrlResult = createResult(useTimeoutToggle);
-  const createWrapper = (result: ShortUrl | null = null, error = false) => {
-    wrapper = shallow(
-      <CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />,
-    );
-
-    return wrapper;
-  };
+  const setUp = (result: ShortUrl | null = null, error = false) => ({
+    user: userEvent.setup(),
+    ...render(<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />),
+  });
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
   it('renders an error when error is true', () => {
-    const wrapper = createWrapper(Mock.all<ShortUrl>(), true);
-    const errorCard = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
-
-    expect(errorCard).toHaveLength(1);
-    expect(errorCard.html()).toContain('An error occurred while creating the URL :(');
+    setUp(Mock.all<ShortUrl>(), true);
+    expect(screen.getByText('An error occurred while creating the URL :(')).toBeInTheDocument();
   });
 
   it('renders nothing when no result is provided', () => {
-    const wrapper = createWrapper();
-
-    expect(wrapper.html()).toBeNull();
+    const { container } = setUp();
+    expect(container.firstChild).toBeNull();
   });
 
   it('renders a result message when result is provided', () => {
-    const wrapper = createWrapper(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
-
-    expect(wrapper.html()).toContain('<b>Great!</b> The short URL is <b>https://doma.in/abc123</b>');
-    expect(wrapper.find(CopyToClipboard)).toHaveLength(1);
-    expect(wrapper.find(Tooltip)).toHaveLength(1);
+    setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
+    expect(screen.getByText(/The short URL is/)).toHaveTextContent('Great! The short URL is https://doma.in/abc123');
   });
 
-  it('Invokes tooltip timeout when copy to clipboard button is clicked', () => {
-    const wrapper = createWrapper(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
-    const copyBtn = wrapper.find(CopyToClipboard);
+  it('Invokes tooltip timeout when copy to clipboard button is clicked', async () => {
+    const { user } = setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
 
     expect(copyToClipboard).not.toHaveBeenCalled();
-    copyBtn.simulate('copy');
+    await user.click(screen.getByRole('button'));
     expect(copyToClipboard).toHaveBeenCalledTimes(1);
   });
 });