zarm/lib/select/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@testing-library/react");

var _index = _interopRequireDefault(require("../index"));

describe('Select', function () {
  // const fakeTimers = () => {
  //   performance.timing = () => {};
  // };
  // fakeTimers();
  it('Select', function () {
    var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      dataSource: [{
        value: '1',
        label: '选项一'
      }, {
        value: '2',
        label: '选项二'
      }]
    })),
        container = _render.container;

    expect(container).toMatchSnapshot();
  });
  it('Select disabled', function () {
    var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      disabled: true,
      dataSource: [{
        value: '1',
        label: '选项一'
      }, {
        value: '2',
        label: '选项二'
      }]
    })),
        container = _render2.container;

    var select = container.querySelector('.za-select');

    _react2.fireEvent.click(select);

    expect(container).toMatchSnapshot();
  });
  it('render defaultValue correctly ', function () {
    var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      dataSource: [{
        value: '1',
        label: '选项一'
      }, {
        value: '2',
        label: '选项二'
      }],
      defaultValue: "2"
    })),
        container = _render3.container;

    expect(container).toMatchSnapshot();
  });
  it('Cascader Select', function () {
    // jest.useFakeTimers();
    var _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      value: ['1', '12'],
      dataSource: [{
        value: '1',
        label: '选项一',
        children: [{
          value: '11',
          label: '选项一'
        }, {
          value: '12',
          label: '选项二'
        }]
      }, {
        value: '2',
        label: '选项一',
        children: [{
          value: '21',
          label: '选项一'
        }, {
          value: '22',
          label: '选项二'
        }]
      }]
    })),
        container = _render4.container;

    expect(container).toMatchSnapshot(); // wrapper.setProps({ value: ['1', '12'] });
    // jest.runAllTimers();
    // wrapper.unmount();
  }); // it('Cascader Select init value', () => {
  //   // jest.useFakeTimers();
  //   const wrapper = (
  //     <Select
  //       dataSource={[
  //         {
  //           value: '1',
  //           label: '选项一',
  //           children: [
  //             { value: '11', label: '选项一' },
  //             { value: '12', label: '选项二' },
  //           ],
  //         },
  //         {
  //           value: '2',
  //           label: '选项一',
  //           children: [
  //             { value: '21', label: '选项一' },
  //             { value: '22', label: '选项二' },
  //           ],
  //         },
  //       ]}
  //       value={['1', '12']}
  //       displayAddon="-"
  //     />,
  //   );
  //   expect(toJson(wrapper)).toMatchSnapshot();
  // });
  // it('receive new dataSource', () => {
  //   const wrapper = shallow(
  //     <Select
  //       dataSource={[
  //         { value: '1', label: '选项一' },
  //         { value: '2', label: '选项二' },
  //       ]}
  //     />,
  //   );
  //   wrapper.setProps({
  //     dataSource: [
  //       { value: 'a', label: '选项一' },
  //       { value: 'b', label: '选项二' },
  //       { value: 'c', label: '选项三' },
  //     ],
  //   });
  // });
  // it('receive new value', () => {
  //   const wrapper = shallow(
  //     <Select
  //       dataSource={[
  //         { value: '1', label: '选项一' },
  //         { value: '2', label: '选项二' },
  //       ]}
  //     />,
  //   );
  //   wrapper.setProps({ value: '1' });
  // });
  // it('receive new cascader dataSource', () => {
  //   const wrapper = shallow(
  //     <Select
  //       dataSource={[
  //         {
  //           value: '1',
  //           label: '选项一',
  //           children: [
  //             { value: '11', label: '选项一' },
  //             { value: '12', label: '选项二' },
  //           ],
  //         },
  //         {
  //           value: '2',
  //           label: '选项一',
  //           children: [
  //             { value: '21', label: '选项一' },
  //             { value: '22', label: '选项二' },
  //           ],
  //         },
  //       ]}
  //     />,
  //   );
  //   wrapper.setProps({
  //     dataSource: [
  //       {
  //         value: '3',
  //         label: '选项一',
  //         children: [
  //           { value: '31', label: '选项一' },
  //           { value: '32', label: '选项二' },
  //         ],
  //       },
  //       {
  //         value: '4',
  //         label: '选项一',
  //         children: [
  //           { value: '41', label: '选项一' },
  //           { value: '42', label: '选项二' },
  //         ],
  //       },
  //     ],
  //   });
  // });

  it('should trigger onConfirm when press ok button', function () {
    var onConfirmFn = jest.fn();
    var onCancelFn = jest.fn();

    var _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      dataSource: [{
        value: '1',
        label: '选项一',
        children: [{
          value: '11',
          label: '选项一'
        }, {
          value: '12',
          label: '选项二'
        }]
      }, {
        value: '2',
        label: '选项一',
        children: [{
          value: '21',
          label: '选项一'
        }, {
          value: '22',
          label: '选项二'
        }]
      }],
      value: ['1', '12'],
      onConfirm: onConfirmFn,
      onCancel: onCancelFn
    })),
        container = _render5.container;

    _react2.fireEvent.click(container.querySelector('.za-select'));

    jest.useFakeTimers();

    _react2.fireEvent.click(document.body.querySelector('.za-picker__confirm'));

    jest.runAllTimers();
    expect(onConfirmFn).toBeCalled();
    expect(onCancelFn).not.toBeCalled();
  });
  it('should trigger onCancel when press cancel button', function () {
    var onConfirmFn = jest.fn();
    var onCancelFn = jest.fn();

    var _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      dataSource: [{
        value: '1',
        label: '选项一',
        children: [{
          value: '11',
          label: '选项一'
        }, {
          value: '12',
          label: '选项二'
        }]
      }, {
        value: '2',
        label: '选项一',
        children: [{
          value: '21',
          label: '选项一'
        }, {
          value: '22',
          label: '选项二'
        }]
      }],
      defaultValue: ['1', '12'],
      onConfirm: onConfirmFn,
      onCancel: onCancelFn
    })),
        container = _render6.container;

    _react2.fireEvent.click(container.querySelector('.za-select'));

    jest.useFakeTimers();

    _react2.fireEvent.click(document.body.querySelector('.za-picker__cancel'));

    expect(onCancelFn).toBeCalled();
    expect(onConfirmFn).not.toBeCalled();
  }); // it('should trigger onMaskClick when click mask', () => {
  //   const onConfirmFn = jest.fn();
  //   const onMaskClick = jest.fn();
  //   const wrapper = mount(
  //     <Select
  //       dataSource={[
  //         {
  //           value: '1',
  //           label: '选项一',
  //           children: [
  //             { value: '11', label: '选项一' },
  //             { value: '12', label: '选项二' },
  //           ],
  //         },
  //         {
  //           value: '2',
  //           label: '选项一',
  //           children: [
  //             { value: '21', label: '选项一' },
  //             { value: '22', label: '选项二' },
  //           ],
  //         },
  //       ]}
  //       visible
  //       defaultValue={['1', '12']}
  //       onConfirm={onConfirmFn}
  //       onMaskClick={onMaskClick}
  //     />
  //   );
  //   wrapper.find('.za-mask').simulate('click');
  //   expect(onMaskClick).toBeCalled();
  // });
});