zarm/lib/use-long-press/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

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

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

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

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

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

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

var _ = _interopRequireDefault(require(".."));

var _templateObject, _templateObject2;

describe('useLongPress', function () {
  beforeAll(function () {
    jest.useFakeTimers();
  });
  afterAll(function () {
    jest.useRealTimers();
  });
  test('should execute the onLongPress function after triggering the mouse down event and delaying for a period of time ', function () {
    var mOnLongPress = jest.fn();

    var _renderHook = (0, _reactHooks.renderHook)(function () {
      return (0, _.default)({
        onLongPress: mOnLongPress,
        delay: 3000
      });
    }),
        result = _renderHook.result;

    var mEvent = new MouseEvent('mousedown');
    result.current.onMouseDown(mEvent);
    expect(mOnLongPress).not.toBeCalledWith(mEvent);
    jest.advanceTimersByTime(3000);
    expect(mOnLongPress).toBeCalledWith(mEvent);
  });
  test('should execute the onPress function after triggering the mouse down event immediately', function () {
    var mOnPress = jest.fn();

    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
      return (0, _.default)({
        onPress: mOnPress,
        delay: 3000
      });
    }),
        result = _renderHook2.result;

    var mEvent = new MouseEvent('mousedown');
    result.current.onMouseDown(mEvent);
    expect(mOnPress).toBeCalledWith(mEvent);
  });
  test('should prevent default behavior of the touchend event for preventing the ghost click', function () {
    var Wrapper = function Wrapper() {
      var longPress = (0, _.default)({});
      return /*#__PURE__*/_react2.default.createElement("button", (0, _extends2.default)({
        "data-testid": "test"
      }, longPress), "click me");
    };

    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Wrapper, null));

    var button = _react.screen.getByTestId('test');

    _react.fireEvent.touchStart(button);

    var touchendEvent = _react.createEvent.touchEnd(button);

    (0, _react.fireEvent)(button, touchendEvent);
    expect(touchendEvent.defaultPrevented).toBeTruthy();
  });
  test.each(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    eventType         | expected\n    ", "    | ", "\n    ", " | ", "\n  "])), 'onMouseUp', new MouseEvent('mouseup'), 'onMouseLeave', new MouseEvent('mouseleave'))('should execute the clear function after triggering the $eventType event', function (_ref) {
    var eventType = _ref.eventType,
        expected = _ref.expected;
    var mOnClear = jest.fn();

    var _renderHook3 = (0, _reactHooks.renderHook)(function () {
      return (0, _.default)({
        onClear: mOnClear
      });
    }),
        result = _renderHook3.result;

    var mEvent = new MouseEvent('mousedown');
    result.current.onMouseDown(mEvent);
    result.current[eventType](expected);
    expect(mOnClear).toBeCalledWith(expected);
  });
  test.each(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    eventType       | expected\n    ", " | ", "\n  "])), 'onTouchEnd', new MouseEvent('touchend'))('should execute the clear function after triggering the $eventType event', function (_ref2) {
    var eventType = _ref2.eventType,
        expected = _ref2.expected;
    var mOnClear = jest.fn();

    var _renderHook4 = (0, _reactHooks.renderHook)(function () {
      return (0, _.default)({
        onClear: mOnClear
      });
    }),
        result = _renderHook4.result;

    var mEvent = new MouseEvent('touchstart');
    result.current.onTouchStart(mEvent);
    result.current[eventType](expected);
    expect(mOnClear).toBeCalledWith(expected);
  });
  test('should not execute the onPressLong function if the mouseleave event is triggered within the delay window time', function () {
    var mOnLongPress = jest.fn();

    var _renderHook5 = (0, _reactHooks.renderHook)(function () {
      return (0, _.default)({
        onLongPress: mOnLongPress,
        delay: 3000
      });
    }),
        result = _renderHook5.result;

    var mEvent = new MouseEvent('mousedown');
    result.current.onMouseDown(mEvent);
    expect(mOnLongPress).not.toBeCalledWith(mEvent);
    jest.advanceTimersByTime(2000);
    result.current.onMouseLeave(new MouseEvent('mouseleave'));
    jest.advanceTimersByTime(1000);
    expect(mOnLongPress).not.toBeCalledWith(mEvent);
  });
});