Extracted short URLs table into reusable component to use both on list section and overview section

src/servers/Overview.scss

@@ -0,0 +1,8 @@
+.overview__card.overview__card {
+  text-align: center;
+}
+
+.overview__card-title {
+  text-transform: uppercase;
+  color: #6c757d;
+}

src/servers/Overview.tsx

@@ -1,50 +1,77 @@
-import { useEffect } from 'react';
-import { Card, CardText, CardTitle } from 'reactstrap';
+import { FC, useEffect } from 'react';
+import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
+import { Link } from 'react-router-dom';
 import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
 import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
 import { prettify } from '../utils/helpers/numbers';
 import { TagsList } from '../tags/reducers/tagsList';
+import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
+import { isServerWithId, SelectedServer } from './data';
+import './Overview.scss';
 
 interface OverviewConnectProps {
   shortUrlsList: ShortUrlsListState;
   listShortUrls: (params: ShortUrlsListParams) => void;
   listTags: Function;
   tagsList: TagsList;
+  selectedServer: SelectedServer;
 }
 
-export const Overview = ({ shortUrlsList, listShortUrls, listTags, tagsList }: OverviewConnectProps) => {
+export const Overview = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercureHub((
+  { shortUrlsList, listShortUrls, listTags, tagsList, selectedServer }: OverviewConnectProps,
+) => {
   const { loading, error, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
+  const serverId = !isServerWithId(selectedServer) ? '' : selectedServer.id;
 
   useEffect(() => {
-    listShortUrls({ itemsPerPage: 5 });
+    listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
     listTags();
   }, []);
 
   return (
-    <div className="row">
-      <div className="col-sm-4">
-        <Card className="text-center mb-2 mb-sm-0" body>
-          <CardTitle tag="h5">Visits</CardTitle>
-          <CardText tag="h2">?</CardText>
-        </Card>
+    <>
+      <div className="row mb-3">
+        <div className="col-sm-4">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
+            <CardText tag="h2">?</CardText>
+          </Card>
+        </div>
+        <div className="col-sm-4">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
+            <CardText tag="h2">
+              {loading && !error && 'Loading...'}
+              {error && !loading && 'Failed :('}
+              {!error && !loading && prettify(shortUrls?.pagination.totalItems ?? 0)}
+            </CardText>
+          </Card>
+        </div>
+        <div className="col-sm-4">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
+            <CardText tag="h2">{loadingTags ? 'Loading... ' : prettify(tagsList.tags.length)}</CardText>
+          </Card>
+        </div>
       </div>
-      <div className="col-sm-4">
-        <Card className="text-center mb-2 mb-sm-0" body>
-          <CardTitle tag="h5">Short URLs</CardTitle>
-          <CardText tag="h2">
-            {loading && !error && 'Loading...'}
-            {error && !loading && 'Failed :('}
-            {!error && !loading && prettify(shortUrls?.pagination.totalItems ?? 0)}
-          </CardText>
-        </Card>
-      </div>
-      <div className="col-sm-4">
-        <Card className="text-center" body>
-          <CardTitle tag="h5">Tags</CardTitle>
-          <CardText tag="h2">{loadingTags ? 'Loading... ' : prettify(tagsList.tags.length)}</CardText>
-        </Card>
-      </div>
-    </div>
+      <Card className="mb-4">
+        <CardHeader>
+          Create short URL
+          <Link className="float-right" to={`/server/${serverId}/create-short-url`}>More options &raquo;</Link>
+        </CardHeader>
+        <CardBody>Create</CardBody>
+      </Card>
+      <Card>
+        <CardHeader>
+          Recently created URLs
+          <Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
+        </CardHeader>
+        <CardBody>
+          <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={selectedServer} className="mb-0" />
+        </CardBody>
+      </Card>
+    </>
   );
-};
+}, () => 'https://shlink.io/new-visit');

src/servers/services/provideServices.ts

@@ -44,10 +44,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
   bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ]));
 
