Fixed tests and typos

src/short-urls/SearchBar.js

@@ -38,7 +38,7 @@ const SearchBar = (colorGenerator) => {
           <DateRangeRow
             startDate={dateOrUndefined(shortUrlsListParams.startDate)}
             endDate={dateOrUndefined(shortUrlsListParams.endDate)}
-            onStartDateChane={setDate('startDate')}
+            onStartDateChange={setDate('startDate')}
             onEndDateChange={setDate('endDate')}
           />
         </div>

src/utils/DateRangeRow.js

@@ -7,11 +7,11 @@ const dateType = PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]);
 const propTypes = {
   startDate: dateType,
   endDate: dateType,
-  onStartDateChane: PropTypes.func.isRequired,
+  onStartDateChange: PropTypes.func.isRequired,
   onEndDateChange: PropTypes.func.isRequired,
 };
 
-const DateRangeRow = ({ startDate, endDate, onStartDateChane, onEndDateChange }) => (
+const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }) => (
   <div className="row">
     <div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
       <DateInput
@@ -19,7 +19,7 @@ const DateRangeRow = ({ startDate, endDate, onStartDateChane, onEndDateChange })
         placeholderText="Since"
         isClearable
         maxDate={endDate}
-        onChange={onStartDateChane}
+        onChange={onStartDateChange}
       />
     </div>
     <div className="col-xl-3 col-lg-4 col-md-6">

src/visits/ShortUrlVisits.js

@@ -138,7 +138,7 @@ const ShortUrlVisits = (
           <DateRangeRow
             startDate={this.state.startDate}
             endDate={this.state.endDate}
-            onStartDateChane={setDate('startDate')}
+            onStartDateChange={setDate('startDate')}
             onEndDateChange={setDate('endDate')}
           />
         </section>

test/short-urls/SearchBar.test.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import each from 'jest-each';
 import searchBarCreator from '../../src/short-urls/SearchBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
+import DateRangeRow from '../../src/utils/DateRangeRow';
 
 describe('<SearchBar />', () => {
   let wrapper;
@@ -20,6 +22,12 @@ describe('<SearchBar />', () => {
     expect(wrapper.find(SearchField)).toHaveLength(1);
   });
 
+  it('renders a DateRangeRow', () => {
+    wrapper = shallow(<SearchBar shortUrlsListParams={{}} />);
+
+    expect(wrapper.find(DateRangeRow)).toHaveLength(1);
+  });
+
   it('renders no tags when the list of tags is empty', () => {
     wrapper = shallow(<SearchBar shortUrlsListParams={{}} />);
 
@@ -53,4 +61,13 @@ describe('<SearchBar />', () => {
     tag.simulate('close');
     expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
+
+  each([ 'startDateChange', 'endDateChange' ]).it('updates short URLs list when date range changes', (event) => {
+    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
+    const dateRange = wrapper.find(DateRangeRow);
+
+    expect(listShortUrlsMock).not.toHaveBeenCalled();
+    dateRange.simulate(event);
+    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
+  });
 });

test/visits/ShortUrlVisits.test.js

@@ -5,8 +5,8 @@ import { Card } from 'reactstrap';
 import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
 import MutedMessage from '../../src/utils/MuttedMessage';
 import GraphCard from '../../src/visits/GraphCard';
-import DateInput from '../../src/utils/DateInput';
 import SortableBarGraph from '../../src/visits/SortableBarGraph';
+import DateRangeRow from '../../src/utils/DateRangeRow';
 
 describe('<ShortUrlVisits />', () => {
   let wrapper;
@@ -82,14 +82,15 @@ describe('<ShortUrlVisits />', () => {
 
   it('reloads visits when selected dates change', () => {
     const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
-    const dateInput = wrapper.find(DateInput).first();
+    const dateRange = wrapper.find(DateRangeRow);
 
-    dateInput.simulate('change', '2016-01-01T00:00:00+01:00');
+    dateRange.simulate('startDateChange', '2016-01-01T00:00:00+01:00');
-    dateInput.simulate('change', '2016-01-02T00:00:00+01:00');
+    dateRange.simulate('endDateChange', '2016-01-02T00:00:00+01:00');
-    dateInput.simulate('change', '2016-01-03T00:00:00+01:00');
+    dateRange.simulate('endDateChange', '2016-01-03T00:00:00+01:00');
 
     expect(getShortUrlVisitsMock).toHaveBeenCalledTimes(4);
-    expect(wrapper.state('startDate')).toEqual('2016-01-03T00:00:00+01:00');
+    expect(wrapper.state('startDate')).toEqual('2016-01-01T00:00:00+01:00');
+    expect(wrapper.state('endDate')).toEqual('2016-01-03T00:00:00+01:00');
   });
 
   it('holds the map button content generator on cities graph extraHeaderContent', () => {