From 624003cae87786a655e89890a5c7cd43c7373904 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Tue, 13 Dec 2022 12:39:44 +0100
Subject: [PATCH] Improving test

---
 CHANGELOG.md                                  |  7 ++
 .../src/value/__tests__/index.test.ts         | 73 +++++++++++++++++++
 packages/framer-motion/src/value/index.ts     |  4 +-
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 packages/framer-motion/src/value/__tests__/index.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20a5f5b7c3..00c886ff8a 100644
--- a/CHANGELOG.md
+++ b/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.10.0] 2022-12-15
+
+### Added
+
+-   `.on()` event method to `MotionValue`.
+-   `"animationStart"`, `"animationComplete"`, and `"animationCancel"` events for `MotionValue`.
+
 ## [7.9.1] 2022-12-14
 
 ### Fixed
diff --git a/packages/framer-motion/src/value/__tests__/index.test.ts b/packages/framer-motion/src/value/__tests__/index.test.ts
new file mode 100644
index 0000000000..c430a8b2f8
--- /dev/null
+++ b/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)
+        })
+    })
+})
diff --git a/packages/framer-motion/src/value/index.ts b/packages/framer-motion/src/value/index.ts
index bcb4a674fd..1fa670db0c 100644
--- a/packages/framer-motion/src/value/index.ts
+++ b/packages/framer-motion/src/value/index.ts
@@ -23,9 +23,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 => {