chore(ui): fix static ui client types (#7201)

.gitignore

@@ -29,3 +29,6 @@ test/browser/fixtures/update-snapshot/basic.test.ts
 test/cli/fixtures/browser-multiple/basic-*
 .vitest-reports
 *.tsbuildinfo
+# exclude static html reporter folder
+test/browser/html/
+test/core/html/

packages/ui/client/composables/client/static.ts

@@ -58,6 +58,7 @@ export function createStaticClient(): VitestClient {
     onTaskUpdate: noop,
     writeFile: asyncNoop,
     rerun: asyncNoop,
+    rerunTask: asyncNoop,
     updateSnapshot: asyncNoop,
     resolveSnapshotPath: asyncNoop,
     snapshotSaved: asyncNoop,
@@ -80,7 +81,7 @@ export function createStaticClient(): VitestClient {
 
   ctx.rpc = rpc as any as BirpcReturn<WebSocketHandlers, WebSocketEvents>
 
-  let openPromise: Promise<void>
+  const openPromise = Promise.resolve()
 
   function reconnect() {
     registerMetadata()

packages/ui/client/composables/explorer/search.ts

@@ -24,7 +24,7 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
   const disableClearSearch = computed(() => search.value === '')
   const debouncedSearch = ref(search.value)
 
-  debouncedWatch(search, (value) => {
+  debouncedWatch(() => search.value, (value) => {
     debouncedSearch.value = value?.trim() ?? ''
   }, { debounce: 256 })
 

packages/ui/client/global-setup.ts

@@ -1,6 +1,7 @@
 /// <reference types="vite-plugin-pages/client" />
 
-import FloatingVue, { VTooltip } from 'floating-vue'
+import type { Directive } from 'vue'
+import FloatingVue, { vTooltip } from 'floating-vue'
 import routes from 'virtual:generated-pages'
 import {
   createRouter as _createRouter,
@@ -15,8 +16,8 @@ import './styles/main.css'
 import 'floating-vue/dist/style.css'
 import 'uno.css'
 
-export const directives = {
-  tooltip: VTooltip,
+export const directives: Record<string, Directive> = {
+  tooltip: vTooltip,
 }
 
 FloatingVue.options.instantMove = true

packages/ui/client/test.ts

@@ -3,15 +3,15 @@ import {
   cleanup,
   type RenderOptions,
 } from '@testing-library/vue'
-import { VTooltip } from 'floating-vue'
+import { vTooltip } from 'floating-vue'
 import { afterEach } from 'vitest'
 
-export function render(component: any, options?: RenderOptions) {
+export function render<C>(component: C, options?: RenderOptions<C>) {
   return _render(component, {
     ...options,
     global: {
       directives: {
-        tooltip: VTooltip,
+        tooltip: vTooltip,
       },
     },
   })

test/browser/package.json

@@ -18,7 +18,8 @@
     "coverage": "vitest --coverage.enabled --coverage.provider=istanbul --browser.headless=yes",
     "test:browser:preview": "PROVIDER=preview vitest",
     "test:browser:playwright": "PROVIDER=playwright vitest",
-    "test:browser:webdriverio": "PROVIDER=webdriverio vitest"
+    "test:browser:webdriverio": "PROVIDER=webdriverio vitest",
+    "test:browser:playwright:html": "PROVIDER=playwright vitest --reporter=html"
   },
   "devDependencies": {
     "@testing-library/react": "^13.2.0",

test/browser/vitest.config.mts

@@ -102,7 +102,10 @@ export default defineConfig({
     },
     open: false,
     diff: './custom-diff-config.ts',
-    outputFile: './browser.json',
+    outputFile: {
+      html: './html/index.html',
+      json: './browser.json',
+    },
     reporters: ['json', {
       onInit: noop,
       onPathsCollected: noop,

test/core/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "test": "vitest",
+    "test:html": "vitest --reporter=html",
     "test:threads": "vitest --project threads",
     "test:forks": "vitest --project forks",
     "test:vmThreads": "vitest --project vmThreads",

tsconfig.check.json

@@ -11,7 +11,6 @@
     "./packages/vitest/dist/**",
     "./packages/*/*.d.ts",
     "./packages/*/*.d.cts",
-    "./packages/ui/client/**",
     "./examples/**/*.*",
     "./bench/**",
     "./test/benchmark/fixtures/**",