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

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

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

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

        // Start press
        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 press
        await page.dispatchEvent("body", "pointerup", { isPrimary: true })
        await page.waitForTimeout(500)

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