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

基于 React 的移动端UI库

"use strict";

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

var _button = _interopRequireDefault(require("../../button"));

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

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

    expect(container).toMatchSnapshot();
  });
  it('render custom label', function () {
    var datSource = [{
      code: '1',
      name: '北京市',
      children: [{
        code: '11',
        name: '海淀区'
      }, {
        code: '12',
        name: '西城区'
      }]
    }, {
      code: '2',
      name: '上海市',
      children: [{
        code: '21',
        name: '黄埔区'
      }, {
        code: '22',
        name: '虹口区'
      }]
    }];

    var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      dataSource: datSource,
      fieldNames: {
        label: 'name',
        value: 'code'
      },
      itemRender: function itemRender(data) {
        return data.name;
      }
    })),
        container = _render2.container;

    expect(container).toMatchSnapshot();
  });
  it('should trigger onConfirm when press ok button', function () {
    jest.useFakeTimers();
    var onConfirmFn = jest.fn();
    (0, _react.render)( /*#__PURE__*/_react2.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: '选项二'
        }]
      }],
      visible: true,
      value: ['1', '12'],
      onConfirm: onConfirmFn
    }));
    var confirm = document.body.getElementsByClassName('za-picker__confirm')[0];

    _react.fireEvent.click(confirm);

    jest.runAllTimers();
    expect(onConfirmFn).toBeCalled();
  });
  it('should trigger onCancel when press cancel button', function () {
    var onCancelFn = jest.fn();
    (0, _react.render)( /*#__PURE__*/_react2.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: '选项二'
        }]
      }],
      visible: true,
      defaultValue: ['1', '12'],
      onCancel: onCancelFn
    }));
    var cancel = document.body.getElementsByClassName('za-picker__cancel')[0];

    _react.fireEvent.click(cancel);

    expect(onCancelFn).toBeCalled();
  });
  test('imperative call onConfirm', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
    var onConfirm, onClick, button, confirm;
    return _regenerator.default.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            onConfirm = jest.fn();

            onClick = /*#__PURE__*/function () {
              var _ref2 = (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:
                        _context.next = 2;
                        return _index.default.prompt({
                          onConfirm: onConfirm,
                          dataSource: [{
                            value: '1',
                            label: '选项一'
                          }, {
                            value: '2',
                            label: '选项二'
                          }]
                        });

                      case 2:
                      case "end":
                        return _context.stop();
                    }
                  }
                }, _callee);
              }));

              return function onClick() {
                return _ref2.apply(this, arguments);
              };
            }();

            (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.default, {
              onClick: onClick
            }, "picker-prompt"));
            button = _react.screen.getByText('picker-prompt');

            _react.fireEvent.click(button);

            _context2.next = 7;
            return _react.screen.findByText('确定');

          case 7:
            confirm = _context2.sent;

            _react.fireEvent.click(confirm);

            expect(onConfirm).toBeCalled();

          case 10:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
  test('imperative call onCancel', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
    var onCancel, onClick, button, cancel;
    return _regenerator.default.wrap(function _callee4$(_context4) {
      while (1) {
        switch (_context4.prev = _context4.next) {
          case 0:
            onCancel = jest.fn();

            onClick = /*#__PURE__*/function () {
              var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
                return _regenerator.default.wrap(function _callee3$(_context3) {
                  while (1) {
                    switch (_context3.prev = _context3.next) {
                      case 0:
                        _context3.next = 2;
                        return _index.default.prompt({
                          onCancel: onCancel,
                          cancelText: 'cancel',
                          dataSource: [{
                            value: '1',
                            label: '选项一'
                          }, {
                            value: '2',
                            label: '选项二'
                          }]
                        });

                      case 2:
                      case "end":
                        return _context3.stop();
                    }
                  }
                }, _callee3);
              }));

              return function onClick() {
                return _ref4.apply(this, arguments);
              };
            }();

            (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.default, {
              onClick: onClick
            }, "picker-prompt"));
            button = _react.screen.getByText('picker-prompt');

            _react.fireEvent.click(button);

            _context4.next = 7;
            return _react.screen.findByText('cancel');

          case 7:
            cancel = _context4.sent;

            _react.fireEvent.click(cancel);

            expect(onCancel).toBeCalled();

          case 10:
          case "end":
            return _context4.stop();
        }
      }
    }, _callee4);
  })));
});