Extracted visits count component to reuse it in other places

src/short-urls/helpers/ShortUrlVisitsCount.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { UncontrolledTooltip } from 'reactstrap';
+import { shortUrlType } from '../reducers/shortUrlsList';
+
+const propTypes = {
+  shortUrl: shortUrlType,
+};
+
+const ShortUrlVisitsCount = ({ shortUrl }) => {
+  const { visitsCount, meta } = shortUrl;
+  const maxVisits = meta && meta.maxVisits;
+
+  if (!maxVisits) {
+    return <span>{visitsCount}</span>;
+  }
+
+  return (
+    <React.Fragment>
+      <span>
+        {visitsCount}
+        <small id="maxVisitsControl" className="short-urls-row__max-visits-control">
+          {' '}/ {maxVisits}{' '}
+          <sup>
+            <FontAwesomeIcon icon={infoIcon} />
+          </sup>
+        </small>
+      </span>
+      <UncontrolledTooltip target="maxVisitsControl" placement="bottom">
+        This short URL will not accept more than <b>{maxVisits}</b> visits.
+      </UncontrolledTooltip>
+    </React.Fragment>
+  );
+};
+
+ShortUrlVisitsCount.propTypes = propTypes;
+
+export default ShortUrlVisitsCount;

src/short-urls/helpers/ShortUrlsRow.js

@@ -2,42 +2,14 @@ import { isEmpty } from 'ramda';
 import React from 'react';
 import Moment from 'react-moment';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
-import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
 import { serverType } from '../../servers/prop-types';
 import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import Tag from '../../tags/helpers/Tag';
+import ShortUrlVisitsCount from './ShortUrlVisitsCount';
 import './ShortUrlsRow.scss';
 
