From 64c1b56973dcdbf02d7378b5bad169291c82e0af Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 8 Sep 2018 13:28:40 +0200
Subject: [PATCH] Created ShortUrlVisits test

---
 src/common/DateInput.js            |  8 +--
 src/visits/ShortUrlVisits.js       |  5 +-
 test/visits/ShortUrlVisits.test.js | 89 ++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 test/visits/ShortUrlVisits.test.js

diff --git a/src/common/DateInput.js b/src/common/DateInput.js
index 2981810a..a6586b47 100644
--- a/src/common/DateInput.js
+++ b/src/common/DateInput.js
@@ -2,24 +2,24 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
-import './DateInput.scss';
 import { isNil } from 'ramda';
+import './DateInput.scss';
 
 export default class DateInput extends React.Component {
   constructor(props) {
     super(props);
-    this.inputRef = React.createRef();
+    this.inputRef = props.ref || React.createRef();
   }
 
   render() {
-    const { isClearable, selected } = this.props;
+    const { className, isClearable, selected } = this.props;
     const showCalendarIcon = !isClearable || isNil(selected);
 
     return (
       <div className="date-input-container">
         <DatePicker
           {...this.props}
-          className={`date-input-container__input form-control ${this.props.className || ''}`}
+          className={`date-input-container__input form-control ${className || ''}`}
           dateFormat="YYYY-MM-DD"
           readOnly
           ref={this.inputRef}
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index eea3edf7..92ab0f24 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -25,7 +25,9 @@ export class ShortUrlsVisitsComponent extends React.Component {
     processBrowserStats: PropTypes.func,
     processCountriesStats: PropTypes.func,
     processReferrersStats: PropTypes.func,
-    match: PropTypes.object,
+    match: PropTypes.shape({
+      params: PropTypes.object,
+    }),
     getShortUrlVisits: PropTypes.func,
     shortUrlVisits: shortUrlVisitsType,
     getShortUrlDetail: PropTypes.func,
@@ -122,7 +124,6 @@ export class ShortUrlsVisitsComponent extends React.Component {
                 selected={this.state.endDate}
                 placeholderText="Until"
                 isClearable
-                className="short-url-visits__date-input"
                 minDate={this.state.startDate}
                 onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
               />
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js
new file mode 100644
index 00000000..d7d2a3e8
--- /dev/null
+++ b/test/visits/ShortUrlVisits.test.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { identity } from 'ramda';
+import { Card } from 'reactstrap';
+import * as sinon from 'sinon';
+import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/ShortUrlVisits';
+import MutedMessage from '../../src/utils/MuttedMessage';
+import { GraphCard } from '../../src/visits/GraphCard';
+import DateInput from '../../src/common/DateInput';
+
+describe('<ShortUrlVisits />', () => {
+  let wrapper;
+  const statsProcessor = () => ({});
+  const getShortUrlVisitsMock = sinon.spy();
+  const match = {
+    params: { shortCode: 'abc123' },
+  };
+
+  const createComponent = (shortUrlVisits) => {
+    wrapper = shallow(
+      <ShortUrlsVisits
+        getShortUrlDetail={identity}
+        getShortUrlVisits={getShortUrlVisitsMock}
+        processBrowserStats={statsProcessor}
+        processCountriesStats={statsProcessor}
+        processOsStats={statsProcessor}
+        processReferrersStats={statsProcessor}
+        match={match}
+        shortUrlVisits={shortUrlVisits}
+        shortUrlDetail={{}}
+      />
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => {
+    getShortUrlVisitsMock.resetHistory();
+
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  it('Renders a preloader when visits are loading', () => {
+    const wrapper = createComponent({ loading: true });
+    const loadingMessage = wrapper.find(MutedMessage);
+
+    expect(loadingMessage).toHaveLength(1);
+    expect(loadingMessage.html()).toContain('Loading...');
+  });
+
+  it('renders an error message when visits could not be loaded', () => {
+    const wrapper = createComponent({ loading: false, error: true });
+    const errorMessage = wrapper.find(Card);
+
+    expect(errorMessage).toHaveLength(1);
+    expect(errorMessage.html()).toContain('An error occurred while loading visits :(');
+  });
+
+  it('renders a message when visits are loaded but the list is empty', () => {
+    const wrapper = createComponent({ loading: false, error: false, visits: [] });
+    const message = wrapper.find(MutedMessage);
+
+    expect(message).toHaveLength(1);
+    expect(message.html()).toContain('There are no visits matching current filter  :(');
+  });
+
+  it('renders all graphics when visits are properly loaded', () => {
+    const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
+    const graphs = wrapper.find(GraphCard);
+    const expectedGraphsCount = 4;
+
+    expect(graphs).toHaveLength(expectedGraphsCount);
+  });
+
+  it('reloads visits when selected dates change', () => {
+    const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
+    const dateInput = wrapper.find(DateInput).first();
+    const expectedGetShortUrlVisitsCalls = 4;
+
+    dateInput.simulate('change', '2016-01-01T00:00:00+01:00');
+    dateInput.simulate('change', '2016-01-02T00:00:00+01:00');
+    dateInput.simulate('change', '2016-01-03T00:00:00+01:00');
+
+    expect(getShortUrlVisitsMock.callCount).toEqual(expectedGetShortUrlVisitsCalls);
+    expect(wrapper.state('startDate')).toEqual('2016-01-03T00:00:00+01:00');
+  });
+});