Fixing tests

framer · Dec 20, 2022 · 22a2d71 · 22a2d71
1 parent d40b864
commit 22a2d71
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 136 deletions.
diff --git a/packages/framer-motion-3d/jest.setup.tsx b/packages/framer-motion-3d/jest.setup.tsx
@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom"
 // Get fireEvent from the native testing library
-// because @testing-library/react one switches out mouseEnter and mouseLeave
+// because @testing-library/react one switches out pointerEnter and pointerLeave
 import { fireEvent, getByTestId } from "@testing-library/dom"
 import { render as testRender, act } from "@testing-library/react"
 import * as React from "react"
@@ -18,21 +18,21 @@ export const click = (element: Element) =>
     act(() => {
         fireEvent.click(element)
     })
-export const mouseEnter = (element: Element) =>
+export const pointerEnter = (element: Element) =>
     act(() => {
-        fireEvent.mouseEnter(element)
+        fireEvent.pointerEnter(element)
     })
-export const mouseLeave = (element: Element) =>
+export const pointerLeave = (element: Element) =>
     act(() => {
-        fireEvent.mouseLeave(element)
+        fireEvent.pointerLeave(element)
     })
-export const mouseDown = (element: Element) =>
+export const pointerDown = (element: Element) =>
     act(() => {
-        fireEvent.mouseDown(element)
+        fireEvent.pointerDown(element)
     })
-export const mouseUp = (element: Element) =>
+export const pointerUp = (element: Element) =>
     act(() => {
-        fireEvent.mouseUp(element)
+        fireEvent.pointerUp(element)
     })
 export const focus = (element: HTMLElement, testId: string) =>
     act(() => {

diff --git a/packages/framer-motion/jest.setup.tsx b/packages/framer-motion/jest.setup.tsx
@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom"
 // Get fireEvent from the native testing library
-// because @testing-library/react one switches out mouseEnter and mouseLeave
+// because @testing-library/react one switches out pointerEnter and pointerLeave
 import { fireEvent, getByTestId } from "@testing-library/dom"
 import { render as testRender, act } from "@testing-library/react"
 import * as React from "react"
@@ -18,21 +18,21 @@ export const click = (element: Element) =>
     act(() => {
         fireEvent.click(element)
     })
-export const mouseEnter = (element: Element) =>
+export const pointerEnter = (element: Element) =>
     act(() => {
-        fireEvent.mouseEnter(element)
+        fireEvent.pointerEnter(element)
     })
-export const mouseLeave = (element: Element) =>
+export const pointerLeave = (element: Element) =>
     act(() => {
-        fireEvent.mouseLeave(element)
+        fireEvent.pointerLeave(element)
     })
-export const mouseDown = (element: Element) =>
+export const pointerDown = (element: Element) =>
     act(() => {
-        fireEvent.mouseDown(element)
+        fireEvent.pointerDown(element)
     })
-export const mouseUp = (element: Element) =>
+export const pointerUp = (element: Element) =>
     act(() => {
-        fireEvent.mouseUp(element)
+        fireEvent.pointerUp(element)
     })
 export const focus = (element: HTMLElement, testId: string) =>
     act(() => {

diff --git a/packages/framer-motion/src/events/__tests__/use-event.test.tsx b/packages/framer-motion/src/events/__tests__/use-event.test.tsx
@@ -10,24 +10,24 @@ describe("useDomEvent", () => {
         const handler = jest.fn()
         const Component = () => {
             const ref = useRef(null)
-            useDomEvent(ref, "mousedown", handler)
+            useDomEvent(ref, "pointerDown", handler)
             return <div />
         }
         const { container, rerender } = render(<Component />)
         rerender(<Component />)
-        fireEvent.mouseDown(container.firstChild as Element)
+        fireEvent.pointerDown(container.firstChild as Element)
         expect(handler).not.toHaveBeenCalled()
     })
     it("should call the handler when the event is fired", () => {
         const handler = jest.fn()
         const Component = () => {
             const ref = useRef(null)
-            useDomEvent(ref, "mousedown", handler)
+            useDomEvent(ref, "pointerDown", handler)
             return <div ref={ref} />
         }
         const { container, rerender } = render(<Component />)
         rerender(<Component />)
-        fireEvent.mouseDown(container.firstChild as Element)
+        fireEvent.pointerDown(container.firstChild as Element)
         expect(handler).toHaveBeenCalledTimes(1)
     })
 
@@ -36,13 +36,13 @@ describe("useDomEvent", () => {
         const promise = new Promise<void>((resolve) => {
             const Component = () => {
                 const ref = useRef(document.body)
-                useDomEvent(ref, "mousedown", handler)
+                useDomEvent(ref, "pointerDown", handler)
                 useEffect(resolve)
                 return <div />
             }
             const { rerender } = render(<Component />)
             rerender(<Component />)
-            fireEvent.mouseDown(document.body)
+            fireEvent.pointerDown(document.body)
         })
         await expect(promise).resolves.toEqual(undefined)
         expect(handler).toHaveBeenCalled()
@@ -52,14 +52,14 @@ describe("useDomEvent", () => {
         const promise = new Promise<void>((resolve) => {
             const Component = () => {
                 const ref = useRef(document.body)
-                useDomEvent(ref, "mousedown", handler)
+                useDomEvent(ref, "pointerDown", handler)
                 return <div />
             }
             const { rerender, unmount } = render(<Component />)
             rerender(<Component />)
             unmount()
             requestAnimationFrame(() => {
-                fireEvent.mouseDown(document.body)
+                fireEvent.pointerDown(document.body)
                 resolve()
             })
         })

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
@@ -1,8 +1,8 @@
-import { mouseEnter, mouseLeave, render } from "../../../jest.setup"
-import { fireEvent } from "@testing-library/dom"
+import { render } from "../../../jest.setup"
+
 import * as React from "react"
 import { usePointerEvent } from "../use-pointer-event"
-import { enableTouchEvents, enablePointerEvents } from "./utils/event-helpers"
+import { enablePointerEvents } from "./utils/event-helpers"
 import { fireCustomEvent } from "./utils/fire-event"
 
 function testEventsWithRef(fireFunctions: {
@@ -29,24 +29,6 @@ function testEventsWithRef(fireFunctions: {
         expect(handlers[key]).toHaveBeenCalledTimes(1)
     }
 }
-
-const touchEvents = {
-    pointerdown: fireEvent.touchStart,
-    pointermove: fireEvent.touchMove,
-    pointerup: fireEvent.touchEnd,
-    pointercancel: fireEvent.touchCancel,
-}
-
-const mouseEvents = {
-    pointerdown: fireEvent.mouseDown,
-    pointermove: fireEvent.mouseMove,
-    pointerup: fireEvent.mouseUp,
-    pointerover: fireEvent.mouseOver,
-    pointerout: fireEvent.mouseOut,
-    pointerenter: mouseEnter,
-    pointerleave: mouseLeave,
-}
-
 const pointerEvents = {
     pointerdown: fireCustomEvent("pointerdown"),
     pointermove: fireCustomEvent("pointermove"),
@@ -59,23 +41,6 @@ const pointerEvents = {
 }
 
 describe("usePointerEvents", () => {
-    describe("with touch events", () => {
-        let restore: Function
-        beforeAll(() => {
-            restore = enableTouchEvents()
-        })
-        afterAll(() => {
-            restore()
-        })
-        it(`should call handlers with ref`, async () => {
-            testEventsWithRef(touchEvents)
-        })
-    })
-    describe("with mouse events", () => {
-        it(`should call handlers with ref`, async () => {
-            testEventsWithRef(mouseEvents)
-        })
-    })
     describe("with pointer events", () => {
         let restore: Function
         beforeAll(() => {

diff --git a/packages/framer-motion/src/gestures/__tests__/hover.test.tsx b/packages/framer-motion/src/gestures/__tests__/hover.test.tsx
@@ -1,4 +1,4 @@
-import { mouseEnter, mouseLeave, render } from "../../../jest.setup"
+import { pointerEnter, pointerLeave, render } from "../../../jest.setup"
 import * as React from "react"
 import { motion } from "../../"
 import { fireEvent } from "@testing-library/react"
@@ -15,8 +15,8 @@ describe("hover", () => {
         )
 
         const { container } = render(<Component />)
-        mouseEnter(container.firstChild as Element)
-        mouseLeave(container.firstChild as Element)
+        pointerEnter(container.firstChild as Element)
+        pointerLeave(container.firstChild as Element)
 
         expect(hoverIn).toBeCalledTimes(1)
         expect(hoverOut).toBeCalledTimes(1)
@@ -36,7 +36,7 @@ describe("hover", () => {
             const { container, rerender } = render(<Component />)
             rerender(<Component />)
 
-            mouseEnter(container.firstChild as Element)
+            pointerEnter(container.firstChild as Element)
 
             resolve(opacity.get())
         })
@@ -63,7 +63,7 @@ describe("hover", () => {
             const { container, rerender } = render(<Component />)
             rerender(<Component />)
 
-            mouseEnter(container.firstChild as Element)
+            pointerEnter(container.firstChild as Element)
 
             resolve(opacity.get())
         })
@@ -99,7 +99,7 @@ describe("hover", () => {
 
             const { container } = render(<Component />)
 
-            mouseEnter(container.firstChild as Element)
+            pointerEnter(container.firstChild as Element)
             resolve(opacity.get())
         })
 
@@ -130,10 +130,10 @@ describe("hover", () => {
                 <Component onAnimationComplete={onComplete} />
             )
 
-            mouseEnter(container.firstChild as Element)
+            pointerEnter(container.firstChild as Element)
             setTimeout(() => {
                 hasMousedOut = true
-                mouseLeave(container.firstChild as Element)
+                pointerLeave(container.firstChild as Element)
             }, 10)
         })
 
@@ -161,8 +161,8 @@ describe("hover", () => {
             const { container, rerender } = render(<Component />)
             rerender(<Component />)
 
-            fireEvent.mouseDown(container.firstChild as Element)
-            mouseEnter(container.firstChild as Element)
+            fireEvent.pointerDown(container.firstChild as Element)
+            pointerEnter(container.firstChild as Element)
 
             resolve([opacity.get(), scale.get()])
         })
@@ -188,10 +188,10 @@ describe("hover", () => {
             const { container, rerender } = render(<Component />)
             rerender(<Component />)
 
-            mouseEnter(container.firstChild as Element)
+            pointerEnter(container.firstChild as Element)
 
             sync.postRender(() => {
-                mouseLeave(container.firstChild as Element)
+                pointerLeave(container.firstChild as Element)
                 sync.postRender(() => resolve(container.firstChild as Element))
             })
         })