Fixed unit tests

src/utils/helpers/numbers.js

@@ -0,0 +1,4 @@
+const TEN_ROUNDING_NUMBER = 10;
+const { ceil } = Math;
+
+export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;

src/utils/utils.js

@@ -4,9 +4,7 @@ import marker from 'leaflet/dist/images/marker-icon.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 import { isEmpty, isNil, range } from 'ramda';
 
-const TEN_ROUNDING_NUMBER = 10;
 const DEFAULT_TIMEOUT_DELAY = 2000;
-const { ceil } = Math;
 
 export const stateFlagTimeout = (setTimeout) => (
   setState,
@@ -43,6 +41,4 @@ export const fixLeafletIcons = () => {
 
 export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
 
-export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
-
 export const hasValue = (value) => !isNil(value) && !isEmpty(value);

src/visits/SortableBarGraph.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
 import SortingDropdown from '../utils/SortingDropdown';
 import PaginationDropdown from '../utils/PaginationDropdown';
-import { rangeOf, roundTen } from '../utils/utils';
+import { rangeOf } from '../utils/utils';
+import { roundTen } from '../utils/helpers/numbers';
 import SimplePaginator from '../common/SimplePaginator';
 import GraphCard from './GraphCard';
 

src/visits/VisitsTable.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Moment from 'react-moment';
 import classNames from 'classnames';
-import { map } from 'ramda';
+import { map, min } from 'ramda';
 import {
   faCaretDown as caretDownIcon,
   faCaretUp as caretUpIcon,
@@ -90,24 +90,24 @@ const VisitsTable = ({ visits, onVisitSelected }) => {
             <FontAwesomeIcon icon={checkIcon} />
           </th>
           <th className="short-urls-list__header-cell--with-action" onClick={orderByColumn('date')}>
-            {renderOrderIcon('date')}
             Date
+            {renderOrderIcon('date')}
           </th>
           <th className="short-urls-list__header-cell--with-action" onClick={orderByColumn('location')}>
-            {renderOrderIcon('location')}
             Location
+            {renderOrderIcon('location')}
           </th>
           <th className="short-urls-list__header-cell--with-action" onClick={orderByColumn('browser')}>
-            {renderOrderIcon('browser')}
             Browser
+            {renderOrderIcon('browser')}
           </th>
           <th className="short-urls-list__header-cell--with-action" onClick={orderByColumn('os')}>
-            {renderOrderIcon('os')}
             OS
+            {renderOrderIcon('os')}
           </th>
           <th className="short-urls-list__header-cell--with-action" onClick={orderByColumn('referer')}>
-            {renderOrderIcon('referer')}
             Referrer
+            {renderOrderIcon('referer')}
           </th>
         </tr>
         <tr>
@@ -159,7 +159,9 @@ const VisitsTable = ({ visits, onVisitSelected }) => {
                 </div>
                 <div className="col-6 d-flex align-items-center flex-row-reverse">
                   <div>
-                    Visits <b>{currentPage.start + 1}</b> to <b>{currentPage.end}</b> of <b>{currentPage.total}</b>
+                    Visits <b>{currentPage.start + 1}</b> to{' '}
+                    <b>{min(currentPage.end, currentPage.total)}</b> of{' '}
+                    <b>{currentPage.total}</b>
                   </div>
                 </div>
               </div>