chore: add dynamic variant test

Author: rick-hup

playground/vite/src/views/dynamic-variant.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+// Use local alias for dev, not 'motion-vue'
+import { motion } from 'motion-v'
+
+const show = ref(true)
+const toggle = () => (show.value = !show.value)
+const variants = {
+  initial: { y: 20, opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+  hidden: { y: 0, opacity: 0.25 },
+}
+</script>
+
+<template>
+  <div style="padding: 40px">
+    <button
+      data-testid="toggle-btn"
+      @click="toggle"
+    >
+      Toggle
+    </button>
+    <motion.button
+      data-testid="motion-btn"
+      initial="initial"
+      :variants="variants"
+      :while-in-view="show ? 'visible' : 'hidden'"
+      style="width: 120px; height: 40px; margin-top: 20px"
+    >
+      CLICK ME
+    </motion.button>
+  </div>
+</template>

tests/variant.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+// This test assumes the Vite dev server is running and the route is /dynamic-variant
+
+test.describe('Variant', () => {
+  test('should animate opacity when variant changes', async ({ page }) => {
+    await page.goto('/dynamic-variant')
+    const motionBtn = page.locator('[data-testid="motion-btn"]')
+    // Initial: visible
+    await expect(motionBtn).toHaveCSS('opacity', '1')
+    // Click toggle
+    await page.click('[data-testid="toggle-btn"]')
+    // After: hidden
+    await page.waitForTimeout(250)
+    await expect(motionBtn).toHaveCSS('opacity', '0.25')
+    // Click toggle again
+    await page.click('[data-testid="toggle-btn"]')
+    await page.waitForTimeout(250)
+    await expect(motionBtn).toHaveCSS('opacity', '1')
+  })
+})