From 3f2162fe62a8d683e92dd2fdb210f67498beb622 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jan 2020 19:58:04 +0100 Subject: [PATCH] Extracted visits count component to reuse it in other places --- src/short-urls/helpers/ShortUrlVisitsCount.js | 39 ++++++++++++++++ src/short-urls/helpers/ShortUrlsRow.js | 32 +------------- src/short-urls/reducers/shortUrlsList.js | 6 +++ .../helpers/ShortUrlVisitsCount.test.js | 40 +++++++++++++++++ test/short-urls/helpers/ShortUrlsRow.test.js | 44 ++++--------------- test/visits/ShortUrlVisits.test.js | 2 +- 6 files changed, 96 insertions(+), 67 deletions(-) create mode 100644 src/short-urls/helpers/ShortUrlVisitsCount.js create mode 100644 test/short-urls/helpers/ShortUrlVisitsCount.test.js 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: {} }