Skip to content

Commit

Permalink
fix(ui): add support for ui coverage with subdir option (#3917)
Browse files Browse the repository at this point in the history
  • Loading branch information
userquin authored Aug 15, 2023
1 parent 3891d05 commit 6ecfc4e
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 13 deletions.
4 changes: 3 additions & 1 deletion docs/guide/coverage.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<img alt="html coverage activation in Vitest UI" img-light src="/vitest-ui-show-coverage-light.png">
<img alt="html coverage activation in Vitest UI" img-dark src="/vitest-ui-show-coverage-dark.png">
Expand Down
10 changes: 9 additions & 1 deletion packages/ui/client/composables/navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
32 changes: 21 additions & 11 deletions packages/ui/node/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -35,20 +35,30 @@ export default (ctx: Vitest) => {

function resolveCoverageFolder(ctx: Vitest) {
const options = ctx.config
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'

return reporter.length && reporter.includes('html')
return reporter[0] === 'html'
})
: undefined

if (!htmlReporter)
return undefined

// reportsDirectory not resolved yet
return enabled
? resolve(
ctx.config?.root || options.root || process.cwd(),
options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory,
)
const root = resolve(
ctx.config?.root || options.root || process.cwd(),
options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory,
)

const subdir = (Array.isArray(htmlReporter) && htmlReporter.length > 1 && 'subdir' in htmlReporter[1])
? htmlReporter[1].subdir
: undefined

if (!subdir)
return [root, `/${basename(root)}/`]

return [resolve(root, subdir), `/${basename(root)}/${subdir}/`]
}

0 comments on commit 6ecfc4e

Please sign in to comment.