Adding test for disabled button

motiondivision · Feb 10, 2025 · fb01f43 · fb01f43
1 parent d92171c
commit fb01f43
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/dev/html/public/playwright/gestures/press.html b/dev/html/public/playwright/gestures/press.html
@@ -20,6 +20,7 @@
         <div class="box" id="press-div">press</div>
         <div class="box" id="press-div-cancel">press</div>
         <button class="box" id="press-button">press</button>
+        <button class="box" id="press-button-disabled" disabled>press</button>
         <button tabindex="-1" class="box" id="press-no-tab-index-1">
             press
         </button>

diff --git a/packages/framer-motion/src/gestures/__tests__/press.test.tsx b/packages/framer-motion/src/gestures/__tests__/press.test.tsx
@@ -32,6 +32,21 @@ describe("press", () => {
         expect(press).toBeCalledTimes(1)
     })
 
+    test("press event listeners don't fire if element is disabled", async () => {
+        const press = jest.fn()
+        const Component = () => <motion.button disabled onTap={() => press()} />
+
+        const { container, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        pointerDown(container.firstChild as Element)
+        pointerUp(container.firstChild as Element)
+
+        await nextFrame()
+
+        expect(press).toBeCalledTimes(0)
+    })
+
     test("global press event listeners fire", async () => {
         const press = jest.fn()
         const Component = () => (

diff --git a/tests/gestures/press.spec.ts b/tests/gestures/press.spec.ts
@@ -96,6 +96,20 @@ test.describe("press events", () => {
         await expect(pressDiv).toHaveText("end")
     })
 
+    test("press doesn't handle events when element is disabled", async ({
+        page,
+    }) => {
+        const pressDiv = page.locator("#press-button-disabled")
+
+        // Start press
+        await pressDiv.dispatchEvent("pointerdown", { isPrimary: true })
+        await expect(pressDiv).not.toHaveText("start")
+
+        // Release pointer - should trigger press end
+        await page.dispatchEvent("body", "pointerup", { isPrimary: true })
+        await expect(pressDiv).not.toHaveText("end")
+    })
+
     test("press handles pointer movement correctly", async ({ page }) => {
         const pressDiv = page.locator("#press-div")
         const pressDivCancel = page.locator("#press-div-cancel")