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

package/HiSelectableList/HiSelectableListItem.js

@@ -1,58 +1,26 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
-
-var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
-
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
-var _HiCheckbox = _interopRequireDefault(require("../HiCheckbox"));
-
-var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
-
-var _HiLoader = _interopRequireDefault(require("../HiLoader"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _helpers = require("../utils/helpers");
-
-var _pure = _interopRequireDefault(require("recompose/pure"));
-
-var _keycode = _interopRequireDefault(require("keycode"));
-
-var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
-var PureListItem = (0, _pure.default)(_ListItem.default);
-
-var styles = function styles(theme) {
+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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import classNames from 'classnames';
+import ListItem from '@material-ui/core/ListItem';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import HiIcon from '../HiIcon';
+import HiCheckbox from '../HiCheckbox';
+import HiColoredLabel from '../HiColoredLabel';
+import HiLoader from '../HiLoader';
+import { withStyles } from '@material-ui/core/styles';
+import { escapeHTML } from '../utils/helpers';
+import pure from 'recompose/pure';
+import keycode from 'keycode';
+var PureListSubheader = pure(ListSubheader);
+var PureListItem = pure(ListItem);
+export var styles = function styles(theme) {
   return {
     root: {
       paddingLeft: 4
@@ -118,7 +86,7 @@ var styles = function styles(theme) {
       padding: '8px 0',
       margin: 'auto'
     },
-    listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
+    listItemContent: _objectSpread({}, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
       minWidth: '50%',
@@ -147,14 +115,14 @@ var styles = function styles(theme) {
       color: theme.palette.primary.main,
       textTransform: 'uppercase'
     },
-    secondaryLabel: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    secondaryLabel: _objectSpread({}, theme.typography.b3, {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 11,
       marginLeft: 4
     }),
     inline: {},
-    info: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    info: _objectSpread({}, theme.typography.b3, {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 12,
@@ -203,29 +171,29 @@ var styles = function styles(theme) {
  * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
-
-exports.styles = styles;
-
 var HiSelectableListItem =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
+  _inherits(HiSelectableListItem, _React$PureComponent);
 
   function HiSelectableListItem(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiSelectableListItem);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setHover", function (hover) {
+    _classCallCheck(this, HiSelectableListItem);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiSelectableListItem).call(this, props));
+
+    _defineProperty(_assertThisInitialized(_this), "setHover", function (hover) {
       return function () {
         _this.setState({
           hover: hover
         });
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (item) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (item) {
       return function (event) {
-        var key = (0, _keycode.default)(event);
+        var key = keycode(event);
 
         if (key === 'space' || key === 'enter') {
           event.preventDefault();
@@ -237,15 +205,16 @@ function (_React$PureComponent) {
         }
       };
     });
+
     _this.state = {
       hover: false
     };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
+    _this.buildItemLabel = _this.buildItemLabel.bind(_assertThisInitialized(_this));
+    _this.setHover = _this.setHover.bind(_assertThisInitialized(_this));
     return _this;
   }
 
-  (0, _createClass2.default)(HiSelectableListItem, [{
+  _createClass(HiSelectableListItem, [{
     key: "buildItemLabel",
 
     /**
@@ -262,34 +231,34 @@ function (_React$PureComponent) {
           selected = _this$props.selected;
 
       if (labelHighlight) {
-        var spanHighlight = _react.default.createElement("span", {
+        var spanHighlight = React.createElement("span", {
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML: {
-            __html: (0, _helpers.escapeHTML)(labelHighlight)
+            __html: escapeHTML(labelHighlight)
           }
         });
 
         if (color && selected) {
-          return _react.default.createElement(_HiColoredLabel.default, {
+          return React.createElement(HiColoredLabel, {
             color: color,
             label: spanHighlight
           });
         }
 
-        return _react.default.createElement("span", {
+        return React.createElement("span", {
           className: classes.label
         }, spanHighlight);
       }
 
       if (color && selected) {
-        return _react.default.createElement(_HiColoredLabel.default, {
+        return React.createElement(HiColoredLabel, {
           className: classes.coloredLabel,
           color: color,
           label: label
         });
       }
 
-      return _react.default.createElement("div", {
+      return React.createElement("div", {
         className: classes.label,
         title: label
       }, label);
@@ -326,7 +295,7 @@ function (_React$PureComponent) {
           item = _this$props2.item; // Return simple loader list item
 
       if (type === 'loader') {
-        return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
+        return React.createElement(ListItem, null, React.createElement(HiLoader, {
           loading: true,
           className: classes.loader,
           size: 8
@@ -342,14 +311,14 @@ function (_React$PureComponent) {
       }
 
       var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
-      return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
+      return React.createElement(ListItemComponentName, Object.assign({
         id: id,
         tabIndex: disabled ? '-1' : 0,
         key: "li-".concat(id),
         classes: {
           root: classes.root
         },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+        className: classNames(classes.listItem, classes.listItemHover, (_classNames = {}, _defineProperty(_classNames, classes.disabled, disabled), _defineProperty(_classNames, classes.selected, selected), _defineProperty(_classNames, classes.thin, thin), _defineProperty(_classNames, classes.pinned, pinned), _defineProperty(_classNames, classes.inline, secondaryInline), _defineProperty(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), _defineProperty(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
         disabled: disabled
       }, disabled || {
         onClick: onSelect,
@@ -360,9 +329,9 @@ function (_React$PureComponent) {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
-      }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+      }), React.createElement("div", {
+        className: classNames(classes.labelContent, _defineProperty({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+      }, !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
         tabIndex: 0,
         classes: {
           root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
@@ -374,7 +343,7 @@ function (_React$PureComponent) {
         icon: displayedIcon,
         indeterminate: indeterminate,
         indeterminateIcon: indeterminateIcon
-      }), type === 'image' && img && _react.default.createElement("img", {
+      }), type === 'image' && img && React.createElement("img", {
         src: img,
         alt: '',
         onError: function onError(e) {
@@ -385,25 +354,26 @@ function (_React$PureComponent) {
           }
         },
         className: classes.img
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+      }), React.createElement("div", {
+        className: classNames(classes.listItemContent, (_classNames3 = {}, _defineProperty(_classNames3, classes.centered, centered), _defineProperty(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), _defineProperty(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
         "data-id": id
-      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+      }, type === 'icon' && icon && hideCheckbox && React.createElement(HiIcon, {
         icon: icon,
         className: classes.icon
-      }), this.buildItemLabel())), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
-      }, !!secondaryLabel && _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-      }, secondaryLabel), !!info && _react.default.createElement("span", {
-        className: (0, _classnames.default)(classes.info)
+      }), this.buildItemLabel())), React.createElement("div", {
+        className: classNames(classes.infosContent, (_classNames4 = {}, _defineProperty(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), _defineProperty(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), _defineProperty(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
+      }, !!secondaryLabel && React.createElement("div", {
+        className: classNames(classes.secondaryLabel, _defineProperty({}, classes.inline, secondaryInline))
+      }, secondaryLabel), !!info && React.createElement("span", {
+        className: classNames(classes.info)
       }, info)));
     }
   }]);
+
   return HiSelectableListItem;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(HiSelectableListItem, "defaultProps", {
+_defineProperty(HiSelectableListItem, "defaultProps", {
   centered: false,
   disabled: false,
   hideCheckbox: false,
@@ -419,9 +389,7 @@ function (_React$PureComponent) {
   thin: false
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectableListItem'
-})(HiSelectableListItem);
-
-exports.default = _default;
+})(HiSelectableListItem);

package/HiSelectableList/HiSelectableListItem.test.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { assert } from 'chai';
+import ListItem from '@material-ui/core/ListItem';
+import HiCheckbox from '../HiCheckbox';
+import { spy } from 'sinon';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiSelectableListItem from './HiSelectableListItem';
+describe('<HiSelectableListItem />', function () {
+  var shallow;
+  var mount;
+  var classes;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    classes = getClasses(React.createElement(HiSelectableListItem, null));
+  });
+  beforeEach(function () {
+    mount = createMount();
+  });
+  afterEach(function () {
+    mount.cleanUp();
+  });
+  it('should render a unselected checkbox', function () {
+    var wrapper = mount(React.createElement(HiSelectableListItem, {
+      selected: false,
+      checkbox: true,
+      onSelect: function onSelect() {
+        return null;
+      }
+    }));
+    assert.strictEqual(wrapper.find(HiCheckbox).props().checked, false);
+  });
+  it('should render an item without the class inline', function () {
+    var wrapper = mount(React.createElement(HiSelectableListItem, {
+      secondaryInline: false
+    }));
+    assert.strictEqual(wrapper.find(ListItem).hasClass(classes.inline), false);
+  });
+  it('should render a selected checkbox', function () {
+    var wrapper = mount(React.createElement(HiSelectableListItem, {
+      selected: true,
+      checkbox: true,
+      onSelect: function onSelect() {
+        return null;
+      }
+    }));
+    assert.strictEqual(wrapper.find(HiCheckbox).props().checked, true);
+  });
+  it('should update if props selected change', function () {
+    var wrapper = mount(React.createElement(HiSelectableListItem, {
+      selected: false,
+      checkbox: true,
+      onSelect: function onSelect() {
+        return null;
+      }
+    }));
+    assert.strictEqual(wrapper.find(HiCheckbox).props().checked, false);
+    wrapper.setProps({
+      selected: true
+    });
+    wrapper.update();
+    assert.strictEqual(wrapper.find(HiCheckbox).props().checked, true);
+  });
+  it('should call onSelect on click event', function () {
+    var handleOnSelect = spy();
+    var wrapper = mount(React.createElement(HiSelectableListItem, {
+      selected: false,
+      onSelect: handleOnSelect
+    }));
+    var listItem = wrapper.find(ListItem);
+    listItem.simulate('click');
+    assert.strictEqual(handleOnSelect.calledOnce, true);
+  });
+  it('should update state if element is hovered', function () {
+    var wrapper = shallow(React.createElement(HiSelectableListItem, {
+      selected: false,
+      onSelect: function onSelect() {
+        return null;
+      }
+    }));
+    var listItem = wrapper.dive().find(ListItem);
+    listItem.simulate('mouseenter');
+    assert.strictEqual(wrapper.state().hover, true);
+    listItem.simulate('mouseleave');
+    assert.strictEqual(wrapper.state().hover, false);
+  });
+  it('should handle hideCheckbox & disabled props', function () {
+    var wrapper = mount(React.createElement(HiSelectableListItem, {
+      selected: true,
+      hideCheckbox: true,
+      disabled: true
+    }));
+    assert.strictEqual(wrapper.find(HiCheckbox).length, 0);
+    assert.strictEqual(wrapper.find(ListItem).props().disabled, true);
+  });
+});

package/HiSelectableList/index.js

@@ -1,31 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _HiSelectableList.default;
-  }
-});
-Object.defineProperty(exports, "HiSelectableListItem", {
-  enumerable: true,
-  get: function get() {
-    return _HiSelectableListItem.default;
-  }
-});
-Object.defineProperty(exports, "HiSelectableListHierarchic", {
-  enumerable: true,
-  get: function get() {
-    return _HiSelectableListHierarchic.default;
-  }
-});
-
-var _HiSelectableList = _interopRequireDefault(require("./HiSelectableList"));
-
-var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
-
-var _HiSelectableListHierarchic = _interopRequireDefault(require("./HiSelectableListHierarchic"));
+export { default } from './HiSelectableList';
+export { default as HiSelectableListItem } from './HiSelectableListItem';
+export { default as HiSelectableListHierarchic } from './HiSelectableListHierarchic';

package/HiSwitch/HiSwitch.js

@@ -1,31 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _SwitchBase = _interopRequireDefault(require("@material-ui/core/internal/SwitchBase"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _helpers = require("../utils/helpers");
-
-var _styles = require("@material-ui/core/styles");
-
-var styles = function styles(theme) {
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React from 'react';
+import classNames from 'classnames';
+import SwitchBase from '@material-ui/core/internal/SwitchBase';
+import Check from '@material-ui/icons/Check';
+import { capitalize } from '../utils/helpers';
+import { withStyles } from '@material-ui/core/styles';
+export var styles = function styles(theme) {
   return {
     root: {
       display: 'inline-flex',
@@ -153,8 +134,6 @@ var styles = function styles(theme) {
   };
 };
 
-exports.styles = styles;
-
 function HiSwitch(props) {
   var _classNames;
 
@@ -163,28 +142,27 @@ function HiSwitch(props) {
       checked = props.checked,
       color = props.color,
       disabled = props.disabled,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "checked", "color", "disabled"]);
-  var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
-  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+      other = _objectWithoutProperties(props, ["classes", "className", "checked", "color", "disabled"]);
 
-  var icon = _react.default.createElement(_Check.default, {
+  var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
+  var iconClass = classNames(classes.icon, (_classNames = {}, _defineProperty(_classNames, classes.iconChecked, checked), _defineProperty(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), _defineProperty(_classNames, classes["iconChecked".concat(capitalize(color))], !disabled && checked && isHiColor), _defineProperty(_classNames, classes.iconDisabled, disabled), _classNames));
+  var icon = React.createElement(Check, {
     className: iconClass
   });
-
-  return _react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.root, className)
-  }, _react.default.createElement(_SwitchBase.default, (0, _extends2.default)({
+  return React.createElement("div", {
+    className: classNames(classes.root, className)
+  }, React.createElement(SwitchBase, Object.assign({
     type: "checkbox",
     icon: icon,
     classes: {
       root: classes.switchBaseRoot,
-      checked: isHiColor && !disabled ? classes["checked".concat((0, _helpers.capitalize)(color))] : classes.checkedNeutral,
+      checked: isHiColor && !disabled ? classes["checked".concat(capitalize(color))] : classes.checkedNeutral,
       disabled: classes.disabled
     },
     checkedIcon: icon,
     checked: checked,
     disabled: disabled
-  }, other)), _react.default.createElement("div", {
+  }, other)), React.createElement("div", {
     className: classes.bar
   }));
 }
@@ -192,10 +170,7 @@ function HiSwitch(props) {
 HiSwitch.defaultProps = {
   color: 'inherit'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HmuiHiSwitch'
-})(HiSwitch);
-
-exports.default = _default;
+})(HiSwitch);

package/HiSwitch/HiSwitch.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { assert } from 'chai';
+import Check from '@material-ui/icons/Check';
+import SwitchBase from '@material-ui/core/internal/SwitchBase';
+import { createShallow, getClasses } from '../test-utils';
+import HiSwitch from './HiSwitch';
+describe('<HiSwitch />', function () {
+  var shallow;
+  var classes;
+  before(function () {
+    shallow = createShallow({
+      untilSelector: 'div'
+    });
+    classes = getClasses(React.createElement(HiSwitch, null));
+  });
+  describe('default HiSwitch export', function () {
+    var wrapper;
+    beforeEach(function () {
+      wrapper = shallow(React.createElement(HiSwitch, {
+        className: "foo"
+      }));
+    });
+    it('should render a div with the root and user classes', function () {
+      assert.strictEqual(wrapper.name(), 'div');
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass('foo'), true);
+      assert.strictEqual(wrapper.find(SwitchBase).length, 1);
+    });
+    it('should render SwitchBase with a custom div icon with the icon class', function () {
+      var switchBase = wrapper.childAt(0);
+      assert.strictEqual(switchBase.name(), 'WithStyles(SwitchBase)');
+      assert.strictEqual(switchBase.props().icon.type, Check);
+      assert.strictEqual(switchBase.props().icon.props.className, classes.icon);
+    });
+    it('should render the bar as the 2nd child', function () {
+      var bar = wrapper.childAt(1);
+      assert.strictEqual(bar.is('div'), true);
+      assert.strictEqual(bar.hasClass(classes.bar), true);
+    });
+  });
+});