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

基于 React 的移动端UI库

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _extends from "@babel/runtime/helpers/extends";

var _templateObject, _templateObject2;

import { createEvent, fireEvent, render, screen } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import React from 'react';
import useLongPress from '..';
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 = renderHook(function () {
      return useLongPress({
        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 = renderHook(function () {
      return useLongPress({
        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 = useLongPress({});
      return /*#__PURE__*/React.createElement("button", _extends({
        "data-testid": "test"
      }, longPress), "click me");
    };

    render( /*#__PURE__*/React.createElement(Wrapper, null));
    var button = screen.getByTestId('test');
    fireEvent.touchStart(button);
    var touchendEvent = createEvent.touchEnd(button);
    fireEvent(button, touchendEvent);
    expect(touchendEvent.defaultPrevented).toBeTruthy();
  });
  test.each(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = renderHook(function () {
      return useLongPress({
        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 = _taggedTemplateLiteral(["\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 = renderHook(function () {
      return useLongPress({
        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 = renderHook(function () {
      return useLongPress({
        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);
  });
});