Migrated all remaining short-url elements to TS

test/short-urls/CreateShortUrl.test.tsx

@@ -1,29 +1,32 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import moment from 'moment';
 import { identity } from 'ramda';
+import { Mock } from 'ts-mockery';
 import createShortUrlsCreator from '../../src/short-urls/CreateShortUrl';
 import DateInput from '../../src/utils/DateInput';
+import { ShortUrlCreation } from '../../src/short-urls/reducers/shortUrlCreation';
 
 describe('<CreateShortUrl />', () => {
-  let wrapper;
-  const TagsSelector = () => '';
-  const shortUrlCreationResult = {
-    loading: false,
-  };
-  const createShortUrl = jest.fn(() => Promise.resolve());
+  let wrapper: ShallowWrapper;
+  const TagsSelector = () => null;
+  const shortUrlCreationResult = Mock.all<ShortUrlCreation>();
+  const createShortUrl = jest.fn(async () => Promise.resolve());
 
   beforeEach(() => {
-    const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => '', () => '');
+    const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => null, () => null);
 
     wrapper = shallow(
-      <CreateShortUrl shortUrlCreationResult={shortUrlCreationResult} createShortUrl={createShortUrl} />,
+      <CreateShortUrl
+        shortUrlCreationResult={shortUrlCreationResult}
+        createShortUrl={createShortUrl}
+        selectedServer={null}
+        resetCreateShortUrl={() => {}}
+      />,
     );
   });
-  afterEach(() => {
-    wrapper.unmount();
-    createShortUrl.mockClear();
-  });
+  afterEach(() => wrapper.unmount());
+  afterEach(jest.clearAllMocks);
 
   it('saves short URL with data set in form controls', () => {
     const validSince = moment('2017-01-01');

test/short-urls/Paginator.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { PaginationItem } from 'reactstrap';
 import Paginator from '../../src/short-urls/Paginator';
 
 describe('<Paginator />', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper;
 
-  afterEach(() => wrapper && wrapper.unmount());
+  afterEach(() => wrapper?.unmount());
 
   it('renders nothing if the number of pages is below 2', () => {
     wrapper = shallow(<Paginator serverId="abc123" />);

test/short-urls/SearchBar.test.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
 import searchBarCreator from '../../src/short-urls/SearchBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
 import DateRangeRow from '../../src/utils/DateRangeRow';
+import ColorGenerator from '../../src/utils/services/ColorGenerator';
 
 describe('<SearchBar />', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper;
   const listShortUrlsMock = jest.fn();
-  const SearchBar = searchBarCreator({}, () => '');
+  const SearchBar = searchBarCreator(Mock.all<ColorGenerator>(), () => null);
 
-  afterEach(() => {
-    listShortUrlsMock.mockReset();
-    wrapper && wrapper.unmount();
-  });
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
 
   it('renders a SearchField', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} />);
+    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
 
     expect(wrapper.find(SearchField)).toHaveLength(1);
   });
 
   it('renders a DateRangeRow', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} />);
+    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
 
     expect(wrapper.find(DateRangeRow)).toHaveLength(1);
   });
 
   it('renders no tags when the list of tags is empty', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} />);
+    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
 
     expect(wrapper.find(Tag)).toHaveLength(0);
   });
