From df2bfca9aae245ba1787aaafed43cae3194fc097 Mon Sep 17 00:00:00 2001 From: userquin Date: Tue, 8 Aug 2023 20:47:22 +0200 Subject: [PATCH 1/3] feat: add support for ui coverage with subdir --- docs/guide/coverage.md | 4 +++- packages/ui/client/composables/navigation.ts | 10 ++++++++- packages/ui/node/index.ts | 23 ++++++++++++++++---- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/docs/guide/coverage.md b/docs/guide/coverage.md index 19ab602b4cb6..e09a2e21034c 100644 --- a/docs/guide/coverage.md +++ b/docs/guide/coverage.md @@ -169,7 +169,9 @@ To see all configurable options for coverage, see the [coverage Config Reference Since Vitest 0.31.0, you can check your coverage report in [Vitest UI](./ui). -If you have configured coverage reporters, don't forget to add `html` reporter to the list, Vitest UI will only enable html coverage report if it is present. +Vitest UI will enable coverage report when it is enabled explicitly and the html coverage reporter is present, otherwise it will not be available: +- enable `coverage.enabled=true` in your configuration or run Vitest with `--coverage.enabled=true` flag +- add `html` to the `coverage.reporters` list: you can also enable `subdir` option to put coverage report in a subdirectory html coverage activation in Vitest UI html coverage activation in Vitest UI diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts index cb6fd3186cfc..a459969e6618 100644 --- a/packages/ui/client/composables/navigation.ts +++ b/packages/ui/client/composables/navigation.ts @@ -21,7 +21,15 @@ export const coverageUrl = computed(() => { if (coverageEnabled.value) { const url = `${window.location.protocol}//${window.location.hostname}:${config.value!.api!.port!}` const idx = coverage.value!.reportsDirectory.lastIndexOf('/') - return `${url}/${coverage.value!.reportsDirectory.slice(idx + 1)}/index.html` + const htmlReporter = coverage.value!.reporter.find((reporter) => { + if (reporter[0] !== 'html') + return undefined + + return reporter + }) + return htmlReporter && 'subdir' in htmlReporter[1] + ? `${url}/${coverage.value!.reportsDirectory.slice(idx + 1)}/${htmlReporter[1].subdir}/index.html` + : `${url}/${coverage.value!.reportsDirectory.slice(idx + 1)}/index.html` } return undefined diff --git a/packages/ui/node/index.ts b/packages/ui/node/index.ts index 1ca2f972213c..7592b1145c63 100644 --- a/packages/ui/node/index.ts +++ b/packages/ui/node/index.ts @@ -13,11 +13,11 @@ export default (ctx: Vitest) => { const uiOptions = ctx.config const base = uiOptions.uiBase const coverageFolder = resolveCoverageFolder(ctx) - const coveragePath = coverageFolder ? `/${basename(coverageFolder)}/` : undefined + const coveragePath = coverageFolder ? coverageFolder[1] : undefined if (coveragePath && base === coveragePath) throw new Error(`The ui base path and the coverage path cannot be the same: ${base}, change coverage.reportsDirectory`) - coverageFolder && server.middlewares.use(coveragePath!, sirv(coverageFolder, { + coverageFolder && server.middlewares.use(coveragePath!, sirv(coverageFolder[0], { single: true, dev: true, setHeaders: (res) => { @@ -35,20 +35,35 @@ export default (ctx: Vitest) => { function resolveCoverageFolder(ctx: Vitest) { const options = ctx.config + let subdir: string | undefined const enabled = options.api?.port && options.coverage?.enabled && options.coverage.reporter.some((reporter) => { if (typeof reporter === 'string') return reporter === 'html' - return reporter.length && reporter.includes('html') + if (reporter[0] !== 'html') + return false + + if ('subdir' in reporter[1]) + subdir = reporter[1].subdir as string + + return true }) // reportsDirectory not resolved yet - return enabled + const root = enabled ? resolve( ctx.config?.root || options.root || process.cwd(), options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory, ) : undefined + + if (!root) + return undefined + + if (!subdir) + return [root, `/${basename(root)}/`] + + return [resolve(root, subdir), `/${basename(root)}/${subdir}/`] } From f37e2e12ad49f6a1a7dcf2dfcde4ca4988aa976e Mon Sep 17 00:00:00 2001 From: userquin Date: Wed, 9 Aug 2023 13:16:08 +0200 Subject: [PATCH 2/3] chore: change node logic --- packages/ui/node/index.ts | 33 ++++++++++++++------------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/ui/node/index.ts b/packages/ui/node/index.ts index 7592b1145c63..cfdc3bf1b0d7 100644 --- a/packages/ui/node/index.ts +++ b/packages/ui/node/index.ts @@ -35,33 +35,28 @@ export default (ctx: Vitest) => { function resolveCoverageFolder(ctx: Vitest) { const options = ctx.config - let subdir: string | undefined - const enabled = options.api?.port - && options.coverage?.enabled - && options.coverage.reporter.some((reporter) => { + const htmlReporter = (options.api?.port && options.coverage?.enabled) + ? options.coverage.reporter.find((reporter) => { if (typeof reporter === 'string') return reporter === 'html' - if (reporter[0] !== 'html') - return false - - if ('subdir' in reporter[1]) - subdir = reporter[1].subdir as string - - return true + return reporter[0] === 'html' }) - - // reportsDirectory not resolved yet - const root = enabled - ? resolve( - ctx.config?.root || options.root || process.cwd(), - options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory, - ) : undefined - if (!root) + if (!htmlReporter) return undefined + // reportsDirectory not resolved yet + const root = resolve( + ctx.config?.root || options.root || process.cwd(), + options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory, + ) + + const subdir = (htmlReporter && Array.isArray(htmlReporter) && htmlReporter.length > 1 && 'subdir' in htmlReporter[1]) + ? htmlReporter[1].subdir + : undefined + if (!subdir) return [root, `/${basename(root)}/`] From 2379488a64521c306e0543fb2ed5c14c215bfc50 Mon Sep 17 00:00:00 2001 From: userquin Date: Wed, 9 Aug 2023 13:17:54 +0200 Subject: [PATCH 3/3] chore: cleanup --- packages/ui/node/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/node/index.ts b/packages/ui/node/index.ts index cfdc3bf1b0d7..c00bab66b350 100644 --- a/packages/ui/node/index.ts +++ b/packages/ui/node/index.ts @@ -53,7 +53,7 @@ function resolveCoverageFolder(ctx: Vitest) { options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory, ) - const subdir = (htmlReporter && Array.isArray(htmlReporter) && htmlReporter.length > 1 && 'subdir' in htmlReporter[1]) + const subdir = (Array.isArray(htmlReporter) && htmlReporter.length > 1 && 'subdir' in htmlReporter[1]) ? htmlReporter[1].subdir : undefined