@hi-ui/hiui 2.15.11 → 2.15.12

package/es/input/__tests__/index.test.js

@@ -0,0 +1,376 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _sinon = require("sinon");
+
+var _index = _interopRequireWildcard(require("../index"));
+
+describe('Input', function () {
+  describe('PropTypes', function () {
+    it('id', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        value: "1",
+        id: "tId"
+      }));
+      expect(wrapper.find('.hi-input').prop('id')).toEqual('tId');
+    });
+    it('value', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        value: "1"
+      }));
+      expect(wrapper.find('.hi-input__text').prop('value')).toEqual('1');
+      wrapper.setProps({
+        value: '2'
+      });
+      expect(wrapper.find('.hi-input__text').prop('value')).toEqual('2');
+      wrapper.setProps({
+        value: '2'
+      });
+    }); // it('defaultValue', () => {
+    //   const wrapper = mount(
+    //     <Input defaultValue='1' />
+    //   )
+    //   expect(wrapper.find('.hi-input__text').prop('value')).toEqual('1')
+    //   wrapper.setProps({defaultValue: '2'})
+    //   expect(wrapper.find('.hi-input__text').prop('value')).toEqual('1')
+    // })
+
+    it('type', function () {
+      var types = ['text', 'id', 'tel', 'card', 'amount', 'email'];
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, types.map(function (type, index) {
+        return _react["default"].createElement(_index["default"], {
+          type: type,
+          key: index,
+          value: "0"
+        });
+      }), _react["default"].createElement(_index["default"], {
+        type: "textarea"
+      })));
+      types.map(function (type, index) {
+        expect(wrapper.find(".".concat(type))).toHaveLength(1);
+      });
+      expect(wrapper.find('textarea')).toHaveLength(1);
+    });
+    it('prepend&append', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        prepend: "prepend",
+        append: "append"
+      }));
+      var firstEl = wrapper.find('.hi-input__inner');
+      expect(firstEl.childAt(0).hasClass('hi-input__prefix')).toBeTruthy();
+      expect(firstEl.childAt(0).text()).toEqual('prepend');
+      expect(firstEl.childAt(2).hasClass('hi-input__suffix')).toBeTruthy();
+      expect(firstEl.childAt(2).text()).toEqual('append');
+      wrapper.setProps({
+        prepend: _react["default"].createElement("button", null),
+        append: _react["default"].createElement("button", null)
+      });
+      var secEl = wrapper.find('.hi-input__out');
+      expect(secEl.childAt(0).hasClass('hi-input__prepend')).toBeTruthy();
+      expect(secEl.childAt(2).hasClass('hi-input__append')).toBeTruthy();
+      wrapper.setProps({
+        prepend: 'a',
+        append: 'a'
+      });
+      expect(firstEl.childAt(0).text()).toEqual('prepend');
+      expect(firstEl.childAt(2).text()).toEqual('append');
+    });
+    it('input.disabled', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        disabled: true
+      }));
+      expect(wrapper.find('.hi-input__inner').hasClass('disabled')).toBeTruthy();
+      wrapper.setProps({
+        disabled: false
+      });
+      expect(wrapper.find('.hi-input__inner').hasClass('disabled')).toBeFalsy();
+    });
+    it('textarea.disabled', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        disabled: true,
+        type: "textarea"
+      }));
+      expect(wrapper.find('textarea').hasClass('disabled')).toBeTruthy();
+      wrapper.setProps({
+        disabled: false
+      });
+      expect(wrapper.find('textarea').hasClass('disabled')).toBeFalsy();
+    });
+    it('clearable', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        value: "1",
+        clearable: "true",
+        onChange: callback
+      }));
+      wrapper.find('.hi-input').first().simulate('mouseover');
+      var clBtn = wrapper.find('.hi-input__fix-box');
+      expect(clBtn).toHaveLength(1);
+      expect(clBtn.hasClass('invisible')).toBeFalsy();
+      clBtn.simulate('click');
+      expect(callback.callCount).toEqual(1);
+      expect(wrapper.find('.hi-input__text').prop('value')).toEqual('');
+      wrapper.setProps({
+        disabled: true
+      });
+      wrapper.find('.hi-input').first().simulate('mouseover');
+      expect(wrapper.find('.hi-input__fix-box').hasClass('invisible')).toBeTruthy();
+    });
+    it('placeholder', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        placeholder: "\u8BF7\u8F93\u5165"
+      }));
+      expect(wrapper.find('.hi-input__text').prop('placeholder')).toEqual('请输入');
+    });
+  });
+  describe('events', function () {
+    it('onFocus', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        onFocus: callback
+      }), _react["default"].createElement(_index["default"], {
+        type: "textarea",
+        onFocus: callback
+      })));
+      wrapper.find('.hi-input__text').simulate('focus');
+      expect(callback.callCount).toEqual(1);
+      wrapper.find('textarea').simulate('focus');
+      expect(callback.callCount).toEqual(2);
+    });
+    it('onBlur', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        onBlur: callback
+      }), _react["default"].createElement(_index["default"], {
+        type: "textarea",
+        onBlur: callback
+      })));
+      wrapper.find('.hi-input__text').simulate('blur');
+      expect(callback.callCount).toEqual(1);
+      wrapper.find('textarea').simulate('blur');
+      expect(callback.callCount).toEqual(2);
+    });
+    it('onKeyDown&onKeyUp&onKeyPress', function () {
+      var keyDownCallback = (0, _sinon.fake)();
+      var keyUpCallback = (0, _sinon.fake)();
+      var keyPressCallback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        onKeyDown: keyDownCallback,
+        onKeyUp: keyUpCallback,
+        onKeyPress: keyPressCallback
+      }), _react["default"].createElement(_index["default"], {
+        type: "textarea",
+        onKeyDown: keyDownCallback,
+        onKeyUp: keyUpCallback,
+        onKeyPress: keyPressCallback
+      })));
+      wrapper.find('.hi-input__text').simulate('keydown');
+      expect(keyDownCallback.callCount).toEqual(1);
+      wrapper.find('.hi-input__text').simulate('keyup');
+      expect(keyUpCallback.callCount).toEqual(1);
+      wrapper.find('.hi-input__text').simulate('keypress');
+      expect(keyPressCallback.callCount).toEqual(1);
+      wrapper.find('textarea').simulate('keydown');
+      expect(keyDownCallback.callCount).toEqual(2);
+      wrapper.find('textarea').simulate('keyup');
+      expect(keyUpCallback.callCount).toEqual(2);
+      wrapper.find('textarea').simulate('keypress');
+      expect(keyPressCallback.callCount).toEqual(2);
+    });
+    it('onInput', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        onInput: callback
+      }), _react["default"].createElement(_index["default"], {
+        type: "textarea",
+        onInput: callback
+      })));
+      wrapper.find('.hi-input__text').simulate('input');
+      expect(callback.callCount).toEqual(1);
+      wrapper.find('textarea').simulate('input');
+      expect(callback.callCount).toEqual(2);
+    });
+    it('onChange', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        onChange: callback,
+        prepend: "a",
+        append: "a"
+      }), _react["default"].createElement(_index["default"], {
+        type: "textarea",
+        onChange: callback
+      })));
+      wrapper.find('.hi-input__text').simulate('change');
+      expect(callback.callCount).toEqual(1);
+      wrapper.find('textarea').simulate('change');
+      expect(callback.callCount).toEqual(2);
+    });
+  });
+  describe('StatementsOrBranches', function () {
+    it('onBlur.amount', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        onBlur: callback,
+        type: "amount",
+        value: "1"
+      }));
+      wrapper.find('.hi-input__text').simulate('blur');
+      expect(callback.callCount).toEqual(1);
+    });
+    it('onChange.prefix&suffix', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        onChange: callback
+      }));
+      wrapper.find('.hi-input__text').simulate('change');
+      expect(callback.callCount).toEqual(1);
+    });
+    it('clear.prefix', function () {
+      // const callback = fake()
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        value: "1",
+        clearable: "true",
+        prefix: "",
+        suffix: ""
+      }));
+      wrapper.find('.hi-input').first().simulate('mouseover');
+      var clBtn = wrapper.find('.hi-input__fix-box');
+      clBtn.simulate('click');
+    });
+    it('textarea.mouse', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        type: "textarea",
+        onChange: callback
+      }));
+      wrapper.find('textarea').simulate('mouseover');
+      expect(wrapper.find(_index.Input).state('hover')).toEqual(true);
+      wrapper.find('textarea').simulate('mouseleave');
+      expect(wrapper.find(_index.Input).state('hover')).toEqual(false);
+    });
+    it('input.mouse', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        onChange: callback
+      }));
+      wrapper.find('.hi-input').simulate('mouseover');
+      expect(wrapper.find(_index.Input).state('hover')).toEqual(true);
+      wrapper.find('.hi-input').simulate('mouseleave');
+      expect(wrapper.find(_index.Input).state('hover')).toEqual(false);
+    });
+    it('noNeed', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        size: "small",
+        required: true
+      }));
+      expect(wrapper.find('.hi-input_small')).toHaveLength(1);
+      expect(wrapper.find('.required')).toHaveLength(1);
+    });
+  });
+  describe('Input.Util', function () {
+    it('formatId', function () {
+      // value='110000 0000 0000 0000'
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        type: "id",
+        value: "110"
+      }));
+      var origin = wrapper.find(_index.Input);
+      expect(origin.state('value')).toEqual('110');
+      wrapper.setProps({
+        value: '1100000'
+      });
+      expect(origin.state('value')).toEqual('110000 0');
+      wrapper.setProps({
+        value: '11000000000'
+      });
+      expect(origin.state('value')).toEqual('110000 0000 0');
+      wrapper.setProps({
+        value: '110000000000000000'
+      });
+      expect(origin.state('value')).toEqual('110000 0000 0000 0000');
+      wrapper.find('.hi-input__text').simulate('change');
+    });
+    it('formatTel', function () {
+      // value='130 000 00000'
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        type: "tel",
+        value: "a"
+      }));
+      var origin = wrapper.find(_index.Input);
+      expect(origin.state('value')).toEqual('');
+      wrapper.setProps({
+        value: '130'
+      });
+      expect(origin.state('value')).toEqual('130');
+      wrapper.setProps({
+        value: '1300000'
+      });
+      expect(origin.state('value')).toEqual('130 0000');
+      wrapper.setProps({
+        value: '13000000000'
+      });
+      expect(origin.state('value')).toEqual('130 0000 0000');
+      wrapper.find('.hi-input__text').simulate('change');
+    });
+    it('formatCard', function () {
+      // value='0000 0000 0000 0000 000'
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        type: "card",
+        value: "a"
+      }));
+      var origin = wrapper.find(_index.Input);
+      expect(origin.state('value')).toEqual('');
+      wrapper.setProps({
+        value: '0000'
+      });
+      expect(origin.state('value')).toEqual('0000');
+      wrapper.setProps({
+        value: '00000000'
+      });
+      expect(origin.state('value')).toEqual('0000 0000');
+      wrapper.setProps({
+        value: '000000000000'
+      });
+      expect(origin.state('value')).toEqual('0000 0000 0000');
+      wrapper.setProps({
+        value: '0000000000000000'
+      });
+      expect(origin.state('value')).toEqual('0000 0000 0000 0000');
+      wrapper.setProps({
+        value: '0000000000000000000'
+      });
+      expect(origin.state('value')).toEqual('0000 0000 0000 0000 000');
+      wrapper.find('.hi-input__text').simulate('change');
+    });
+    it('format.amount', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        type: "amount",
+        value: "0"
+      }));
+      var origin = wrapper.find(_index.Input);
+      expect(origin.state('value')).toEqual('0');
+      wrapper.setProps({
+        value: '0.0.0'
+      });
+      expect(origin.state('value')).toEqual('0.0');
+      wrapper.find('.hi-input__text').simulate('change');
+      wrapper.setProps({
+        value: '0'
+      });
+      wrapper.find('.hi-input__text').simulate('blur');
+      expect(origin.state('value')).toEqual('0.00');
+      wrapper.setProps({
+        value: '0.0'
+      });
+      wrapper.find('.hi-input__text').simulate('blur');
+      expect(origin.state('value')).toEqual('0.0');
+    });
+  });
+});