From a7cc8786c3fa1b57bc3ac191c0808253dff414ea Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 14 May 2022 11:11:50 +0200
Subject: [PATCH] Migrated ExportBtn test to react testing library, and changed
 icon

---
 src/utils/ExportBtn.tsx                       |  4 +-
 test/utils/ExportBtn.test.tsx                 | 45 +++++++------------
 .../__snapshots__/ExportBtn.test.tsx.snap     | 19 ++++++++
 3 files changed, 38 insertions(+), 30 deletions(-)
 create mode 100644 test/utils/__snapshots__/ExportBtn.test.tsx.snap

diff --git a/src/utils/ExportBtn.tsx b/src/utils/ExportBtn.tsx
index 2a0a78c9..c6f141bb 100644
--- a/src/utils/ExportBtn.tsx
+++ b/src/utils/ExportBtn.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Button, ButtonProps } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
+import { faFileCsv } from '@fortawesome/free-solid-svg-icons';
 import { prettify } from './helpers/numbers';
 
 interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabled'> {
@@ -11,6 +11,6 @@ interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabl
 
 export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
   <Button {...rest} outline color="primary" disabled={loading}>
-    <FontAwesomeIcon icon={faFileDownload} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
+    <FontAwesomeIcon icon={faFileCsv} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
   </Button>
 );
diff --git a/test/utils/ExportBtn.test.tsx b/test/utils/ExportBtn.test.tsx
index 03f27420..0ed10837 100644
--- a/test/utils/ExportBtn.test.tsx
+++ b/test/utils/ExportBtn.test.tsx
@@ -1,29 +1,22 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
+import { render, screen } from '@testing-library/react';
 import { ExportBtn } from '../../src/utils/ExportBtn';
 
 describe('<ExportBtn />', () => {
-  let wrapper: ShallowWrapper;
-  const createWrapper = (amount?: number, loading = false) => {
-    wrapper = shallow(<ExportBtn amount={amount} loading={loading} />);
-
-    return wrapper;
-  };
-
-  afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
+  const setUp = (amount?: number, loading = false) => render(<ExportBtn amount={amount} loading={loading} />);
 
   it.each([
     [true, 'Exporting...'],
-    [false, 'Export ('],
-  ])('renders a button', (loading, text) => {
-    const wrapper = createWrapper(undefined, loading);
+    [false, 'Export (0)'],
+  ])('renders loading state when expected', async (loading, text) => {
+    setUp(undefined, loading);
+    const btn = await screen.findByRole('button');
 
-    expect(wrapper.prop('outline')).toEqual(true);
-    expect(wrapper.prop('color')).toEqual('primary');
-    expect(wrapper.prop('disabled')).toEqual(loading);
-    expect(wrapper.html()).toContain(text);
+    expect(btn).toHaveTextContent(text);
+    if (loading) {
+      expect(btn).toHaveAttribute('disabled');
+    } else {
+      expect(btn).not.toHaveAttribute('disabled');
+    }
   });
 
   it.each([
@@ -31,17 +24,13 @@ describe('<ExportBtn />', () => {
     [10, '10'],
     [10_000, '10,000'],
     [10_000_000, '10,000,000'],
-  ])('renders expected amount', (amount, expectedRenderedAmount) => {
-    const wrapper = createWrapper(amount);
-
-    expect(wrapper.html()).toContain(`Export (${expectedRenderedAmount})`);
+  ])('renders expected amount', async (amount, expectedRenderedAmount) => {
+    setUp(amount);
+    expect(await screen.findByRole('button')).toHaveTextContent(`Export (${expectedRenderedAmount})`);
   });
 
   it('renders expected icon', () => {
-    const wrapper = createWrapper();
-    const icon = wrapper.find(FontAwesomeIcon);
-
-    expect(icon).toHaveLength(1);
-    expect(icon.prop('icon')).toEqual(faFileDownload);
+    setUp();
+    expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
   });
 });
diff --git a/test/utils/__snapshots__/ExportBtn.test.tsx.snap b/test/utils/__snapshots__/ExportBtn.test.tsx.snap
new file mode 100644
index 00000000..7484fe5b
--- /dev/null
+++ b/test/utils/__snapshots__/ExportBtn.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExportBtn /> renders expected icon 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-file-csv "
+  data-icon="file-csv"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 384 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M256 0v128h128L256 0zM224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128zM128 280C128 284.4 124.4 288 120 288H112C103.1 288 96 295.1 96 304v32C96 344.9 103.1 352 112 352h8C124.4 352 128 355.6 128 360v16C128 380.4 124.4 384 120 384H112C85.5 384 64 362.5 64 336v-32C64 277.5 85.5 256 112 256h8C124.4 256 128 259.6 128 264V280zM172.3 384H160c-4.375 0-8-3.625-8-8v-16C152 355.6 155.6 352 160 352h12.25c6 0 10.38-3.5 10.38-6.625c0-1.25-.75-2.625-2.125-3.875l-21.88-18.75C150.3 315.5 145.4 305.3 145.4 294.6C145.4 273.4 164.4 256 187.8 256H200c4.375 0 8 3.625 8 8v16C208 284.4 204.4 288 200 288H187.8c-6 0-10.38 3.5-10.38 6.625c0 1.25 .75 2.625 2.125 3.875l21.88 18.75c8.375 7.25 13.25 17.5 13.25 28.12C214.6 366.6 195.6 384 172.3 384zM288 284.8V264C288 259.6 291.6 256 296 256h16C316.4 256 320 259.6 320 264v20.75c0 35.5-12.88 69-36.25 94.13C280.8 382.1 276.5 384 272 384s-8.75-1.875-11.75-5.125C236.9 353.8 224 320.3 224 284.8V264C224 259.6 227.6 256 232 256h16C252.4 256 256 259.6 256 264v20.75c0 20.38 5.75 40.25 16 56.88C282.3 325 288 305.1 288 284.8z"
+    fill="currentColor"
+  />
+</svg>
+`;