From 0a57390c4644ec9d38ff2eb0be86302f6e1a2df0 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 17 Mar 2022 20:28:47 +0100
Subject: [PATCH] Created ExportShortUrlsBtn test

---
 src/short-urls/helpers/ExportShortUrlsBtn.tsx | 31 ++++----
 .../helpers/ExportShortUrlsBtn.test.tsx       | 70 +++++++++++++++++++
 2 files changed, 83 insertions(+), 18 deletions(-)
 create mode 100644 test/short-urls/helpers/ExportShortUrlsBtn.test.tsx

diff --git a/src/short-urls/helpers/ExportShortUrlsBtn.tsx b/src/short-urls/helpers/ExportShortUrlsBtn.tsx
index 03b79584..be5490c2 100644
--- a/src/short-urls/helpers/ExportShortUrlsBtn.tsx
+++ b/src/short-urls/helpers/ExportShortUrlsBtn.tsx
@@ -15,7 +15,7 @@ interface ExportShortUrlsBtnConnectProps extends ExportShortUrlsBtnProps {
   selectedServer: SelectedServer;
 }
 
-const itemsPerPage = 10;
+const itemsPerPage = 20;
 
 export const ExportShortUrlsBtn = (
   buildShlinkApiClient: ShlinkApiClientBuilder,
@@ -23,7 +23,7 @@ export const ExportShortUrlsBtn = (
 ): FC<ExportShortUrlsBtnConnectProps> => ({ amount = 0, selectedServer }) => {
   const [{ tags, search, startDate, endDate, orderBy, tagsMode }] = useShortUrlsQuery();
   const [ loading,, startLoading, stopLoading ] = useToggle();
-  const exportAllUrls = () => {
+  const exportAllUrls = async () => {
     if (!isServerWithId(selectedServer)) {
       return;
     }
@@ -44,22 +44,17 @@ export const ExportShortUrlsBtn = (
     };
 
     startLoading();
-    loadAllUrls()
-      .then((shortUrls) => {
-        exportShortUrls(shortUrls.map((shortUrl) => ({
-          createdAt: shortUrl.dateCreated,
-          shortUrl: shortUrl.shortUrl,
-          longUrl: shortUrl.longUrl,
-          title: shortUrl.title ?? '',
-          tags: shortUrl.tags.join(','),
-          visits: shortUrl.visitsCount,
-        })));
-        stopLoading();
-      })
-      .catch((e) => {
-        // TODO Handle error properly
-        console.error('An error occurred while exporting short URLs', e); // eslint-disable-line no-console
-      });
+    const shortUrls = await loadAllUrls();
+
+    exportShortUrls(shortUrls.map((shortUrl) => ({
+      createdAt: shortUrl.dateCreated,
+      shortUrl: shortUrl.shortUrl,
+      longUrl: shortUrl.longUrl,
+      title: shortUrl.title ?? '',
+      tags: shortUrl.tags.join(','),
+      visits: shortUrl.visitsCount,
+    })));
+    stopLoading();
   };
 
   return <ExportBtn loading={loading} className="btn-md-block" amount={amount} onClick={exportAllUrls} />;
diff --git a/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx b/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx
new file mode 100644
index 00000000..b08a11c4
--- /dev/null
+++ b/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx
@@ -0,0 +1,70 @@
+import { Mock } from 'ts-mockery';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { ReportExporter } from '../../../src/common/services/ReportExporter';
+import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn';
+import { NotFoundServer, ReachableServer, SelectedServer } from '../../../src/servers/data';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useParams: jest.fn().mockReturnValue({}),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
+
+describe('<ExportShortUrlsBtn />', () => {
+  const listShortUrls = jest.fn();
+  const buildShlinkApiClient = jest.fn().mockReturnValue({ listShortUrls });
+  const exportShortUrls = jest.fn();
+  const reportExporter = Mock.of<ReportExporter>({ exportShortUrls });
+  const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter);
+  let wrapper: ShallowWrapper;
+  const createWrapper = (amount?: number, selectedServer?: SelectedServer) => {
+    wrapper = shallow(
+      <ExportShortUrlsBtn selectedServer={selectedServer ?? Mock.all<SelectedServer>()} amount={amount} />,
+    );
+
+    return wrapper;
+  };
+
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ undefined, 0 ],
+    [ 1, 1 ],
+    [ 4578, 4578 ],
+  ])('renders expected amount', (amount, expectedAmount) => {
+    const wrapper = createWrapper(amount);
+
+    expect(wrapper.prop('amount')).toEqual(expectedAmount);
+  });
+
+  it.each([
+    [ null ],
+    [ Mock.of<NotFoundServer>() ],
+  ])('does nothing on click if selected server is not reachable', (selectedServer) => {
+    const wrapper = createWrapper(0, selectedServer);
+
+    wrapper.simulate('click');
+    expect(listShortUrls).not.toHaveBeenCalled();
+    expect(exportShortUrls).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    [ 10, 1 ],
+    [ 30, 2 ],
+    [ 39, 2 ],
+    [ 40, 2 ],
+    [ 41, 3 ],
+    [ 385, 20 ],
+  ])('loads proper amount of pages based on the amount of results', async (amount, expectedPageLoads) => {
+    const wrapper = createWrapper(amount, Mock.of<ReachableServer>({ id: '123' }));
+
+    listShortUrls.mockResolvedValue({ data: [] });
+
+    await (wrapper.prop('onClick') as Function)();
+
+    expect(listShortUrls).toHaveBeenCalledTimes(expectedPageLoads);
+    expect(exportShortUrls).toHaveBeenCalledTimes(1);
+  });
+});