Added tests.

Author: AlexGilleran

components/date_picker/DatePicker.js

@@ -115,5 +115,8 @@ const DatePickerDialog = datePickerDialogFactory(InjectDialog, Calendar);
 const DatePicker = factory(InjectInput, DatePickerDialog);
 
 export default themr(DATE_PICKER)(DatePicker);
-export { factory as datePickerFactory };
+export {
+  DatePickerDialog as DatePickerDialog,
+  factory as datePickerFactory
+};
 export { DatePicker };

components/date_picker/DatePickerDialog.js

@@ -47,10 +47,14 @@ const factory = (Dialog, Calendar) => {
       this.updateStateDate(nextProps.value);
     }
 
-    handleCalendarChange = (value, dayClick) => {
+    handleNewDate = (value, dayClick) => {
       const state = {display: 'months', date: value};
       if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
-        state.date = this.props.maxDate || this.props.minDate;
+        if (this.props.maxDate && this.props.minDate) {
+          state.date = time.closestDate(value, this.props.maxDate, this.props.minDate);
+        } else {
+          state.date = this.props.maxDate || this.props.minDate;
+        }
       }
       this.setState(state);
       if (dayClick && this.props.autoOk && this.props.onSelect) {
@@ -68,7 +72,7 @@ const factory = (Dialog, Calendar) => {
 
     updateStateDate = (date) => {
       if (Object.prototype.toString.call(date) === '[object Date]') {
-        this.handleCalendarChange(date, false);
+        this.handleNewDate(date, false);
       }
     };
 
@@ -106,7 +110,7 @@ const factory = (Dialog, Calendar) => {
               display={this.state.display}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
-              onChange={this.handleCalendarChange}
+              onChange={this.handleNewDate}
               selectedDate={this.state.date}
               theme={this.props.theme} />
           </div>

components/date_picker/__test__/index.spec.js

@@ -0,0 +1,94 @@
+import expect from 'expect';
+import React from 'react';
+import theme from '../theme.scss';
+import { DatePickerDialog } from '../DatePicker';
+import utils from '../../utils/testing';
+
+describe('DatePickerDialog', function () {
+  describe('#on mount', function () {
+    it('passes value through to calendar if no maxDate/minDate specified', function () {
+      const value = new Date(2016, 1, 1);
+
+      const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value});
+
+      expect(getDatePassedToCalendar(wrapper)).toBe(value);
+    });
+
+    describe('when minDate but not maxDate specified', function () {
+      const minDate = new Date(2016, 1, 2);
+
+      it('passes through a value after minDate', function () {
+        const value = new Date(2016, 1, 3);
+
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate});
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value before minDate to minDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme, value: new Date(2016, 1, 1), minDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+    });
+
+    describe('when maxDate but not minDate specified', function () {
+      const maxDate = new Date(2016, 1, 2);
+
+      it('passes through a value before maxDate', function () {
+        const value = new Date(2016, 1, 1);
+
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, maxDate});
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value after maxDate to maxDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme, value: new Date(2016, 1, 3), maxDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+    });
+
+    describe('if both minDate and maxDate are set', function () {
+      const minDate = new Date(2016, 1, 2);
+      const maxDate = new Date(2016, 1, 4);
+
+      it('sanitises value to minDate if value is before minDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme,
+          value: new Date(2016, 1, 1),
+          minDate,
+          maxDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+
+      it('sanitises value to maxDate if value is after maxDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme,
+          value: new Date(2016, 1, 5),
+          minDate,
+          maxDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+
+      it('doesn\'t sanitise when value is between maxDate/minDate', function () {
+        const value = new Date(2016, 1, 3);
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate, maxDate});
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+    });
+
+    function getDatePassedToCalendar(wrapper) {
+      return wrapper.props.children[1].props.children.props.selectedDate;
+    }
+  });
+});

components/utils/time.js

@@ -177,6 +177,15 @@ const time = {
     return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
   },
 
+  closestDate (to, date1, date2) {
+    const toTime = to.getTime();
+
+    const diff1 = Math.abs(toTime - date1.getTime());
+    const diff2 = Math.abs(toTime - date2.getTime());
+
+    return diff1 < diff2 ? date1 : date2;
+  },
+
   formatDate (date) {
     return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
   }