Created VisitsHeader test

src/utils/ExternalLink.js

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

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 (
       <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);
 

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 = () => (
     <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>

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('<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);
+  });
+});