zarm/lib/swipe-action/__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 = _interopRequireDefault(require("react"));

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

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

var _index2 = _interopRequireDefault(require("../../list/index"));

var originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
describe('SwipeAction', function () {
  beforeEach(function () {
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
      configurable: true,
      value: 500
    });
  });
  afterAll(function () {
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
  });
  it('renders correctly', function () {
    jest.useFakeTimers();

    var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      leftActions: [{
        text: '左按钮1',
        onClick: function onClick() {
          return jest.fn();
        }
      }, {
        text: '左按钮2',
        theme: 'danger',
        onClick: function onClick() {
          return jest.fn();
        }
      }],
      rightActions: [{
        text: '右按钮1',
        onClick: function onClick() {
          return jest.fn();
        }
      }, {
        text: '右按钮2',
        theme: 'danger',
        onClick: function onClick() {
          return jest.fn();
        }
      }]
    }, /*#__PURE__*/_react.default.createElement("div", null, "\u5DE6\u53F3\u90FD\u80FD\u6ED1\u52A8"))),
        container = _render.container;

    expect(container).toMatchSnapshot();
    jest.runAllTimers();
  });
  it('left only', function () {
    var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      leftActions: [{
        text: '左按钮1',
        onClick: function onClick() {
          return jest.fn();
        }
      }, {
        text: '左按钮2',
        theme: 'danger',
        onClick: function onClick() {
          return jest.fn();
        }
      }]
    }, /*#__PURE__*/_react.default.createElement("div", null, "\u53F3\u6ED1"))),
        container = _render2.container;

    expect(container).toMatchSnapshot();
  });
  it('right only', function () {
    var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      rightActions: [{
        text: '右按钮1',
        onClick: function onClick() {
          return jest.fn();
        }
      }, {
        text: '右按钮2',
        onClick: function onClick() {
          return jest.fn();
        }
      }]
    }, /*#__PURE__*/_react.default.createElement("div", null, "\u5DE6\u6ED1"))),
        container = _render3.container;

    expect(container).toMatchSnapshot();
  });
  it('touch event callback', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var onOpen, onClose, _render4, container, element, content;

    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            onOpen = jest.fn();
            onClose = jest.fn();
            _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index2.default, null, /*#__PURE__*/_react.default.createElement(_index.default, {
              onOpen: onOpen,
              onClose: onClose,
              leftActions: [{
                text: '左按钮',
                onClick: function onClick() {
                  return jest.fn();
                }
              }],
              rightActions: [{
                text: '右按钮',
                onClick: function onClick() {
                  return jest.fn();
                }
              }]
            }, /*#__PURE__*/_react.default.createElement(_index2.default.Item, null, "\u5DE6\u53F3\u6ED1\u770B\u770B")))), container = _render4.container;
            element = container.querySelector('.za-swipe-action');

            _react2.fireEvent.mouseDown(element, {
              pointerId: 1,
              clientX: 0,
              clientY: 0,
              buttons: 1
            });

            _react2.fireEvent.mouseMove(element, {
              pointerId: 1,
              clientX: 200,
              clientY: 0,
              buttons: 1
            });

            _react2.fireEvent.mouseUp(element, {
              pointerId: 1,
              clientX: 275
            });

            expect(onOpen).toHaveBeenCalled();

            _react2.fireEvent.mouseDown(document.body);

            content = container.querySelector('.za-swipe-action__content');

            _react2.fireEvent.transitionEnd(content);

            _context.next = 13;
            return (0, _react2.waitFor)(function () {
              expect(onClose).toHaveBeenCalled();
            });

          case 13:
            _react2.fireEvent.mouseDown(element, {
              pointerId: 1,
              clientX: 0,
              clientY: 0,
              buttons: 1
            });

            _react2.fireEvent.mouseMove(element, {
              pointerId: 1,
              clientX: -200,
              clientY: 0,
              buttons: 1
            });

            _react2.fireEvent.mouseUp(element, {
              pointerId: 1,
              clientX: -275
            });

            jest.runAllTimers();
            _context.next = 19;
            return (0, _react2.waitFor)(function () {
              expect(onOpen).toBeCalledTimes(2);
            });

          case 19:
            _react2.fireEvent.click(content);

            _react2.fireEvent.transitionEnd(content);

            _context.next = 23;
            return (0, _react2.waitFor)(function () {
              expect(onClose).toBeCalledTimes(2);
            });

          case 23:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  it('SwipeActionItem click', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
    var onClose, onClick, _render5, container, element;

    return _regenerator.default.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            onClose = jest.fn();
            onClick = jest.fn();
            _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index2.default, null, /*#__PURE__*/_react.default.createElement(_index.default, {
              autoClose: true,
              onClose: onClose,
              leftActions: [{
                text: '左按钮1',
                onClick: onClick
              }]
            }, /*#__PURE__*/_react.default.createElement(_index2.default.Item, null, "\u53F3\u6ED1\u770B\u770B")))), container = _render5.container;
            element = container.querySelector('.za-swipe-action'); // fireEvent.transitionEnd(container.querySelector('.za-swipe-action__content')!);

            _react2.fireEvent.mouseDown(element, {
              pointerId: 1,
              clientX: 0,
              clientY: 0,
              buttons: 1
            });

            _react2.fireEvent.mouseMove(element, {
              pointerId: 1,
              clientX: 200,
              clientY: 0,
              buttons: 1
            });

            _react2.fireEvent.mouseUp(element, {
              pointerId: 1,
              clientX: 275
            });

            _react2.fireEvent.click(container.querySelector('.za-swipe-action-item__item'));

            _context2.next = 10;
            return (0, _react2.waitFor)(function () {
              expect(onClick).toHaveBeenCalled();
            });

          case 10:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
});