feat: support relative path in html report (#2695)

Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>

Author: poyoho

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/index.ts

@@ -3,14 +3,13 @@ import type { WebSocketStatus } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { reactive } from 'vue'
 import type { RunState } from '../../../types'
+import { ENTRY_URL, isReport } from '../../constants'
 import { activeFileId } from '../params'
 import { createStaticClient } from './static'
 import type { File, ResolvedConfig } from '#types'
 
-export const PORT = import.meta.hot ? '51204' : location.port
-export const HOST = [location.hostname, PORT].filter(Boolean).join(':')
-export const ENTRY_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${HOST}/__vitest_api__`
-export const isReport = !!window.METADATA_PATH
+export { ENTRY_URL, PORT, HOST, isReport } from '../../constants'
+
 export const testRunState: Ref<RunState> = ref('idle')
 
 export const client = (function createVitestClient() {

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/constants.ts

@@ -0,0 +1,5 @@
+export const PORT = import.meta.hot ? '51204' : location.port
+export const HOST = [location.hostname, PORT].filter(Boolean).join(':')
+export const ENTRY_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${HOST}/__vitest_api__`
+export const isReport = !!window.METADATA_PATH
+export const BASE_PATH = isReport ? import.meta.env.BASE_URL : __BASE_PATH__

packages/ui/client/global-setup.ts

@@ -11,6 +11,7 @@ import 'codemirror-theme-vars/base.css'
 import './styles/main.css'
 import 'floating-vue/dist/style.css'
 import 'uno.css'
+import { BASE_PATH } from './constants'
 
 export const directives = {
   tooltip: VTooltip,
@@ -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(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

tsconfig.json

@@ -48,6 +48,7 @@
     "./packages/*/*.d.ts",
     "./packages/*/*.d.cts",
     "./packages/ui/client/**",
+    "./packages/ui/cypress/**",
     "./examples/**/*.*",
     "./bench/**",
     "./test/typescript/**"