import { test, expect } from "@playwright/test"

test.describe("Gestures", () => {
    test.beforeEach(async ({ page }) => {
        await page.goto("/react/gestures")
    })

    test("box triggers whileHover and whileTap animations", async ({
        page,
    }) => {
        const box = page.locator("#sandbox > div")

        // Initial hover
        await box.hover()
        await page.waitForTimeout(500)
        await expect(box).toHaveCSS("transform", "matrix(1.2, 0, 0, 1.2, 0, 0)")

        // Start tap
        await box.dispatchEvent("pointerdown", {
            isPrimary: true,
        })
        await page.waitForTimeout(500)
        await expect(box).toHaveCSS("transform", "matrix(0.8, 0, 0, 0.8, 0, 0)")

        // End tap
        await page.dispatchEvent("body", "pointerup", { isPrimary: true })
        await page.waitForTimeout(500)

        // Verify scale returns to whileHover state
        await expect(box).toHaveCSS("transform", "matrix(1.2, 0, 0, 1.2, 0, 0)")
    })
})