chore: add vitest browser mode for component tests

packages/0/package.json

@@ -17,7 +17,10 @@
   "scripts": {
     "build": "tsdown && pnpm generate:web-types",
     "generate:web-types": "tsx scripts/generate-web-types.ts",
-    "typecheck": "vue-tsc --noEmit --incremental"
+    "typecheck": "vue-tsc --noEmit --incremental",
+    "test:unit": "vitest --project v0:unit",
+    "test:browser": "vitest --project v0:browser",
+    "test:open": "TEST_BAIL=1 vitest --project v0:browser -w"
   },
   "publishConfig": {
     "exports": {
@@ -110,8 +113,11 @@
     "@ant-design/colors": "catalog:",
     "@flagsmith/flagsmith": "catalog:",
     "@material/material-color-utilities": "catalog:",
+    "@testing-library/vue": "catalog:",
+    "@vitest/browser-playwright": "catalog:",
     "@vue/compiler-dom": "catalog:",
     "@vue/test-utils": "catalog:",
+    "jsdom": "catalog:",
     "launchdarkly-js-client-sdk": "catalog:",
     "posthog-js": "catalog:",
     "tsdown": "catalog:",

packages/0/src/components/Combobox/index.test.ts → packages/0/src/components/Combobox/index.browser.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 
 // Adapters
 import { ClientAdapter } from '#v0/composables/createCombobox/adapters/client'
@@ -9,12 +9,6 @@ import { defineComponent, h, nextTick, ref } from 'vue'
 
 import { Combobox } from './index'
 
-// Mock showPopover/hidePopover — not supported in happy-dom
-beforeEach(() => {
-  HTMLElement.prototype.showPopover = vi.fn()
-  HTMLElement.prototype.hidePopover = vi.fn()
-})
-
 // Clean up DOM between tests — cursor uses document.querySelector (global),
 // so stale elements from prior tests cause false matches if not cleared
 afterEach(() => {

packages/0/src/components/Dialog/index.test.ts → packages/0/src/components/Dialog/index.browser.test.ts

@@ -13,10 +13,7 @@ import { Dialog } from './index'
 // Create fresh stack plugin for each test to avoid "Ticket already exists" warnings
 let stackPlugin: ReturnType<typeof createStackPlugin>
 
-// Mock showModal and close for happy-dom
 beforeEach(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn()
-  HTMLDialogElement.prototype.close = vi.fn()
   stackPlugin = createStackPlugin()
 })
 

packages/0/src/components/Popover/index.test.ts → packages/0/src/components/Popover/index.browser.test.ts

@@ -371,7 +371,6 @@ describe('popover', () => {
       })
 
       it('should reflect open state via context', async () => {
-        // Note: Native showPopover() doesn't exist in happy-dom
         // This test verifies the context state is properly reflected
         let contentProps: any
         let rootProps: any

packages/0/src/components/Select/index.test.ts → packages/0/src/components/Select/index.browser.test.ts

@@ -1,17 +1,11 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 // Utilities
 import { mount } from '@vue/test-utils'
 import { defineComponent, h, nextTick, ref } from 'vue'
 
 import { Select } from './index'
 
-// Mock showPopover/hidePopover — not supported in happy-dom
-beforeEach(() => {
-  HTMLElement.prototype.showPopover = vi.fn()
-  HTMLElement.prototype.hidePopover = vi.fn()
-})
-
 /**
  * Helper to mount a complete Select compound and open it so items
  * register with the selection context (useLazy defers rendering

packages/0/test/commands.ts

@@ -0,0 +1,60 @@
+/// <reference types="@vitest/browser-playwright" />
+
+import type { BrowserCommandContext } from 'vitest/node'
+
+async function drag (ctx: BrowserCommandContext, start: [number, number], ...moves: number[][]) {
+  const cdp = await ctx.provider.getCDPSession!(ctx.sessionId)
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchStart',
+    touchPoints: [{ x: start[0], y: start[1] }],
+  })
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchMove',
+    touchPoints: [{ x: start[0], y: start[1] }],
+  })
+  for (const move of moves) {
+    await cdp.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [{ x: move[0], y: move[1] }],
+    })
+  }
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchEnd',
+    touchPoints: [{ x: moves.at(-1)[0], y: moves.at(-1)[1] }],
+  })
+}
+
+async function waitStable (ctx: BrowserCommandContext, selector: string) {
+  const el = ctx.iframe.locator(selector)
+  const handles = await el.elementHandles()
+  await Promise.all(
+    handles.map(h => Promise.any([
+      h.waitForElementState('stable', { timeout: 1000 }),
+      h.waitForElementState('hidden', { timeout: 1000 }),
+    ])),
+  )
+}
+
+async function setFocusEmulationEnabled (ctx: BrowserCommandContext) {
+  const cdp = await ctx.provider.getCDPSession!(ctx.sessionId)
+  await cdp.send('Emulation.setFocusEmulationEnabled', { enabled: true })
+}
+
+async function setReduceMotionEnabled (ctx: BrowserCommandContext) {
+  await ctx.page.emulateMedia({
+    reducedMotion: 'reduce',
+  })
+}
+
+export const commands = {
+  drag,
+  waitStable,
+  setFocusEmulationEnabled,
+  setReduceMotionEnabled,
+}
+
+export type CustomCommands = {
+  [K in keyof typeof commands]: typeof commands[K] extends (ctx: any, ...args: infer A) => any
+    ? (...args: A) => any
+    : never
+}

packages/0/test/globals.d.ts

@@ -0,0 +1,6 @@
+// Types
+import type { CustomCommands } from './commands'
+
+declare module 'vitest/browser' {
+  interface BrowserCommands extends CustomCommands {}
+}

packages/0/test/index.ts

@@ -0,0 +1,29 @@
+export { commands, page, userEvent } from 'vitest/browser'
+export { cleanup, render, screen } from '@testing-library/vue'
+
+export function wait (timeout?: number) {
+  return new Promise(resolve => setTimeout(resolve, timeout))
+}
+
+export function waitAnimationFrame () {
+  return new Promise(resolve => requestAnimationFrame(resolve))
+}
+
+export function touch (element: Element) {
+  function trigger (eventName: string) {
+    return (clientX: number, clientY: number) => {
+      const touches = [{ clientX, clientY }]
+      const event = new Event(eventName)
+      ;(event as any).touches = touches
+      ;(event as any).changedTouches = touches
+      element.dispatchEvent(event)
+      return touch(element)
+    }
+  }
+
+  return {
+    start: trigger('touchstart'),
+    move: trigger('touchmove'),
+    end: trigger('touchend'),
+  }
+}

packages/0/test/setup.ts

@@ -0,0 +1,14 @@
+import './globals'
+
+import { cleanup } from '@testing-library/vue'
+import { afterEach, beforeAll } from 'vitest'
+import { commands } from 'vitest/browser'
+
+beforeAll(async () => {
+  await commands.setFocusEmulationEnabled()
+  await commands.setReduceMotionEnabled()
+})
+
+afterEach(() => {
+  cleanup()
+})

packages/0/test/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": false,
+    "noEmit": true
+  },
+  "include": ["**/*.ts"]
+}

packages/0/vitest.browser.config.ts

@@ -0,0 +1,47 @@
+import { fileURLToPath } from 'node:url'
+
+import { playwright } from '@vitest/browser-playwright'
+import Vue from 'unplugin-vue/rolldown'
+import { defineConfig } from 'vitest/config'
+
+import { commands } from './test/commands'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+      '@vuetify/v0': fileURLToPath(new URL('src', import.meta.url)),
+      '@vuetify/paper': fileURLToPath(new URL('../paper/src', import.meta.url)),
+      '@test': fileURLToPath(new URL('test/index.ts', import.meta.url)),
+      // internal
+      '#v0': fileURLToPath(new URL('src', import.meta.url)),
+      '#paper': fileURLToPath(new URL('../paper/src', import.meta.url)),
+    },
+  },
+  plugins: [Vue()],
+  define: {
+    __DEV__: 'process.env.NODE_ENV !== \'production\'',
+    __VITE_LOGGER_ENABLED__: 'process.env.VITE_LOGGER_ENABLED',
+    __VERSION__: '"0.0.1"',
+  },
+  test: {
+    name: 'v0:browser',
+    globals: true,
+    include: ['**/*.browser.test.{ts,tsx}'],
+    testTimeout: 20_000,
+    setupFiles: ['./test/setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright({
+        actionTimeout: 5000,
+        contextOptions: {
+          reducedMotion: 'reduce',
+        },
+      }),
+      headless: !process.env.TEST_BAIL,
+      commands,
+      instances: [{ browser: 'chromium' }],
+      viewport: { width: 1280, height: 800 },
+    },
+  },
+})

packages/0/vitest.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('src', import.meta.url)),
       '@vuetify/v0': fileURLToPath(new URL('src', import.meta.url)),
       '@vuetify/paper': fileURLToPath(new URL('../paper/src', import.meta.url)),
+      '@test': fileURLToPath(new URL('test/index.ts', import.meta.url)),
       // internal
       '#v0': fileURLToPath(new URL('src', import.meta.url)),
       '#paper': fileURLToPath(new URL('../paper/src', import.meta.url)),
@@ -21,10 +22,11 @@ export default defineConfig({
     __VERSION__: '"0.0.1"',
   },
   test: {
-    projects: ['packages/*'],
+    name: 'v0:unit',
     environment: 'happy-dom',
     globals: true,
-    include: ['**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    include: ['**/*.test.{ts,tsx}'],
+    exclude: ['**/*.browser.test.{ts,tsx}'],
     testTimeout: 20_000,
   },
 })