zarm/lib/search-bar/__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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));

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

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

describe('SearchBar', function () {
  afterEach(function () {
    jest.restoreAllMocks();
    jest.useRealTimers();
  });
  describe('snapshot', function () {
    it('renders correctly', function () {
      var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
        shape: "round",
        cancelText: "\u641C\u7D22",
        placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57"
      })),
          container = _render.container;

      expect(container).toMatchSnapshot();
    });
    it('renders defaultValue correctly', function () {
      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
        shape: "round",
        cancelText: "\u641C\u7D22",
        placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
        defaultValue: "\u641C\u7D22\u5173\u952E\u5B57"
      })),
          container = _render2.container; // wrapper.setProps({ defaultValue: '搜索关键字' });


      expect(container).toMatchSnapshot();
    });
    it('renders showCancel correctly', function () {
      var onChange = jest.fn();

      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
        shape: "round",
        placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
        onChange: onChange,
        value: "\u641C\u7D22",
        showCancel: true
      })),
          container = _render3.container;

      expect(container).toMatchSnapshot();
    });
  });
  it('onCancel called correctly', function () {
    var onCancel = jest.fn();

    var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      shape: "round",
      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
      onCancel: onCancel,
      showCancel: true
    })),
        container = _render4.container;

    var input = container.querySelector('input[type="search"]');

    _react.fireEvent.focus(input);

    var cancel = container.querySelector('.za-search-bar__cancel');

    _react.fireEvent.click(cancel);

    expect(onCancel).toHaveBeenCalled();
  });
  it('onSubmit called correctly', function () {
    var onSubmit = jest.fn();

    var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      shape: "round",
      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
      onSubmit: onSubmit
    })),
        container = _render5.container;

    var input = container.querySelector('input[type="search"]');

    _react.fireEvent.change(input, {
      target: {
        value: 'My new value'
      }
    });

    var form = container.querySelector('.za-search-bar__form');

    _react.fireEvent.submit(form);

    expect(onSubmit).toHaveBeenCalled();
  });
  it('onFocus called correctly', function () {
    var onFocus = jest.fn();

    var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      shape: "round",
      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
      onFocus: onFocus
    })),
        container = _render6.container;

    var el = container.querySelector('input[type="search"]');

    _react.fireEvent.focus(el);

    expect(onFocus).toBeCalled();
  });
  it('onChange called correctly', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var onChange, _render7, container, input;

    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            onChange = jest.fn();
            _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
              shape: "round",
              placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
              onChange: onChange
            })), container = _render7.container;
            input = container.querySelector('input[type="search"]');
            _context.next = 5;
            return _userEvent.default.type(input, '测试');

          case 5:
            expect(onChange).toBeCalled();

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