@hipay/hipay-material-ui 2.3.1-rc2 → 2.3.1-rc4

package/HiDatePicker/HiDateRangePicker.test.js

@@ -0,0 +1,703 @@
+/* eslint-disable */
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import Paper from '@material-ui/core/Paper';
+import MenuItem from '@material-ui/core/MenuItem';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiDateRangePicker from './HiDateRangePicker';
+import HiInput from '../HiForm/HiInput';
+import { Overlay, TimePickerOverlay, MonthPickerOverlay, YearPickerOverlay } from './Overlays';
+import ListPicker from './ListPicker';
+import Caption from './Caption';
+describe('<HiDateRangePicker />', function () {
+  var shallow;
+  var mount;
+  var classes;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    mount = createMount();
+    classes = getClasses(React.createElement(HiDateRangePicker, {
+      id: "single-range",
+      onChange: function onChange() {}
+    }));
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+  describe('shallow', function () {
+    it('renders a div containing 2 DayPickerInput', function () {
+      var wrapper = shallow(React.createElement(HiDateRangePicker, {
+        id: "date-range",
+        onChange: function onChange() {}
+      }));
+      assert.strictEqual(wrapper.dive().name(), 'HiFormControl', 'should render a HiFormControl');
+      assert.strictEqual(wrapper.find(DayPickerInput).length, 2, 'should render a DayPickerInput');
+    });
+    it('should hide on escape', function () {
+      var handlerChange = spy();
+      var wrapper = mount(React.createElement(HiDateRangePicker, {
+        onChange: handlerChange,
+        id: "test-escape"
+      }));
+      assert.strictEqual(wrapper.find(HiInput).length, 2);
+      assert.strictEqual(wrapper.find(Overlay).length, 0);
+      wrapper.find(HiInput).at(0).simulate('click');
+      assert.strictEqual(wrapper.find(Overlay).length, 1);
+      wrapper.find(HiInput).at(0).simulate('keydown', {
+        keyCode: 27,
+        key: 'Escape'
+      });
+      assert.strictEqual(wrapper.find(Overlay).length, 0);
+      wrapper.find(HiInput).at(1).simulate('click');
+      assert.strictEqual(wrapper.find(Overlay).length, 1);
+      wrapper.find(HiInput).at(1).simulate('keydown', {
+        keyCode: 27,
+        key: 'Escape'
+      });
+      assert.strictEqual(wrapper.find(Overlay).length, 0);
+    }); //
+    //     it('should handle 2 input day picker interface', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const newFromDate = new Date(2019, 1, 16);
+    //         const newToDate = new Date(2020, 5, 5);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //
+    //                 showOverlay
+    //             />,
+    //         );
+    //
+    //         const dayPickerInputFrom = wrapper.find(DayPickerInput).first();
+    //         dayPickerInputFrom.props().onDayChange(newFromDate, {});
+    //         assert.strictEqual(
+    //             handlerChange.calledWith('from', newFromDate),
+    //             true,
+    //             'should call from onChange callback',
+    //         );
+    //
+    //         console.log(dayPickerInputFrom.props().inputProps);
+    //         dayPickerInputFrom.props().inputProps.onReset();
+    //         setTimeout(() => {
+    //             assert.strictEqual(
+    //                 handlerReset.calledWith('from'),
+    //                 true,
+    //                 'should call from onReset callback',
+    //             );
+    //         }, 0);
+    //     });
+    //
+    //     it('should handle 2 input day picker interface', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const newFromDate = new Date(2019, 1, 16);
+    //         const newToDate = new Date(2020, 5, 5);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //             />,
+    //         );
+    //
+    //         const dayPickerInputTo = wrapper.find(DayPickerInput).at(1);
+    //         console.log(dayPickerInputTo).props();
+    //         dayPickerInputTo.props().onDayChange(newToDate, {});
+    //         assert.strictEqual(
+    //             handlerChange.calledWith('to', newToDate),
+    //             true,
+    //             'should call to onChange callback',
+    //         );
+    //
+    //         dayPickerInputTo.props().inputProps.onReset();
+    //         setTimeout(() => {
+    //             assert.strictEqual(
+    //                 handlerReset.calledWith('to'),
+    //                 true,
+    //                 'should call to onReset callback',
+    //             );
+    //         }, 0);
+    //     });
+    //
+    //     it('should disable past days', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 disablePastDays
+    //             />,
+    //         );
+    //     });
+    //
+    //     it('should disable future days', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 disableFutureDays
+    //             />,
+    //         );
+    //     });
+    //
+    //     it('should enable time', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 enableTime
+    //             />,
+    //         );
+    //     });
+    //
+    //     it('should no values & disabled past & future', () => {
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 enableTime
+    //                 disablePastDays
+    //                 disableFutureDays
+    //             />,
+    //         );
+    //     });
+  });
+  /* TODO - Mount Tests failed since 06/05/2018
+  describe('mount', () => {
+      it('should mount with current date', () => {
+          const handleChange = spy();
+          const wrapper = mount(<HiDateRangePicker onChange={handleChange} id="single-range" />);
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+      });
+       it('should mount with current date and time', () => {
+          const handleChange = spy();
+          const wrapper = mount(
+              <HiDateRangePicker onChange={handleChange} id="single-range" enableTime />,
+          );
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find('button').length, 4);
+           // Click on day
+          wrapper
+              .find(Overlay)
+              .find(`div.${classes.day}`)
+              .at(10)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              1,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][1].getHours(), 0, 'should set hours to 0');
+          assert.strictEqual(handleChange.args[0][1].getMinutes(), 0, 'should set minutes to 0');
+           // Click on time
+          wrapper
+              .find('button')
+              .at(2)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 0);
+           // Cick on hour 5
+          wrapper
+              .find(TimePickerOverlay)
+              .find(ListPicker)
+              .at(0)
+              .find(MenuItem)
+              .at(5)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              2,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[1][1].getHours(), 5, 'should set hours to 5');
+           // Cick on minute 10
+          wrapper
+              .find(TimePickerOverlay)
+              .find(ListPicker)
+              .at(1)
+              .find(MenuItem)
+              .at(10)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              3,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(
+              handleChange.args[2][1].getMinutes(),
+              10,
+              'should set minutes to 10',
+          );
+           // Click on calendar
+          wrapper
+              .find('button')
+              .at(0)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+           wrapper
+              .find('input')
+              .at(0)
+              .simulate('blur');
+          wrapper
+              .find('input')
+              .at(1)
+              .simulate('blur');
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper
+              .find('input')
+              .at(1)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find('button').length, 4);
+           // Click on time
+          wrapper
+              .find('button')
+              .at(2)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 0);
+           // Click on calendar
+          wrapper
+              .find('button')
+              .at(0)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+           // Click on day
+          wrapper
+              .find(Overlay)
+              .find(`div.${classes.day}`)
+              .at(10)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              4,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[3][1].getHours(), 0, 'should set hours to 0');
+          assert.strictEqual(handleChange.args[3][1].getMinutes(), 0, 'should set minutes to 0');
+      });
+       it('should mount with fixed date without time', () => {
+          const handleChange = spy();
+          const from = new Date(2018, 0, 1);
+          const to = new Date(2018, 0, 5);
+          const wrapper = mount(
+              <HiDateRangePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-range"
+                  from={from}
+                  to={to}
+              />,
+          );
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper');
+           // FROM date
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1, 'should have a Paper');
+          assert.strictEqual(wrapper.type(), HiDateRangePicker, 'should be a HiDateRangePicker');
+          assert.strictEqual(
+              wrapper.find('button').length,
+              3,
+              'should have 3 buttons (prev, next, today)',
+          );
+          assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange too',
+          );
+           // Check default selected day
+          assert.strictEqual(wrapper.find('div.start').text(), '1', 'should have selected day 1');
+          assert.strictEqual(wrapper.find('div.end').text(), '5', 'should have selected day 5');
+           // Click on second day
+          wrapper
+              .find(`div.${classes.day}`)
+              .at(1)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              1,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][0], 'from', 'should change from date');
+          assert.strictEqual(
+              handleChange.args[0][1].toLocaleDateString('fr-FR'),
+              '2018-1-2',
+              'should have new date value',
+          );
+           // Click on month
+          wrapper
+              .find(Caption)
+              .find('span')
+              .at(0)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          wrapper
+              .find(MonthPickerOverlay)
+              .find('span')
+              .at(8)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 2);
+           // Click on year
+          wrapper
+              .find(Caption)
+              .find('span')
+              .at(1)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(YearPickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          wrapper
+              .find(YearPickerOverlay)
+              .find('span')
+              .at(8)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(YearPickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 2);
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('blur');
+           // TO date
+          wrapper
+              .find('input')
+              .at(1)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1, 'should have a Paper');
+          assert.strictEqual(wrapper.type(), HiDateRangePicker, 'should be a HiDateRangePicker');
+          assert.strictEqual(
+              wrapper.find('button').length,
+              3,
+              'should have 3 buttons (prev, next, today)',
+          );
+           // Check default selected day
+          assert.strictEqual(wrapper.find('div.start').text(), '1', 'should have selected day 1');
+          assert.strictEqual(wrapper.find('div.end').text(), '5', 'should have selected day 5');
+           // Click on sixth day
+          wrapper
+              .find(`div.${classes.day}`)
+              .at(5)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              2,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[1][0], 'to', 'should change from date');
+          assert.strictEqual(
+              handleChange.args[1][1].toLocaleDateString('fr-FR'),
+              '2018-1-6',
+              'should have new date value',
+          );
+           // Click on month
+          wrapper
+              .find(Caption)
+              .find('span')
+              .at(0)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 0);
+          wrapper
+              .find(MonthPickerOverlay)
+              .find('span')
+              .at(8)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+           // Click on year
+          wrapper
+              .find(Caption)
+              .find('span')
+              .at(1)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(YearPickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 0);
+          wrapper
+              .find(YearPickerOverlay)
+              .find('span')
+              .at(8)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(YearPickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          //--------------
+           wrapper
+              .find('input')
+              .at(1)
+              .simulate('blur');
+          assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper anymore');
+      });
+       it('should mount with time', () => {
+          const handleChange = spy();
+          const from = new Date(2018, 0, 1);
+          const to = new Date(2018, 0, 5);
+          const wrapper = mount(
+              <HiDateRangePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-range"
+                  from={from}
+                  to={to}
+                  enableTime
+              />,
+          );
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find('button').length, 4);
+          // Click on time
+          wrapper
+              .find('button')
+              .at(2)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 0);
+           // Click on calendar
+          wrapper
+              .find('button')
+              .at(0)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+           // Click on second day
+          wrapper
+              .find(Overlay)
+              .find(`div.${classes.day}`)
+              .at(1)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              1,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][1].getHours(), 0, 'should set hours to 0');
+          assert.strictEqual(handleChange.args[0][1].getMinutes(), 0, 'should set minutes to 0');
+           wrapper
+              .find('input')
+              .at(0)
+              .simulate('blur');
+           wrapper
+              .find('input')
+              .at(1)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find('button').length, 4);
+          // Click on time
+          wrapper
+              .find('button')
+              .at(2)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 0);
+           // Click on calendar
+          wrapper
+              .find('button')
+              .at(0)
+              .simulate('click');
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+           // Click on second day
+          wrapper
+              .find(Overlay)
+              .find(`div.${classes.day}`)
+              .at(1)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              2,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[1][1].getHours(), 0, 'should set hours to 0');
+          assert.strictEqual(handleChange.args[1][1].getMinutes(), 0, 'should set minutes to 0');
+      });
+       it('should mount with time and default value', () => {
+          const handleChange = spy();
+          const from = new Date(2018, 0, 1, 6, 44);
+          const to = new Date(2018, 0, 5, 8, 55);
+          const wrapper = mount(
+              <HiDateRangePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-range"
+                  from={from}
+                  to={to}
+                  enableTime
+              />,
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find('button').length, 4);
+           // Click on second day
+          wrapper
+              .find(`div.${classes.day}`)
+              .at(1)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              1,
+              'should have been called twice handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][1].getHours(), 6, 'should keep hours');
+          assert.strictEqual(handleChange.args[0][1].getMinutes(), 44, 'should keep minutes');
+      });
+       // TODO ligne 132 ???
+       it('should mount with disabled date', () => {
+          const handleChange = spy();
+          const wrapper = mount(
+              <HiDateRangePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-range"
+                  disablePastDays
+              />,
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper
+              .find('input')
+              .at(0)
+              .simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDateRangePicker);
+           // Click to past month
+          wrapper
+              .find('button')
+              .at(0)
+              .simulate('click');
+           // Click to disabled day
+          wrapper
+              .find(Overlay)
+              .find('div.disabled')
+              .at(5)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not have been called handleChange',
+          );
+      });
+       it('should open on enabled', () => {
+          const handleChange = spy();
+          const wrapper = mount(
+              <HiDateRangePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-range"
+                  disabled
+              />,
+          );
+          wrapper.setProps({ disabled: false });
+      });
+  });
+  */
+});