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

package/HiDatePicker/HiDatePicker.test.js

@@ -0,0 +1,370 @@
+/* eslint-disable */
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiDatePicker from './HiDatePicker';
+import HiInput from '../HiForm/HiInput';
+import Paper from '@material-ui/core/Paper';
+import { Overlay, TimePickerOverlay, MonthPickerOverlay, YearPickerOverlay } from './Overlays';
+import Caption from './Caption';
+describe('<HiDatePicker />', function () {
+  var shallow;
+  var mount;
+  var classes;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    mount = createMount();
+    classes = getClasses(React.createElement(HiDatePicker, {
+      id: "single-day",
+      onChange: function onChange() {}
+    }));
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+  describe('shallow', function () {
+    it('renders a div containing a DayPickerInput', function () {
+      var wrapper = shallow(React.createElement(HiDatePicker, {
+        onChange: function onChange() {}
+      }));
+      assert.strictEqual(wrapper.name(), 'div', 'should render a div');
+      assert.strictEqual(wrapper.find(DayPickerInput).length, 1, 'should render a DayPickerInput');
+    });
+    it('should handle input day picker interface', function () {
+      var date = new Date();
+      var newDate = new Date('20-06-1998');
+      var handlerChange = spy();
+      var handlerReset = spy();
+      var wrapper = shallow(React.createElement(HiDatePicker, {
+        value: date,
+        onChange: handlerChange,
+        onReset: handlerReset,
+        showOverlay: true
+      }));
+      assert.strictEqual(wrapper.state().openedPanel, 'calendar', 'should have initial openedPanel');
+      assert.strictEqual(wrapper.state().currentMonth, date, 'should have initial currentMonth');
+      var dayPickerInput = wrapper.find(DayPickerInput);
+      dayPickerInput.props().onDayChange(newDate, {});
+      assert.strictEqual(handlerChange.calledWith(newDate), true, 'should call onChange callback');
+      dayPickerInput.props().inputProps.onReset();
+      assert.strictEqual(handlerReset.calledOnce, true, 'should call onReset callback');
+    });
+    it('should disable past days', function () {
+      var handlerChange = spy();
+      var date = new Date(2018, 2, 18);
+      var wrapper = shallow(React.createElement(HiDatePicker, {
+        value: date,
+        onChange: handlerChange,
+        disablePastDays: true,
+        showOverlay: true
+      }));
+    });
+    it('should disable future days', function () {
+      var handlerChange = spy();
+      var date = new Date(2018, 2, 18);
+      var wrapper = shallow(React.createElement(HiDatePicker, {
+        value: date,
+        onChange: handlerChange,
+        disableFutureDays: true,
+        showOverlay: true
+      }));
+    });
+    it('should enable time', function () {
+      var handlerChange = spy();
+      var date = new Date(2018, 2, 18);
+      var wrapper = shallow(React.createElement(HiDatePicker, {
+        value: date,
+        onChange: handlerChange,
+        enableTime: true,
+        showOverlay: true
+      }));
+    });
+    it('should hide on escape', function () {
+      var handlerChange = spy();
+      var wrapper = mount(React.createElement(HiDatePicker, {
+        onChange: handlerChange,
+        id: "test-escape"
+      }));
+      assert.strictEqual(wrapper.find(Overlay).length, 0);
+      wrapper.find(HiInput).simulate('click');
+      assert.strictEqual(wrapper.find(Overlay).length, 1);
+      wrapper.find(HiInput).simulate('keydown', {
+        keyCode: 27,
+        key: 'Escape'
+      });
+      assert.strictEqual(wrapper.find(Overlay).length, 0);
+    });
+  });
+  /* TODO - Mount Tests failed since 06/05/2018
+  describe('mount', () => {
+      it('should mount with current date', () => {
+          const handleChange = spy();
+          const wrapper = mount(
+              <HiDatePicker onChange={handleChange} showOverlay id="single-day" />,
+          );
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper.find('input').simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.type(), HiDatePicker);
+      });
+       it('should mount with fixed date without time', () => {
+          const handleChange = spy();
+          const date = new Date(2018, 0, 1);
+          const wrapper = mount(
+              <HiDatePicker onChange={handleChange} showOverlay id="single-day" value={date} />,
+          );
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper');
+          wrapper.find('input').simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1, 'should have a Paper');
+          assert.strictEqual(wrapper.type(), HiDatePicker, 'should be a HiDatePicker');
+          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.selected').text(), '1', 'should have selected 1');
+           // 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][0].toLocaleDateString('fr-FR'),
+              '2018-1-2',
+              'should have new date value',
+          );
+           // Click on selected day
+          wrapper.find('div.selected').simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              2,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][1], undefined, 'should have undefined 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').simulate('blur');
+          assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper anymore');
+      });
+       it('should mount with time', () => {
+          const handleChange = spy();
+          const date = new Date(2018, 0, 1);
+          const wrapper = mount(
+              <HiDatePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-day"
+                  enableTime
+                  value={date}
+              />,
+          );
+           assert.strictEqual(
+              handleChange.callCount,
+              0,
+              'should not not have been called handleChange',
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper.find('input').simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDatePicker);
+          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][0].getHours(), 0, 'should set hours to 0');
+          assert.strictEqual(handleChange.args[0][0].getMinutes(), 0, 'should set minutes to 0');
+      });
+       it('should mount with time and default value', () => {
+          const handleChange = spy();
+          const date = new Date(2018, 0, 1, 6, 44);
+          const wrapper = mount(
+              <HiDatePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-day"
+                  enableTime
+                  value={date}
+              />,
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper.find('input').simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDatePicker);
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+          assert.strictEqual(wrapper.find('button').length, 4);
+           // Click on second day
+          wrapper
+              .find(`div.${classes.day}`)
+              .at(2)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              1,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][0].getHours(), 6, 'should keep hours');
+          assert.strictEqual(handleChange.args[0][0].getMinutes(), 44, 'should keep minutes');
+      });
+       it('should mount with time and without default value', () => {
+          const handleChange = spy();
+          const wrapper = mount(
+              <HiDatePicker onChange={handleChange} showOverlay id="single-day" enableTime />,
+          );
+          assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+           wrapper.find('input').simulate('focus');
+           const day = wrapper.find(`div.${classes.day}`).at(8);
+          // Click on day
+          day.simulate('click');
+           assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+           assert.strictEqual(
+              handleChange.callCount,
+              1,
+              'should have been called once handleChange',
+          );
+          assert.strictEqual(handleChange.args[0][0].getHours(), 0, 'should set hours to 0');
+          assert.strictEqual(handleChange.args[0][0].getMinutes(), 0, 'should set minutes to 0');
+           // Clik on hour
+          wrapper
+              .find(TimePickerOverlay)
+              .find('ul')
+              .find('li')
+              .at(5)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              2,
+              'should have been called twice handleChange',
+          );
+          assert.strictEqual(handleChange.args[1][0].getHours(), 5, 'should set hours to 5');
+           // Clik on minute
+          wrapper
+              .find(TimePickerOverlay)
+              .find('ul')
+              .at(1)
+              .find('li')
+              .at(37)
+              .simulate('click');
+          assert.strictEqual(
+              handleChange.callCount,
+              3,
+              'should have been called twice handleChange',
+          );
+          assert.strictEqual(
+              handleChange.args[2][0].getMinutes(),
+              37,
+              'should set minutes to 37',
+          );
+      });
+       it('should mount with disabled date', () => {
+          const handleChange = spy();
+          const wrapper = mount(
+              <HiDatePicker
+                  onChange={handleChange}
+                  showOverlay
+                  id="single-day"
+                  disablePastDays
+              />,
+          );
+           assert.strictEqual(wrapper.find(Paper).length, 0);
+          wrapper.find('input').simulate('focus');
+          assert.strictEqual(wrapper.find(Paper).length, 1);
+          assert.strictEqual(wrapper.find(Overlay).length, 1);
+          assert.strictEqual(wrapper.type(), HiDatePicker);
+           // 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',
+          );
+      });
+  });
+  */
+});

