From d40b86474d29ebde23b49cb8eb15430368a2226d Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 2 Nov 2022 16:06:40 +0000 Subject: [PATCH 1/5] Removing support for mouse adn touch events --- packages/framer-motion/package.json | 8 +-- .../framer-motion/src/events/event-info.ts | 47 ++++------------- packages/framer-motion/src/events/types.ts | 5 +- .../src/events/use-pointer-event.ts | 50 +------------------ packages/framer-motion/src/events/utils.ts | 9 ---- .../framer-motion/src/gestures/PanSession.ts | 17 +++---- .../drag/VisualElementDragControls.ts | 16 +++--- .../src/gestures/drag/use-drag-controls.ts | 10 +--- .../src/gestures/use-hover-gesture.ts | 9 ++-- .../src/gestures/use-pan-gesture.ts | 4 +- .../src/gestures/utils/event-type.ts | 17 ------- 11 files changed, 41 insertions(+), 151 deletions(-) delete mode 100644 packages/framer-motion/src/events/utils.ts delete mode 100644 packages/framer-motion/src/gestures/utils/event-type.ts diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json index d1b3bed2ea..1aa1acc194 100644 --- a/packages/framer-motion/package.json +++ b/packages/framer-motion/package.json @@ -72,7 +72,7 @@ "bundlesize": [ { "path": "./dist/size-rollup-motion.js", - "maxSize": "29.6 kB" + "maxSize": "29.12 kB" }, { "path": "./dist/size-rollup-m.js", @@ -80,11 +80,11 @@ }, { "path": "./dist/size-rollup-dom-animation.js", - "maxSize": "14.76kb" + "maxSize": "14.65 kB" }, { "path": "./dist/size-rollup-dom-max.js", - "maxSize": "25.49 kB" + "maxSize": "25.15 kB" }, { "path": "./dist/size-webpack-m.js", @@ -96,7 +96,7 @@ }, { "path": "./dist/size-webpack-dom-max.js", - "maxSize": "30.5kB" + "maxSize": "30.3kB" } ], "gitHead": "b0267f01c58c549a282ff3c97f0fb32ac1450668" diff --git a/packages/framer-motion/src/events/event-info.ts b/packages/framer-motion/src/events/event-info.ts index 152a1b0c93..a456a3a618 100644 --- a/packages/framer-motion/src/events/event-info.ts +++ b/packages/framer-motion/src/events/event-info.ts @@ -1,64 +1,35 @@ import { EventInfo } from "./types" -import { isTouchEvent } from "../gestures/utils/event-type" /** * Filters out events not attached to the primary pointer (currently left mouse button) * @param eventHandler */ function filterPrimaryPointer(eventHandler: EventListener): EventListener { - return (event: Event) => { - const isMouseEvent = event instanceof MouseEvent - const isPrimaryPointer = - !isMouseEvent || - (isMouseEvent && (event as MouseEvent).button === 0) - - if (isPrimaryPointer) { + return (event: PointerEvent) => { + if (event.isPrimary) { eventHandler(event) } } } export type EventListenerWithPointInfo = ( - e: MouseEvent | TouchEvent | PointerEvent, + e: PointerEvent, info: EventInfo ) => void -const defaultPagePoint = { pageX: 0, pageY: 0 } - -function pointFromTouch(e: TouchEvent, pointType: "page" | "client" = "page") { - const primaryTouch = e.touches[0] || e.changedTouches[0] - const point = primaryTouch || defaultPagePoint - - return { - x: point[pointType + "X"], - y: point[pointType + "Y"], - } -} - -function pointFromMouse( - point: MouseEvent | PointerEvent, - pointType: "page" | "client" = "page" -) { - return { - x: point[pointType + "X"], - y: point[pointType + "Y"], - } -} - export function extractEventInfo( - event: MouseEvent | TouchEvent | PointerEvent, + event: PointerEvent, pointType: "page" | "client" = "page" ): EventInfo { return { - point: isTouchEvent(event) - ? pointFromTouch(event, pointType) - : pointFromMouse(event, pointType), + point: { + x: event[pointType + "X"], + y: event[pointType + "Y"], + }, } } -export function getViewportPointFromEvent( - event: MouseEvent | TouchEvent | PointerEvent -) { +export function getViewportPointFromEvent(event: PointerEvent) { return extractEventInfo(event, "client") } diff --git a/packages/framer-motion/src/events/types.ts b/packages/framer-motion/src/events/types.ts index cf09c2e321..5a7500dce0 100644 --- a/packages/framer-motion/src/events/types.ts +++ b/packages/framer-motion/src/events/types.ts @@ -6,10 +6,7 @@ export interface EventInfo { point: Point } -export type EventHandler = ( - event: MouseEvent | TouchEvent | PointerEvent, - info: EventInfo -) => void +export type EventHandler = (event: PointerEvent, info: EventInfo) => void export type ListenerControls = [() => void, () => void] diff --git a/packages/framer-motion/src/events/use-pointer-event.ts b/packages/framer-motion/src/events/use-pointer-event.ts index dcfdae89e6..669c69c7f6 100644 --- a/packages/framer-motion/src/events/use-pointer-event.ts +++ b/packages/framer-motion/src/events/use-pointer-event.ts @@ -1,52 +1,6 @@ import { RefObject } from "react" import { useDomEvent, addDomEvent } from "./use-dom-event" import { wrapHandler, EventListenerWithPointInfo } from "./event-info" -import { - supportsPointerEvents, - supportsTouchEvents, - supportsMouseEvents, -} from "./utils" - -interface PointerNameMap { - pointerdown: string - pointermove: string - pointerup: string - pointercancel: string - pointerover?: string - pointerout?: string - pointerenter?: string - pointerleave?: string -} - -const mouseEventNames: PointerNameMap = { - pointerdown: "mousedown", - pointermove: "mousemove", - pointerup: "mouseup", - pointercancel: "mousecancel", - pointerover: "mouseover", - pointerout: "mouseout", - pointerenter: "mouseenter", - pointerleave: "mouseleave", -} - -const touchEventNames: PointerNameMap = { - pointerdown: "touchstart", - pointermove: "touchmove", - pointerup: "touchend", - pointercancel: "touchcancel", -} - -function getPointerEventName(name: string): string { - if (supportsPointerEvents()) { - return name - } else if (supportsTouchEvents()) { - return touchEventNames[name] - } else if (supportsMouseEvents()) { - return mouseEventNames[name] - } - - return name -} export function addPointerEvent( target: EventTarget, @@ -56,7 +10,7 @@ export function addPointerEvent( ) { return addDomEvent( target, - getPointerEventName(eventName), + eventName, wrapHandler(handler, eventName === "pointerdown"), options ) @@ -70,7 +24,7 @@ export function usePointerEvent( ) { return useDomEvent( ref, - getPointerEventName(eventName), + eventName, handler && wrapHandler(handler, eventName === "pointerdown"), options ) diff --git a/packages/framer-motion/src/events/utils.ts b/packages/framer-motion/src/events/utils.ts deleted file mode 100644 index ee88c335ca..0000000000 --- a/packages/framer-motion/src/events/utils.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { isBrowser } from "../utils/is-browser" - -// We check for event support via functions in case they've been mocked by a testing suite. -export const supportsPointerEvents = () => - isBrowser && window.onpointerdown === null -export const supportsTouchEvents = () => - isBrowser && window.ontouchstart === null -export const supportsMouseEvents = () => - isBrowser && window.onmousedown === null diff --git a/packages/framer-motion/src/gestures/PanSession.ts b/packages/framer-motion/src/gestures/PanSession.ts index 9fd26d4e51..822dc01506 100644 --- a/packages/framer-motion/src/gestures/PanSession.ts +++ b/packages/framer-motion/src/gestures/PanSession.ts @@ -1,5 +1,4 @@ import { EventInfo } from "../events/types" -import { isTouchEvent, isMouseEvent } from "./utils/event-type" import { extractEventInfo } from "../events/event-info" import { sync, cancelSync } from "../frameloop" import { secondsToMilliseconds } from "../utils/time-conversion" @@ -9,8 +8,6 @@ import { pipe } from "../utils/pipe" import { distance2D } from "../utils/distance" import { frameData } from "../frameloop/data" -export type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent - /** * Passed in to pan event handlers like `onPan` the `PanInfo` object contains * information about the current state of the tap gesture such as its @@ -115,12 +112,12 @@ export class PanSession { /** * @internal */ - private startEvent: AnyPointerEvent | null = null + private startEvent: PointerEvent | null = null /** * @internal */ - private lastMoveEvent: AnyPointerEvent | null = null + private lastMoveEvent: PointerEvent | null = null /** * @internal @@ -143,12 +140,12 @@ export class PanSession { private removeListeners: Function constructor( - event: AnyPointerEvent, + event: PointerEvent, handlers: Partial, { transformPagePoint }: PanSessionOptions = {} ) { // If we have more than one touch, don't start detecting this gesture - if (isTouchEvent(event) && event.touches.length > 1) return + if (!event.isPrimary) return this.handlers = handlers this.transformPagePoint = transformPagePoint @@ -200,12 +197,12 @@ export class PanSession { onMove && onMove(this.lastMoveEvent, info) } - private handlePointerMove = (event: AnyPointerEvent, info: EventInfo) => { + private handlePointerMove = (event: PointerEvent, info: EventInfo) => { this.lastMoveEvent = event this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint) // Because Safari doesn't trigger mouseup events when it's above a `` elements. + ## [7.10.3] 2022-12-20 ### Changed diff --git a/packages/framer-motion/src/gestures/PanSession.ts b/packages/framer-motion/src/gestures/PanSession.ts index 822dc01506..87f516250c 100644 --- a/packages/framer-motion/src/gestures/PanSession.ts +++ b/packages/framer-motion/src/gestures/PanSession.ts @@ -201,12 +201,6 @@ export class PanSession { this.lastMoveEvent = event this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint) - // Because Safari doesn't trigger mouseup events when it's above a `` elements. +### Changed + +- `DragControls.start` now accepts `PointerEvent` only. + ## [7.10.3] 2022-12-20 ### Changed diff --git a/packages/framer-motion/jest.setup.tsx b/packages/framer-motion/jest.setup.tsx index 645f1adc38..d572184e98 100644 --- a/packages/framer-motion/jest.setup.tsx +++ b/packages/framer-motion/jest.setup.tsx @@ -5,6 +5,22 @@ import { fireEvent, getByTestId } from "@testing-library/dom" import { render as testRender, act } from "@testing-library/react" import * as React from "react" +/** + * Stub PointerEvent - this is so we can pass through PointerEvent.isPrimary + */ +const pointerEventProps = ["isPrimary"] +class PointerEventFake extends Event { + constructor(type: any, props: any) { + super(type, props) + pointerEventProps.forEach((prop) => { + if (props[prop] !== null) { + this[prop] = props[prop] + } + }) + } +} +;(global as any).PointerEvent = PointerEventFake + // Stub ResizeObserver if (!(global as any).ResizeObserver) { ;(global as any).ResizeObserver = class ResizeObserver { @@ -28,12 +44,19 @@ export const pointerLeave = (element: Element) => }) export const pointerDown = (element: Element) => act(() => { - fireEvent.pointerDown(element) + fireEvent.pointerDown( + element, + new PointerEventFake("pointerdown", { isPrimary: true }) + ) }) export const pointerUp = (element: Element) => act(() => { fireEvent.pointerUp(element) }) +export const pointerMove = (element: Element) => + act(() => { + fireEvent.pointerMove(element) + }) export const focus = (element: HTMLElement, testId: string) => act(() => { getByTestId(element, testId).focus() diff --git a/packages/framer-motion/src/events/__tests__/use-event.test.tsx b/packages/framer-motion/src/events/__tests__/use-event.test.tsx index 84d5fd7f61..46a074332b 100644 --- a/packages/framer-motion/src/events/__tests__/use-event.test.tsx +++ b/packages/framer-motion/src/events/__tests__/use-event.test.tsx @@ -10,7 +10,7 @@ describe("useDomEvent", () => { const handler = jest.fn() const Component = () => { const ref = useRef(null) - useDomEvent(ref, "pointerDown", handler) + useDomEvent(ref, "pointerdown", handler) return
} const { container, rerender } = render() @@ -22,7 +22,7 @@ describe("useDomEvent", () => { const handler = jest.fn() const Component = () => { const ref = useRef(null) - useDomEvent(ref, "pointerDown", handler) + useDomEvent(ref, "pointerdown", handler) return
} const { container, rerender } = render() @@ -36,7 +36,7 @@ describe("useDomEvent", () => { const promise = new Promise((resolve) => { const Component = () => { const ref = useRef(document.body) - useDomEvent(ref, "pointerDown", handler) + useDomEvent(ref, "pointerdown", handler) useEffect(resolve) return
} @@ -52,7 +52,7 @@ describe("useDomEvent", () => { const promise = new Promise((resolve) => { const Component = () => { const ref = useRef(document.body) - useDomEvent(ref, "pointerDown", handler) + useDomEvent(ref, "pointerdown", handler) return
} const { rerender, unmount } = render() diff --git a/packages/framer-motion/src/events/__tests__/use-pointer-events.test.tsx b/packages/framer-motion/src/events/__tests__/use-pointer-events.test.tsx deleted file mode 100644 index 38f10571d8..0000000000 --- a/packages/framer-motion/src/events/__tests__/use-pointer-events.test.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { render } from "../../../jest.setup" - -import * as React from "react" -import { usePointerEvent } from "../use-pointer-event" -import { enablePointerEvents } from "./utils/event-helpers" -import { fireCustomEvent } from "./utils/fire-event" - -function testEventsWithRef(fireFunctions: { - [key: string]: (element: Element) => void -}) { - const ref = React.createRef() - const handlers = {} - for (const key in fireFunctions) { - handlers[key] = jest.fn() - } - const Component = () => { - for (const key in fireFunctions) { - usePointerEvent(ref, key, handlers[key]) - } - - return
- } - const { rerender } = render() - rerender() - - for (const key in fireFunctions) { - expect(handlers[key]).toHaveBeenCalledTimes(0) - fireFunctions[key](ref.current as HTMLDivElement) - expect(handlers[key]).toHaveBeenCalledTimes(1) - } -} -const pointerEvents = { - pointerdown: fireCustomEvent("pointerdown"), - pointermove: fireCustomEvent("pointermove"), - pointerup: fireCustomEvent("pointerup"), - pointercancel: fireCustomEvent("pointercancel"), - pointerover: fireCustomEvent("pointerover"), - pointerout: fireCustomEvent("pointerout"), - pointerenter: fireCustomEvent("pointerenter"), - pointerleave: fireCustomEvent("pointerleave"), -} - -describe("usePointerEvents", () => { - describe("with pointer events", () => { - let restore: Function - beforeAll(() => { - restore = enablePointerEvents() - }) - afterAll(() => { - restore() - }) - it(`should call handlers with ref`, async () => { - testEventsWithRef(pointerEvents) - }) - }) -}) diff --git a/packages/framer-motion/src/gestures/__tests__/hover.test.tsx b/packages/framer-motion/src/gestures/__tests__/hover.test.tsx index 32f93b0eb5..fd2f0b1ab3 100644 --- a/packages/framer-motion/src/gestures/__tests__/hover.test.tsx +++ b/packages/framer-motion/src/gestures/__tests__/hover.test.tsx @@ -1,7 +1,11 @@ -import { pointerEnter, pointerLeave, render } from "../../../jest.setup" +import { + pointerDown, + pointerEnter, + pointerLeave, + render, +} from "../../../jest.setup" import * as React from "react" import { motion } from "../../" -import { fireEvent } from "@testing-library/react" import { motionValue } from "../../value" import { transformValues } from "../../motion/__tests__/util-transform-values" import { sync } from "../../frameloop" @@ -161,7 +165,7 @@ describe("hover", () => { const { container, rerender } = render() rerender() - fireEvent.pointerDown(container.firstChild as Element) + pointerDown(container.firstChild as Element) pointerEnter(container.firstChild as Element) resolve([opacity.get(), scale.get()]) diff --git a/packages/framer-motion/src/gestures/__tests__/pan.test.tsx b/packages/framer-motion/src/gestures/__tests__/pan.test.tsx index b3b691123f..35b7e181d2 100644 --- a/packages/framer-motion/src/gestures/__tests__/pan.test.tsx +++ b/packages/framer-motion/src/gestures/__tests__/pan.test.tsx @@ -20,6 +20,7 @@ describe("pan", () => { onPanStart={() => { count += increment setIncrement(2) + console.log("on pan start") }} onPan={() => (count += increment)} onPanEnd={() => { diff --git a/packages/framer-motion/src/gestures/__tests__/press.test.tsx b/packages/framer-motion/src/gestures/__tests__/press.test.tsx index f9c62ae035..26bf807c20 100644 --- a/packages/framer-motion/src/gestures/__tests__/press.test.tsx +++ b/packages/framer-motion/src/gestures/__tests__/press.test.tsx @@ -1,6 +1,5 @@ import * as React from "react" import { motion } from "../.." -import { fireEvent } from "@testing-library/dom" import { motionValue } from "../../value" import { pointerDown, @@ -19,8 +18,8 @@ describe("press", () => { const { container, rerender } = render() rerender() - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(container.firstChild as Element) + pointerUp(container.firstChild as Element) expect(press).toBeCalledTimes(1) }) @@ -31,12 +30,12 @@ describe("press", () => { press()} /> ) rerender( press()} />) - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(container.firstChild as Element) + pointerUp(container.firstChild as Element) expect(press).toBeCalledTimes(1) rerender() - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(container.firstChild as Element) + pointerUp(container.firstChild as Element) expect(press).toBeCalledTimes(1) }) @@ -59,13 +58,13 @@ describe("press", () => { const a = getByTestId("a") const b = getByTestId("b") - fireEvent.pointerDown(a) - fireEvent.pointerUp(a) + pointerDown(a) + pointerUp(a) expect(cancelA).not.toHaveBeenCalled() - fireEvent.pointerDown(b) - fireEvent.pointerUp(b) + pointerDown(b) + pointerUp(b) expect(cancelA).not.toHaveBeenCalled() }) @@ -80,8 +79,8 @@ describe("press", () => { const { getByTestId, rerender } = render() rerender() - fireEvent.pointerDown(getByTestId("child")) - fireEvent.pointerUp(getByTestId("child")) + pointerDown(getByTestId("child")) + pointerUp(getByTestId("child")) expect(press).toBeCalledTimes(1) }) @@ -97,8 +96,8 @@ describe("press", () => { const { container, getByTestId, rerender } = render() rerender() - fireEvent.pointerDown(getByTestId("child")) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(getByTestId("child")) + pointerUp(container.firstChild as Element) expect(press).toBeCalledTimes(1) }) @@ -114,8 +113,8 @@ describe("press", () => { const { container, getByTestId, rerender } = render() rerender() - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(getByTestId("child")) + pointerDown(container.firstChild as Element) + pointerUp(getByTestId("child")) expect(press).toBeCalledTimes(1) }) @@ -134,8 +133,8 @@ describe("press", () => { const { container, getByTestId, rerender } = render() rerender() - fireEvent.pointerDown(getByTestId("child")) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(getByTestId("child")) + pointerUp(container.firstChild as Element) expect(pressCancel).toBeCalledTimes(1) }) @@ -193,17 +192,17 @@ describe("press", () => { rerender() rerender() - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(container.firstChild as Element) + pointerUp(container.firstChild as Element) rerender() rerender() - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(container.firstChild as Element) + pointerUp(container.firstChild as Element) - fireEvent.pointerDown(container.firstChild as Element) - fireEvent.pointerUp(container.firstChild as Element) + pointerDown(container.firstChild as Element) + pointerUp(container.firstChild as Element) expect(press).toBeCalledTimes(3) }) @@ -353,11 +352,11 @@ describe("press", () => { // logOpacity() // 0.5 // // Trigger mouse down - // fireEvent.pointerDown(getByTestId("child") as Element) + // pointerDown(getByTestId("child") as Element) // logOpacity() // 1 // // Trigger mouse up - // fireEvent.pointerUp(getByTestId("child") as Element) + // pointerUp(getByTestId("child") as Element) // logOpacity() // 0.5 // resolve(opacityHistory) @@ -391,11 +390,11 @@ describe("press", () => { logOpacity() // 0.75 // Trigger mouse down - fireEvent.pointerDown(container.firstChild as Element) + pointerDown(container.firstChild as Element) logOpacity() // 1 // Trigger mouse up - fireEvent.pointerUp(container.firstChild as Element) + pointerUp(container.firstChild as Element) logOpacity() // 0.75 // Trigger hover end @@ -407,7 +406,7 @@ describe("press", () => { logOpacity() // Trigger mouse down - fireEvent.pointerDown(container.firstChild as Element) + pointerDown(container.firstChild as Element) logOpacity() // Trigger hover end @@ -415,7 +414,7 @@ describe("press", () => { logOpacity() // Trigger mouse up - fireEvent.pointerUp(container.firstChild as Element) + pointerUp(container.firstChild as Element) logOpacity() resolve(opacityHistory) @@ -456,13 +455,13 @@ describe("press", () => { logOpacity() // 0.75 // Trigger mouse down - fireEvent.pointerDown(container.firstChild as Element) + pointerDown(container.firstChild as Element) logOpacity() // 1 rerender() rerender() // Trigger mouse up - fireEvent.pointerUp(container.firstChild as Element) + pointerUp(container.firstChild as Element) logOpacity() // 1 // Trigger hover end @@ -474,7 +473,7 @@ describe("press", () => { logOpacity() // 1 // Trigger mouse down - fireEvent.pointerDown(container.firstChild as Element) + pointerDown(container.firstChild as Element) logOpacity() // 1 // Trigger hover end @@ -482,7 +481,7 @@ describe("press", () => { logOpacity() // 1 // Trigger mouse up - fireEvent.pointerUp(container.firstChild as Element) + pointerUp(container.firstChild as Element) logOpacity() // 1 resolve(opacityHistory) diff --git a/packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx b/packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx index dfad6dde8d..a893c24186 100644 --- a/packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx +++ b/packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx @@ -1,8 +1,7 @@ import * as React from "react" -import { render } from "../../../../jest.setup" +import { pointerDown, render } from "../../../../jest.setup" import { BoundingBox, motion, motionValue, MotionValue } from "../../../" import { MockDrag, drag, deferred, frame, Point, sleep } from "./utils" -import { fireEvent } from "@testing-library/dom" describe("drag", () => { test("onDragStart fires", async () => { @@ -823,7 +822,7 @@ describe("dragging", () => { pointer.end() lastX = x.get() - fireEvent.pointerDown(container.firstChild as Element) + pointerDown(container.firstChild as Element) await sleep(20) expect(x.get()).toBe(lastX) diff --git a/packages/framer-motion/src/gestures/drag/__tests__/use-drag-controls.test.tsx b/packages/framer-motion/src/gestures/drag/__tests__/use-drag-controls.test.tsx index d671ce038b..9d96212814 100644 --- a/packages/framer-motion/src/gestures/drag/__tests__/use-drag-controls.test.tsx +++ b/packages/framer-motion/src/gestures/drag/__tests__/use-drag-controls.test.tsx @@ -11,7 +11,7 @@ describe("useDragControls", () => { return (
dragControls.start(e)} + onPointerDown={(e) => dragControls.start(e)} data-testid="drag-handle" /> { return (
dragControls.start(e)} + onPointerDown={(e) => dragControls.start(e)} data-testid="drag-handle" > (): Deferred { export const drag = (element: any, triggerElement?: any) => { pos.x = 0 pos.y = 0 - fireEvent.pointerDown(triggerElement || element) + pointerDown(triggerElement || element) const controls = { to: async (x: number, y: number) => { @@ -42,14 +42,14 @@ export const drag = (element: any, triggerElement?: any) => { pos.y = y await act(async () => { - fireEvent.mouseMove(document.body, { buttons: 1 }) + pointerMove(document.body) await frame.postRender() }) return controls }, end: () => { - fireEvent.pointerUp(element) + pointerUp(element) }, } diff --git a/packages/framer-motion/src/motion/__tests__/component.test.tsx b/packages/framer-motion/src/motion/__tests__/component.test.tsx index a94ad0de08..b4ec7dec4c 100644 --- a/packages/framer-motion/src/motion/__tests__/component.test.tsx +++ b/packages/framer-motion/src/motion/__tests__/component.test.tsx @@ -85,20 +85,20 @@ describe("motion component rendering and styles", () => { }) it("renders normal event listeners", () => { - const onMouseEnter = jest.fn() - const onMouseLeave = jest.fn() + const onPointerEnter = jest.fn() + const onPointerLeave = jest.fn() const { container } = render( onMouseEnter()} - onMouseLeave={() => onMouseLeave()} + onPointerEnter={() => onPointerEnter()} + onPointerLeave={() => onPointerLeave()} /> ) fireEvent.pointerEnter(container.firstChild as Element) fireEvent.pointerLeave(container.firstChild as Element) - expect(onMouseEnter).toBeCalled() - expect(onMouseLeave).toBeCalled() + expect(onPointerEnter).toBeCalled() + expect(onPointerLeave).toBeCalled() }) it("renders custom component", async () => {