-  bottle.serviceFactory('Overview', () => Overview);
+  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable');
   bottle.decorator('Overview', connect(
-    [ 'shortUrlsList', 'tagsList' ],
-    [ 'listShortUrls', 'listTags' ],
+    [ 'shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo' ],
+    [ 'listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo' ],
   ));
 
   // Services

src/short-urls/ShortUrls.tsx

@@ -1,16 +1,11 @@
 import { FC, useEffect, useState } from 'react';
-import { ShlinkShortUrlsResponse } from '../utils/services/types';
 import Paginator from './Paginator';
-import { ShortUrlsListProps, WithList } from './ShortUrlsList';
+import { ShortUrlsListProps } from './ShortUrlsList';
 
-interface ShortUrlsProps extends ShortUrlsListProps {
-  shortUrlsList?: ShlinkShortUrlsResponse;
-}
-
-const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps & WithList>) => (props: ShortUrlsProps) => {
+const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (props: ShortUrlsListProps) => {
   const { match, shortUrlsList } = props;
   const { page = '1', serverId = '' } = match?.params ?? {};
-  const { data = [], pagination } = shortUrlsList ?? {};
+  const { pagination } = shortUrlsList?.shortUrls ?? {};
   const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`);
 
   // Using a key on a component makes react to create a new instance every time the key changes
@@ -23,7 +18,7 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps & WithLis
     <>
       <div className="form-group"><SearchBar /></div>
       <div>
-        <ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
+        <ShortUrlsList {...props} key={urlsListKey} />
         <Paginator paginator={pagination} serverId={serverId} />
       </div>
     </>

src/short-urls/ShortUrlsList.scss

@@ -1,19 +1,3 @@
-@import '../utils/base';
-
-.short-urls-list__header {
-  @media (max-width: $smMax) {
-    display: none;
-  }
-}
-
-.short-urls-list__header--with-action {
-  cursor: pointer;
-}
-
 .short-urls-list__header-icon {
   margin-right: 5px;
 }
-
-.short-urls-list__header-cell--with-action {
-  cursor: pointer;
-}

src/short-urls/ShortUrlsList.tsx

@@ -1,6 +1,6 @@
 import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { head, isEmpty, keys, values } from 'ramda';
+import { head, keys, values } from 'ramda';
 import { FC, useEffect, useState } from 'react';
 import qs from 'qs';
 import { RouteComponentProps } from 'react-router';
@@ -9,9 +9,8 @@ import { determineOrderDir, OrderDir } from '../utils/utils';
 import { SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
-import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
-import { ShortUrl } from './data';
 import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams';
+import { ShortUrlsTableProps } from './ShortUrlsTable';
 import './ShortUrlsList.scss';
 
 interface RouteParams {
@@ -19,28 +18,23 @@ interface RouteParams {
   serverId: string;
 }
 
-export interface WithList {
-  shortUrlsList: ShortUrl[];
-}
-
-export interface ShortUrlsListProps extends ShortUrlsListState, RouteComponentProps<RouteParams> {
+export interface ShortUrlsListProps extends RouteComponentProps<RouteParams> {
   selectedServer: SelectedServer;
+  shortUrlsList: ShortUrlsListState;
   listShortUrls: (params: ShortUrlsListParams) => void;
   shortUrlsListParams: ShortUrlsListParams;
   resetShortUrlParams: () => void;
 }
 
-const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub(({
+const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercureHub(({
   listShortUrls,
   resetShortUrlParams,
   shortUrlsListParams,
   match,
   location,
-  loading,
-  error,
   shortUrlsList,
   selectedServer,
-}: ShortUrlsListProps & WithList) => {
+}: ShortUrlsListProps) => {
   const { orderBy } = shortUrlsListParams;
   const [ order, setOrder ] = useState<{ orderField?: OrderableFields; orderDir?: OrderDir }>({
     orderField: orderBy && (head(keys(orderBy)) as OrderableFields),
@@ -69,39 +63,12 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub
       />
     );
   };
-  const renderShortUrls = () => {
-    if (error) {
-      return (
-        <tr>
-          <td colSpan={6} className="text-center table-danger">Something went wrong while loading short URLs :(</td>
-        </tr>
-      );
-    }
-
-    if (loading) {
-      return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
-    }
-
-    if (!loading && isEmpty(shortUrlsList)) {
-      return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
-    }
-
-    return shortUrlsList.map((shortUrl) => (
-      <ShortUrlsRow
-        key={shortUrl.shortUrl}
-        shortUrl={shortUrl}
-        selectedServer={selectedServer}
-        refreshList={refreshList}
-        shortUrlsListParams={shortUrlsListParams}
-      />
-    ));
-  };
 
   useEffect(() => {
     const query = qs.parse(location.search, { ignoreQueryPrefix: true });
     const tags = query.tag ? [ query.tag as string ] : shortUrlsListParams.tags;
 
-    refreshList({ page: match.params.page, tags });
+    refreshList({ page: match.params.page, tags, itemsPerPage: undefined });
 
     return resetShortUrlParams;
   }, []);
@@ -116,44 +83,14 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub
           onChange={handleOrderBy}
         />
       </div>
-      <table className="table table-striped table-hover">
-        <thead className="short-urls-list__header">
-          <tr>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={orderByColumn('dateCreated')}
-            >
-              {renderOrderIcon('dateCreated')}
-              Created at
-            </th>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={orderByColumn('shortCode')}
-            >
-              {renderOrderIcon('shortCode')}
-              Short URL
-            </th>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={orderByColumn('longUrl')}
-            >
-              {renderOrderIcon('longUrl')}
-              Long URL
-            </th>
-            <th className="short-urls-list__header-cell">Tags</th>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={orderByColumn('visits')}
-            >
-              <span className="indivisible">{renderOrderIcon('visits')} Visits</span>
-            </th>
-            <th className="short-urls-list__header-cell">&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-          {renderShortUrls()}
-        </tbody>
-      </table>
+      <ShortUrlsTable
+        orderByColumn={orderByColumn}
+        renderOrderIcon={renderOrderIcon}
+        selectedServer={selectedServer}
+        refreshList={refreshList}
+        shortUrlsListParams={shortUrlsListParams}
+        shortUrlsList={shortUrlsList}
+      />
     </>
   );
 }, () => 'https://shlink.io/new-visit');

src/short-urls/ShortUrlsTable.scss

@@ -0,0 +1,11 @@
+@import '../utils/base';
+
+.short-urls-table__header {
+  @media (max-width: $smMax) {
+    display: none;
+  }
+}
+
+.short-urls-table__header-cell--with-action {
+  cursor: pointer;
+}

src/short-urls/ShortUrlsTable.tsx

@@ -0,0 +1,91 @@
+import { FC, ReactNode } from 'react';
+import { isEmpty } from 'ramda';
+import classNames from 'classnames';
+import { SelectedServer } from '../servers/data';
+import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
+import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
+import { OrderableFields, ShortUrlsListParams } from './reducers/shortUrlsListParams';
+import './ShortUrlsTable.scss';
+
+export interface ShortUrlsTableProps {
+  orderByColumn?: (column: OrderableFields) => () => void;
+  renderOrderIcon?: (column: OrderableFields) => ReactNode;
+  shortUrlsList: ShortUrlsListState;
+  selectedServer: SelectedServer;
+  refreshList?: Function;
+  shortUrlsListParams?: ShortUrlsListParams;
+  className?: string;
+}
+
+export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
+  orderByColumn,
+  renderOrderIcon,
+  shortUrlsList,
+  refreshList,
+  shortUrlsListParams,
+  selectedServer,
+  className,
+}: ShortUrlsTableProps) => {
+  const { error, loading, shortUrls } = shortUrlsList;
+  const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
+    'short-urls-table__header-cell--with-action': !!orderByColumn,
+  });
+  const tableClasses = classNames('table table-striped table-hover', className);
+
+  const renderShortUrls = () => {
+    if (error) {
+      return (
+        <tr>
+          <td colSpan={6} className="text-center table-danger">Something went wrong while loading short URLs :(</td>
+        </tr>
+      );
+    }
+
+    if (loading) {
+      return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
+    }
+
+    if (!loading && isEmpty(shortUrlsList)) {
+      return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
+    }
+
+    return shortUrls?.data.map((shortUrl) => (
+      <ShortUrlsRow
+        key={shortUrl.shortUrl}
+        shortUrl={shortUrl}
+        selectedServer={selectedServer}
+        refreshList={refreshList}
+        shortUrlsListParams={shortUrlsListParams}
+      />
+    ));
+  };
+
+  return (
+    <table className={tableClasses}>
+      <thead className="short-urls-table__header">
+        <tr>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
+            {renderOrderIcon?.('dateCreated')}
+            Created at
+          </th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
+            {renderOrderIcon?.('shortCode')}
+            Short URL
+          </th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
+            {renderOrderIcon?.('longUrl')}
+            Long URL
+          </th>
+          <th className="short-urls-table__header-cell">Tags</th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
+            <span className="indivisible">{renderOrderIcon?.('visits')} Visits</span>
+          </th>
+          <th className="short-urls-table__header-cell">&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        {renderShortUrls()}
+      </tbody>
+    </table>
+  );
+};

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -16,8 +16,8 @@ import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss';
 
 export interface ShortUrlsRowProps {
-  refreshList: Function;
-  shortUrlsListParams: ShortUrlsListParams;
+  refreshList?: Function;
+  shortUrlsListParams?: ShortUrlsListParams;
   selectedServer: SelectedServer;
   shortUrl: ShortUrl;
 }
@@ -36,14 +36,14 @@ const ShortUrlsRow = (
       return <i className="indivisible"><small>No tags</small></i>;
     }
 
-    const selectedTags = shortUrlsListParams.tags ?? [];
+    const selectedTags = shortUrlsListParams?.tags ?? [];
 
     return tags.map((tag) => (
       <Tag
         colorGenerator={colorGenerator}
         key={tag}
         text={tag}
-        onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
+        onClick={() => refreshList?.({ tags: [ ...selectedTags, tag ] })}
       />
     ));
   };

src/short-urls/services/provideServices.ts

@@ -1,5 +1,3 @@
-import { connect as reduxConnect } from 'react-redux';
-import { assoc } from 'ramda';
 import Bottle from 'bottlejs';
 import ShortUrls from '../ShortUrls';
 import SearchBar from '../SearchBar';
@@ -19,27 +17,26 @@ import { editShortUrlTags, resetShortUrlsTags } from '../reducers/shortUrlTags';
 import { editShortUrlMeta, resetShortUrlMeta } from '../reducers/shortUrlMeta';
 import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
 import { editShortUrl } from '../reducers/shortUrlEdition';
-import { ConnectDecorator, ShlinkState } from '../../container/types';
+import { ConnectDecorator } from '../../container/types';
+import { ShortUrlsTable } from '../ShortUrlsTable';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory('ShortUrls', ShortUrls, 'SearchBar', 'ShortUrlsList');
-  bottle.decorator('ShortUrls', reduxConnect(
-    (state: ShlinkState) => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList),
-  ));
+  bottle.decorator('ShortUrls', connect([ 'shortUrlsList' ]));
 
   // Services
   bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator', 'ForServerVersion');
   bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ]));
 
-  bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsRow');
+  bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable');
   bottle.decorator('ShortUrlsList', connect(
     [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ],
     [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisits', 'loadMercureInfo' ],
   ));
 
+  bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow');
   bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');
-
   bottle.serviceFactory(
     'ShortUrlsRowMenu',
     ShortUrlsRowMenu,

test/short-urls/ShortUrlsList.test.tsx

@@ -1,19 +1,30 @@
 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 { Mock } from 'ts-mockery';
 import shortUrlsListCreator, { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
 import { ShortUrl } from '../../src/short-urls/data';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
-import { SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams';
+import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
+import SortingDropdown from '../../src/utils/SortingDropdown';
 
 describe('<ShortUrlsList />', () => {
   let wrapper: ShallowWrapper;
-  const ShortUrlsRow = () => null;
+  const ShortUrlsTable = () => null;
   const listShortUrlsMock = jest.fn();
   const resetShortUrlParamsMock = jest.fn();
+  const shortUrlsList = Mock.of<ShortUrlsListModel>({
+    shortUrls: {
+      data: [
+        Mock.of<ShortUrl>({
+          shortCode: 'testShortCode',
+          shortUrl: 'https://www.example.com/testShortUrl',
+          longUrl: 'https://www.example.com/testLongUrl',
+          tags: [ 'test tag' ],
+        }),
+      ],
+    },
+  });
 
-  const ShortUrlsList = shortUrlsListCreator(ShortUrlsRow);
+  const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable);
 
   beforeEach(() => {
     wrapper = shallow(
@@ -29,18 +40,7 @@ describe('<ShortUrlsList />', () => {
         }}
         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' ],
-            }),
-          ]
-        }
+        shortUrlsList={shortUrlsList}
       />,
     ).dive(); // Dive is needed as this component is wrapped in a HOC
   });
@@ -48,50 +48,11 @@ describe('<ShortUrlsList />', () => {
   afterEach(jest.resetAllMocks);
   afterEach(() => wrapper?.unmount());
 
-  it('wraps a ShortUrlsList with 1 ShortUrlsRow', () => {
-    expect(wrapper.find(ShortUrlsRow)).toHaveLength(1);
+  it('wraps a ShortUrlsTable', () => {
+    expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
   });
 
-  it('should render inner table by default', () => {
-    expect(wrapper.find('table')).toHaveLength(1);
-  });
-
-  it('should render table header by default', () => {
-    expect(wrapper.find('table').find('thead')).toHaveLength(1);
-  });
-
-  it('should render 6 table header cells by default', () => {
-    expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6);
-  });
-
-  it('should render 6 table header cells without order by icon by default', () => {
-    const thElements = wrapper.find('table').find('thead').find('tr').find('th');
-
-    thElements.forEach((thElement) => {
-      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
-    });
-  });
-
-  it('should render 6 table header cells with conditional order by icon', () => {
-    const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
-      .find('thead')
-      .find('tr')
-      .find('th')
-      .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);
-
-      getThElementForSortableField(sortableField).simulate('click');
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(1);
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon).prop('icon')).toEqual(caretUpIcon);
-
-      getThElementForSortableField(sortableField).simulate('click');
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(1);
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon).prop('icon')).toEqual(caretDownIcon);
-
-      getThElementForSortableField(sortableField).simulate('click');
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(0);
-    });
+  it('wraps a SortingDropdown', () => {
+    expect(wrapper.find(SortingDropdown)).toHaveLength(1);
   });
 });

test/short-urls/ShortUrlsTable.test.tsx

@@ -0,0 +1,59 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable';
+import { SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams';
+import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
+
+describe('<ShortUrlsTable />', () => {
+  let wrapper: ShallowWrapper;
+  const shortUrlsList = Mock.all<ShortUrlsList>();
+  const orderByColumn = jest.fn();
+  const ShortUrlsRow = () => null;
+
+  const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow);
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={null} orderByColumn={() => orderByColumn} />,
+    );
+  });
+
+  afterEach(jest.resetAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it('should render inner table by default', () => {
+    expect(wrapper.find('table')).toHaveLength(1);
+  });
+
+  it('should render table header by default', () => {
+    expect(wrapper.find('table').find('thead')).toHaveLength(1);
+  });
+
+  it('should render 6 table header cells by default', () => {
+    expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6);
+  });
+
+  it('should render 6 table header cells without order by icon by default', () => {
+    const thElements = wrapper.find('table').find('thead').find('tr').find('th');
+
+    thElements.forEach((thElement) => {
+      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
+    });
+  });
+
+  it('should render 6 table header cells with conditional order by icon', () => {
+    const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
+      .find('thead')
+      .find('tr')
+      .find('th')
+      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[sortableField as keyof typeof SORTABLE_FIELDS]));
+    const sortableFields = Object.keys(SORTABLE_FIELDS);
+
+    expect.assertions(sortableFields.length);
+    sortableFields.forEach((sortableField) => {
+      getThElementForSortableField(sortableField).simulate('click');
+      expect(orderByColumn).toHaveBeenCalled();
+    });
+  });
+});