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

test.describe("Enter Animation", () => {
    test.beforeEach(async ({ page }) => {
        await page.goto("/vue/enter-animation")
    })

    test("element animates in with correct scale and opacity", async ({
        page,
    }) => {
        const element = page.locator("#sandbox .ball")

        const initialStyles = await element.evaluate((el) => ({
            opacity: parseFloat(window.getComputedStyle(el).opacity),
        }))

        // Animation already started
        expect(initialStyles.opacity).toBeLessThan(0.5)

        /**
         * Spring visual duration is 0.4s, so we wait for 1.5s to
         * allow for any potential bounce
         */
        await page.waitForTimeout(1500)

        const finalStyles = await element.evaluate((el) => ({
            opacity: window.getComputedStyle(el).opacity,
            transform: window.getComputedStyle(el).transform,
        }))

        expect(finalStyles.opacity).toBe("1")
        expect(finalStyles.transform).toBe("none")
    })
})