@hi-ui/hiui 2.15.11 → 2.15.12

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

@@ -0,0 +1,571 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index"));
+
+var _input = _interopRequireDefault(require("../../input"));
+
+var _Form2 = _interopRequireDefault(require("../Form"));
+
+var _Item = _interopRequireDefault(require("../Item"));
+
+var _grid = _interopRequireDefault(require("../../grid"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _radio = _interopRequireDefault(require("../../radio"));
+
+var Demo =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2["default"])(Demo, _React$Component);
+
+  function Demo(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Demo);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Demo).call(this, props));
+    _this.form = _react["default"].createRef();
+    _this.state = {
+      form: {
+        name: '',
+        region: '',
+        count: ''
+      },
+      checkedIndex: -1,
+      rules: {
+        name: [{
+          required: true,
+          message: _react["default"].createElement("span", {
+            style: {
+              color: '#ccc'
+            }
+          }, "\u8BF7\u8F93\u5165\u540D\u79F0"),
+          trigger: 'onBlur,onChange'
+        }],
+        region: [{
+          required: true,
+          message: '请选择区域',
+          trigger: 'onChange'
+        }],
+        count: [{
+          required: true,
+          message: '请输入数量',
+          trigger: 'onChange'
+        }, {
+          validator: function validator(rule, value, cb) {
+            var count = parseInt(value);
+
+            if (isNaN(count)) {
+              cb('请输入数字');
+            } else if (count <= 0) {
+              cb('必须是正数');
+            } else {
+              cb();
+            }
+          },
+          trigger: 'onChange'
+        }]
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Demo, [{
+    key: "handleSubmit",
+    value: function handleSubmit() {
+      var _this2 = this;
+
+      this.form.current.validate(function (valid) {
+        if (valid) {
+          alert('submit');
+        } else {
+          return false;
+        }
+      });
+    }
+  }, {
+    key: "cancelSubmit",
+    value: function cancelSubmit() {
+      this.setState({
+        form: {
+          name: '',
+          region: '',
+          count: ''
+        }
+      });
+      this.form.current.resetValidates();
+    }
+  }, {
+    key: "handleChange",
+    value: function handleChange(key, e, value, index) {
+      this.setState({
+        form: Object.assign({}, this.state.form, (0, _defineProperty2["default"])({}, key, value))
+      });
+
+      if (index !== undefined) {
+        this.setState({
+          checkedIndex: index
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var Row = _grid["default"].Row;
+      var Col = _grid["default"].Col;
+      var _this$state = this.state,
+          form = _this$state.form,
+          checkedIndex = _this$state.checkedIndex;
+      return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        ref: this.form,
+        model: form,
+        rules: this.state.rules,
+        labelWidth: "80"
+      }, _react["default"].createElement(Row, null, _react["default"].createElement(Col, {
+        span: 12
+      }, _react["default"].createElement(_index["default"].Item, {
+        label: "\u540D\u79F0",
+        prop: "name"
+      }, _react["default"].createElement(_input["default"], {
+        value: form.name,
+        placeholder: 'name',
+        onChange: this.handleChange.bind(this, 'name')
+      })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_button["default"], {
+        type: "primary",
+        onClick: this.handleSubmit.bind(this)
+      }, "\u63D0\u4EA4"), _react["default"].createElement(_button["default"], {
+        onClick: this.cancelSubmit.bind(this)
+      }, "\u91CD\u7F6E"))))));
+    }
+  }]);
+  return Demo;
+}(_react["default"].Component);
+
+var Demo2 =
+/*#__PURE__*/
+function (_React$Component2) {
+  (0, _inherits2["default"])(Demo2, _React$Component2);
+
+  function Demo2(props) {
+    var _this3;
+
+    (0, _classCallCheck2["default"])(this, Demo2);
+    _this3 = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Demo2).call(this, props));
+    _this3.form = _react["default"].createRef();
+    _this3.state = {
+      form: {
+        name: '',
+        region: '',
+        count: ''
+      },
+      checkedIndex: -1,
+      rules: {
+        name: [{
+          required: true,
+          message: _react["default"].createElement("span", {
+            style: {
+              color: '#ccc'
+            }
+          }, "\u8BF7\u8F93\u5165\u540D\u79F0"),
+          trigger: 'onBlur,onChange'
+        }],
+        region: [{
+          required: true,
+          message: '请选择区域',
+          trigger: 'onChange'
+        }],
+        count: [{
+          required: true,
+          message: '请输入数量',
+          trigger: 'onChange'
+        }, {
+          validator: function validator(rule, value, cb) {
+            var count = parseInt(value);
+
+            if (isNaN(count)) {
+              cb('请输入数字');
+            } else if (count <= 0) {
+              cb('必须是正数');
+            } else {
+              cb();
+            }
+          },
+          trigger: 'onChange'
+        }]
+      }
+    };
+    return _this3;
+  }
+
+  (0, _createClass2["default"])(Demo2, [{
+    key: "handleSubmit",
+    value: function handleSubmit() {
+      var _this4 = this;
+
+      this.form.current.validate(function (valid) {
+        if (valid) {
+          alert('submit');
+        } else {
+          return false;
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var Row = _grid["default"].Row;
+      var Col = _grid["default"].Col;
+      var form = this.state.form;
+      return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        ref: this.form,
+        model: form,
+        rules: this.state.rules,
+        labelWidth: "80"
+      }, _react["default"].createElement(Row, null, _react["default"].createElement(Col, {
+        span: 12
+      }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_button["default"], {
+        type: "primary",
+        onClick: this.handleSubmit.bind(this)
+      }, "\u63D0\u4EA4"))))));
+    }
+  }]);
+  return Demo2;
+}(_react["default"].Component);
+
+var Demo3 =
+/*#__PURE__*/
+function (_React$Component3) {
+  (0, _inherits2["default"])(Demo3, _React$Component3);
+
+  function Demo3(props) {
+    var _this5;
+
+    (0, _classCallCheck2["default"])(this, Demo3);
+    _this5 = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Demo3).call(this, props));
+    _this5.form = _react["default"].createRef();
+    _this5.state = {
+      form: {
+        name: '',
+        region: '',
+        count: ''
+      },
+      checkedIndex: -1
+    };
+    return _this5;
+  }
+
+  (0, _createClass2["default"])(Demo3, [{
+    key: "handleSubmit",
+    value: function handleSubmit() {
+      var _this6 = this;
+
+      this.form.current.validate(function (valid) {
+        if (valid) {
+          alert('submit');
+        } else {
+          return false;
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var Row = _grid["default"].Row;
+      var Col = _grid["default"].Col;
+      var form = this.state.form;
+      return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        ref: this.form,
+        model: form,
+        labelWidth: "80"
+      }, _react["default"].createElement(Row, null, _react["default"].createElement(Col, {
+        span: 12
+      }, _react["default"].createElement(_index["default"].Item, {
+        label: "\u540D\u79F0",
+        prop: "name"
+      }, _react["default"].createElement(_input["default"], {
+        value: form.name,
+        placeholder: 'name'
+      })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_button["default"], {
+        type: "primary",
+        onClick: this.handleSubmit.bind(this)
+      }, "\u63D0\u4EA4"))))));
+    }
+  }]);
+  return Demo3;
+}(_react["default"].Component);
+
+describe('Form', function () {
+  it('should have the correct placement', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Item, {
+      label: "\u8D26\u53F7",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      placeholder: '账号'
+    })), _react["default"].createElement(_index["default"].Item, {
+      label: "\u5BC6\u7801",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      type: "password",
+      placeholder: '密码'
+    }))));
+    expect(wrapper.find('.hi-form--line')).toHaveLength(0);
+    wrapper.setProps({
+      placement: 'vertical'
+    });
+    expect(wrapper.find('.hi-form--line')).toHaveLength(0);
+    wrapper.setProps({
+      placement: 'horizontal'
+    });
+    expect(wrapper.find('.hi-form--inline')).toHaveLength(1);
+    wrapper.unmount();
+  });
+  it('should align the label by labelPlacement', function () {
+    ;
+    ['left', 'right', 'top'].forEach(function (labelPlacement) {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        labelPlacement: labelPlacement
+      }, _react["default"].createElement(_index["default"].Item, {
+        label: "\u8D26\u53F7",
+        labelWidth: "50"
+      }, _react["default"].createElement(_input["default"], {
+        placeholder: '账号'
+      })), _react["default"].createElement(_index["default"].Item, {
+        label: "\u5BC6\u7801",
+        labelWidth: "50"
+      }, _react["default"].createElement(_input["default"], {
+        type: "password",
+        placeholder: '密码'
+      }))));
+      expect(wrapper.find(".hi-form--label--".concat(labelPlacement))).toHaveLength(1);
+      var wrapperLegacy = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        labelPositon: labelPlacement
+      }, _react["default"].createElement(_index["default"].Item, {
+        label: "\u8D26\u53F7",
+        labelWidth: "50"
+      }, _react["default"].createElement(_input["default"], {
+        placeholder: '账号'
+      })), _react["default"].createElement(_index["default"].Item, {
+        label: "\u5BC6\u7801",
+        labelWidth: "50"
+      }, _react["default"].createElement(_input["default"], {
+        type: "password",
+        placeholder: '密码'
+      })))); // expect(wrapperLegacy.find(`.hi-form--label--${labelPlacement}`)).toHaveLength(1)
+
+      wrapper.unmount();
+      wrapperLegacy.unmount();
+    });
+  });
+  it('should have the label width', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Item, {
+      label: "\u8D26\u53F7",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      placeholder: '账号'
+    })), _react["default"].createElement(_index["default"].Item, {
+      label: "\u5BC6\u7801",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      type: "password",
+      placeholder: '密码'
+    }))));
+    expect(wrapper.find('label.hi-form-item__label').map(function (label) {
+      return label.prop('style').width;
+    })).toEqual([50, 50]);
+    wrapper.unmount();
+  });
+  it('should show colon', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Item, {
+      label: "\u8D26\u53F7",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      placeholder: '账号'
+    })), _react["default"].createElement(_index["default"].Item, {
+      label: "\u5BC6\u7801",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      type: "password",
+      placeholder: '密码'
+    }))));
+    expect(wrapper.find('label.hi-form-item__label').map(function (label) {
+      return label.text();
+    })).toEqual(['账号：', '密码：']);
+    wrapper.setProps({
+      showColon: false
+    });
+    expect(wrapper.find('label.hi-form-item__label').map(function (label) {
+      return label.text();
+    })).toEqual(['账号', '密码']);
+    wrapper.unmount();
+  });
+  it('should field has colon when field showColon is true and form showColon is false', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+      showColon: false
+    }, _react["default"].createElement(_index["default"].Item, {
+      label: "\u8D26\u53F7",
+      labelWidth: "50",
+      showColon: true
+    }, _react["default"].createElement(_input["default"], {
+      placeholder: '账号'
+    })), _react["default"].createElement(_index["default"].Item, {
+      label: "\u5BC6\u7801",
+      labelWidth: "50"
+    }, _react["default"].createElement(_input["default"], {
+      type: "password",
+      placeholder: '密码'
+    }))));
+    expect(wrapper.find('label.hi-form-item__label').map(function (label) {
+      return label.text();
+    })).toEqual(['账号：', '密码']);
+    wrapper.unmount();
+  });
+  it('should validate require field', function () {
+    jest.useFakeTimers();
+    var localeDatas = {
+      form: {
+        colon: '：'
+      }
+    };
+    var blurCb = jest.fn();
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Form2["default"], {
+      rules: {
+        name: {
+          required: true,
+          message: '请输入名称',
+          trigger: 'onChange'
+        }
+      },
+      localeDatas: localeDatas,
+      model: {
+        name: ''
+      }
+    }, _react["default"].createElement(_Item["default"], {
+      label: "\u540D\u79F0",
+      field: "name"
+    }, _react["default"].createElement(_input["default"], {
+      placeholder: "name",
+      onChange: function onChange(e) {
+        wrapper.setProps({
+          model: {
+            name: e.target.value
+          }
+        });
+      },
+      onBlur: blurCb
+    }))));
+    var cb = jest.fn();
+    wrapper.instance().validate(cb);
+    expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称');
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'hiui'
+      }
+    });
+    jest.runAllTimers();
+    wrapper.instance().validate(cb);
+    expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('');
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: ''
+      }
+    });
+    jest.runAllTimers();
+    wrapper.find('input').simulate('blur');
+    jest.runAllTimers();
+    expect(blurCb).toHaveBeenCalled();
+    expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称');
+    wrapper.unmount();
+    jest.useRealTimers();
+  });
+  it('should validate single field', function () {
+    jest.useFakeTimers();
+    var localeDatas = {
+      form: {
+        colon: '：'
+      }
+    };
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Form2["default"], {
+      rules: {
+        name: {
+          required: true,
+          message: '请输入名称',
+          trigger: 'onChange'
+        }
+      },
+      localeDatas: localeDatas,
+      model: {
+        name: ''
+      }
+    }, _react["default"].createElement(_Item["default"], {
+      label: "\u540D\u79F0",
+      field: "name"
+    }, _react["default"].createElement(_input["default"], {
+      placeholder: "name",
+      onChange: function onChange(e) {
+        wrapper.setProps({
+          model: {
+            name: e.target.value
+          }
+        });
+      },
+      onBlur: jest.fn()
+    }))));
+    var cb = jest.fn();
+    wrapper.instance().validateField('name', cb);
+    expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称');
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'hiui'
+      }
+    });
+    jest.runAllTimers();
+    wrapper.instance().validate(cb);
+    expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('');
+    expect(function () {
+      return wrapper.instance().validateField('errorField', cb);
+    }).toThrow();
+    wrapper.unmount();
+    jest.useRealTimers();
+  });
+  it('cancelSubmit resetValidates', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(Demo, null));
+    expect(wrapper.find('.hi-form')).toHaveLength(1);
+    wrapper.find('button').at(0).simulate('click');
+    expect(wrapper.find('.hi-form-item--msg__error').find('span')).toHaveLength(1);
+    wrapper.find('button').at(1).simulate('click');
+    expect(wrapper.find('.hi-form-item--msg__error').find('span')).toHaveLength(0);
+    wrapper.unmount();
+  });
+  it('validate When No item', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(Demo2, null));
+    expect(wrapper.find('.hi-form')).toHaveLength(1);
+    wrapper.find('button').at(0).simulate('click');
+    expect(wrapper.find('.hi-form-item--msg__error').find('span')).toHaveLength(0);
+    wrapper.unmount();
+  });
+  it('validate When No rules', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(Demo3, null));
+    expect(wrapper.find('.hi-form')).toHaveLength(1);
+    wrapper.find('button').at(0).simulate('click');
+    expect(wrapper.find('.hi-form-item--msg__error').find('span')).toHaveLength(0);
+    wrapper.unmount();
+  });
+});