Merge pull request #4498 from mermaid-js/sidv/E2ECoverage

Add coverage for E2E tests

.gitignore

@@ -42,3 +42,4 @@ stats/
 **/user-avatars/*
 **/contributor-names.json
 .pnpm-store
+.nyc_output

.vite/build.ts

@@ -6,10 +6,12 @@ import { readFileSync } from 'fs';
 import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
+import istanbul from 'vite-plugin-istanbul';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
+const coverage = process.env.VITE_COVERAGE === 'true';
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const sourcemap = false;
 
@@ -121,6 +123,12 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       jisonPlugin(),
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
+      istanbul({
+        exclude: ['node_modules', 'test/'],
+        extension: ['.js', '.ts'],
+        requireEnv: true,
+        forceBuildInstrument: coverage,
+      }),
       ...visualizerOptions(packageName, core),
     ],
   };

cypress.config.cjs

@@ -2,12 +2,14 @@
 
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+const coverage = require('@cypress/code-coverage/task');
 
 module.exports = defineConfig({
   projectId: 'n2sma2',
   e2e: {
     specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
     setupNodeEvents(on, config) {
+      coverage(on, config);
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;

cypress/support/e2e.js

@@ -13,8 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@cypress/code-coverage/support';
 import '@applitools/eyes-cypress/commands';
-
 // Import commands.js using ES2015 syntax:
 import './commands';
 

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.5.1",
+  "packageManager": "pnpm@8.6.2",
   "keywords": [
     "diagram",
     "markdown",
@@ -22,6 +22,7 @@
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
+    "dev:coverage": "VITE_COVERAGE=true pnpm dev",
     "release": "pnpm build",
     "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
     "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
@@ -30,6 +31,7 @@
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
+    "e2e:coverage": "VITE_COVERAGE=true pnpm e2e",
     "ci": "vitest run",
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
@@ -59,7 +61,8 @@
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
     "@cspell/eslint-plugin": "^6.31.1",
-    "@rollup/plugin-typescript": "^11.1.0",
+    "@cypress/code-coverage": "^3.10.7",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@types/cors": "^2.8.13",
     "@types/eslint": "^8.37.0",
     "@types/express": "^4.17.17",
@@ -72,9 +75,9 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-c8": "^0.31.0",
-    "@vitest/spy": "^0.31.0",
-    "@vitest/ui": "^0.31.0",
+    "@vitest/coverage-c8": "^0.32.0",
+    "@vitest/spy": "^0.32.0",
+    "@vitest/ui": "^0.32.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
@@ -106,14 +109,18 @@
     "prettier": "^2.8.8",
     "prettier-plugin-jsdoc": "^0.4.2",
     "rimraf": "^5.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "start-server-and-test": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.1",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-istanbul": "^4.1.0",
     "vitest": "^0.31.0"
   },
   "volta": {
     "node": "18.16.0"
+  },
+  "nyc": {
+    "report-dir": "coverage/cypress"
   }
 }

packages/mermaid-example-diagram/package.json

@@ -52,9 +52,6 @@
     "rimraf": "^5.0.0",
     "mermaid": "workspace:*"
   },
-  "resolutions": {
-    "d3": "^7.0.0"
-  },
   "files": [
     "dist"
   ],

vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
     setupFiles: ['packages/mermaid/src/tests/setup.ts'],
     coverage: {
       reporter: ['text', 'json', 'html', 'lcov'],
+      reportsDirectory: './coverage/vitest',
     },
   },
   build: {