Created VisitsHeader test

This commit is contained in:
Alejandro Celaya 2018-09-08 09:31:44 +02:00
parent eb0f219403
commit d37e7ca7ce
4 changed files with 53 additions and 14 deletions

View file

@ -11,7 +11,7 @@ export default function ExternalLink(props) {
return (
<a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
{children}
{children || href}
</a>
);
}

View file

@ -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 (
<div className="shlink-container">
<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} shortLink={shortLink} />
<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
<section className="mt-4">
<div className="row">
@ -145,7 +139,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
}
const ShortUrlsVisits = connect(
pick([ 'selectedServer', 'shortUrlVisits', 'shortUrlDetail' ]),
pick([ 'shortUrlVisits', 'shortUrlDetail' ]),
{ getShortUrlVisits, getShortUrlDetail }
)(ShortUrlsVisitsComponent);

View file

@ -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 = () => (
<span>
<b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
@ -30,7 +31,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
<Card className="bg-light" body>
<h2>
<span className="badge badge-main float-right">Visits: {visits.length}</span>
Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink>
Visit stats for <ExternalLink href={shortLink} />
</h2>
<hr />
{shortUrl.dateCreated && (
@ -44,7 +45,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
Long URL:
&nbsp;
{loading && <small>Loading...</small>}
{!loading && <ExternalLink href={shortUrl.longUrl}>{shortUrl.longUrl}</ExternalLink>}
{!loading && <ExternalLink href={longLink} />}
</div>
</Card>
</header>

View file

@ -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('<VisitsHeader />', () => {
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(
<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} shortLink="foo" />
);
});
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);
});
});