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>

test/utils/helpers/numbers.test.js

@@ -0,0 +1,20 @@
+import { roundTen } from '../../../src/utils/helpers/numbers';
+
+describe('numbers', () => {
+  describe('roundTen', () => {
+    it('rounds provided number to the next multiple of ten', () => {
+      const expectationsPairs = [
+        [ 10, 10 ],
+        [ 12, 20 ],
+        [ 158, 160 ],
+        [ 5, 10 ],
+        [ -42, -40 ],
+      ];
+
+      expect.assertions(expectationsPairs.length);
+      expectationsPairs.forEach(([ number, expected ]) => {
+        expect(roundTen(number)).toEqual(expected);
+      });
+    });
+  });
+});

test/utils/utils.test.js

@@ -7,7 +7,6 @@ import {
   determineOrderDir,
   fixLeafletIcons,
   rangeOf,
-  roundTen,
 } from '../../src/utils/utils';
 
 describe('utils', () => {
@@ -86,21 +85,4 @@ describe('utils', () => {
       ]);
     });
   });
-
-  describe('roundTen', () => {
-    it('rounds provided number to the next multiple of ten', () => {
-      const expectationsPairs = [
-        [ 10, 10 ],
-        [ 12, 20 ],
-        [ 158, 160 ],
-        [ 5, 10 ],
-        [ -42, -40 ],
-      ];
-
-      expect.assertions(expectationsPairs.length);
-      expectationsPairs.forEach(([ number, expected ]) => {
-        expect(roundTen(number)).toEqual(expected);
-      });
-    });
-  });
 });

test/visits/ShortUrlVisits.test.js

@@ -43,7 +43,7 @@ describe('<ShortUrlVisits />', () => {
   });
 
   it('renders a preloader when visits are loading', () => {
-    const wrapper = createComponent({ loading: true });
+    const wrapper = createComponent({ loading: true, visits: [] });
     const loadingMessage = wrapper.find(Message);
 
     expect(loadingMessage).toHaveLength(1);
@@ -51,7 +51,7 @@ describe('<ShortUrlVisits />', () => {
   });
 
   it('renders a warning when loading large amounts of visits', () => {
-    const wrapper = createComponent({ loading: true, loadingLarge: true });
+    const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [] });
     const loadingMessage = wrapper.find(Message);
 
     expect(loadingMessage).toHaveLength(1);
@@ -59,7 +59,7 @@ describe('<ShortUrlVisits />', () => {
   });
 
   it('renders an error message when visits could not be loaded', () => {
-    const wrapper = createComponent({ loading: false, error: true });
+    const wrapper = createComponent({ loading: false, error: true, visits: [] });
     const errorMessage = wrapper.find(Card);
 
     expect(errorMessage).toHaveLength(1);