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

package/HiCell/CellDate.test.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import CellDate from './CellDate';
+describe('<CellDate />', function () {
+  var shallow;
+  before(function () {
+    shallow = createShallow({
+      dive: true,
+      untilSelector: CellDate,
+      context: {
+        table: {
+          footer: true
+        }
+      }
+    });
+  });
+  it('should render a date for all views', function () {
+    // L - en - with time
+    var wrapper = shallow(React.createElement(CellDate, {
+      type: 'date',
+      date: '2017-01-27 10:35:59',
+      locale: 'en-EN',
+      view: 'l',
+      displayTime: true
+    }));
+    assert.strictEqual(wrapper.find('div').at(0).text(), 'Friday 27 January 2017 10:35:59', 'Should display large date with time in english'); // L - en - without time
+
+    wrapper.setProps({
+      displayTime: false
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), 'Friday 27 January 2017', 'Should display large date without time in english'); // L - fr - with time
+
+    wrapper.setProps({
+      locale: 'fr',
+      displayTime: true
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), 'vendredi 27 janvier 2017 10:35:59', 'Should display large date with time in french'); // L - fr - without time
+
+    wrapper.setProps({
+      locale: 'fr',
+      displayTime: false
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), 'vendredi 27 janvier 2017', 'Should display large date without time in english'); // M - en - with time
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'en',
+      displayTime: true
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/2017 10:35:59', 'Should display medium date with time and default format'); // M - en - with time - custom format
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'en',
+      displayTime: true,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-2017 10:35:59', 'Should display medium date with time and custom format'); // M - en - without time
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'en',
+      displayTime: false,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/2017', 'Should display medium date without time and default format'); // M - en - without time - custom format
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'en',
+      displayTime: false,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-2017', 'Should display medium date without time and custom format'); // M - fr - with time
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'fr',
+      displayTime: true,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/2017 10:35:59', 'Should display medium date with time and default format'); // M - fr - with time - custom format
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'fr',
+      displayTime: true,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-2017 10:35:59', 'Should display medium date with time and custom format'); // M - fr - without time
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'fr',
+      displayTime: false,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/2017', 'Should display medium date without time and default format'); // M - fr - with time - custom format
+
+    wrapper.setProps({
+      view: 'm',
+      locale: 'fr',
+      displayTime: false,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-2017', 'Should display medium date without time and custom format'); // S - en - with time
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'en',
+      displayTime: true,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/17 10:35:59', 'Should display medium date with time and default format'); // S - en - with time - custom format
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'en',
+      displayTime: true,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-17 10:35:59', 'Should display medium date with time and custom format'); // S - en - without time
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'en',
+      displayTime: false,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/17', 'Should display medium date without time and default format'); // S - en - without time - custom format
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'en',
+      displayTime: false,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-17', 'Should display medium date without time and custom format'); // S - fr - with time
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'fr',
+      displayTime: true,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/17 10:35:59', 'Should display medium date with time and default format'); // S - fr - with time - custom format
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'fr',
+      displayTime: true,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-17 10:35:59', 'Should display medium date with time and custom format'); // S - fr - without time
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'fr',
+      displayTime: false,
+      formatShort: undefined
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '27/01/17', 'Should display medium date without time and default format'); // S - fr - with time - custom format
+
+    wrapper.setProps({
+      view: 's',
+      locale: 'fr',
+      displayTime: false,
+      formatShort: 'MM-DD-YYYY'
+    });
+    assert.strictEqual(wrapper.find('div').at(0).text(), '01-27-17', 'Should display medium date without time and custom format');
+  });
+});

package/HiCell/CellIcon.js

@@ -1,33 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
-var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
-
-var styles = {
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
+export var styles = {
   icon: {
     float: 'left'
   },
@@ -51,19 +32,18 @@ var styles = {
  * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
  */
 
-exports.styles = styles;
-
 var CellIcon =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(CellIcon, _React$PureComponent);
+  _inherits(CellIcon, _React$PureComponent);
 
   function CellIcon() {
-    (0, _classCallCheck2.default)(this, CellIcon);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellIcon).apply(this, arguments));
+    _classCallCheck(this, CellIcon);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(CellIcon).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(CellIcon, [{
+  _createClass(CellIcon, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -77,10 +57,10 @@ function (_React$PureComponent) {
           view = _this$props.view;
 
       if (onClick) {
-        return _react.default.createElement("div", {
+        return React.createElement("div", {
           className: align === 'right' ? classes.flexContent : classes.wrapper,
           title: label
-        }, _react.default.createElement(_HiIconButton.default, {
+        }, React.createElement(HiIconButton, {
           color: 'inherit',
           style: {
             color: color,
@@ -89,19 +69,19 @@ function (_React$PureComponent) {
             maxWidth: 31
           },
           onClick: onClick
-        }, _react.default.createElement(_HiIcon.default, {
+        }, React.createElement(HiIcon, {
           className: classes.icon,
           icon: icon,
           color: color
-        }), view !== 's' && label && _react.default.createElement("span", {
+        }), view !== 's' && label && React.createElement("span", {
           className: classes.label
         }, label)));
       }
 
-      return _react.default.createElement("div", {
+      return React.createElement("div", {
         className: align === 'right' ? classes.flexContent : classes.wrapper,
         title: label
-      }, _react.default.createElement(_HiIcon.default, {
+      }, React.createElement(HiIcon, {
         color: 'inherit',
         style: {
           color: color,
@@ -109,21 +89,20 @@ function (_React$PureComponent) {
         },
         className: classes.icon,
         icon: icon
-      }), view !== 's' && label && _react.default.createElement("span", {
+      }), view !== 's' && label && React.createElement("span", {
         className: classes.label
       }, label));
     }
   }]);
+
   return CellIcon;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(CellIcon, "defaultProps", {
+_defineProperty(CellIcon, "defaultProps", {
   view: 'm',
   color: 'neutral'
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   name: 'HmuiCellIcon'
-})(CellIcon);
-
-exports.default = _default;
+})(CellIcon);

package/HiCell/CellIcon.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { assert } from 'chai';
+import ArrowUp from 'mdi-material-ui/ArrowUp';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import CellIcon from './CellIcon';
+import HiIcon from '../HiIcon';
+describe('<CellIcon/>', function () {
+  var shallow;
+  var mount;
+  var classes;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    mount = createMount();
+    classes = getClasses(React.createElement(CellIcon, {
+      type: 'icon',
+      icon: 'arrow_up',
+      label: 'Test'
+    }));
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+  it('should render a td with an icon inside and label (view L)', function () {
+    var wrapper = shallow(React.createElement(CellIcon, {
+      type: 'icon',
+      icon: 'arrow_up',
+      label: 'Test',
+      view: 'l'
+    }));
+    assert.strictEqual(wrapper.find(HiIcon).length, 1, 'Should render HiIcon');
+    assert.strictEqual(wrapper.find(HiIcon).props().icon, 'arrow_up', 'Should pass icon name');
+    assert.strictEqual(wrapper.find(HiIcon).props().className, classes.icon, 'Should pass icon class');
+  });
+  it('should render a td with an icon inside only (view S)', function () {
+    var wrapper = shallow(React.createElement(CellIcon, {
+      type: 'icon',
+      icon: 'arrow_up',
+      label: 'Test',
+      view: 's'
+    }));
+    assert.strictEqual(wrapper.find(HiIcon).length, 1, 'Should render HiIcon');
+    assert.strictEqual(wrapper.find(HiIcon).props().icon, 'arrow_up', 'Should pass icon name');
+    assert.strictEqual(wrapper.find(HiIcon).props().className, classes.icon, 'Should pass icon class');
+  });
+  it('should render a CellIcon with an icon inside only (view S)', function () {
+    var wrapper = mount(React.createElement(CellIcon, {
+      sticky: true,
+      type: 'icon',
+      icon: 'mdi_arrow_up',
+      label: undefined,
+      view: 's'
+    }));
+    assert.strictEqual(wrapper.find(ArrowUp).length, 1, 'Should render the right icon component');
+  });
+});

package/HiCell/CellImage.js

@@ -1,29 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var styles = function styles() {
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+export var styles = function styles() {
   return {
     img: {
       height: 'auto',
@@ -42,8 +25,6 @@ var styles = function styles() {
   };
 };
 
-exports.styles = styles;
-
 var handleError = function handleError(fallbackImage) {
   return function (e) {
     if (fallbackImage) {
@@ -63,14 +44,15 @@ var handleError = function handleError(fallbackImage) {
 var CellImage =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(CellImage, _React$PureComponent);
+  _inherits(CellImage, _React$PureComponent);
 
   function CellImage() {
-    (0, _classCallCheck2.default)(this, CellImage);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellImage).apply(this, arguments));
+    _classCallCheck(this, CellImage);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(CellImage).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(CellImage, [{
+  _createClass(CellImage, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -83,33 +65,32 @@ function (_React$PureComponent) {
           fallbackImage = _this$props.fallbackImage,
           title = _this$props.title;
       if (!path || path === '') return '';
-      return _react.default.createElement("div", {
+      return React.createElement("div", {
         className: classes.wrapper,
         title: label
-      }, _react.default.createElement("img", {
+      }, React.createElement("img", {
         src: path,
         alt: label,
         title: title,
         className: classes.img,
         width: size,
         onError: handleError(fallbackImage)
-      }), shortLabel && view === 'm' && _react.default.createElement("span", {
+      }), shortLabel && view === 'm' && React.createElement("span", {
         className: classes.label
-      }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && _react.default.createElement("span", {
+      }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && React.createElement("span", {
         className: classes.label
       }, label));
     }
   }]);
+
   return CellImage;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(CellImage, "defaultProps", {
+_defineProperty(CellImage, "defaultProps", {
   size: 24,
   view: 's'
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   name: 'HmuiCellImage'
-})(CellImage);
-
-exports.default = _default;
+})(CellImage);

package/HiCell/CellImage.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, getClasses } from '../test-utils';
+import CellImage from './CellImage';
+describe('<CellImage/>', function () {
+  var shallow;
+  var classes;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    classes = getClasses(React.createElement(CellImage, {
+      type: 'image',
+      label: 'visa',
+      path: '/static/hmus/images/logo_visa_75wx45h.gif'
+    }));
+  });
+  it('should render a td with an img inside and label if value', function () {
+    var wrapper = shallow(React.createElement(CellImage, {
+      type: 'image',
+      label: 'test value',
+      path: '/static/hmus/images/logo_visa_75wx45h.gif'
+    }));
+    assert.strictEqual(wrapper.find('img').length, 1, 'should have 1 image');
+    assert.strictEqual(wrapper.find('img').hasClass(classes.img), true, 'should have the img class');
+    wrapper.setProps({
+      view: 'l'
+    });
+    wrapper.update();
+    assert.strictEqual(wrapper.find('div').length, 1, 'should have 1 div');
+    assert.strictEqual(wrapper.find('div').text(), 'test value', 'should have correct label');
+  });
+  it('should render a td with an img inside and label if value', function () {
+    var wrapper = shallow(React.createElement(CellImage, {
+      sticky: true,
+      type: 'image',
+      label: 'test value',
+      path: '/static/hmus/images/logo_visa_75wx45h.gif'
+    }));
+    assert.strictEqual(wrapper.find('img').length, 1, 'should have 1 image');
+    assert.strictEqual(wrapper.find('img').hasClass(classes.img), true, 'should have the img class');
+    wrapper.setProps({
+      view: 'l'
+    });
+    wrapper.update();
+    assert.strictEqual(wrapper.find('span').length, 1, 'should have 1 label');
+    assert.strictEqual(wrapper.find('span').text(), 'test value', 'should have correct label');
+  });
+});

package/HiCell/CellNumeric.js

@@ -1,31 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _helpers = require("../utils/helpers");
-
-var styles = function styles() {
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { formatNumber, formatCurrencyAmount } from '../utils/helpers';
+export var styles = function styles() {
   return {
     wrapper: {
       textAlign: 'right'
@@ -36,20 +18,18 @@ var styles = function styles() {
  * Cette cellule permet d'afficher un volume ou un montant avec devise
  */
 
-
-exports.styles = styles;
-
 var CellNumeric =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(CellNumeric, _React$PureComponent);
+  _inherits(CellNumeric, _React$PureComponent);
 
   function CellNumeric() {
-    (0, _classCallCheck2.default)(this, CellNumeric);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellNumeric).apply(this, arguments));
+    _classCallCheck(this, CellNumeric);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(CellNumeric).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(CellNumeric, [{
+  _createClass(CellNumeric, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -63,29 +43,28 @@ function (_React$PureComponent) {
       var title = '';
 
       if (currency) {
-        displayedValue = (0, _helpers.formatCurrencyAmount)(value, view, locale, currency, precision);
-        title = (0, _helpers.formatCurrencyAmount)(value, 'l', locale, currency);
+        displayedValue = formatCurrencyAmount(value, view, locale, currency, precision);
+        title = formatCurrencyAmount(value, 'l', locale, currency);
       } else {
-        displayedValue = (0, _helpers.formatNumber)(value, view, locale, precision);
-        title = (0, _helpers.formatNumber)(value, 'l', locale, precision);
+        displayedValue = formatNumber(value, view, locale, precision);
+        title = formatNumber(value, 'l', locale, precision);
       }
 
-      return _react.default.createElement("div", {
+      return React.createElement("div", {
         className: classes.wrapper,
         title: title
       }, displayedValue);
     }
   }]);
+
   return CellNumeric;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(CellNumeric, "defaultProps", {
+_defineProperty(CellNumeric, "defaultProps", {
   view: 'm',
   locale: 'en'
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   name: 'HmuiCellNumeric'
-})(CellNumeric);
-
-exports.default = _default;
+})(CellNumeric);