Implemented short URLs exporting

test/common/services/ReportExporter.test.ts

@@ -1,20 +1,20 @@
 import { Mock } from 'ts-mockery';
 import { CsvJson } from 'csvjson';
-import { VisitsExporter } from '../../../src/visits/services/VisitsExporter';
+import { ReportExporter } from '../../../src/common/services/ReportExporter';
 import { NormalizedVisit } from '../../../src/visits/types';
 import { windowMock } from '../../mocks/WindowMock';
 
-describe('VisitsExporter', () => {
+describe('ReportExporter', () => {
   const toCSV = jest.fn();
   const csvToJsonMock = Mock.of<CsvJson>({ toCSV });
-  let exporter: VisitsExporter;
+  let exporter: ReportExporter;
 
   beforeEach(jest.clearAllMocks);
   beforeEach(() => {
     (global as any).Blob = class Blob {}; // eslint-disable-line @typescript-eslint/no-extraneous-class
     (global as any).URL = { createObjectURL: () => '' };
 
-    exporter = new VisitsExporter(windowMock, csvToJsonMock);
+    exporter = new ReportExporter(windowMock, csvToJsonMock);
   });
 
   describe('exportVisits', () => {
@@ -35,7 +35,7 @@ describe('VisitsExporter', () => {
 
       exporter.exportVisits('my_visits.csv', visits);
 
-      expect(toCSV).toHaveBeenCalledWith(visits, { headers: 'key' });
+      expect(toCSV).toHaveBeenCalledWith(visits, { headers: 'key', wrap: true });
     });
 
     it('skips execution when list of visits is empty', () => {

test/short-urls/ShortUrlsFilteringBar.test.tsx

@@ -20,7 +20,8 @@ jest.mock('react-router-dom', () => ({
 
 describe('<ShortUrlsFilteringBar />', () => {
   let wrapper: ShallowWrapper;
-  const ShortUrlsFilteringBar = filteringBarCreator(Mock.all<ColorGenerator>());
+  const ExportShortUrlsBtn = () => null;
+  const ShortUrlsFilteringBar = filteringBarCreator(Mock.all<ColorGenerator>(), ExportShortUrlsBtn);
   const navigate = jest.fn();
   const handleOrderBy = jest.fn();
   const now = new Date();
@@ -48,6 +49,7 @@ describe('<ShortUrlsFilteringBar />', () => {
     expect(wrapper.find(SearchField)).toHaveLength(1);
     expect(wrapper.find(DateRangeSelector)).toHaveLength(1);
     expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
+    expect(wrapper.find(ExportShortUrlsBtn)).toHaveLength(1);
   });
 
   it.each([

test/short-urls/ShortUrlsList.test.tsx

@@ -33,6 +33,7 @@ describe('<ShortUrlsList />', () => {
           tags: [ 'test tag' ],
         }),
       ],
+      pagination: {},
     },
   });
   const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable, ShortUrlsFilteringBar);

test/utils/ExportBtn.test.tsx

@@ -5,9 +5,8 @@ import { ExportBtn } from '../../src/utils/ExportBtn';
 
 describe('<ExportBtn />', () => {
   let wrapper: ShallowWrapper;
-  const onClick = jest.fn();
-  const createWrapper = (className?: string, amount?: number) => {
-    wrapper = shallow(<ExportBtn className={className} amount={amount} onClick={onClick} />);
+  const createWrapper = (amount?: number, loading = false) => {
+    wrapper = shallow(<ExportBtn amount={amount} loading={loading} />);
 
     return wrapper;
   };
@@ -16,16 +15,15 @@ describe('<ExportBtn />', () => {
   afterEach(() => wrapper?.unmount());
 
   it.each([
-    [ undefined ],
-    [ 'foo' ],
-    [ 'bar' ],
-  ])('renders a button', (className) => {
-    const wrapper = createWrapper(className);
+    [ true, 'Exporting...' ],
+    [ false, 'Export (' ],
+  ])('renders a button', (loading, text) => {
+    const wrapper = createWrapper(undefined, loading);
 
     expect(wrapper.prop('outline')).toEqual(true);
     expect(wrapper.prop('color')).toEqual('primary');
-    expect(wrapper.prop('onClick')).toEqual(onClick);
-    expect(wrapper.prop('className')).toEqual(className);
+    expect(wrapper.prop('disabled')).toEqual(loading);
+    expect(wrapper.html()).toContain(text);
   });
 
   it.each([
@@ -34,7 +32,7 @@ describe('<ExportBtn />', () => {
     [ 10_000, '10,000' ],
     [ 10_000_000, '10,000,000' ],
   ])('renders expected amount', (amount, expectedRenderedAmount) => {
-    const wrapper = createWrapper(undefined, amount);
+    const wrapper = createWrapper(amount);
 
     expect(wrapper.html()).toContain(`Export (${expectedRenderedAmount})`);
   });
@@ -46,12 +44,4 @@ describe('<ExportBtn />', () => {
     expect(icon).toHaveLength(1);
     expect(icon.prop('icon')).toEqual(faFileDownload);
   });
-
-  it('invokes callback onClick', () => {
-    const wrapper = createWrapper();
-
-    expect(onClick).not.toHaveBeenCalled();
-    wrapper.simulate('click');
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
 });

test/visits/NonOrphanVisits.test.tsx

@@ -6,7 +6,7 @@ import { VisitsInfo } from '../../src/visits/types';
 import VisitsStats from '../../src/visits/VisitsStats';
 import { NonOrphanVisitsHeader } from '../../src/visits/NonOrphanVisitsHeader';
 import { Settings } from '../../src/settings/reducers/settings';
-import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
+import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { SelectedServer } from '../../src/servers/data';
 
 jest.mock('react-router-dom', () => ({
@@ -20,7 +20,7 @@ describe('<NonOrphanVisits />', () => {
     const getNonOrphanVisits = jest.fn();
     const cancelGetNonOrphanVisits = jest.fn();
     const nonOrphanVisits = Mock.all<VisitsInfo>();
-    const NonOrphanVisits = createNonOrphanVisits(Mock.all<VisitsExporter>());
+    const NonOrphanVisits = createNonOrphanVisits(Mock.all<ReportExporter>());
 
     const wrapper = shallow(
       <NonOrphanVisits

test/visits/OrphanVisits.test.tsx

@@ -6,7 +6,7 @@ import { VisitsInfo } from '../../src/visits/types';
 import VisitsStats from '../../src/visits/VisitsStats';
 import { OrphanVisitsHeader } from '../../src/visits/OrphanVisitsHeader';
 import { Settings } from '../../src/settings/reducers/settings';
-import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
+import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { SelectedServer } from '../../src/servers/data';
 
 jest.mock('react-router-dom', () => ({
@@ -20,7 +20,7 @@ describe('<OrphanVisits />', () => {
     const getOrphanVisits = jest.fn();
     const cancelGetOrphanVisits = jest.fn();
     const orphanVisits = Mock.all<VisitsInfo>();
-    const OrphanVisits = createOrphanVisits(Mock.all<VisitsExporter>());
+    const OrphanVisits = createOrphanVisits(Mock.all<ReportExporter>());
 
     const wrapper = shallow(
       <OrphanVisits

test/visits/ShortUrlVisits.test.tsx

@@ -7,7 +7,7 @@ import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers
 import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
 import VisitsStats from '../../src/visits/VisitsStats';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
-import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
+import { ReportExporter } from '../../src/common/services/ReportExporter';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -19,7 +19,7 @@ jest.mock('react-router-dom', () => ({
 describe('<ShortUrlVisits />', () => {
   let wrapper: ShallowWrapper;
   const getShortUrlVisitsMock = jest.fn();
-  const ShortUrlVisits = createShortUrlVisits(Mock.all<VisitsExporter>());
+  const ShortUrlVisits = createShortUrlVisits(Mock.all<ReportExporter>());
 
   beforeEach(() => {
     wrapper = shallow(

test/visits/TagVisits.test.tsx

@@ -6,7 +6,7 @@ import ColorGenerator from '../../src/utils/services/ColorGenerator';
 import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits';
 import VisitsStats from '../../src/visits/VisitsStats';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
-import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
+import { ReportExporter } from '../../src/common/services/ReportExporter';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -20,7 +20,7 @@ describe('<TagVisits />', () => {
   const getTagVisitsMock = jest.fn();
 
   beforeEach(() => {
-    const TagVisits = createTagVisits(Mock.all<ColorGenerator>(), Mock.all<VisitsExporter>());
+    const TagVisits = createTagVisits(Mock.all<ColorGenerator>(), Mock.all<ReportExporter>());
 
     wrapper = shallow(
       <TagVisits