-const renderVisitsCount = (shortUrl) => {
-  const { visitsCount, meta } = shortUrl;
-  const maxVisits = meta && meta.maxVisits;
-
-  if (!maxVisits) {
-    return <span>{visitsCount}</span>;
-  }
-
-  return (
-    <React.Fragment>
-      <span>
-        {visitsCount}
-        <small id="maxVisitsControl" className="short-urls-row__max-visits-control">
-          {' '}/ {maxVisits}{' '}
-          <sup>
-            <FontAwesomeIcon icon={infoIcon} />
-          </sup>
-        </small>
-      </span>
-      <UncontrolledTooltip target="maxVisitsControl" placement="bottom">
-        This short URL will not accept more than <b>{maxVisits}</b> visits.
-      </UncontrolledTooltip>
-    </React.Fragment>
-  );
-};
-
 const ShortUrlsRow = (
   ShortUrlsRowMenu,
   colorGenerator,
@@ -86,7 +58,7 @@ const ShortUrlsRow = (
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
         <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
-          {renderVisitsCount(shortUrl)}
+          <ShortUrlVisitsCount shortUrl={shortUrl} />
         </td>
         <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small

src/short-urls/reducers/shortUrlsList.js

@@ -14,6 +14,12 @@ export const shortUrlType = PropTypes.shape({
   shortCode: PropTypes.string,
   shortUrl: PropTypes.string,
   longUrl: PropTypes.string,
+  visitsCount: PropTypes.number,
+  meta: PropTypes.shape({
+    validSince: PropTypes.string,
+    validUntil: PropTypes.string,
+    maxVisits: PropTypes.number,
+  }),
   tags: PropTypes.arrayOf(PropTypes.string),
 });
 

test/short-urls/helpers/ShortUrlVisitsCount.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { UncontrolledTooltip } from 'reactstrap';
+import ShortUrlVisitsCount from '../../../src/short-urls/helpers/ShortUrlVisitsCount';
+
+describe('<ShortUrlVisitsCount />', () => {
+  let wrapper;
+
+  const createWrapper = (shortUrl) => {
+    wrapper = shallow(<ShortUrlVisitsCount shortUrl={shortUrl} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('just returns visits when no maxVisits is provided', () => {
+    const visitsCount = 45;
+    const wrapper = createWrapper({ visitsCount });
+    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
+    const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
+
+    expect(wrapper.html()).toEqual(`<span>${visitsCount}</span>`);
+    expect(maxVisitsHelper).toHaveLength(0);
+    expect(maxVisitsTooltip).toHaveLength(0);
+  });
+
+  it('displays the maximum amount of visits when present', () => {
+    const visitsCount = 45;
+    const maxVisits = 500;
+    const meta = { maxVisits };
+    const wrapper = createWrapper({ visitsCount, meta });
+    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
+    const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
+
+    expect(wrapper.html()).toContain(`/ ${maxVisits}`);
+    expect(maxVisitsHelper).toHaveLength(1);
+    expect(maxVisitsTooltip).toHaveLength(1);
+  });
+});

test/short-urls/helpers/ShortUrlsRow.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import moment from 'moment';
 import Moment from 'react-moment';
 import { assoc, toString } from 'ramda';
-import { UncontrolledTooltip } from 'reactstrap';
 import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
 import ExternalLink from '../../../src/utils/ExternalLink';
 import Tag from '../../../src/tags/helpers/Tag';
@@ -28,24 +27,17 @@ describe('<ShortUrlsRow />', () => {
     tags: [ 'nodejs', 'reactjs' ],
     visitsCount: 45,
   };
+
+  beforeEach(() => {
     const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout);
-  const createWrapper = (meta) => {
+
     wrapper = shallow(
-      <ShortUrlsRow
+      <ShortUrlsRow shortUrlsListParams={{}} refreshList={mockFunction} selecrtedServer={server} shortUrl={shortUrl} />
-        shortUrlsListParams={{}}
-        refreshList={mockFunction}
-        selecrtedServer={server}
-        shortUrl={{ ...shortUrl, meta }}
-      />
     );
-
+  });
-    return wrapper;
+  afterEach(() => wrapper.unmount());
-  };
-
-  afterEach(() => wrapper && wrapper.unmount());
 
   it('renders date in first column', () => {
-    const wrapper = createWrapper();
     const col = wrapper.find('td').first();
     const moment = col.find(Moment);
 
@@ -53,7 +45,6 @@ describe('<ShortUrlsRow />', () => {
   });
 
   it('renders short URL in second row', () => {
-    const wrapper = createWrapper();
     const col = wrapper.find('td').at(1);
     const link = col.find(ExternalLink);
 
@@ -61,7 +52,6 @@ describe('<ShortUrlsRow />', () => {
   });
 
   it('renders long URL in third row', () => {
-    const wrapper = createWrapper();
     const col = wrapper.find('td').at(2);
     const link = col.find(ExternalLink);
 
@@ -70,7 +60,6 @@ describe('<ShortUrlsRow />', () => {
 
   describe('renders list of tags in fourth row', () => {
     it('with tags', () => {
-      const wrapper = createWrapper();
       const col = wrapper.find('td').at(3);
       const tags = col.find(Tag);
 
@@ -83,8 +72,6 @@ describe('<ShortUrlsRow />', () => {
     });
 
     it('without tags', () => {
-      const wrapper = createWrapper();
-
       wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
 
       const col = wrapper.find('td').at(3);
@@ -94,26 +81,12 @@ describe('<ShortUrlsRow />', () => {
   });
 
   it('renders visits count in fifth row', () => {
-    const wrapper = createWrapper();
     const col = wrapper.find('td').at(4);
-    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
 
-    expect(col.text()).toEqual(toString(shortUrl.visitsCount));
+    expect(col.html()).toContain(toString(shortUrl.visitsCount));
-    expect(maxVisitsHelper).toHaveLength(0);
-  });
-
-  it('renders visits count with helper control displaying the maximum amount of visits', () => {
-    const maxVisits = 40;
-    const wrapper = createWrapper({ maxVisits });
-    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
-    const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
-
-    expect(maxVisitsHelper).toHaveLength(1);
-    expect(maxVisitsTooltip).toHaveLength(1);
   });
 
   it('updates state when copied to clipboard', () => {
-    const wrapper = createWrapper();
     const col = wrapper.find('td').at(5);
     const menu = col.find(ShortUrlsRowMenu);
 
@@ -124,7 +97,6 @@ describe('<ShortUrlsRow />', () => {
   });
 
   it('shows copy hint when state prop is true', () => {
-    const wrapper = createWrapper();
     const isHidden = () => wrapper.find('td').at(5).find('.short-urls-row__copy-hint').prop('hidden');
 
     expect(isHidden()).toEqual(true);

test/visits/ShortUrlVisits.test.js

@@ -8,7 +8,7 @@ import GraphCard from '../../src/visits/GraphCard';
 import DateInput from '../../src/utils/DateInput';
 import SortableBarGraph from '../../src/visits/SortableBarGraph';
 
-describe('<ShortUrlVisits />', () => {
+describe('<ShortUrlVisitsCount />', () => {
   let wrapper;
   const processStatsFromVisits = () => (
     { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }