Skip to content

Commit

Permalink
Fixing tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattgperry
mattgperry committed Mar 5, 2023
1 parent d9d94e2 commit 0d06abf
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 21 deletions.
11 changes: 8 additions & 3 deletions packages/framer-motion/src/gestures/__tests__/hover.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { transformValues } from "../../motion/__tests__/util-transform-values"
import { sync } from "../../frameloop"

describe("hover", () => {
test("hover event listeners fire", () => {
test("hover event listeners fire", async () => {
const hoverIn = jest.fn()
const hoverOut = jest.fn()
const Component = () => (
Expand All @@ -22,8 +22,13 @@ describe("hover", () => {
pointerEnter(container.firstChild as Element)
pointerLeave(container.firstChild as Element)

expect(hoverIn).toBeCalledTimes(1)
expect(hoverOut).toBeCalledTimes(1)
return new Promise<void>((resolve) => {
sync.render(() => {
expect(hoverIn).toBeCalledTimes(1)
expect(hoverOut).toBeCalledTimes(1)
resolve()
})
})
})

test("whileHover applied", async () => {
Expand Down
48 changes: 37 additions & 11 deletions packages/framer-motion/src/gestures/__tests__/press.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ import {
} from "../../../jest.setup"
import { drag, MockDrag } from "../drag/__tests__/utils"
import { fireEvent } from "@testing-library/dom"
import { nextFrame } from "./utils"

const enterKey = {
key: "Enter",
}

describe("press", () => {
test("press event listeners fire", () => {
test("press event listeners fire", async () => {
const press = jest.fn()
const Component = () => <motion.div onTap={() => press()} />

Expand All @@ -26,10 +27,12 @@ describe("press", () => {
pointerDown(container.firstChild as Element)
pointerUp(container.firstChild as Element)

await nextFrame()

expect(press).toBeCalledTimes(1)
})

test("press event listeners fire via keyboard", () => {
test("press event listeners fire via keyboard", async () => {
const press = jest.fn()
const pressStart = jest.fn()
const pressCancel = jest.fn()
Expand All @@ -47,16 +50,20 @@ describe("press", () => {
fireEvent.focus(container.firstChild as Element)
fireEvent.keyDown(container.firstChild as Element, enterKey)

await nextFrame()

expect(pressStart).toBeCalledTimes(1)

fireEvent.keyUp(container.firstChild as Element, enterKey)

await nextFrame()

expect(pressStart).toBeCalledTimes(1)
expect(press).toBeCalledTimes(1)
expect(pressCancel).toBeCalledTimes(0)
})

test("press cancel event listeners fire via keyboard", () => {
test("press cancel event listeners fire via keyboard", async () => {
const press = jest.fn()
const pressStart = jest.fn()
const pressCancel = jest.fn()
Expand All @@ -74,16 +81,20 @@ describe("press", () => {
fireEvent.focus(container.firstChild as Element)
fireEvent.keyDown(container.firstChild as Element, enterKey)

await nextFrame()

expect(pressStart).toBeCalledTimes(1)

fireEvent.blur(container.firstChild as Element)

await nextFrame()

expect(pressStart).toBeCalledTimes(1)
expect(press).toBeCalledTimes(0)
expect(pressCancel).toBeCalledTimes(1)
})

test("press cancel event listeners not fired via keyboard after keyUp", () => {
test("press cancel event listeners not fired via keyboard after keyUp", async () => {
const press = jest.fn()
const pressStart = jest.fn()
const pressCancel = jest.fn()
Expand All @@ -102,31 +113,37 @@ describe("press", () => {
fireEvent.keyDown(container.firstChild as Element, enterKey)
fireEvent.keyUp(container.firstChild as Element, enterKey)

await nextFrame()

expect(pressStart).toBeCalledTimes(1)

fireEvent.blur(container.firstChild as Element)

await nextFrame()

expect(press).toBeCalledTimes(1)
expect(pressStart).toBeCalledTimes(1)
expect(pressCancel).toBeCalledTimes(0)
})

test("press event listeners are cleaned up", () => {
test("press event listeners are cleaned up", async () => {
const press = jest.fn()
const { container, rerender } = render(
<motion.div onTap={() => press()} />
)
rerender(<motion.div onTap={() => press()} />)
pointerDown(container.firstChild as Element)
pointerUp(container.firstChild as Element)
await nextFrame()
expect(press).toBeCalledTimes(1)
rerender(<motion.div />)
pointerDown(container.firstChild as Element)
pointerUp(container.firstChild as Element)
await nextFrame()
expect(press).toBeCalledTimes(1)
})

test("onTapCancel is correctly removed from a component", () => {
test("onTapCancel is correctly removed from a component", async () => {
const cancelA = jest.fn()

const Component = () => (
Expand All @@ -147,15 +164,17 @@ describe("press", () => {

pointerDown(a)
pointerUp(a)
await nextFrame()

expect(cancelA).not.toHaveBeenCalled()

pointerDown(b)
pointerUp(b)
await nextFrame()
expect(cancelA).not.toHaveBeenCalled()
})

test("press event listeners fire if triggered by child", () => {
test("press event listeners fire if triggered by child", async () => {
const press = jest.fn()
const Component = () => (
<motion.div onTap={() => press()}>
Expand All @@ -168,11 +187,12 @@ describe("press", () => {

pointerDown(getByTestId("child"))
pointerUp(getByTestId("child"))
await nextFrame()

expect(press).toBeCalledTimes(1)
})

test("press event listeners fire if triggered by child and released on bound element", () => {
test("press event listeners fire if triggered by child and released on bound element", async () => {
const press = jest.fn()
const Component = () => (
<motion.div onTap={() => press()}>
Expand All @@ -185,11 +205,12 @@ describe("press", () => {

pointerDown(getByTestId("child"))
pointerUp(container.firstChild as Element)
await nextFrame()

expect(press).toBeCalledTimes(1)
})

test("press event listeners fire if triggered by bound element and released on child", () => {
test("press event listeners fire if triggered by bound element and released on child", async () => {
const press = jest.fn()
const Component = () => (
<motion.div onTap={() => press()}>
Expand All @@ -202,11 +223,12 @@ describe("press", () => {

pointerDown(container.firstChild as Element)
pointerUp(getByTestId("child"))
await nextFrame()

expect(press).toBeCalledTimes(1)
})

test("press cancel fires if press released outside element", () => {
test("press cancel fires if press released outside element", async () => {
const pressCancel = jest.fn()
const Component = () => (
<motion.div>
Expand All @@ -222,6 +244,7 @@ describe("press", () => {

pointerDown(getByTestId("child"))
pointerUp(container.firstChild as Element)
await nextFrame()

expect(pressCancel).toBeCalledTimes(1)
})
Expand All @@ -246,6 +269,7 @@ describe("press", () => {
await pointer.to(10, 10)
pointer.end()

await nextFrame()
expect(press).toBeCalledTimes(0)
})

Expand All @@ -267,11 +291,12 @@ describe("press", () => {

const pointer = await drag(getByTestId("pressTarget")).to(0.5, 0.5)
pointer.end()
await nextFrame()

expect(press).toBeCalledTimes(1)
})

test("press event listeners unset", () => {
test("press event listeners unset", async () => {
const press = jest.fn()
const Component = () => <motion.div onTap={() => press()} />

Expand All @@ -290,6 +315,7 @@ describe("press", () => {

pointerDown(container.firstChild as Element)
pointerUp(container.firstChild as Element)
await nextFrame()

expect(press).toBeCalledTimes(3)
})
Expand Down
7 changes: 7 additions & 0 deletions packages/framer-motion/src/gestures/__tests__/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { sync } from "../../frameloop"

export async function nextFrame() {
return new Promise<void>((resolve) => {
sync.render(() => resolve())
})
}
15 changes: 14 additions & 1 deletion packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from "react"
import { pointerDown, render } from "../../../../jest.setup"
import { BoundingBox, motion, motionValue, MotionValue } from "../../../"
import { MockDrag, drag, deferred, frame, Point, sleep } from "./utils"
import { nextFrame } from "../../__tests__/utils"

describe("drag", () => {
test("onDragStart fires", async () => {
Expand All @@ -19,6 +20,8 @@ describe("drag", () => {

pointer.end()

await nextFrame()

expect(onDragStart).toBeCalledTimes(1)
})
})
Expand All @@ -43,6 +46,8 @@ describe("dragging", () => {

pointer.end()

await nextFrame()

expect(onDragStart).toBeCalledTimes(0)
})

Expand All @@ -60,6 +65,8 @@ describe("dragging", () => {
const pointer = await drag(container.firstChild).to(100, 100)
pointer.end()

await nextFrame()

expect(onDragEnd).toBeCalledTimes(1)
})

Expand All @@ -78,6 +85,8 @@ describe("dragging", () => {

pointer.end()

await nextFrame()

expect(onDragEnd).not.toBeCalled()
})

Expand Down Expand Up @@ -105,6 +114,8 @@ describe("dragging", () => {

pointer.end()

await nextFrame()

expect(onDragStart).toBeCalledTimes(1)
expect(onDragEnd).toBeCalledTimes(1)
})
Expand Down Expand Up @@ -177,7 +188,7 @@ describe("dragging", () => {
const pointer = await drag(getByTestId("draggable")).to(50, 50)
pointer.end()

expect(onDragEnd.promise).resolves.toEqual(p)
await expect(onDragEnd.promise).resolves.toEqual(p)
})

test("panSessionStart fires", async () => {
Expand All @@ -194,6 +205,8 @@ describe("dragging", () => {
const pointer = await drag(container.firstChild).to(100, 100)
pointer.end()

await nextFrame()

expect(onDragStart).toBeCalledTimes(1)
})

Expand Down
5 changes: 4 additions & 1 deletion packages/framer-motion/src/gestures/drag/__tests__/use-drag-controls.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from "react"
import { render } from "../../../../jest.setup"
import { motion, useDragControls } from "../../../"
import { MockDrag, drag } from "./utils"
import { nextFrame } from "../../__tests__/utils"

describe("useDragControls", () => {
test(".start triggers dragging on a different component", async () => {
Expand Down Expand Up @@ -34,6 +35,8 @@ describe("useDragControls", () => {

pointer.end()

await nextFrame()

expect(onDragStart).toBeCalledTimes(1)
})

Expand Down Expand Up @@ -67,7 +70,7 @@ describe("useDragControls", () => {
).to(100, 100)

pointer.end()

await nextFrame()
expect(onDragStart).toBeCalledTimes(1)
})
})
5 changes: 5 additions & 0 deletions packages/framer-motion/src/motion/__tests__/variant.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as React from "react"
import { Variants } from "../../types"
import { motionValue } from "../../value"
import { useState } from "react"
import { nextFrame } from "../../gestures/__tests__/utils"

describe("animate prop as variant", () => {
test("animates to set variant", async () => {
Expand Down Expand Up @@ -978,13 +979,17 @@ describe("animate prop as variant", () => {

await wait(20)

await nextFrame()

expect(inner).toHaveStyle("background-color: rgb(150,150,0)")

pointerDown(getByTestId("variant-trigger"))
pointerUp(getByTestId("variant-trigger"))

await wait(20)

await nextFrame()

expect(inner).toHaveStyle("background-color: rgb(0, 150,150)")
})

Expand Down
Loading

0 comments on commit 0d06abf

Please sign in to comment.