chore: integrate Monocart coverage reports, update configs, and cleanup dependencies

Author: mutoe

.github/workflows/test.yml

@@ -63,6 +63,15 @@ jobs:
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/unit/lcov.info
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: unit-test-report
+          path: |
+            coverage/
+          retention-days: 30
 
   e2e_tests:
     name: Playwright E2E test
@@ -102,9 +111,17 @@ jobs:
       - name: E2E test
         run: pnpm test:e2e
 
+      - name: Update coverage report
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/e2e/lcov.info
+
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
-          name: playwright-report
-          path: playwright-report/
+          name: e2e-test-report
+          path: |
+            playwright-report/
+            coverage/
           retention-days: 30

package.json

@@ -35,16 +35,15 @@
     "@playwright/test": "1.55.1",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
-    "@types/html": "^1.0.4",
     "@types/node": "^24.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^3.2.4",
     "cross-env": "^7.0.3",
     "eslint": "^9.36.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^18.0.1",
-    "html": "^1.0.0",
     "lint-staged": "^16.2.0",
+    "monocart-coverage-reports": "^2.12.9",
     "msw": "^2.11.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "simple-git-hooks": "^2.13.1",

playwright.config.ts

@@ -28,13 +28,17 @@ export default defineConfig({
     ['html', { open: 'never' }],
     isCI ? ['github'] : ['list'],
   ],
+
+  globalSetup: './playwright/global.setup.ts',
+  globalTeardown: './playwright/global.teardown.ts',
+
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL,
 
-    navigationTimeout: isCI ? 10_000 : 10_000,
-    actionTimeout: isCI ? 10_000 : 10_000,
+    navigationTimeout: isCI ? 10_000 : 20_000,
+    actionTimeout: isCI ? 10_000 : 20_000,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     screenshot: 'only-on-failure',

playwright/extends.ts

@@ -1,13 +1,56 @@
+import type { Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
+import MCR from 'monocart-coverage-reports'
 import { ConduitPageObject } from 'page-objects/conduit.page-object'
+import coverageOptions from './mcr.config'
 
 export const test = base.extend<{
   conduit: ConduitPageObject
+  autoTestFixture: string
 }>({
   conduit: async ({ page }, use) => {
     const buyscoutPageObject = new ConduitPageObject(page)
     await use(buyscoutPageObject)
   },
+
+  autoTestFixture: [async ({ context }, use) => {
+    const isChromium = test.info().project.name === 'chromium'
+
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const handlePageEvent = async (page: Page) => {
+      await Promise.all([
+        page.coverage.startJSCoverage({
+          resetOnNavigation: false,
+        }),
+        page.coverage.startCSSCoverage({
+          resetOnNavigation: false,
+        }),
+      ])
+    }
+
+    // coverage API is chromium only
+    if (isChromium) {
+      context.on('page', handlePageEvent)
+    }
+
+    await use('autoTestFixture')
+
+    if (isChromium) {
+      context.off('page', handlePageEvent)
+      const coverageList = await Promise.all(context.pages().map(async page => {
+        const jsCoverage = await page.coverage.stopJSCoverage()
+        const cssCoverage = await page.coverage.stopCSSCoverage()
+        return [...jsCoverage, ...cssCoverage]
+      }))
+      // console.log(coverageList.map((item) => item.url));
+
+      const mcr = MCR(coverageOptions)
+      await mcr.add(coverageList.flat())
+    }
+  }, {
+    scope: 'test',
+    auto: true,
+  }],
 })
 
 test.afterEach(async ({ page }, testInfo) => {

playwright/global.setup.ts

@@ -0,0 +1,10 @@
+import type { FullConfig } from '@playwright/test'
+import MCR from 'monocart-coverage-reports'
+import coverageOptions from './mcr.config'
+
+async function globalSetup(_config: FullConfig) {
+  const mcr = MCR(coverageOptions)
+  mcr.cleanCache()
+}
+
+export default globalSetup

playwright/global.teardown.ts

@@ -0,0 +1,10 @@
+import type { FullConfig } from '@playwright/test'
+import MCR from 'monocart-coverage-reports'
+import coverageOptions from './mcr.config'
+
+async function globalTeardown(_config: FullConfig) {
+  const mcr = MCR(coverageOptions)
+  await mcr.generate()
+}
+
+export default globalTeardown

playwright/mcr.config.ts

@@ -0,0 +1,48 @@
+import type { CoverageReportOptions } from 'monocart-coverage-reports'
+
+// https://github.com/cenfun/monocart-coverage-reports
+const coverageOptions: CoverageReportOptions = {
+
+  name: 'Playwright Coverage Report',
+
+  reports: [
+    'text',
+    'v8',
+    'v8-json',
+    'lcovonly',
+  ],
+
+  /**
+   * V8 entity filter. The entry.url is the URL of the entity.
+   * @example http://localhost:4173/assets/index-Bn6Ml0wL.js
+   * @example https://fonts.googleapis.com/css?family=Titillium+Web:700
+   * @example https://demo.realworld.io/main.css
+   * @example https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
+   */
+  entryFilter: entry => {
+    const excludeList = [
+      'googleapis.com',
+      'realworld.(io|show)/main.css',
+      'ionicons.min.css',
+    ]
+    for (const regexp of excludeList) {
+      if (new RegExp(regexp).test(entry.url)) return false
+    }
+    return true
+  },
+
+  /**
+   * Source filter. The sourcePath is the path of the source file.
+   * @example src/components/HelloWorld.vue
+   * @example src/config.ts
+   * @example node_modules/.pnpm/@[email protected]/node_modules/@vue/devtools-kit/dist/index.js
+   */
+  sourceFilter: sourcePath => {
+    if (sourcePath.includes('node_modules/')) return false
+    return true
+  },
+
+  outputDir: './coverage/e2e',
+}
+
+export default coverageOptions