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

package/es/HiForm/HiPasswordField.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, createMount } from '../test-utils';
+import HiPasswordField from './HiPasswordField';
+import HiTextField from './HiTextField';
+import HiInput from './HiInput';
+describe('<HiPasswordField />', function () {
+  var shallow;
+  var mount;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    mount = createMount();
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+  describe('shallow', function () {
+    var wrapper;
+    beforeEach(function () {
+      wrapper = shallow(React.createElement(HiPasswordField, {
+        id: "password"
+      }));
+    });
+    describe('structure', function () {
+      it('should pass className to the FormControl', function () {
+        wrapper.setProps({
+          className: 'foo'
+        });
+        assert.strictEqual(wrapper.dive().hasClass('foo'), true);
+      });
+      it('should forward the fullWidth prop to FormControl', function () {
+        wrapper = shallow(React.createElement(HiPasswordField, {
+          id: "password",
+          fullWidth: true
+        }));
+        assert.strictEqual(wrapper.props().fullWidth, true);
+      });
+      it('should forward the fullWidth prop to FormControl', function () {
+        // Handle suggestions
+        assert.strictEqual(wrapper.state().showText, false);
+        wrapper.find(HiTextField).props().onRightIconClick();
+        assert.strictEqual(wrapper.state().showText, true);
+        wrapper.find(HiTextField).props().onRightIconClick();
+        assert.strictEqual(wrapper.state().showText, false);
+      });
+      it('should have placeholder prop to HiInput', function () {
+        assert.strictEqual(wrapper.find(HiTextField).dive().find(HiInput).props().placeholder, '');
+        wrapper.setProps({
+          HiInputProps: {
+            placeholder: 'Password'
+          }
+        });
+        wrapper.update();
+        assert.strictEqual(wrapper.find(HiTextField).dive().find(HiInput).props().placeholder, 'Password');
+      });
+    });
+  });
+});

package/es/HiForm/HiSearchField.js

@@ -1,60 +1,41 @@
-"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-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 _react = _interopRequireDefault(require("react"));
-
-var _HiInput = _interopRequireDefault(require("./HiInput"));
-
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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 React from 'react';
+import HiInput from './HiInput';
 /**
  * Construit une barre de recherche avec icône Search (Magnify),
  * permet de filtrer une liste d'éléments en spécifiant le nom de la/les propriétés sur lesquelles filtrer,
  * retour la liste d'élément filtré.
  * Un bouton reset s'affiche à la saisie permettant de réinitialiser l'input.
  */
+
 var HiSearchField =
 /*#__PURE__*/
 function (_React$Component) {
-  (0, _inherits2.default)(HiSearchField, _React$Component);
+  _inherits(HiSearchField, _React$Component);
 
   function HiSearchField(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiSearchField);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSearchField).call(this, props));
+    _classCallCheck(this, HiSearchField);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiSearchField).call(this, props));
     _this.state = {
       inputValue: ''
     };
-    _this.filterOnProperties = _this.filterOnProperties.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
+    _this.filterOnProperties = _this.filterOnProperties.bind(_assertThisInitialized(_this));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.handleReset = _this.handleReset.bind(_assertThisInitialized(_this));
     return _this;
   }
 
