From ceb025ada06b7780fac4b001e452f25e1ddbf784 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sun, 10 Dec 2023 16:17:13 +0900 Subject: [PATCH 1/6] fix(ui): fix coverage iframe url when previewing html report --- docs/config/index.md | 2 ++ packages/ui/client/composables/navigation.ts | 23 ++++++++++++-------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index 597bc3e4003c..24bf570c8ceb 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -1126,6 +1126,8 @@ Clean coverage report on watch rerun Directory to write coverage report to. +To preview the coverage report in the output of [HTML reporter](https://vitest.dev/guide/reporters.html#html-reporter), this option must be set as an subdirectory of the html report, for example, `html/coverage`. + #### coverage.reporter - **Type:** `string | string[] | [string, {}][]` diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts index d4229407efb9..b5826af172a0 100644 --- a/packages/ui/client/composables/navigation.ts +++ b/packages/ui/client/composables/navigation.ts @@ -7,19 +7,24 @@ export const dashboardVisible = ref(true) export const coverageVisible = ref(false) export const disableCoverage = ref(true) export const coverage = computed(() => config.value?.coverage) -export const coverageConfigured = computed(() => { - if (!config.value?.api?.port) - return false - - return coverage.value?.enabled -}) +export const coverageConfigured = computed(() => coverage.value?.enabled) export const coverageEnabled = computed(() => { return coverageConfigured.value && coverage.value.reporter.map(([reporterName]) => reporterName).includes('html') }) +// dev ui mode +// pnpm -C test/utils test -- --ui --reporter=html --coverage.enabled --coverage.reportsDirectory=html/coverage +// pnpm -C test/utils test -- --ui --reporter=html --coverage.enabled + +// preview mode +// pnpm -C test/utils test -- run --reporter=html --coverage.enabled --coverage.reportsDirectory=html/coverage +// npx vite preview --outDir test/utils/html + +// TODO +// For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report. (e.g. coverageDirectory: "html/coverage"). +// Handling other cases seems difficult, so this limitation is just mentioned in the documentation for now. 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('/') const htmlReporter = coverage.value!.reporter.find((reporter) => { if (reporter[0] !== 'html') @@ -28,8 +33,8 @@ export const coverageUrl = computed(() => { 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` + ? `/${coverage.value!.reportsDirectory.slice(idx + 1)}/${htmlReporter[1].subdir}/index.html` + : `/${coverage.value!.reportsDirectory.slice(idx + 1)}/index.html` } return undefined From 213e71cd33fd423ba447f2a03c3927657977b50d Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sun, 10 Dec 2023 16:23:09 +0900 Subject: [PATCH 2/6] chore: comment --- packages/ui/client/composables/navigation.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts index b5826af172a0..0251d791ebd2 100644 --- a/packages/ui/client/composables/navigation.ts +++ b/packages/ui/client/composables/navigation.ts @@ -12,17 +12,9 @@ export const coverageEnabled = computed(() => { return coverageConfigured.value && coverage.value.reporter.map(([reporterName]) => reporterName).includes('html') }) -// dev ui mode -// pnpm -C test/utils test -- --ui --reporter=html --coverage.enabled --coverage.reportsDirectory=html/coverage -// pnpm -C test/utils test -- --ui --reporter=html --coverage.enabled - -// preview mode -// pnpm -C test/utils test -- run --reporter=html --coverage.enabled --coverage.reportsDirectory=html/coverage -// npx vite preview --outDir test/utils/html - // TODO // For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report. (e.g. coverageDirectory: "html/coverage"). -// Handling other cases seems difficult, so this limitation is just mentioned in the documentation for now. +// Handling other cases seems difficult, so this limitation is mentioned in the documentation for now. export const coverageUrl = computed(() => { if (coverageEnabled.value) { const idx = coverage.value!.reportsDirectory.lastIndexOf('/') From bfd5f7959ed5a28958f1b1981438cf891dbdb2c0 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sun, 10 Dec 2023 16:26:22 +0900 Subject: [PATCH 3/6] chore: tweak docs --- docs/config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/index.md b/docs/config/index.md index 24bf570c8ceb..734b29104404 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -1126,7 +1126,7 @@ Clean coverage report on watch rerun Directory to write coverage report to. -To preview the coverage report in the output of [HTML reporter](https://vitest.dev/guide/reporters.html#html-reporter), this option must be set as an subdirectory of the html report, for example, `html/coverage`. +To preview the coverage report in the output of [HTML reporter](/guide/reporters.html#html-reporter), this option must be set as an subdirectory of the html report (for example `./html/coverage`). #### coverage.reporter From 6a507daed14b62e748b198becc9568c1dbb1b018 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sun, 10 Dec 2023 16:27:11 +0900 Subject: [PATCH 4/6] chore: comment --- packages/ui/client/composables/navigation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts index 0251d791ebd2..1054c1790abc 100644 --- a/packages/ui/client/composables/navigation.ts +++ b/packages/ui/client/composables/navigation.ts @@ -13,7 +13,7 @@ export const coverageEnabled = computed(() => { && coverage.value.reporter.map(([reporterName]) => reporterName).includes('html') }) // TODO -// For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report. (e.g. coverageDirectory: "html/coverage"). +// For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report. // Handling other cases seems difficult, so this limitation is mentioned in the documentation for now. export const coverageUrl = computed(() => { if (coverageEnabled.value) { From dc1a7650b60c4506db0650791b59f2ef79b417bd Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sun, 10 Dec 2023 16:41:53 +0900 Subject: [PATCH 5/6] chore: docs --- docs/config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/index.md b/docs/config/index.md index 734b29104404..37432674e08a 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -1126,7 +1126,7 @@ Clean coverage report on watch rerun Directory to write coverage report to. -To preview the coverage report in the output of [HTML reporter](/guide/reporters.html#html-reporter), this option must be set as an subdirectory of the html report (for example `./html/coverage`). +To preview the coverage report in the output of [HTML reporter](/guide/reporters.html#html-reporter), this option must be set as a sub-directory of the html report directory (for example `./html/coverage`). #### coverage.reporter From ac7eb76490d49f98a1f66197b69aba95eb685643 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Mon, 18 Dec 2023 09:43:09 +0900 Subject: [PATCH 6/6] test: add e2e --- test/ui/fixtures/coverage.test.ts | 6 ++++++ test/ui/fixtures/coverage.ts | 3 +++ test/ui/test/html-report.spec.ts | 10 ++++++++-- test/ui/test/ui.spec.ts | 10 ++++++++-- 4 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 test/ui/fixtures/coverage.test.ts create mode 100644 test/ui/fixtures/coverage.ts diff --git a/test/ui/fixtures/coverage.test.ts b/test/ui/fixtures/coverage.test.ts new file mode 100644 index 000000000000..802168139d65 --- /dev/null +++ b/test/ui/fixtures/coverage.test.ts @@ -0,0 +1,6 @@ +import { expect, it } from 'vitest' +import { multiply } from './coverage' + +it(multiply, () => { + expect(multiply(2, 3)).toEqual(6) +}) diff --git a/test/ui/fixtures/coverage.ts b/test/ui/fixtures/coverage.ts new file mode 100644 index 000000000000..1f2e9649ed2f --- /dev/null +++ b/test/ui/fixtures/coverage.ts @@ -0,0 +1,3 @@ +export function multiply(n: number, m: number) { + return n * m; +} diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts index d69579935a8e..bec938b8a5a0 100644 --- a/test/ui/test/html-report.spec.ts +++ b/test/ui/test/html-report.spec.ts @@ -11,7 +11,7 @@ test.describe('html report', () => { test.beforeAll(async () => { // generate vitest html report - await startVitest('test', [], { run: true, reporters: 'html' }) + await startVitest('test', [], { run: true, reporters: 'html', coverage: { enabled: true, reportsDirectory: 'html/coverage' } }) // run vite preview server previewServer = await preview({ build: { outDir: 'html' }, preview: { port, strictPort: true } }) @@ -32,7 +32,7 @@ test.describe('html report', () => { await page.goto(pageUrl) // dashbaord - await expect(page.locator('[aria-labelledby=tests]')).toContainText('1 Pass 0 Fail 1 Total') + await expect(page.locator('[aria-labelledby=tests]')).toContainText('2 Pass 0 Fail 2 Total') // report await page.getByText('sample.test.ts').click() @@ -49,4 +49,10 @@ test.describe('html report', () => { expect(pageErrors).toEqual([]) }) + + test('coverage', async ({ page }) => { + await page.goto(pageUrl) + await page.getByLabel('Show coverage').click() + await page.frameLocator('#vitest-ui-coverage').getByRole('heading', { name: 'All files' }).click() + }) }) diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts index 7b5cb8bef691..b41dd4f000ae 100644 --- a/test/ui/test/ui.spec.ts +++ b/test/ui/test/ui.spec.ts @@ -8,7 +8,7 @@ test.describe('ui', () => { let vitest: Vitest | undefined test.beforeAll(async () => { - vitest = await startVitest('test', [], { watch: true, ui: true, open: false, api: { port } }) + vitest = await startVitest('test', [], { watch: true, ui: true, open: false, api: { port }, coverage: { enabled: true } }) expect(vitest).toBeDefined() }) @@ -23,7 +23,7 @@ test.describe('ui', () => { await page.goto(pageUrl) // dashbaord - await expect(page.locator('[aria-labelledby=tests]')).toContainText('1 Pass 0 Fail 1 Total') + await expect(page.locator('[aria-labelledby=tests]')).toContainText('2 Pass 0 Fail 2 Total') // report await page.getByText('sample.test.ts').click() @@ -40,4 +40,10 @@ test.describe('ui', () => { expect(pageErrors).toEqual([]) }) + + test('coverage', async ({ page }) => { + await page.goto(pageUrl) + await page.getByLabel('Show coverage').click() + await page.frameLocator('#vitest-ui-coverage').getByRole('heading', { name: 'All files' }).click() + }) })