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

新设计规范下业务组件库

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState } from 'react';
import { mount } from 'enzyme';
import CategorySelect from '..';
import { act } from 'react-dom/test-utils';
import { sleep } from '../../../../../test/utils';
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 = useState([]),
        value = _useState[0],
        setValue = _useState[1];
      var categorySelectProps = {
        options: options,
        onChange: function onChange(val) {
          mockHandleChange(val);
          setValue(val);
        },
        value: value
      };
      return /*#__PURE__*/React.createElement(CategorySelect, categorySelectProps);
    };
    var wrapper = mount( /*#__PURE__*/React.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.createElement(CategorySelect, categorySelectProps);
    };
    var wrapper = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.createElement(CategorySelect, {
        showSearch: true,
        options: options
      }));
      var withoutSearchWrapper = mount( /*#__PURE__*/React.createElement(CategorySelect, {
        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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      var wrapper, level2, searchInput;
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            wrapper = mount( /*#__PURE__*/React.createElement(CategorySelect, {
              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 act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
              return _regeneratorRuntime.wrap(function _callee$(_context) {
                while (1) switch (_context.prev = _context.next) {
                  case 0:
                    searchInput.simulate('change', {
                      target: {
                        value: '济南'
                      }
                    });
                    _context.next = 3;
                    return 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 = mount( /*#__PURE__*/React.createElement(CategorySelect, {
      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.createElement("div", null, "This is Footer");
    var wrapper = mount( /*#__PURE__*/React.createElement(CategorySelect, {
      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 top = values[0],
        second = values[1];
      if (!second) return null;
      return /*#__PURE__*/React.createElement("div", null, top.label, "-", second.label);
    };
    var wrapper = mount( /*#__PURE__*/React.createElement(CategorySelect, {
      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();
  });
});