-  (0, _createClass2.default)(HiSearchField, [{
+  _createClass(HiSearchField, [{
     key: "filterOnProperties",
     value: function filterOnProperties(item, search) {
       if (!this.props.filterPropertyList || this.props.filterPropertyList.length < 1) {
@@ -137,8 +118,9 @@ function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
           placeholder = _this$props.placeholder,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["placeholder"]);
-      return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
+          others = _objectWithoutProperties(_this$props, ["placeholder"]);
+
+      return React.createElement(HiInput, Object.assign({
         placeholder: placeholder,
         onReset: this.handleReset,
         onChange: this.handleChange,
@@ -147,11 +129,12 @@ function (_React$Component) {
       }, others));
     }
   }]);
+
   return HiSearchField;
-}(_react.default.Component);
+}(React.Component);
 
-(0, _defineProperty2.default)(HiSearchField, "defaultProps", {
+_defineProperty(HiSearchField, "defaultProps", {
   placeholder: 'Search'
 });
-var _default = HiSearchField;
-exports.default = _default;
+
+export default HiSearchField;

package/es/HiForm/HiSearchField.test.js

@@ -0,0 +1,193 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, createMount } from '../test-utils';
+import HiSearchField from './HiSearchField';
+describe('<HiSearchField />', function () {
+  var shallow;
+  var mount;
+  before(function () {
+    shallow = createShallow({
+      untilSelector: 'HiSearchField'
+    });
+  });
+  beforeEach(function () {
+    mount = createMount();
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+  it('should render a <div />', function () {
+    var wrapper = shallow(React.createElement(HiSearchField, {
+      itemList: [],
+      onFilteredList: function onFilteredList() {
+        return null;
+      }
+    }));
+    assert.strictEqual(wrapper.name(), 'div');
+  });
+  it('should render an <input /> inside the div', function () {
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: [],
+      onFilteredList: function onFilteredList() {
+        return null;
+      }
+    }));
+    var input = wrapper.find('input');
+    assert.strictEqual(input.name(), 'input');
+    assert.strictEqual(input.props().type, 'text', 'should pass the text type prop');
+  });
+  it('should fire onChange event callbacks', function () {
+    var handleChange = spy();
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: [],
+      onFilteredList: handleChange
+    }));
+    wrapper.find('input').simulate('change');
+    assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+  });
+  it('should fire onChange event callbacks and call onSearch', function () {
+    var handleChange = spy();
+    var onSearch = spy();
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: [],
+      onFilteredList: handleChange,
+      onSearch: onSearch
+    }));
+    wrapper.find('input').simulate('change', 'value');
+    assert.strictEqual(onSearch.calledOnce, true, 'should have called the callback');
+  });
+  it('should handle flatten array', function () {
+    var handleChange = spy();
+    var itemList = ['zizou', 'zizou', 'manu'];
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: itemList,
+      onFilteredList: handleChange
+    }));
+    wrapper.find('input').simulate('change');
+    assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+  });
+  it('should handle nested array', function () {
+    var handleChange = spy();
+    var itemList = [{
+      id: 'zz',
+      label: 'Zizou'
+    }, {
+      id: 'zze',
+      label: 'Zizou encore'
+    }, {
+      id: 'ep',
+      label: 'Emmanuel Petit'
+    }];
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: itemList,
+      onFilteredList: handleChange,
+      filterPropertyList: ['label']
+    }));
+    wrapper.find('input').simulate('change');
+    assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+  });
+  it('should handle double nested array', function () {
+    var handleChange = spy();
+    var itemList = [{
+      id: 'zz',
+      record: {
+        label: 'Zizou'
+      }
+    }, {
+      id: 'zze',
+      record: {
+        label: 'Zizou encore'
+      }
+    }, {
+      id: 'ep',
+      record: {
+        label: 'Emmanuel Petit'
+      }
+    }];
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: itemList,
+      onFilteredList: handleChange,
+      filterPropertyList: ['record.label']
+    }));
+    wrapper.find('input').simulate('change');
+    assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+  });
+  it('should return filtered list on search value and add reset button', function () {
+    var itemList = [{
+      id: 'zz',
+      label: 'Zizou'
+    }, {
+      id: 'zze',
+      label: 'Zizou encore'
+    }, {
+      id: 'ep',
+      label: 'Emmanuel Petit'
+    }];
+    var searchValue = 'peTit';
+    var expectedFilteredItemList = [{
+      id: 'ep',
+      label: 'Emmanuel Petit'
+    }];
+    var handleChange = spy();
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: itemList,
+      onFilteredList: handleChange,
+      filterPropertyList: ['label']
+    })); // Fill input
+
+    var event = {
+      target: {
+        value: searchValue
+      }
+    };
+    wrapper.find('input').simulate('change', event);
+    assert.strictEqual(handleChange.calledWith(expectedFilteredItemList), true, 'should have called the callback with filtered item list');
+    assert.strictEqual(handleChange.calledWith(itemList), false, 'should not have called yet the callback with full item list');
+    assert.strictEqual(wrapper.find('button').length, 0, 'should not have clear icon');
+    wrapper.find('input').simulate('focus');
+    var resetButton = wrapper.find('button');
+    assert.strictEqual(resetButton.name(), 'button', 'should have reset button');
+    wrapper.find('button').simulate('click'); // Click on reset
+
+    resetButton.simulate('click');
+    assert.strictEqual(handleChange.calledWith(itemList), true, 'should not have called the callback with full item list');
+    assert.strictEqual(handleChange.callCount, 3, 'should have called the callback three times');
+  });
+  it('should return filtered list on search value and add reset button call onSearch', function () {
+    var itemList = [{
+      id: 'zz',
+      label: 'Zizou'
+    }, {
+      id: 'zze',
+      label: 'Zizou encore'
+    }, {
+      id: 'ep',
+      label: 'Emmanuel Petit'
+    }];
+    var searchValue = 'peTit';
+    var handleChange = spy();
+    var onSearch = spy();
+    var wrapper = mount(React.createElement(HiSearchField, {
+      itemList: itemList,
+      onFilteredList: handleChange,
+      filterPropertyList: ['label'],
+      onSearch: onSearch
+    })); // Fill input
+
+    var event = {
+      target: {
+        value: searchValue
+      }
+    };
+    wrapper.find('input').simulate('change', event);
+    assert.strictEqual(handleChange.calledWith(itemList), false, 'should not have called yet the callback with full item list');
+    assert.strictEqual(wrapper.find('button').length, 0, 'should not have clear icon');
+    wrapper.find('input').simulate('focus');
+    var resetButton = wrapper.find('button');
+    assert.strictEqual(resetButton.name(), 'button', 'should have reset button'); // Click on reset
+
+    resetButton.simulate('click', 'reset');
+    assert.strictEqual(onSearch.callCount, 2, 'should have called the callback two times');
+  });
+});

