diff --git a/src/utils/ExternalLink.js b/src/utils/ExternalLink.js index f926db7e..916809cd 100644 --- a/src/utils/ExternalLink.js +++ b/src/utils/ExternalLink.js @@ -11,7 +11,7 @@ export default function ExternalLink(props) { return ( - {children} + {children || href} ); } diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index cf0c09f9..eea3edf7 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -7,7 +7,6 @@ import { Card } from 'reactstrap'; import PropTypes from 'prop-types'; import DateInput from '../common/DateInput'; import MutedMessage from '../utils/MuttedMessage'; -import { serverType } from '../servers/prop-types/index'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { processBrowserStats, @@ -27,7 +26,6 @@ export class ShortUrlsVisitsComponent extends React.Component { processCountriesStats: PropTypes.func, processReferrersStats: PropTypes.func, match: PropTypes.object, - selectedServer: serverType, getShortUrlVisits: PropTypes.func, shortUrlVisits: shortUrlVisitsType, getShortUrlDetail: PropTypes.func, @@ -59,8 +57,6 @@ export class ShortUrlsVisitsComponent extends React.Component { render() { const { - match: { params }, - selectedServer, processOsStats, processBrowserStats, processCountriesStats, @@ -68,8 +64,6 @@ export class ShortUrlsVisitsComponent extends React.Component { shortUrlVisits, shortUrlDetail, } = this.props; - const serverUrl = selectedServer ? selectedServer.url : ''; - const shortLink = `${serverUrl}/${params.shortCode}`; const renderVisitsContent = () => { const { visits, loading, error } = shortUrlVisits; @@ -110,7 +104,7 @@ export class ShortUrlsVisitsComponent extends React.Component { return (
- +
@@ -145,7 +139,7 @@ export class ShortUrlsVisitsComponent extends React.Component { } const ShortUrlsVisits = connect( - pick([ 'selectedServer', 'shortUrlVisits', 'shortUrlDetail' ]), + pick([ 'shortUrlVisits', 'shortUrlDetail' ]), { getShortUrlVisits, getShortUrlDetail } )(ShortUrlsVisitsComponent); diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js index db0d3e5e..6213ced2 100644 --- a/src/visits/VisitsHeader.js +++ b/src/visits/VisitsHeader.js @@ -1,7 +1,6 @@ import { Card, UncontrolledTooltip } from 'reactstrap'; import Moment from 'react-moment'; import React from 'react'; -import PropTypes from 'prop-types'; import ExternalLink from '../utils/ExternalLink'; import './VisitsHeader.scss'; import { shortUrlDetailType } from './reducers/shortUrlDetail'; @@ -10,12 +9,14 @@ import { shortUrlVisitsType } from './reducers/shortUrlVisits'; const propTypes = { shortUrlDetail: shortUrlDetailType.isRequired, shortUrlVisits: shortUrlVisitsType.isRequired, - shortLink: PropTypes.string, }; -export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) { +export function VisitsHeader({ shortUrlDetail, shortUrlVisits }) { const { shortUrl, loading } = shortUrlDetail; const { visits } = shortUrlVisits; + const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : ''; + const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : ''; + const renderDate = () => ( {shortUrl.dateCreated} @@ -30,7 +31,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {

Visits: {visits.length} - Visit stats for {shortLink} + Visit stats for


{shortUrl.dateCreated && ( @@ -44,7 +45,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) { Long URL:   {loading && Loading...} - {!loading && {shortUrl.longUrl}} + {!loading && }
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js new file mode 100644 index 00000000..5416d3cb --- /dev/null +++ b/test/visits/VisitsHeader.test.js @@ -0,0 +1,44 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import Moment from 'react-moment'; +import { VisitsHeader } from '../../src/visits/VisitsHeader'; +import ExternalLink from '../../src/utils/ExternalLink'; + +describe('', () => { + let wrapper; + const shortUrlDetail = { + shortUrl: { + longUrl: 'https://foo.bar/bar/foo', + dateCreated: '2018-01-01T10:00:00+01:00', + }, + loading: false, + }; + const shortUrlVisits = { + visits: [{}, {}, {}], + }; + + beforeEach(() => { + wrapper = shallow( + + ); + }); + afterEach(() => wrapper.unmount()); + + it('shows the amount of visits', () => { + const visitsBadge = wrapper.find('.badge'); + + expect(visitsBadge.text()).toEqual(`Visits: ${shortUrlVisits.visits.length}`); + }); + + it('shows when the URL was created', () => { + const moment = wrapper.find(Moment).first(); + + expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl.dateCreated); + }); + + it('shows the long URL', () => { + const longUrlLink = wrapper.find(ExternalLink).last(); + + expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl.longUrl); + }); +});