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

新设计规范下业务组件库

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _extends from "@babel/runtime/helpers/esm/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useRef, useState } from 'react';
import { mount } from 'enzyme';
import { Form, Input, Select, Button } from 'antd';
import DynamicList from '../';
import { sleep } from '../../../../../test/utils';
import { act } from 'react-dom/test-utils';
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.createElement(Input, _extends({}, 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.createElement(Select, _extends({}, props, {
      placeholder: "\u9009\u62E9\u53C2\u6570\u7C7B\u578B"
    }), option_list.map(function (it) {
      return /*#__PURE__*/React.createElement(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(wrapper, index, value, executeMockTimer) {
      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
        while (1) switch (_context4.prev = _context4.next) {
          case 0:
            wrapper.find(Input).at(index).simulate('change', {
              target: {
                value: value
              }
            });
            _context4.next = 3;
            return sleep(200);
          case 3:
            if (!executeMockTimer) {
              _context4.next = 7;
              break;
            }
            act(function () {
              jest.runAllTimers();
              wrapper.update();
            });
            _context4.next = 7;
            return sleep(1);
          case 7:
          case "end":
            return _context4.stop();
        }
      }, _callee4);
    }));
    return _change.apply(this, arguments);
  }
  it('Custom check', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
    var Demo, wrapper;
    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) switch (_context2.prev = _context2.next) {
        case 0:
          Demo = function Demo() {
            var ref = useRef();
            var _useState = useState([{}]),
              value = _useState[0],
              setValue = _useState[1];
            var asyncValidator = function asyncValidator(value) {
              if (value === void 0) {
                value = '';
              }
              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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, index) {
                  return _regeneratorRuntime.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;
            };
            useEffect(function () {
              setValue(mock);
            }, []);
            return /*#__PURE__*/React.createElement("div", {
              style: {
                width: 800
              }
            }, /*#__PURE__*/React.createElement(DynamicList, {
              ref: ref,
              columns: columns,
              value: value,
              onChange: setValue
            }), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(Demo, null));
          wrapper.find(Button).last().simulate('click');
          _context2.next = 5;
          return 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(Button).last().simulate('click');
          _context2.next = 12;
          return 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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
    var onFinish, Demo, wrapper;
    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) switch (_context3.prev = _context3.next) {
        case 0:
          Demo = function Demo() {
            var ref_form = useRef();
            var _Form$useForm = Form.useForm(),
              form = _Form$useForm[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);
              });
            });
            useEffect(function () {
              var setFieldsValue = form.setFieldsValue;
              setTimeout(function () {
                setFieldsValue({
                  url: 'http://www.umeng.com',
                  params: mock2
                });
              }, 100);
            }, []);
            return /*#__PURE__*/React.createElement(Form, {
              className: "wrap-from",
              form: form,
              layout: "horizontal",
              onFinish: onFinish
            }, /*#__PURE__*/React.createElement(Form.Item, {
              name: "url",
              label: "URL",
              rules: [{
                required: true,
                message: 'URL is required'
              }]
            }, /*#__PURE__*/React.createElement(Input, {
              placeholder: "URL"
            })), /*#__PURE__*/React.createElement(Form.Item, {
              label: "Params",
              name: "params",
              initialValue: [{}],
              required: true
            }, /*#__PURE__*/React.createElement(DynamicList, {
              ref: ref_form,
              initialRow: {
                name: '',
                type: ''
              },
              columns: columns
            })), /*#__PURE__*/React.createElement(Form.Item, {
              wrapperCol: {
                offset: 4
              }
            }, /*#__PURE__*/React.createElement(Button, {
              className: "test-submit",
              htmlType: "submit",
              type: "primary"
            }, "\u63D0\u4EA4")));
          };
          wrapper = mount( /*#__PURE__*/React.createElement(Demo, null));
          _context3.next = 4;
          return 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 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.createElement("div", {
        style: {
          width: 1000
        }
      }, /*#__PURE__*/React.createElement(DynamicList, {
        max: 4,
        min: 2,
        columns: [].concat(columns),
        value: [].concat(mock_status),
        addText: "\u6DFB\u52A0\u53C2\u6570"
      }));
    };
    var wrapper = mount( /*#__PURE__*/React.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(Button).simulate('click');
    expect(wrapper.find('.ant-row.umui-dynamic-row').length).toBe(4);
    expect(wrapper.find(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.createElement(DynamicList, {
        disabled: true,
        columns: columns,
        value: [].concat(mock_status)
      });
    };
    var wrapper = mount( /*#__PURE__*/React.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.createElement(DynamicList, {
        columns: columns,
        value: [].concat(mock_status)
      });
    };
    var wrapper = mount( /*#__PURE__*/React.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();
  });
});