test: Add tests on c8 coverage report

test/coverage-test/coverage-test/c8/coverage-report/SFC.test.ts

@@ -0,0 +1,14 @@
+/**
+ * @vitest-environment happy-dom
+ */
+
+import { mount } from '@vue/test-utils'
+import { expect, test } from 'vitest'
+import SFC from '../../../src/coverage-report/SFC.vue'
+
+test('Should update count', async () => {
+  const wrapper = mount(SFC)
+
+  await wrapper.find('button').trigger('click')
+  expect(wrapper.text()).contain(1)
+})

test/coverage-test/coverage-test/c8/coverage-report/math.test.ts

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+import { add, multiply } from '../../../src/coverage-report/math'
+
+test('add', () => {
+  expect(add(10, 15)).toBe(25)
+})
+
+test('multiply', () => {
+  expect(multiply(2, 5)).toBe(10)
+})

test/coverage-test/coverage-test/c8/coverage-report/not-SFC/not-SFC.test.ts

@@ -0,0 +1,14 @@
+/**
+ * @vitest-environment happy-dom
+ */
+
+import { mount } from '@vue/test-utils'
+import { expect, test } from 'vitest'
+import notSFC from '../../../../src/coverage-report/not-SFC/not-SFC.vue'
+
+test('Should update count', async () => {
+  const wrapper = mount(notSFC)
+
+  await wrapper.find('button').trigger('click')
+  expect(wrapper.text()).contain(1)
+})

test/coverage-test/coverage-test/c8/coverage-report/utils.test.js

@@ -0,0 +1,6 @@
+import { expect, test } from 'vitest'
+import { add } from '../../src/coverage-report/utils.js'
+
+test('add', () => {
+  expect(add(10, 15)).toBe(25)
+})

test/coverage-test/coverage-test/coverage.c8.test.ts

@@ -1,11 +1,42 @@
 import fs from 'fs'
+import { execa } from 'execa'
 import { resolve } from 'pathe'
 import { expect, test } from 'vitest'
 
+async function run(...runOptions: string[]): Promise<string> {
+  const root = resolve(__dirname, '..')
+
+  const { stdout } = await execa('npx', ['vitest', 'run', ...runOptions], {
+    cwd: root,
+    env: {
+      ...process.env,
+      CI: 'true',
+      NO_COLOR: 'true',
+    },
+    windowsHide: false,
+  })
+
+  return stdout
+}
+
 test('coverage c8', async () => {
   const coveragePath = resolve('./coverage/tmp/')
   const stat = fs.statSync(coveragePath)
   expect(stat.isDirectory()).toBe(true)
   const files = fs.readdirSync(coveragePath)
   expect(files.length > 0).toBe(true)
 })
+
+test('Should show coverage', async () => {
+  const stdout = await run('--config', 'vitest.config-c8-coverage.ts', '--coverage')
+
+  // For Vue SFC and vue + ts files
+  expect(stdout).contain('not-SFC.ts')
+  expect(stdout).not.contain('not-SFC.ts?vue')
+  expect(stdout).contain('not-SFC.vue')
+  expect(stdout).contain('SFC.vue')
+
+  // For ts and js files
+  expect(stdout).contain('math.ts')
+  expect(stdout).contain('utils.js')
+})

test/coverage-test/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "latest",
     "@vue/test-utils": "latest",
+    "execa": "^6.1.0",
     "happy-dom": "latest",
     "vite": "latest",
     "vitest": "workspace:*",

test/coverage-test/src/coverage-report/SFC.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const count = ref(0)
+
+    return { count }
+  },
+})
+</script>
+
+<template>
+  <button @click="count++">
+    {{ count }}
+  </button>
+</template>

test/coverage-test/src/coverage-report/math.ts

@@ -0,0 +1,15 @@
+export function add(a: number, b: number) {
+  return a + b
+}
+
+export function multiply(a: number, b: number) {
+  return a * b
+}
+
+export function untestedFn(a: number, b: number) {
+  return a * b
+}
+
+export function untestedFn2(a: number, b: number) {
+  return a * b
+}

test/coverage-test/src/coverage-report/not-SFC/not-SFC.ts

@@ -0,0 +1,9 @@
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const count = ref(0)
+
+    return { count }
+  },
+})

test/coverage-test/src/coverage-report/not-SFC/not-SFC.vue

@@ -0,0 +1,7 @@
+<script lang="ts" src="./not-SFC.ts"></script>
+
+<template>
+  <button @click="count++">
+    {{ count }}
+  </button>
+</template>

test/coverage-test/src/coverage-report/utils.js

@@ -0,0 +1,3 @@
+export function add(a, b) {
+  return a + b
+}

test/coverage-test/vitest.config-c8-coverage.ts

@@ -1,9 +1,16 @@
 import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
+  plugins: [vue()],
   test: {
     include: [
       './coverage-test/*.c8.test.ts',
+      './coverage-test/c8/**/*test.ts',
     ],
+    coverage: {
+      include: ['src/**'],
+      extension: ['.ts', '.vue', '.js'],
+    },
   },
 })

test/coverage-test/vitest.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
       'test/*.test.ts',
     ],
     exclude: [
-      'coverage-test/*.test.ts',
+      'coverage-test/**/*',
     ],
     coverage: {
       enabled: true,