qt-public-ui/lib/DynamicList/__tests__/index.test.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _enzyme = require("enzyme");
var _antd = require("antd");
var _ = _interopRequireDefault(require("../"));
var _utils = require("../../../../../test/utils");
var _testUtils = require("react-dom/test-utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var option_list = ['java.lang.Boolean', 'boolean', 'java.lang.Integer', 'int', 'short'];
var columns = [{
  key: 'name',
  options: {
    rules: [{
      required: true,
      message: 'name is required'
    }]
  },
  span: 12,
  render: function render(props) {
    return /*#__PURE__*/_react["default"].createElement(_antd.Input, (0, _extends2["default"])({}, props, {
      placeholder: "\u53C2\u6570\u540D"
    }));
  }
}, {
  span: 1,
  render: function render() {
    return '的';
  }
}, {
  key: 'type',
  options: {
    rules: [{
      required: true,
      message: 'type is required'
    }]
  },
  span: 11,
  render: function render(props) {
    return /*#__PURE__*/_react["default"].createElement(_antd.Select, (0, _extends2["default"])({}, props, {
      placeholder: "\u9009\u62E9\u53C2\u6570\u7C7B\u578B"
    }), option_list.map(function (it) {
      return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
        key: it,
        value: it
      }, it);
    }));
  }
}];
var mock = [{
  name: 'xxx1',
  type: 'boolean'
}, {
  name: 'xxx2',
  type: 'int'
}, {
  name: 'xxx3',
  type: 'short'
}];
var mock2 = [{
  name: 'aaa',
  type: 'boolean'
}, {
  name: 'bbb',
  type: 'int'
}, {
  name: 'cccc',
  type: 'short'
}];
describe('DynamicList', function () {
  function change(_x, _x2, _x3, _x4) {
    return _change.apply(this, arguments);
  }
  function _change() {
    _change = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(wrapper, index, value, executeMockTimer) {
      return _regenerator["default"].wrap(function _callee4$(_context4) {
        while (1) switch (_context4.prev = _context4.next) {
          case 0:
            wrapper.find(_antd.Input).at(index).simulate('change', {
              target: {
                value: value
              }
            });
            _context4.next = 3;
            return (0, _utils.sleep)(200);
          case 3:
            if (!executeMockTimer) {
              _context4.next = 7;
              break;
            }
            (0, _testUtils.act)(function () {
              jest.runAllTimers();
              wrapper.update();
            });
            _context4.next = 7;
            return (0, _utils.sleep)(1);
          case 7:
          case "end":
            return _context4.stop();
        }
      }, _callee4);
    }));
    return _change.apply(this, arguments);
  }
  it('Custom check', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
    var Demo, wrapper;
    return _regenerator["default"].wrap(function _callee2$(_context2) {
      while (1) switch (_context2.prev = _context2.next) {
        case 0:
          Demo = function Demo() {
            var ref = (0, _react.useRef)();
            var _useState = (0, _react.useState)([{}]),
              _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
              value = _useState2[0],
              setValue = _useState2[1];
            var asyncValidator = function asyncValidator() {
              var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
              return new Promise(function (resolve, reject) {
                setTimeout(function () {
                  if (/^x/.test(value)) reject('禁止以x开头');else resolve(true);
                }, 100);
              });
            };
            var handleAsyncValidation = function handleAsyncValidation(data) {
              data.forEach( /*#__PURE__*/function () {
                var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(item, index) {
                  return _regenerator["default"].wrap(function _callee$(_context) {
                    while (1) switch (_context.prev = _context.next) {
                      case 0:
                        asyncValidator(item.name)["catch"](function (err) {
                          ref.current.setError({
                            index: index,
                            name: 'name',
                            message: err
                          });
                        });
                      case 1:
                      case "end":
                        return _context.stop();
                    }
                  }, _callee);
                }));
                return function (_x5, _x6) {
                  return _ref2.apply(this, arguments);
                };
              }());
              return data;
            };
            (0, _react.useEffect)(function () {
              setValue(mock);
            }, []);
            return /*#__PURE__*/_react["default"].createElement("div", {
              style: {
                width: 800
              }
            }, /*#__PURE__*/_react["default"].createElement(_["default"], {
              ref: ref,
              columns: columns,
              value: value,
              onChange: setValue
            }), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
              onClick: function onClick() {
                var _ref$current;
                (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.validate().then(handleAsyncValidation)["catch"](function (err) {
                  return console.log(err);
                });
              },
              type: "primary"
            }, "\u624B\u52A8\u6821\u9A8C"));
          };
          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
          wrapper.find(_antd.Button).last().simulate('click');
          _context2.next = 5;
          return (0, _utils.sleep)(401);
        case 5:
          wrapper.update(); // 不然 expect(wrapper.find({role: 'alert'}).length).toBe(3); 还未跟新
          expect(wrapper.find({
            role: 'alert'
          }).length).toBe(3);
          _context2.next = 9;
          return change(wrapper, 0, 'fwef', false);
        case 9:
          wrapper.find(_antd.Button).last().simulate('click');
          _context2.next = 12;
          return (0, _utils.sleep)(501);
        case 12:
          wrapper.update(); // 不然 expect(wrapper.find({role: 'alert'}).length).toBe(3); 还未跟新
          expect(wrapper.find({
            role: 'alert'
          }).length).toBe(2);
        case 14:
        case "end":
          return _context2.stop();
      }
    }, _callee2);
  })));
  it('Get the correct value in the form', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
    var onFinish, Demo, wrapper;
    return _regenerator["default"].wrap(function _callee3$(_context3) {
      while (1) switch (_context3.prev = _context3.next) {
        case 0:
          Demo = function Demo() {
            var ref_form = (0, _react.useRef)();
            var _Form$useForm = _antd.Form.useForm(),
              _Form$useForm2 = (0, _slicedToArray2["default"])(_Form$useForm, 1),
              form = _Form$useForm2[0];
            onFinish = jest.fn(function (values) {
              ref_form === null || ref_form === void 0 ? void 0 : ref_form.current.validate().then(function () {
                console.log('Received values of form:', values);
              });
            });
            (0, _react.useEffect)(function () {
              var setFieldsValue = form.setFieldsValue;
              setTimeout(function () {
                setFieldsValue({
                  url: 'http://www.umeng.com',
                  params: mock2
                });
              }, 100);
            }, []);
            return /*#__PURE__*/_react["default"].createElement(_antd.Form, {
              className: "wrap-from",
              form: form,
              layout: "horizontal",
              onFinish: onFinish
            }, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
              name: "url",
              label: "URL",
              rules: [{
                required: true,
                message: 'URL is required'
              }]
            }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
              placeholder: "URL"
            })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
              label: "Params",
              name: "params",
              initialValue: [{}],
              required: true
            }, /*#__PURE__*/_react["default"].createElement(_["default"], {
              ref: ref_form,
              initialRow: {
                name: '',
                type: ''
              },
              columns: columns
            })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
              wrapperCol: {
                offset: 4
              }
            }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
              className: "test-submit",
              htmlType: "submit",
              type: "primary"
            }, "\u63D0\u4EA4")));
          };
          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
          _context3.next = 4;
          return (0, _utils.sleep)(200);
        case 4:
          // const mockFn = jest.fn(onFinish);

          // expect(wrapper.render()).toMatchSnapshot();

          // const spy = jest.spyOn

          // console.log( wrapper.find('.test-submit'))

          // wrapper.find({ htmlType: 'submit' }).simulate('click');

          wrapper.update();
          wrapper.find({
            className: 'wrap-from'
          }).simulate('submit');
          _context3.next = 8;
          return (0, _utils.sleep)(50);
        case 8:
          // onFinish()
          expect(onFinish).toHaveBeenCalledWith({
            url: 'http://www.umeng.com',
            params: [{
              name: 'aaa',
              type: 'boolean'
            }, {
              name: 'bbb',
              type: 'int'
            }, {
              name: 'cccc',
              type: 'short'
            }]
          });
        case 9:
        case "end":
          return _context3.stop();
      }
    }, _callee3);
  })));
  it('Add max & Sub min', function () {
    var mock_status = [{
      name: 'xxx',
      type: 'boolean',
      disabled: true,
      // 行禁用
      desc: '预置：'
    }, {
      name: 'xxx2',
      type: 'int',
      withoutDel: true,
      // 禁止删除行
      desc: '预置：'
    }, {
      name: 'xxx3',
      type: 'short',
      desc: '自定义：'
    }];
    var Demo = function Demo() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          width: 1000
        }
      }, /*#__PURE__*/_react["default"].createElement(_["default"], {
        max: 4,
        min: 2,
        columns: [].concat(columns),
        value: [].concat(mock_status),
        addText: "\u6DFB\u52A0\u53C2\u6570"
      }));
    };
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
    expect(wrapper.find('.ant-row.umui-dynamic-row').length).toBe(3); // 初始3个
    expect(wrapper.find('.umui-dynamic-delete-float').at(1).children().length).toBe(0); // 第二个不能删除
    // expect(wrapper.find('.umui-dynamic-delete-float').at(1).children);

    //add 不超过max
    wrapper.find(_antd.Button).simulate('click');
    expect(wrapper.find('.ant-row.umui-dynamic-row').length).toBe(4);
    expect(wrapper.find(_antd.Button).length).toBe(0);

    // sub 不小于min
    wrapper.find('.umui-dynamic-delete').last().simulate('click'); //删除一个
    expect(wrapper.find('.ant-row.umui-dynamic-row').length).toBe(3);
    wrapper.find('.umui-dynamic-delete').last().simulate('click'); //删除一个
    expect(wrapper.find('.umui-dynamic-delete').length).toBe(0); //  

    // console.log(213123123,wrapper.find('.umui-dynamic-delete-float').at(0).children().html())

    wrapper.unmount();
  });
  it('DynamicList disabled', function () {
    var mock_status = [{
      name: 'xxx',
      type: 'boolean',
      desc: '预置：'
    }, {
      name: 'xxx2',
      type: 'int',
      desc: '预置：'
    }, {
      name: 'xxx3',
      type: 'short',
      desc: '自定义：'
    }];
    var Demo = function Demo() {
      return /*#__PURE__*/_react["default"].createElement(_["default"], {
        disabled: true,
        columns: columns,
        value: [].concat(mock_status)
      });
    };
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
    wrapper.find('.ant-input').map(function (node) {
      expect(node.hasClass('ant-input-disabled')).toBeTruthy();
    });
    wrapper.find('.ant-select').map(function (node) {
      expect(node.hasClass('ant-select-disabled')).toBeTruthy();
    });
  });
  it('Single line disabled', function () {
    var mock_status = [{
      name: 'xxx',
      type: 'boolean',
      disabled: true,
      // 行禁用
      desc: '预置：'
    }, {
      name: 'xxx2',
      type: 'int',
      desc: '预置：'
    }, {
      name: 'xxx3',
      type: 'short',
      desc: '自定义：'
    }];
    var Demo = function Demo() {
      return /*#__PURE__*/_react["default"].createElement(_["default"], {
        columns: columns,
        value: [].concat(mock_status)
      });
    };
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
    expect(wrapper.find('.ant-input').first().hasClass('ant-input-disabled')).toBeTruthy();
    expect(wrapper.find('.ant-select').first().hasClass('ant-select-disabled')).toBeTruthy();
  });
});