[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
feat(ui): add html coverage (#3071)
Co-authored-by: Vladimir Sheremet <sleuths.slews0s@icloud.com>
authored by
Joaquín Sánchez
Vladimir Sheremet
and committed by
GitHub
(May 3, 2023, 11:23 AM +0200)
e24cd9b2
78bad4ab
+216
-20
+12
.eslintrc
+12
.eslintrc
+3
pnpm-lock.yaml
+3
pnpm-lock.yaml
+2
docs/config/index.md
+2
docs/config/index.md
+12
docs/guide/coverage.md
+12
docs/guide/coverage.md
···
164
164
## Other Options
165
165
166
166
To see all configurable options for coverage, see the [coverage Config Reference](https://vitest.dev/config/#coverage).
167
+
168
+
## Vitest UI
169
+
170
+
Since Vitest 0.31.0, you can check your coverage report in [Vitest UI](./ui).
171
+
172
+
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.
173
+
174
+
<img alt="html coverage activation in Vitest UI" img-light src="/vitest-ui-show-coverage-light.png">
175
+
<img alt="html coverage activation in Vitest UI" img-dark src="/vitest-ui-show-coverage-dark.png">
176
+
177
+
<img alt="html coverage in Vitest UI" img-light src="/vitest-ui-coverage-light.png">
178
+
<img alt="html coverage in Vitest UI" img-dark src="/vitest-ui-coverage-dark.png">
+2
docs/guide/ui.md
+2
docs/guide/ui.md
···
34
34
}
35
35
```
36
36
37
+
Since Vitest 0.31.0, you can check your coverage report in Vitest UI: check [Vitest UI Coverage](/guide/coverage#vitest-ui) for more details.
38
+
37
39
::: warning
38
40
If you still want to see how your tests are running in real time in the terminal, don't forget to add `default` reporter to `reporters` option: `['default', 'html']`.
39
41
:::
docs/public/vitest-ui-coverage-dark.png
docs/public/vitest-ui-coverage-dark.png
This is a binary file and will not be displayed.
docs/public/vitest-ui-coverage-light.png
docs/public/vitest-ui-coverage-light.png
This is a binary file and will not be displayed.
docs/public/vitest-ui-show-coverage-dark.png
docs/public/vitest-ui-show-coverage-dark.png
This is a binary file and will not be displayed.
docs/public/vitest-ui-show-coverage-light.png
docs/public/vitest-ui-show-coverage-light.png
This is a binary file and will not be displayed.
+3
packages/ui/package.json
+3
packages/ui/package.json
+2
-1
packages/ui/rollup.config.js
+2
-1
packages/ui/rollup.config.js
-1
packages/coverage-c8/src/provider.ts
-1
packages/coverage-c8/src/provider.ts
···
9
9
import type { EncodedSourceMap } from 'vite-node'
10
10
import { coverageConfigDefaults } from 'vitest/config'
11
11
import { BaseCoverageProvider } from 'vitest/coverage'
12
-
// eslint-disable-next-line no-restricted-imports
13
12
import type { AfterSuiteRunMeta, CoverageC8Options, CoverageProvider, ReportContext, ResolvedCoverageOptions } from 'vitest'
14
13
import type { Vitest } from 'vitest/node'
15
14
import type { Report } from 'c8'
-1
packages/coverage-istanbul/src/provider.ts
-1
packages/coverage-istanbul/src/provider.ts
+1
packages/ui/client/components.d.ts
+1
packages/ui/client/components.d.ts
···
11
11
export interface GlobalComponents {
12
12
CodeMirror: typeof import('./components/CodeMirror.vue')['default']
13
13
ConnectionOverlay: typeof import('./components/ConnectionOverlay.vue')['default']
14
+
Coverage: typeof import('./components/Coverage.vue')['default']
14
15
Dashboard: typeof import('./components/Dashboard.vue')['default']
15
16
DashboardEntry: typeof import('./components/dashboard/DashboardEntry.vue')['default']
16
17
DetailsPanel: typeof import('./components/DetailsPanel.vue')['default']
+36
-3
packages/ui/node/index.ts
+36
-3
packages/ui/node/index.ts
···
1
1
import { fileURLToPath } from 'node:url'
2
-
import { resolve } from 'pathe'
2
+
import { basename, resolve } from 'pathe'
3
3
import sirv from 'sirv'
4
4
import type { Plugin } from 'vite'
5
+
import { coverageConfigDefaults } from 'vitest/config'
6
+
import type { ResolvedConfig, Vitest } from 'vitest'
5
7
6
-
export default (base = '/__vitest__/') => {
8
+
export default (ctx: Vitest) => {
7
9
return <Plugin>{
8
10
name: 'vitest:ui',
9
11
apply: 'serve',
10
-
async configureServer(server) {
12
+
configureServer(server) {
13
+
const uiOptions: ResolvedConfig = ctx.config
14
+
const base = uiOptions.uiBase
15
+
const coverageFolder = resolveCoverageFolder(ctx)
16
+
const coveragePath = coverageFolder ? `/${basename(coverageFolder)}/` : undefined
17
+
if (coveragePath && base === coveragePath)
18
+
throw new Error(`The ui base path and the coverage path cannot be the same: ${base}, change coverage.reportsDirectory`)
19
+
20
+
coverageFolder && server.middlewares.use(coveragePath!, sirv(coverageFolder, {
21
+
single: true,
22
+
dev: true,
23
+
}))
11
24
const clientDist = resolve(fileURLToPath(import.meta.url), '../client')
12
25
server.middlewares.use(base, sirv(clientDist, {
13
26
single: true,
···
15
28
}))
16
29
},
17
30
}
31
+
}
32
+
33
+
function resolveCoverageFolder(ctx: Vitest) {
34
+
const options: ResolvedConfig = ctx.config
35
+
const enabled = options.api?.port
36
+
&& options.coverage?.enabled
37
+
&& options.coverage.reporter.some((reporter) => {
38
+
if (typeof reporter === 'string')
39
+
return reporter === 'html'
40
+
41
+
return reporter.length && reporter.includes('html')
42
+
})
43
+
44
+
// reportsDirectory not resolved yet
45
+
return enabled
46
+
? resolve(
47
+
ctx.config?.root || options.root || process.cwd(),
48
+
options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory,
49
+
)
50
+
: undefined
18
51
}
-1
packages/ui/node/reporter.ts
-1
packages/ui/node/reporter.ts
···
6
6
import c from 'picocolors'
7
7
import fg from 'fast-glob'
8
8
import { stringify } from 'flatted'
9
-
// eslint-disable-next-line no-restricted-imports
10
9
import type { File, ModuleGraphData, Reporter, ResolvedConfig, Vitest } from 'vitest'
11
10
import { getModuleGraph } from '../../vitest/src/utils/graph'
12
11
import { getOutputFile } from '../../vitest/src/utils/config-helpers'
-1
packages/browser/src/client/main.ts
-1
packages/browser/src/client/main.ts
+40
packages/ui/client/components/Coverage.vue
+40
packages/ui/client/components/Coverage.vue
···
1
+
<script setup lang="ts">
2
+
defineProps<{
3
+
src: string
4
+
}>()
5
+
</script>
6
+
7
+
<template>
8
+
<div h="full" flex="~ col">
9
+
<div
10
+
p="3"
11
+
h-10
12
+
flex="~ gap-2"
13
+
items-center
14
+
bg-header
15
+
border="b base"
16
+
>
17
+
<div class="i-carbon:folder-details-reference" />
18
+
<span
19
+
pl-1
20
+
font-bold
21
+
text-sm
22
+
flex-auto
23
+
ws-nowrap
24
+
overflow-hidden
25
+
truncate
26
+
>Coverage</span>
27
+
</div>
28
+
<div flex-auto py-1 bg-white>
29
+
<iframe id="vitest-ui-coverage" :src="src" />
30
+
</div>
31
+
</div>
32
+
</template>
33
+
34
+
<style>
35
+
#vitest-ui-coverage {
36
+
width: 100%;
37
+
height: calc(100vh - 42px);
38
+
border: none;
39
+
}
40
+
</style>
+9
-1
packages/ui/client/components/Suites.vue
+9
-1
packages/ui/client/components/Suites.vue
···
1
1
<script setup lang="ts">
2
2
import { hasFailedSnapshot } from '@vitest/ws-client'
3
+
import { coverageEnabled, disableCoverage } from '../composables/navigation'
3
4
import { client, current, isReport, runCurrent } from '~/composables/client'
4
5
5
6
const name = computed(() => current.value?.name.split(/\//g).pop())
···
7
8
const failedSnapshot = computed(() => current.value?.tasks && hasFailedSnapshot(current.value?.tasks))
8
9
function updateSnapshot() {
9
10
return current.value && client.rpc.updateSnapshot(current.value)
11
+
}
12
+
async function onRunCurrent() {
13
+
if (coverageEnabled.value) {
14
+
disableCoverage.value = true
15
+
await nextTick()
16
+
}
17
+
await runCurrent()
10
18
}
11
19
</script>
12
20
···
27
35
v-if="!isReport"
28
36
v-tooltip.bottom="'Rerun file'"
29
37
icon="i-carbon-play"
30
-
@click="runCurrent()"
38
+
@click="onRunCurrent()"
31
39
/>
32
40
</div>
33
41
</template>
+2
-1
packages/ui/client/pages/index.vue
+2
-1
packages/ui/client/pages/index.vue
···
1
1
<script setup lang="ts">
2
2
// @ts-expect-error missing types
3
3
import { Pane, Splitpanes } from 'splitpanes'
4
-
import { initializeNavigation } from '../composables/navigation'
4
+
import { coverageUrl, coverageVisible, initializeNavigation } from '../composables/navigation'
5
5
6
6
const dashboardVisible = initializeNavigation()
7
7
const mainSizes = reactive([33, 67])
···
39
39
<Pane :size="mainSizes[1]">
40
40
<transition>
41
41
<Dashboard v-if="dashboardVisible" key="summary" />
42
+
<Coverage v-else-if="coverageVisible" key="coverage" :src="coverageUrl" />
42
43
<Splitpanes v-else key="detail" @resized="onModuleResized">
43
44
<Pane :size="detailSizes[0]">
44
45
<Suites />