package/es/HiForm/HiSlider.js

@@ -1,39 +1,17 @@
-"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 _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 _styles = require("@material-ui/core/styles");
-
-var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
-
-var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-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 { withStyles } from '@material-ui/core/styles';
+import HiFormControl from './HiFormControl';
+import HiIcon from '../HiIcon/HiIcon';
+import classNames from 'classnames';
+export var styles = function styles(theme) {
   return {
     barContainer: {
       width: '100%',
@@ -48,7 +26,7 @@ var styles = function styles(theme) {
       zIndex: '2',
       cursor: 'pointer'
     },
-    mainContainer: (0, _objectSpread2.default)({}, theme.typography.body1, {
+    mainContainer: _objectSpread({}, theme.typography.body1, {
       display: 'flex',
       flexWrap: 'nowrap',
       alignItems: 'center'
@@ -113,31 +91,32 @@ var styles = function styles(theme) {
  * HiSlider component
  */
 
-
-exports.styles = styles;
-
 var HiSlider =
 /*#__PURE__*/
 function (_React$Component) {
-  (0, _inherits2.default)(HiSlider, _React$Component);
+  _inherits(HiSlider, _React$Component);
 
   function HiSlider(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiSlider);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSlider).call(this, props));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+    _classCallCheck(this, HiSlider);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiSlider).call(this, props));
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
       _this.props.onChange(parseFloat(event.target.value));
 
       _this.textValueWidth = _this.textValue.offsetWidth;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function (isFocused) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (isFocused) {
       return function () {
         _this.setState({
           focused: isFocused
         });
       };
     });
+
     _this.state = {
       focused: false
     };
@@ -150,7 +129,7 @@ function (_React$Component) {
    */
 
 
-  (0, _createClass2.default)(HiSlider, [{
+  _createClass(HiSlider, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.leftLabelWidth = this.leftLabel.offsetWidth;
@@ -209,27 +188,27 @@ function (_React$Component) {
 
       var barColor = focused ? theme.palette.primary.dark : theme.palette.primary.main;
       return (// HiFormControl pour l'affichage du label
-        _react.default.createElement(_HiFormControl.default, {
+        React.createElement(HiFormControl, {
           id: id,
           label: label,
           className: className,
           onFocus: this.handleFocus(true),
           onBlur: this.handleFocus(false)
-        }, _react.default.createElement("div", {
+        }, React.createElement("div", {
           className: classes.mainContainer
-        }, _react.default.createElement("div", null, min, suffix), _react.default.createElement("div", {
+        }, React.createElement("div", null, min, suffix), React.createElement("div", {
           className: classes.barContainer,
           ref: function ref(div) {
             _this2.barContainer = div;
           }
-        }, _react.default.createElement("div", {
+        }, React.createElement("div", {
           className: classes.topContainer
-        }, !hoveringLeft && _react.default.createElement("div", {
+        }, !hoveringLeft && React.createElement("div", {
           className: classes.leftLabel,
           ref: function ref(div) {
             _this2.leftLabel = div;
           }
-        }, leftLabel), _react.default.createElement("div", {
+        }, leftLabel), React.createElement("div", {
           className: classes.textValue,
           style: {
             left: "".concat(percentage, "%"),
@@ -238,17 +217,17 @@ function (_React$Component) {
           ref: function ref(div) {
             _this2.textValue = div;
           }
-        }, value, suffix), !hoveringRight && _react.default.createElement("div", {
+        }, value, suffix), !hoveringRight && React.createElement("div", {
           className: classes.rightLabel,
           ref: function ref(div) {
             _this2.rightLabel = div;
           }
-        }, rightLabel)), _react.default.createElement("div", {
+        }, rightLabel)), React.createElement("div", {
           className: classes.barValue,
           style: {
             background: "linear-gradient(to right, ".concat(barColor, ", ").concat(barColor, " ").concat(percentage, "%, #E0E0E0 ").concat(percentage, "%, #E0E0E0)")
           }
-        }), _react.default.createElement("input", {
+        }), React.createElement("input", {
           type: 'range',
           min: min,
           max: max,
@@ -256,26 +235,25 @@ function (_React$Component) {
           onChange: this.handleChange,
           className: classes.barHidden,
           step: step
-        }), _react.default.createElement("div", {
+        }), React.createElement("div", {
           className: classes.bottomContainer
-        }, _react.default.createElement(_HiIcon.default, {
-          className: (0, _classnames.default)(classes.arrow, (0, _defineProperty2.default)({}, classes.focused, focused)),
+        }, React.createElement(HiIcon, {
+          className: classNames(classes.arrow, _defineProperty({}, classes.focused, focused)),
           icon: 'play_arrow',
           style: {
             left: "".concat(percentage, "%"),
             color: barColor
           }
-        }))), _react.default.createElement("div", null, max, suffix)))
+        }))), React.createElement("div", null, max, suffix)))
       );
     }
   }]);
+
   return HiSlider;
-}(_react.default.Component);
+}(React.Component);
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HiSlider',
   withTheme: true
-})(HiSlider);
-
-exports.default = _default;
+})(HiSlider);

package/es/HiForm/HiSlider.test.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { assert, expect } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, createMount } from '../test-utils';
+import HiSlider from './HiSlider';
+import HiFormControl from './HiFormControl';
+describe('<HiSlider />', function () {
+  var shallow;
+  var mount;
+  before(function () {
+    shallow = createShallow();
+  });
+  beforeEach(function () {
+    mount = createMount();
+  });
+  afterEach(function () {
+    mount.cleanUp();
+  });
+  describe('shallow', function () {
+    var wrapper;
+    var props = {
+      min: 0,
+      max: 100,
+      id: 'slider',
+      label: 'label'
+    };
+    beforeEach(function () {
+      wrapper = shallow(React.createElement(HiSlider, props), {
+        disableLifecycleMethods: true
+      });
+    });
+    it('should be a HiSlider', function () {
+      assert.strictEqual(wrapper.name(), 'HiSlider');
+    });
+    it('should have an HiFormControl as the only child', function () {
+      assert.strictEqual(wrapper.dive().children().length, 1);
+      assert.strictEqual(wrapper.dive().type(), HiFormControl);
+    });
+    it('should pass label to the HiFormControl', function () {
+      assert.strictEqual(wrapper.dive().find(HiFormControl).dive().props().label, props.label, '');
+    });
+    it('should show labels (right and left) if passed', function () {
+      assert.strictEqual(wrapper.dive().children().childAt(1).childAt(0).childAt(0).text(), '', 'should be empty because no left label is given in props');
+      assert.strictEqual(wrapper.dive().children().childAt(1).childAt(0).childAt(2).text(), '', 'should be empty because no right label is given in props');
+      var rightLabel = 'label right';
+      var leftLabel = 'label left';
+      wrapper.setProps({
+        rightLabel: rightLabel
+      });
+      wrapper.setProps({
+        leftLabel: leftLabel
+      });
+      assert.strictEqual(wrapper.dive().children().childAt(1).childAt(0).childAt(0).text(), leftLabel, 'should display the left label given in props');
+      assert.strictEqual(wrapper.dive().children().childAt(1).childAt(0).childAt(2).text(), rightLabel, 'should display the right label given in props');
+    });
+    it('should have the values given in props for max and min', function () {
+      assert.strictEqual(wrapper.dive().children().childAt(0).text(), '0', 'should be equal to the min value given in props');
+      assert.strictEqual(wrapper.dive().children().childAt(2).text(), '100', 'should be equal to the max value given in props');
+    });
+    it('should be on the initial value, then change', function () {
+      wrapper = shallow(React.createElement(HiSlider, {
+        id: 'slider',
+        min: 0,
+        max: 100,
+        value: 50
+      }), {
+        disableLifecycleMethods: true
+      });
+      assert.strictEqual(wrapper.dive().find('input').props().value, 50, 'the input value should be equal to initial value');
+      assert.strictEqual(wrapper.dive().children().childAt(1).childAt(0).childAt(1).text(), '50', 'the value shown to the user is the same as the initial value');
+      expect(wrapper.dive().children().childAt(1).childAt(1).props().style.background).to.include('50%');
+    });
+  });
+  it('should fire onChange event callbacks', function () {
+    var handleChange = spy();
+    var wrapper = mount(React.createElement(HiSlider, {
+      id: 'slider',
+      min: 0,
+      max: 100,
+      onChange: handleChange
+    }));
+    wrapper.find('input').simulate('change');
+    assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+  });
+  it('should be focused after onFocus, then not focused after onBlur', function () {
+    var wrapper = mount(shallow(React.createElement(HiSlider, {
+      id: 'slider',
+      rightLabel: 'test right',
+      leftLabel: 'test left',
+      min: 0,
+      max: 100,
+      value: 50
+    })).get(0));
+    wrapper.find(HiFormControl).prop('onFocus')();
+    assert.strictEqual(wrapper.state().focused, true, 'should be focused');
+    wrapper.find(HiFormControl).prop('onBlur')();
+    assert.strictEqual(wrapper.state().focused, false, 'should not be focused');
+  });
+});