qt-public-ui/lib/CategorySelect/__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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _enzyme = require("enzyme");
var _ = _interopRequireDefault(require(".."));
var _testUtils = require("react-dom/test-utils");
var _utils = require("../../../../../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; }
describe('CategorySelect', function () {
  var options = [{
    value: 'beijing',
    label: '北京',
    children: [{
      value: 'beijing',
      label: '北京'
    }]
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南'
    }, {
      value: 'qingdao',
      label: '青岛'
    }]
  }, {
    value: 'henan',
    label: '河南',
    children: [{
      value: 'zhenzhou',
      label: '郑州'
    }, {
      value: 'kaifeng',
      label: '开封'
    }]
  }, {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州'
    }, {
      value: 'jinhua',
      label: '金华'
    }, {
      value: 'wenzhou',
      label: '温州'
    }, {
      value: 'taizhou',
      label: '台州'
    }, {
      value: 'jiaxing',
      label: '嘉兴'
    }, {
      value: 'ningbo',
      label: '宁波'
    }, {
      value: 'shaoxing',
      label: '绍兴'
    }, {
      value: 'huzhou',
      label: '湖州'
    }, {
      value: 'quzhou',
      label: '衢州'
    }, {
      value: 'zhoushan',
      label: '舟山'
    }, {
      value: 'lishui',
      label: '丽水'
    }]
  }];
  var expectedVal = [{
    label: '北京',
    value: 'beijing'
  }, {
    label: '北京',
    value: 'beijing'
  }];
  var doSelect = function doSelect(wrapper) {
    // expand dropdown
    wrapper.find('.umui-select').first().simulate('click');
    wrapper.find('.umui-category-select-tabs-level-1 li').first().simulate('click');
    wrapper.find('.umui-level-2-item').first().simulate('click');
  };
  it('can be controllable component', function () {
    var valueState = null;
    var mockHandleChange = jest.fn(function (val) {
      return valueState = val;
    });
    var Demo = function Demo() {
      var _useState = (0, _react.useState)([]),
        _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
        value = _useState2[0],
        setValue = _useState2[1];
      var categorySelectProps = {
        options: options,
        onChange: function onChange(val) {
          mockHandleChange(val);
          setValue(val);
        },
        value: value
      };
      return /*#__PURE__*/_react["default"].createElement(_["default"], categorySelectProps);
    };
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
    doSelect(wrapper);
    expect(mockHandleChange).toHaveBeenCalled();
    expect(valueState).toEqual(expectedVal);
    wrapper.update();
    expect(wrapper.render()).toMatchSnapshot();
  });
  it('can be uncontrollable component', function () {
    var valueState = null;
    var mockHandleChange = jest.fn(function (val) {
      return valueState = val;
    });
    var defaultVal = [{
      value: 'zhejiang',
      label: '浙江'
    }, {
      value: 'hangzhou',
      label: '杭州'
    }];
    var Demo = function Demo() {
      var categorySelectProps = {
        options: options,
        onChange: function onChange(val) {
          mockHandleChange(val);
        },
        defaultValue: defaultVal
      };
      return /*#__PURE__*/_react["default"].createElement(_["default"], categorySelectProps);
    };
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(Demo, null));
    doSelect(wrapper);
    expect(mockHandleChange).toHaveBeenCalled();
    expect(valueState).toEqual(expectedVal);
    wrapper.update();
    expect(wrapper.render()).toMatchSnapshot();
  });
  describe('search', function () {
    it('can control display', function () {
      var withSearchWrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
        showSearch: true,
        options: options
      }));
      var withoutSearchWrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
        showSearch: false,
        options: options
      }));
      withSearchWrapper.find('.umui-select').first().simulate('click');
      expect(withSearchWrapper.find('.search-box').exists()).toBeTruthy();
      withoutSearchWrapper.find('.umui-select').first().simulate('click');
      expect(withoutSearchWrapper.find('.search-box').exists()).toBeFalsy();
    });
    it('can search options', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
      var wrapper, level2, searchInput;
      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
              showSearch: true,
              options: options
            }));
            wrapper.find('.umui-select').first().simulate('click');
            wrapper.find('.umui-category-select-tabs-level-1 li').at(1).simulate('click');
            level2 = wrapper.find('.umui-category-select-tabs-level-2');
            searchInput = level2.find('.search-box .umui-input-search .ant-input');
            _context2.next = 7;
            return (0, _testUtils.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
              return _regenerator["default"].wrap(function _callee$(_context) {
                while (1) switch (_context.prev = _context.next) {
                  case 0:
                    searchInput.simulate('change', {
                      target: {
                        value: '济南'
                      }
                    });
                    _context.next = 3;
                    return (0, _utils.sleep)(1000);
                  case 3:
                  case "end":
                    return _context.stop();
                }
              }, _callee);
            })));
          case 7:
            wrapper.update();
            expect(level2.render()).toMatchSnapshot();
          case 9:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    })));
  });
  it('can be disabled', function () {
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
      disabled: true,
      options: options
    }));
    // expand dropdown
    wrapper.find('.umui-select').first().simulate('click');
    expect(wrapper.find('.ant-select-dropdown').exists()).toBeFalsy();
  });
  it('can render footer properly', function () {
    var Footer = /*#__PURE__*/_react["default"].createElement("div", null, "This is Footer");
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
      options: options,
      footer: Footer
    }));
    wrapper.find('.umui-select').first().simulate('click');
    var footerWrapper = wrapper.find('.umui-category-select-footer');
    expect(footerWrapper.render()).toMatchSnapshot();
  });
  it('can render extra properly', function () {
    var defaultVal = [{
      value: 'zhejiang',
      label: '浙江'
    }, {
      value: 'hangzhou',
      label: '杭州'
    }];
    var ExtraRender = function ExtraRender(values) {
      var _values = (0, _slicedToArray2["default"])(values, 2),
        top = _values[0],
        second = _values[1];
      if (!second) return null;
      return /*#__PURE__*/_react["default"].createElement("div", null, top.label, "-", second.label);
    };
    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
      options: options,
      value: defaultVal,
      extraRender: ExtraRender
    }));
    wrapper.find('.umui-select').first().simulate('click');
    var extraWrapper = wrapper.find('.umui-category-select-custom-template');
    expect(extraWrapper.render()).toMatchSnapshot();
  });
});