@@ -36,7 +36,7 @@ describe('<SearchBar />', () => {
   it('renders the proper amount of tags', () => {
     const tags = [ 'foo', 'bar', 'baz' ];
 
-    wrapper = shallow(<SearchBar shortUrlsListParams={{ tags }} />);
+    wrapper = shallow(<SearchBar shortUrlsListParams={{ tags }} listShortUrls={listShortUrlsMock} />);
 
     expect(wrapper.find(Tag)).toHaveLength(tags.length);
   });

test/short-urls/ShortUrls.test.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
 import shortUrlsCreator from '../../src/short-urls/ShortUrls';
 import Paginator from '../../src/short-urls/Paginator';
+import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
 
 describe('<ShortUrls />', () => {
-  let wrapper;
-  const SearchBar = () => '';
-  const ShortUrlsList = () => '';
+  let wrapper: ShallowWrapper;
+  const SearchBar = () => null;
+  const ShortUrlsList = () => null;
 
   beforeEach(() => {
-    const params = {
-      serverId: '1',
-      page: '1',
-    };
-
     const ShortUrls = shortUrlsCreator(SearchBar, ShortUrlsList);
 
-    wrapper = shallow(<ShortUrls match={{ params }} shortUrlsList={{ data: [] }} />);
+    wrapper = shallow(
+      <ShortUrls {...Mock.all<ShortUrlsListProps>()} />,
+    );
   });
   afterEach(() => wrapper.unmount());
 

test/short-urls/ShortUrlsList.test.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
-import shortUrlsListCreator, { SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList';
+import { Mock } from 'ts-mockery';
+import shortUrlsListCreator, { ShortUrlsListProps, SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList';
+import { ShortUrl } from '../../src/short-urls/data';
 
 describe('<ShortUrlsList />', () => {
-  let wrapper;
-  const ShortUrlsRow = () => '';
+  let wrapper: ShallowWrapper;
+  const ShortUrlsRow = () => null;
   const listShortUrlsMock = jest.fn();
   const resetShortUrlParamsMock = jest.fn();
 
@@ -15,6 +17,7 @@ describe('<ShortUrlsList />', () => {
   beforeEach(() => {
     wrapper = shallow(
       <ShortUrlsList
+        {...Mock.all<ShortUrlsListProps>()}
         listShortUrls={listShortUrlsMock}
         resetShortUrlParams={resetShortUrlParamsMock}
         shortUrlsListParams={{
@@ -22,29 +25,27 @@ describe('<ShortUrlsList />', () => {
           tags: [ 'test tag' ],
           searchTerm: 'example.com',
         }}
-        match={{ params: {} }}
-        location={{}}
+        match={{ params: {} } as any}
+        location={{} as any}
         loading={false}
         error={false}
         shortUrlsList={
           [
-            {
+            Mock.of<ShortUrl>({
               shortCode: 'testShortCode',
               shortUrl: 'https://www.example.com/testShortUrl',
               longUrl: 'https://www.example.com/testLongUrl',
               tags: [ 'test tag' ],
-            },
+            }),
           ]
         }
-        mercureInfo={{ loading: true }}
+        mercureInfo={{ loading: true } as any}
       />,
     );
   });
 
-  afterEach(() => {
-    jest.resetAllMocks();
-    wrapper && wrapper.unmount();
-  });
+  afterEach(jest.resetAllMocks);
+  afterEach(() => wrapper?.unmount());
 
   it('wraps a ShortUrlsList with 1 ShortUrlsRow', () => {
     expect(wrapper.find(ShortUrlsRow)).toHaveLength(1);
@@ -71,11 +72,11 @@ describe('<ShortUrlsList />', () => {
   });
 
   it('should render 6 table header cells with conditional order by icon', () => {
-    const getThElementForSortableField = (sortableField) => wrapper.find('table')
+    const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
       .find('thead')
       .find('tr')
       .find('th')
-      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[sortableField]));
+      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[sortableField as keyof typeof SORTABLE_FIELDS]));
 
     Object.keys(SORTABLE_FIELDS).forEach((sortableField) => {
       expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(0);

test/short-urls/UseExistingIfFoundInfoIcon.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Modal } from 'reactstrap';
 import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
 
 describe('<UseExistingIfFoundInfoIcon />', () => {
-  let wrapped;
+  let wrapped: ReactWrapper;
 
   beforeEach(() => {
     wrapped = mount(<UseExistingIfFoundInfoIcon />);

test/short-urls/reducers/shortUrlsList.test.ts

@@ -11,14 +11,12 @@ import { SHORT_URL_META_EDITED } from '../../../src/short-urls/reducers/shortUrl
 import { CREATE_VISIT } from '../../../src/visits/reducers/visitCreation';
 import { ShortUrl } from '../../../src/short-urls/data';
 import ShlinkApiClient from '../../../src/utils/services/ShlinkApiClient';
+import { ShlinkShortUrlsResponse } from '../../../src/utils/services/types';
 
 describe('shortUrlsListReducer', () => {
   describe('reducer', () => {
     it('returns loading on LIST_SHORT_URLS_START', () =>
       expect(reducer(undefined, { type: LIST_SHORT_URLS_START } as any)).toEqual({
-        shortUrls: {
-          data: [],
-        },
         loading: true,
         error: false,
       }));
@@ -32,9 +30,6 @@ describe('shortUrlsListReducer', () => {
 
     it('returns error on LIST_SHORT_URLS_ERROR', () =>
       expect(reducer(undefined, { type: LIST_SHORT_URLS_ERROR } as any)).toEqual({
-        shortUrls: {
-          data: [],
-        },
         loading: false,
         error: true,
       }));
@@ -43,13 +38,13 @@ describe('shortUrlsListReducer', () => {
       const shortCode = 'abc123';
       const tags = [ 'foo', 'bar', 'baz' ];
       const state = {
-        shortUrls: {
+        shortUrls: Mock.of<ShlinkShortUrlsResponse>({
           data: [
             Mock.of<ShortUrl>({ shortCode, tags: [] }),
             Mock.of<ShortUrl>({ shortCode, tags: [], domain: 'example.com' }),
             Mock.of<ShortUrl>({ shortCode: 'foo', tags: [] }),
           ],
-        },
+        }),
         loading: false,
         error: false,
       };
@@ -75,13 +70,13 @@ describe('shortUrlsListReducer', () => {
         validSince: '2020-05-05',
       };
       const state = {
-        shortUrls: {
+        shortUrls: Mock.of<ShlinkShortUrlsResponse>({
           data: [
             Mock.of<ShortUrl>({ shortCode, meta: { maxVisits: 10 }, domain }),
             Mock.of<ShortUrl>({ shortCode, meta: { maxVisits: 50 } }),
             Mock.of<ShortUrl>({ shortCode: 'foo', meta: {} }),
           ],
-        },
+        }),
         loading: false,
         error: false,
       };
@@ -102,13 +97,13 @@ describe('shortUrlsListReducer', () => {
     it('removes matching URL on SHORT_URL_DELETED', () => {
       const shortCode = 'abc123';
       const state = {
-        shortUrls: {
+        shortUrls: Mock.of<ShlinkShortUrlsResponse>({
           data: [
             Mock.of<ShortUrl>({ shortCode }),
             Mock.of<ShortUrl>({ shortCode, domain: 'example.com' }),
             Mock.of<ShortUrl>({ shortCode: 'foo' }),
           ],
-        },
+        }),
         loading: false,
         error: false,
       };
@@ -129,13 +124,13 @@ describe('shortUrlsListReducer', () => {
         visitsCount: 11,
       };
       const state = {
-        shortUrls: {
+        shortUrls: Mock.of<ShlinkShortUrlsResponse>({
           data: [
             Mock.of<ShortUrl>({ shortCode, domain: 'example.com', visitsCount: 5 }),
             Mock.of<ShortUrl>({ shortCode, visitsCount: 10 }),
             Mock.of<ShortUrl>({ shortCode: 'foo', visitsCount: 8 }),
           ],
-        },
+        }),
         loading: false,
         error: false,
       };