diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.js b/src/short-urls/helpers/ShortUrlVisitsCount.js
new file mode 100644
index 00000000..32447c8a
--- /dev/null
+++ b/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 {visitsCount};
+ }
+
+ return (
+
+
+ {visitsCount}
+
+ {' '}/ {maxVisits}{' '}
+
+
+
+
+
+
+ This short URL will not accept more than {maxVisits} visits.
+
+
+ );
+};
+
+ShortUrlVisitsCount.propTypes = propTypes;
+
+export default ShortUrlVisitsCount;
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index f117c67a..10585db7 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/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 {visitsCount};
- }
-
- return (
-
-
- {visitsCount}
-
- {' '}/ {maxVisits}{' '}
-
-
-
-
-
-
- This short URL will not accept more than {maxVisits} visits.
-
-
- );
-};
-
const ShortUrlsRow = (
ShortUrlsRowMenu,
colorGenerator,
@@ -86,7 +58,7 @@ const ShortUrlsRow = (
{this.renderTags(shortUrl.tags)} |
- {renderVisitsCount(shortUrl)}
+
|
', () => {
+ let wrapper;
+
+ const createWrapper = (shortUrl) => {
+ wrapper = shallow();
+
+ 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(`${visitsCount}`);
+ 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);
+ });
+});
diff --git a/test/short-urls/helpers/ShortUrlsRow.test.js b/test/short-urls/helpers/ShortUrlsRow.test.js
index 1f7fbc93..5be8718a 100644
--- a/test/short-urls/helpers/ShortUrlsRow.test.js
+++ b/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('', () => {
tags: [ 'nodejs', 'reactjs' ],
visitsCount: 45,
};
- const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout);
- const createWrapper = (meta) => {
+
+ beforeEach(() => {
+ const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout);
+
wrapper = shallow(
-
+
);
-
- return wrapper;
- };
-
- afterEach(() => wrapper && wrapper.unmount());
+ });
+ afterEach(() => 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('', () => {
});
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('', () => {
});
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('', () => {
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('', () => {
});
it('without tags', () => {
- const wrapper = createWrapper();
-
wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
const col = wrapper.find('td').at(3);
@@ -94,26 +81,12 @@ describe('', () => {
});
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(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);
+ expect(col.html()).toContain(toString(shortUrl.visitsCount));
});
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('', () => {
});
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);
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js
index e7006c75..45f54f63 100644
--- a/test/visits/ShortUrlVisits.test.js
+++ b/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('', () => {
+describe('', () => {
let wrapper;
const processStatsFromVisits = () => (
{ os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }
|