From a768015e640c886ae7320db24409e1a01f8c080e Mon Sep 17 00:00:00 2001 From: yoho Date: Mon, 20 Mar 2023 20:06:54 +0800 Subject: [PATCH] feat: support relative path in html report (#2695) Co-authored-by: Vladimir --- docs/guide/ui.md | 2 +- packages/ui/client/composables/client/index.ts | 7 +++---- packages/ui/client/composables/client/static.ts | 2 +- packages/ui/client/constants.ts | 5 +++++ packages/ui/client/global-setup.ts | 3 ++- packages/ui/client/shim.d.ts | 9 +-------- packages/ui/node/reporter.ts | 4 ++-- packages/ui/shim.d.ts | 3 +++ packages/ui/vite.config.ts | 4 ++-- test/ui/test/html-report.spec.ts | 4 ++-- tsconfig.json | 1 + 11 files changed, 23 insertions(+), 21 deletions(-) create mode 100644 packages/ui/client/constants.ts create mode 100644 packages/ui/shim.d.ts diff --git a/docs/guide/ui.md b/docs/guide/ui.md index 18f3595c5f84..4f6f146ba77e 100644 --- a/docs/guide/ui.md +++ b/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. diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts index 8fe4571fb8bb..ef1e41fc9b9a 100644 --- a/packages/ui/client/composables/client/index.ts +++ b/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 = ref('idle') export const client = (function createVitestClient() { diff --git a/packages/ui/client/composables/client/static.ts b/packages/ui/client/composables/client/static.ts index ed2ec87af73f..ac459e9a4259 100644 --- a/packages/ui/client/composables/client/static.ts +++ b/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: () => { diff --git a/packages/ui/client/constants.ts b/packages/ui/client/constants.ts new file mode 100644 index 000000000000..89adbd9d0807 --- /dev/null +++ b/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__ diff --git a/packages/ui/client/global-setup.ts b/packages/ui/client/global-setup.ts index 4058316558c0..552e79065241 100644 --- a/packages/ui/client/global-setup.ts +++ b/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, }) diff --git a/packages/ui/client/shim.d.ts b/packages/ui/client/shim.d.ts index 95c082d89812..2816152ad54f 100644 --- a/packages/ui/client/shim.d.ts +++ b/packages/ui/client/shim.d.ts @@ -1,14 +1,7 @@ /// /// -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 diff --git a/packages/ui/node/reporter.ts b/packages/ui/node/reporter.ts index 4e1ab6704b6b..4351c364b2f2 100644 --- a/packages/ui/node/reporter.ts +++ b/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.')}`) } } diff --git a/packages/ui/shim.d.ts b/packages/ui/shim.d.ts new file mode 100644 index 000000000000..f8a8679ddfc4 --- /dev/null +++ b/packages/ui/shim.d.ts @@ -0,0 +1,3 @@ +/// +/// +/// diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 46c3ed0a9cf7..aed35e025f93 100644 --- a/packages/ui/vite.config.ts +++ b/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(), diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts index 6f8f57f65ad1..05baab68b530 100644 --- a/test/ui/test/html-report.spec.ts +++ b/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 diff --git a/tsconfig.json b/tsconfig.json index aa7534d66b93..09da25c19f99 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -48,6 +48,7 @@ "./packages/*/*.d.ts", "./packages/*/*.d.cts", "./packages/ui/client/**", + "./packages/ui/cypress/**", "./examples/**/*.*", "./bench/**", "./test/typescript/**"