zarm/es/swipe-action/__tests__/index.test.js

基于 React 的移动端UI库

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import SwipeAction from '../index';
import List from '../../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 = render( /*#__PURE__*/React.createElement(SwipeAction, {
      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.createElement("div", null, "\u5DE6\u53F3\u90FD\u80FD\u6ED1\u52A8"))),
        container = _render.container;

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

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

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

    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            onOpen = jest.fn();
            onClose = jest.fn();
            _render4 = render( /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(SwipeAction, {
              onOpen: onOpen,
              onClose: onClose,
              leftActions: [{
                text: '左按钮',
                onClick: function onClick() {
                  return jest.fn();
                }
              }],
              rightActions: [{
                text: '右按钮',
                onClick: function onClick() {
                  return jest.fn();
                }
              }]
            }, /*#__PURE__*/React.createElement(List.Item, null, "\u5DE6\u53F3\u6ED1\u770B\u770B")))), container = _render4.container;
            element = container.querySelector('.za-swipe-action');
            fireEvent.mouseDown(element, {
              pointerId: 1,
              clientX: 0,
              clientY: 0,
              buttons: 1
            });
            fireEvent.mouseMove(element, {
              pointerId: 1,
              clientX: 200,
              clientY: 0,
              buttons: 1
            });
            fireEvent.mouseUp(element, {
              pointerId: 1,
              clientX: 275
            });
            expect(onOpen).toHaveBeenCalled();
            fireEvent.mouseDown(document.body);
            content = container.querySelector('.za-swipe-action__content');
            fireEvent.transitionEnd(content);
            _context.next = 13;
            return waitFor(function () {
              expect(onClose).toHaveBeenCalled();
            });

          case 13:
            fireEvent.mouseDown(element, {
              pointerId: 1,
              clientX: 0,
              clientY: 0,
              buttons: 1
            });
            fireEvent.mouseMove(element, {
              pointerId: 1,
              clientX: -200,
              clientY: 0,
              buttons: 1
            });
            fireEvent.mouseUp(element, {
              pointerId: 1,
              clientX: -275
            });
            jest.runAllTimers();
            _context.next = 19;
            return waitFor(function () {
              expect(onOpen).toBeCalledTimes(2);
            });

          case 19:
            fireEvent.click(content);
            fireEvent.transitionEnd(content);
            _context.next = 23;
            return waitFor(function () {
              expect(onClose).toBeCalledTimes(2);
            });

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

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

            fireEvent.mouseDown(element, {
              pointerId: 1,
              clientX: 0,
              clientY: 0,
              buttons: 1
            });
            fireEvent.mouseMove(element, {
              pointerId: 1,
              clientX: 200,
              clientY: 0,
              buttons: 1
            });
            fireEvent.mouseUp(element, {
              pointerId: 1,
              clientX: 275
            });
            fireEvent.click(container.querySelector('.za-swipe-action-item__item'));
            _context2.next = 10;
            return waitFor(function () {
              expect(onClick).toHaveBeenCalled();
            });

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