zarm/es/search-bar/__tests__/index.test.js

基于 React 的移动端UI库

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { fireEvent, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import SearchBar from '../index';
describe('SearchBar', function () {
  afterEach(function () {
    jest.restoreAllMocks();
    jest.useRealTimers();
  });
  describe('snapshot', function () {
    it('renders correctly', function () {
      var _render = render( /*#__PURE__*/React.createElement(SearchBar, {
        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 = render( /*#__PURE__*/React.createElement(SearchBar, {
        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 = render( /*#__PURE__*/React.createElement(SearchBar, {
        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 = render( /*#__PURE__*/React.createElement(SearchBar, {
      shape: "round",
      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
      onCancel: onCancel,
      showCancel: true
    })),
        container = _render4.container;

    var input = container.querySelector('input[type="search"]');
    fireEvent.focus(input);
    var cancel = container.querySelector('.za-search-bar__cancel');
    fireEvent.click(cancel);
    expect(onCancel).toHaveBeenCalled();
  });
  it('onSubmit called correctly', function () {
    var onSubmit = jest.fn();

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

    var input = container.querySelector('input[type="search"]');
    fireEvent.change(input, {
      target: {
        value: 'My new value'
      }
    });
    var form = container.querySelector('.za-search-bar__form');
    fireEvent.submit(form);
    expect(onSubmit).toHaveBeenCalled();
  });
  it('onFocus called correctly', function () {
    var onFocus = jest.fn();

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

    var el = container.querySelector('input[type="search"]');
    fireEvent.focus(el);
    expect(onFocus).toBeCalled();
  });
  it('onChange called correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var onChange, _render7, container, input;

    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            onChange = jest.fn();
            _render7 = render( /*#__PURE__*/React.createElement(SearchBar, {
              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.type(input, '测试');

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

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