package/HiDatePicker/HiDatePickerMobile.js

@@ -1,53 +1,30 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
-
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-
-var _stylesheet = _interopRequireDefault(require("./stylesheet"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import React from 'react';
+import HiFormControl from '../HiForm/HiFormControl';
+import moment from 'moment-timezone';
+import styles from './stylesheet';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import HiInput from '../HiForm/HiInput';
 
 var HiDatePickerMobile =
 /*#__PURE__*/
 function (_React$Component) {
-  (0, _inherits2.default)(HiDatePickerMobile, _React$Component);
+  _inherits(HiDatePickerMobile, _React$Component);
 
   function HiDatePickerMobile() {
-    (0, _classCallCheck2.default)(this, HiDatePickerMobile);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDatePickerMobile).apply(this, arguments));
+    _classCallCheck(this, HiDatePickerMobile);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HiDatePickerMobile).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(HiDatePickerMobile, [{
+  _createClass(HiDatePickerMobile, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -68,10 +45,12 @@ function (_React$Component) {
           today = _this$props.today,
           range = _this$props.range,
           format = _this$props.format;
-      var addtionalProps = (0, _objectSpread2.default)({}, this.props.disabled && {
+
+      var addtionalProps = _objectSpread({}, this.props.disabled && {
         disabled: "disabled"
       });
-      return _react.default.createElement(_HiFormControl.default, {
+
+      return React.createElement(HiFormControl, {
         id: id,
         label: label,
         required: required,
@@ -80,27 +59,26 @@ function (_React$Component) {
         errorText: errorText,
         helperText: helperText,
         helperIcon: helperIcon
-      }, _react.default.createElement(_HiInput.default, {
+      }, React.createElement(HiInput, {
         inputId: id,
         name: id,
         type: "text",
         placeholder: this.props.placeholder,
-        value: !value ? '' : (0, _momentTimezone.default)(value).format(format),
+        value: !value ? '' : moment(value).format(format),
         disabled: disabled
-      }), _react.default.createElement("input", (0, _extends2.default)({
-        className: (0, _classnames.default)(classes.root, classes.rootMobile, (0, _defineProperty2.default)({}, classes.mobileRangeRoot, range)),
+      }), React.createElement("input", Object.assign({
+        className: classNames(classes.root, classes.rootMobile, _defineProperty({}, classes.mobileRangeRoot, range)),
         id: id,
         type: enableTime ? "datetime-local" : "date",
-        value: !value ? '' : enableTime ? (0, _momentTimezone.default)(value).format('YYYY-MM-DDTHH:mm') : (0, _momentTimezone.default)(value).format('YYYY-MM-DD'),
+        value: !value ? '' : enableTime ? moment(value).format('YYYY-MM-DDTHH:mm') : moment(value).format('YYYY-MM-DD'),
         onChange: this.props.onChange,
-        min: disablePastDays ? today.format('YYYY-MM-DD') : minimumDate ? (0, _momentTimezone.default)(minimumDate).format('YYYY-MM-DD') : '',
+        min: disablePastDays ? today.format('YYYY-MM-DD') : minimumDate ? moment(minimumDate).format('YYYY-MM-DD') : '',
         max: disableFutureDays ? today.format('YYYY-MM-DD') : ''
       }, addtionalProps)));
     }
   }]);
-  return HiDatePickerMobile;
-}(_react.default.Component);
 
-var _default = (0, _styles.withStyles)(_stylesheet.default)(HiDatePickerMobile);
+  return HiDatePickerMobile;
+}(React.Component);
 
-exports.default = _default;
+export default withStyles(styles)(HiDatePickerMobile);