Improving test

CHANGELOG.md

@@ -4,6 +4,13 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [7.8.0] 2022-12-13
+
+### Added
+
+-   `.on()` event method to `MotionValue`.
+-   `"animationStart"`, `"animationComplete"`, and `"animationCancel"` events for `MotionValue`.
+
 ## [7.7.3] 2022-12-13
 
 ### Fixed

packages/framer-motion/src/value/__tests__/index.test.ts

@@ -0,0 +1,73 @@
+import { motionValue } from "../"
+import { animate } from "../../animation/animate"
+
+describe("motionValue", () => {
+    test("change event fires when value changes", () => {
+        const value = motionValue(0)
+        const callback = jest.fn()
+
+        value.on("change", callback)
+
+        expect(callback).not.toBeCalled()
+        value.set(1)
+        expect(callback).toBeCalledTimes(1)
+        value.set(1)
+        expect(callback).toBeCalledTimes(1)
+    })
+
+    test("renderRequest event fires", () => {
+        const value = motionValue(0)
+        const callback = jest.fn()
+
+        value.on("renderRequest", callback)
+
+        expect(callback).not.toBeCalled()
+        value.set(1)
+        expect(callback).toBeCalledTimes(1)
+    })
+
+    test("animationStart event fires", () => {
+        const value = motionValue(0)
+        const callback = jest.fn()
+
+        value.on("animationStart", callback)
+
+        expect(callback).not.toBeCalled()
+
+        animate(value, 2)
+
+        expect(callback).toBeCalledTimes(1)
+    })
+
+    test("animationCancel event fires", () => {
+        const value = motionValue(0)
+        const callback = jest.fn()
+
+        value.on("animationCancel", callback)
+
+        expect(callback).not.toBeCalled()
+
+        animate(value, 1)
+        animate(value, 2)
+
+        expect(callback).toBeCalledTimes(1)
+    })
+
+    test("animationComplete event fires", async () => {
+        const value = motionValue(0)
+        const callback = jest.fn()
+
+        value.on("animationComplete", callback)
+
+        expect(callback).not.toBeCalled()
+
+        animate(value, 1, { duration: 0.01 })
+
+        return new Promise<void>((resolve) => {
+            setTimeout(() => {
+                expect(callback).toBeCalledTimes(1)
+                resolve()
+            }, 100)
+        })
+    })
+})

packages/framer-motion/src/value/index.ts

@@ -22,9 +22,9 @@ export interface MotionValueEventCallbacks<V> {
     animationStart: () => void
     animationComplete: () => void
     animationCancel: () => void
-    change: (latest: V) => void
+    change: (latestValue: V) => void
     renderRequest: () => void
-    velocityChange: (latest: number) => void
+    velocityChange: (latestVelocity: number) => void
 }
 
 const isFloat = (value: any): value is string => {