Finished TS migration

test/visits/ShortUrlVisits.test.tsx

@@ -4,10 +4,11 @@ import { identity } from 'ramda';
 import { Mock } from 'ts-mockery';
 import { History, Location } from 'history';
 import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import createShortUrlVisits, { ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits';
+import ShortUrlVisits, { ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits';
 import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
 import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits';
 import { ShortUrlDetail } from '../../src/visits/reducers/shortUrlDetail';
+import VisitsStats from '../../src/visits/VisitsStats';
 
 describe('<ShortUrlVisits />', () => {
   let wrapper: ShallowWrapper;
@@ -19,11 +20,8 @@ describe('<ShortUrlVisits />', () => {
   const history = Mock.of<History>({
     goBack: jest.fn(),
   });
-  const VisitsStats = jest.fn();
 
   beforeEach(() => {
-    const ShortUrlVisits = createShortUrlVisits(VisitsStats);
-
     wrapper = shallow(
       <ShortUrlVisits
         {...Mock.all<ShortUrlVisitsProps>()}
@@ -34,7 +32,7 @@ describe('<ShortUrlVisits />', () => {
         history={history}
         shortUrlVisits={Mock.of<ShortUrlVisitsState>({ loading: true, visits: [] })}
         shortUrlDetail={Mock.all<ShortUrlDetail>()}
-        cancelGetShortUrlVisits={identity}
+        cancelGetShortUrlVisits={() => {}}
       />,
     );
   });

test/visits/ShortUrlVisitsHeader.test.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import Moment from 'react-moment';
 import { ExternalLink } from 'react-external-link';
+import { Mock } from 'ts-mockery';
 import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
+import { ShortUrlDetail } from '../../src/visits/reducers/shortUrlDetail';
+import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits';
 
 describe('<ShortUrlVisitsHeader />', () => {
-  let wrapper;
-  const shortUrlDetail = {
+  let wrapper: ShallowWrapper;
+  const shortUrlDetail = Mock.of<ShortUrlDetail>({
     shortUrl: {
       shortUrl: 'https://doma.in/abc123',
       longUrl: 'https://foo.bar/bar/foo',
       dateCreated: '2018-01-01T10:00:00+01:00',
     },
     loading: false,
-  };
-  const shortUrlVisits = {
+  });
+  const shortUrlVisits = Mock.of<ShortUrlVisits>({
     visits: [{}, {}, {}],
-  };
+  });
   const goBack = jest.fn();
 
   beforeEach(() => {
@@ -29,12 +32,12 @@ describe('<ShortUrlVisitsHeader />', () => {
   it('shows when the URL was created', () => {
     const moment = wrapper.find(Moment).first();
 
-    expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl.dateCreated);
+    expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl?.dateCreated);
   });
 
   it('shows the long URL', () => {
     const longUrlLink = wrapper.find(ExternalLink).last();
 
-    expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl.longUrl);
+    expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl?.longUrl);
   });
 });

test/visits/TagVisits.test.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { identity } from 'ramda';
-import createTagVisits from '../../src/visits/TagVisits';
-import TagVisitsHeader from '../../src/visits/TagVisitsHeader';
-
-describe('<TagVisits />', () => {
-  let wrapper;
-  const getTagVisitsMock = jest.fn();
-  const match = {
-    params: { tag: 'foo' },
-  };
-  const history = {
-    goBack: jest.fn(),
-  };
-  const VisitsStats = jest.fn();
-
-  beforeEach(() => {
-    const TagVisits = createTagVisits(VisitsStats, {});
-
-    wrapper = shallow(
-      <TagVisits
-        getTagVisits={getTagVisitsMock}
-        match={match}
-        history={history}
-        tagVisits={{ loading: true, visits: [] }}
-        cancelGetTagVisits={identity}
-      />,
-    );
-  });
-
-  afterEach(() => wrapper.unmount());
-  afterEach(jest.resetAllMocks);
-
-  it('renders visit stats and visits header', () => {
-    const visitStats = wrapper.find(VisitsStats);
-    const visitHeader = wrapper.find(TagVisitsHeader);
-
-    expect(visitStats).toHaveLength(1);
-    expect(visitHeader).toHaveLength(1);
-  });
-});

test/visits/TagVisits.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { History } from 'history';
+import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import createTagVisits, { TagVisitsProps } from '../../src/visits/TagVisits';
+import TagVisitsHeader from '../../src/visits/TagVisitsHeader';
+import ColorGenerator from '../../src/utils/services/ColorGenerator';
+import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits';
+import VisitsStats from '../../src/visits/VisitsStats';
+
+describe('<TagVisits />', () => {
+  let wrapper: ShallowWrapper;
+  const getTagVisitsMock = jest.fn();
+  const match = Mock.of<match<{ tag: string }>>({
+    params: { tag: 'foo' },
+  });
+  const history = Mock.of<History>({
+    goBack: jest.fn(),
+  });
+
+  beforeEach(() => {
+    const TagVisits = createTagVisits(Mock.of<ColorGenerator>());
+
+    wrapper = shallow(
+      <TagVisits
+        {...Mock.all<TagVisitsProps>()}
+        getTagVisits={getTagVisitsMock}
+        match={match}
+        history={history}
+        tagVisits={Mock.of<TagVisitsStats>({ loading: true, visits: [] })}
+        cancelGetTagVisits={() => {}}
+      />,
+    );
+  });
+
+  afterEach(() => wrapper.unmount());
+  afterEach(jest.resetAllMocks);
+
+  it('renders visit stats and visits header', () => {
+    const visitStats = wrapper.find(VisitsStats);
+    const visitHeader = wrapper.find(TagVisitsHeader);
+
+    expect(visitStats).toHaveLength(1);
+    expect(visitHeader).toHaveLength(1);
+  });
+});

test/visits/TagVisitsHeader.test.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
 import Tag from '../../src/tags/helpers/Tag';
 import TagVisitsHeader from '../../src/visits/TagVisitsHeader';
+import { TagVisits } from '../../src/visits/reducers/tagVisits';
+import ColorGenerator from '../../src/utils/services/ColorGenerator';
 
 describe('<TagVisitsHeader />', () => {
-  let wrapper;
-  const tagVisits = {
+  let wrapper: ShallowWrapper;
+  const tagVisits = Mock.of<TagVisits>({
     tag: 'foo',
     visits: [{}, {}, {}],
-  };
+  });
   const goBack = jest.fn();
 
   beforeEach(() => {
     wrapper = shallow(
-      <TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={{}} />,
+      <TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={Mock.all<ColorGenerator>()} />,
     );
   });
   afterEach(() => wrapper.unmount());

test/visits/VisitsHeader.test.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
 import VisitsHeader from '../../src/visits/VisitsHeader';
+import { Visit } from '../../src/visits/types';
 
 describe('<VisitsHeader />', () => {
-  let wrapper;
-  const visits = [{}, {}, {}];
+  let wrapper: ShallowWrapper;
+  const visits = [ Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>() ];
   const title = 'My header title';
   const goBack = jest.fn();
 

test/visits/VisitsStats.test.tsx

@@ -1,36 +1,34 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { identity } from 'ramda';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { Card, Progress } from 'reactstrap';
-import createVisitStats from '../../src/visits/VisitsStats';
+import { Mock } from 'ts-mockery';
+import VisitStats from '../../src/visits/VisitsStats';
 import Message from '../../src/utils/Message';
 import GraphCard from '../../src/visits/helpers/GraphCard';
 import SortableBarGraph from '../../src/visits/helpers/SortableBarGraph';
 import DateRangeRow from '../../src/utils/DateRangeRow';
+import { Visit, VisitsInfo } from '../../src/visits/types';
 
 describe('<VisitStats />', () => {
-  let wrapper;
-  const processStatsFromVisits = () => (
-    { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }
-  );
+  const visits = [ Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>() ];
+
+  let wrapper: ShallowWrapper;
   const getVisitsMock = jest.fn();
 
-  const createComponent = (visitsInfo) => {
-    const VisitStats = createVisitStats({ processStatsFromVisits, normalizeVisits: identity }, () => '');
-
+  const createComponent = (visitsInfo: Partial<VisitsInfo>) => {
     wrapper = shallow(
       <VisitStats
         getVisits={getVisitsMock}
-        visitsInfo={visitsInfo}
-        cancelGetVisits={identity}
-        matchMedia={() => ({ matches: false })}
+        visitsInfo={Mock.of<VisitsInfo>(visitsInfo)}
+        cancelGetVisits={() => {}}
+        matchMedia={() => Mock.of<MediaQueryList>({ matches: false })}
       />,
     );
 
     return wrapper;
   };
 
-  afterEach(() => wrapper && wrapper.unmount());
+  afterEach(() => wrapper?.unmount());
 
   it('renders a preloader when visits are loading', () => {
     const wrapper = createComponent({ loading: true, visits: [] });
@@ -70,7 +68,7 @@ describe('<VisitStats />', () => {
   });
 
   it('renders all graphics when visits are properly loaded', () => {
-    const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
+    const wrapper = createComponent({ loading: false, error: false, visits });
     const graphs = wrapper.find(GraphCard);
     const sortableBarGraphs = wrapper.find(SortableBarGraph);
 
@@ -78,7 +76,7 @@ describe('<VisitStats />', () => {
   });
 
   it('reloads visits when selected dates change', () => {
-    const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
+    const wrapper = createComponent({ loading: false, error: false, visits });
     const dateRange = wrapper.find(DateRangeRow);
 
     dateRange.simulate('startDateChange', '2016-01-01T00:00:00+01:00');
@@ -90,7 +88,7 @@ describe('<VisitStats />', () => {
   });
 
   it('holds the map button content generator on cities graph extraHeaderContent', () => {
-    const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
+    const wrapper = createComponent({ loading: false, error: false, visits });
     const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]');
     const extraHeaderContent = citiesGraph.prop('extraHeaderContent');
 

test/visits/VisitsTable.test.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
 import VisitsTable from '../../src/visits/VisitsTable';
 import { rangeOf } from '../../src/utils/utils';
 import SimplePaginator from '../../src/common/SimplePaginator';
 import SearchField from '../../src/utils/SearchField';
+import { NormalizedVisit } from '../../src/visits/types';
 
 describe('<VisitsTable />', () => {
-  const matchMedia = () => ({ matches: false });
+  const matchMedia = () => Mock.of<MediaQueryList>({ matches: false });
   const setSelectedVisits = jest.fn();
-  let wrapper;
-  const createWrapper = (visits, selectedVisits = []) => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (visits: NormalizedVisit[], selectedVisits: NormalizedVisit[] = []) => {
     wrapper = shallow(
       <VisitsTable
         visits={visits}
@@ -22,10 +24,8 @@ describe('<VisitsTable />', () => {
     return wrapper;
   };
 
-  afterEach(() => {
-    jest.resetAllMocks();
-    wrapper && wrapper.unmount();
-  });
+  afterEach(jest.resetAllMocks);
+  afterEach(() => wrapper?.unmount());
 
   it('renders columns as expected', () => {
     const wrapper = createWrapper([]);
@@ -55,7 +55,9 @@ describe('<VisitsTable />', () => {
     [ 60, 3 ],
     [ 115, 6 ],
   ])('renders the expected amount of pages', (visitsCount, expectedAmountOfPages) => {
-    const wrapper = createWrapper(rangeOf(visitsCount, () => ({ browser: '', date: '', referer: '' })));
+    const wrapper = createWrapper(
+      rangeOf(visitsCount, () => Mock.of<NormalizedVisit>({ browser: '', date: '', referer: '' })),
+    );
     const tr = wrapper.find('tbody').find('tr');
     const paginator = wrapper.find(SimplePaginator);
 
@@ -66,7 +68,9 @@ describe('<VisitsTable />', () => {
   it.each(
     rangeOf(20, (value) => [ value ]),
   )('does not render footer when there is only one page to render', (visitsCount) => {
-    const wrapper = createWrapper(rangeOf(visitsCount, () => ({ browser: '', date: '', referer: '' })));
+    const wrapper = createWrapper(
+      rangeOf(visitsCount, () => Mock.of<NormalizedVisit>({ browser: '', date: '', referer: '' })),
+    );
     const tr = wrapper.find('tbody').find('tr');
     const paginator = wrapper.find(SimplePaginator);
 
@@ -75,7 +79,7 @@ describe('<VisitsTable />', () => {
   });
 
   it('selected rows are highlighted', () => {
-    const visits = rangeOf(10, () => ({ browser: '', date: '', referer: '' }));
+    const visits = rangeOf(10, () => Mock.of<NormalizedVisit>({ browser: '', date: '', referer: '' }));
     const wrapper = createWrapper(
       visits,
       [ visits[1], visits[2] ],
@@ -98,7 +102,7 @@ describe('<VisitsTable />', () => {
   });
 
   it('orders visits when column is clicked', () => {
-    const wrapper = createWrapper(rangeOf(9, (index) => ({
+    const wrapper = createWrapper(rangeOf(9, (index) => Mock.of<NormalizedVisit>({
       browser: '',
       date: `${9 - index}`,
       referer: `${index}`,
@@ -118,8 +122,8 @@ describe('<VisitsTable />', () => {
 
   it('filters list when writing in search box', () => {
     const wrapper = createWrapper([
-      ...rangeOf(7, () => ({ browser: 'aaa', date: 'aaa', referer: 'aaa' })),
-      ...rangeOf(2, () => ({ browser: 'bbb', date: 'bbb', referer: 'bbb' })),
+      ...rangeOf(7, () => Mock.of<NormalizedVisit>({ browser: 'aaa', date: 'aaa', referer: 'aaa' })),
+      ...rangeOf(2, () => Mock.of<NormalizedVisit>({ browser: 'bbb', date: 'bbb', referer: 'bbb' })),
     ]);
     const searchField = wrapper.find(SearchField);