feat: support relative path in html report

docs/guide/ui.md

@@ -42,7 +42,7 @@ If you still want to see how your tests are running in real time in the terminal
 To preview your HTML report, you can use [vite preview](https://vitejs.dev/guide/cli.html#vite-preview) command:
 
 ```sh
-npx vite preview --base __vitest__ --outDir ./html
+npx vite preview --outDir ./html
 ```
 
 You can configure output with [`outputFile`](/config/#outputfile) config option. You need to specify `.html` path there. For example, `./html/index.html` is the default value.

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

@@ -32,7 +32,7 @@ export function createStaticClient(): VitestClient {
     getFiles: () => {
       return metadata.files
     },
-    getPaths: async () => {
+    getPaths: () => {
       return metadata.paths
     },
     getConfig: () => {

packages/ui/client/global-setup.ts

@@ -3,6 +3,7 @@
 import { createRouter as _createRouter, createWebHistory } from 'vue-router'
 import FloatingVue, { VTooltip } from 'floating-vue'
 import routes from 'virtual:generated-pages'
+import { isReport } from '~/composables/client'
 import 'd3-graph-controller/default.css'
 import 'splitpanes/dist/splitpanes.css'
 import '@unocss/reset/tailwind.css'
@@ -20,7 +21,7 @@ FloatingVue.options.instantMove = true
 FloatingVue.options.distance = 10
 
 export const createRouter = () => _createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(isReport ? import.meta.env.BASE_URL : __BASE_PATH__),
   routes,
 })
 

packages/ui/client/shim.d.ts

@@ -1,14 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pages/client" />
 
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-const __REPORT__: boolean
+const __BASE_PATH__: string
 
 declare interface Window {
   METADATA_PATH?: string

packages/ui/node/reporter.ts

@@ -30,7 +30,7 @@ export default class HTMLReporter implements Reporter {
 
   async onFinished() {
     const result: HTMLReportData = {
-      paths: await this.ctx.state.getPaths(),
+      paths: this.ctx.state.getPaths(),
       files: this.ctx.state.getFiles(),
       config: this.ctx.config,
       moduleGraph: {},
@@ -71,6 +71,6 @@ export default class HTMLReporter implements Reporter {
     }))
 
     this.ctx.logger.log(`${c.bold(c.inverse(c.magenta(' HTML ')))} ${c.magenta('Report is generated')}`)
-    this.ctx.logger.log(`${c.dim('       You can run ')}${c.bold(`npx vite preview --base __vitest__ --outDir ${relative(this.ctx.config.root, htmlDir)}`)}${c.dim(' to see the test results.')}`)
+    this.ctx.logger.log(`${c.dim('       You can run ')}${c.bold(`npx vite preview --outDir ${relative(this.ctx.config.root, htmlDir)}`)}${c.dim(' to see the test results.')}`)
   }
 }

packages/ui/shim.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="./client/auto-imports" />
+/// <reference types="./client/components" />
+/// <reference types="./client/shim" />

packages/ui/vite.config.ts

@@ -15,7 +15,7 @@ const debugLink = 'http://127.0.0.1:4173/__vitest__'
 
 export const config: UserConfig = {
   root: __dirname,
-  base: '/__vitest__/',
+  base: './',
   resolve: {
     dedupe: ['vue'],
     alias: {
@@ -24,7 +24,7 @@ export const config: UserConfig = {
     },
   },
   define: {
-    __REPORT__: false,
+    __BASE_PATH__: '"/__vitest__/"',
   },
   plugins: [
     Vue(),

test/ui/test/html-report.spec.ts

@@ -20,8 +20,8 @@ describe.skipIf(isWindows)('html report', () => {
 
     const exit = await startServerCommand(
       root,
-    `npx vite preview --outDir html --strict-port --base /__vitest__/ --port ${port}`,
-    `http://localhost:${port}/__vitest__/`,
+      `npx vite preview --outDir html --strict-port --port ${port}`,
+      `http://localhost:${port}/`,
     )
 
     return exit