Investigate code coverage for cypress

container/.gitignore

@@ -13,4 +13,7 @@
 /public/**/*.ts
 
 /coverage
+/e2e-coverage
+/instrumented
+/.nyc_output
 .DS_Store

container/cypress.config.js

@@ -7,6 +7,11 @@ module.exports = defineConfig({
     viewportWidth: 1250,
     viewportHeight: 790,
     chromeWebSecurity: false,
-    supportFile: false
+    supportFile: 'cypress/support/e2e.js',
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config);
+
+      return config;
+    }
   }
 });

container/cypress/support/e2e.js

@@ -0,0 +1 @@
+import '@cypress/code-coverage/support';

container/package.json

@@ -13,29 +13,34 @@
   ],
   "scripts": {
     "build": "npm run sync-event-typings && npm run generate-cem && rollup -c",
+    "buildWithCoverage": "npm run sync-event-typings && npm run generate-cem && rollup -c --environment COVERAGE",
     "test": "jest",
     "lint": "eslint src/**/*.*",
     "bundle": "npm run build",
     "dev": "rollup -c -w",
     "copyBundle": "cp public/bundle.js public/bundle.js.map test-app/ && cp public/bundle.js public/bundle.js.map examples/ || COPY public\\* test-app\\",
     "copyLuigiClient": "cp ../client/public/luigi-client.js test-app/iframe",
     "copyLuigiElement": "cp ../client/src/luigi-element.js test-app/compound",
-    "serve": "npm run build && npm run copyLuigiClient && npm run copyLuigiElement && npm run copyBundle && sirv -D -c test-app --no-clear",
-    "bundle:watch": "chokidar \"src/**/*.*\" -c \"npm run build && npm run copyBundle\"",
+    "serve": "npm run buildWithCoverage && npm run copyLuigiClient && npm run copyLuigiElement && npm run copyBundle && sirv -D -c test-app --no-clear",
+    "bundle:watch": "chokidar \"src/**/*.*\" -c \"npm run buildWithCoverage && npm run copyBundle\"",
     "start": "concurrently -k \"npm run serve\" \"npm run bundle:watch\"",
     "start-examples": "npm run copyBundle && sirv -D -c examples --no-clear",
     "start-examples-test": "npm run copyBundle && sirv -D -c examples --no-clear --port 2222",
     "cypress-headless": "cypress run -c video=false",
     "cypress-browser": "cypress open --e2e --browser chrome -c video=false",
+    "nyc-instrument": "npx nyc instrument --compact=false ./src ./instrumented --delete --complete-copy",
+    "nyc-report": "npx nyc report --reporter=lcov --reporter=text",
     "release": "node release-cli.js",
     "replace-version-in-docu": "node prepareNextRelease.js",
     "sync-event-typings": "cp src/constants/communication.ts typings/constants/events.d.ts",
     "generate-cem": "node generateCEM.js"
   },
   "devDependencies": {
-    "@babel/node": "7.22.10",
-    "@babel/preset-env": "7.22.10",
-    "@babel/preset-typescript": "7.22.5",
+    "@babel/node": "7.26.0",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-typescript": "7.26.0",
+    "@cypress/code-coverage": "^3.13.9",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-commonjs": "28.0.0",
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
@@ -49,24 +54,40 @@
     "chokidar-cli": "^3.0.0",
     "cli-color": "^2.0.4",
     "concurrently": "^7.6.0",
-    "cypress": "^12.17.2",
+    "cypress": "^13.17.0",
     "eslint": "^9.14.0",
     "eslint-plugin-svelte": "^2.46.0",
     "github-api": "^3.4.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "nyc": "^17.1.0",
     "rollup": "2.79.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-livereload": "2.0.5",
     "rollup-plugin-svelte": "7.2.2",
     "sirv-cli": "^2.0.0",
+    "source-map-support": "^0.5.21",
     "svelte": "4.2.19",
     "svelte-check": "3.5.0",
     "svelte-preprocess": "5.0.4",
+    "ts-node": "^10.9.2",
     "tslib": "2.6.1",
     "typescript": "5.1.6",
     "typescript-eslint": "^8.13.0"
   },
+  "nyc": {
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "check-coverage": true,
+    "exclude": [
+      "node_modules",
+      "src/global.d.ts",
+      "src/*.svelte"
+    ],
+    "include": [
+      "src/**/*.ts"
+    ],
+    "report-dir": "e2e-coverage"
+  },
   "engines": {
     "node": ">=18.19.1"
   }

container/rollup.config.js

@@ -8,10 +8,16 @@ import autoPreprocess from 'svelte-preprocess';
 import copy from 'rollup-plugin-copy';
 
 const production = !process.env.ROLLUP_WATCH;
+let inputPath = 'src/main.ts';
+
 if (production) {
   console.log('Production BUILD');
 }
 
+if (process.env.COVERAGE === 'true') {
+  inputPath = 'instrumented/main.ts';
+}
+
 function serve() {
   let server;
 
@@ -35,7 +41,7 @@ function serve() {
 
 export default [
   {
-    input: 'src/main.ts',
+    input: inputPath,
     output: {
       sourcemap: true,
       name: 'app',

container/run-container-e2e.sh

@@ -15,17 +15,19 @@ killWebserver 8080 || true
 # simple 'examples' app runs on 2222 port
 killWebserver 2222 || true
 
+# Instrument code for coverage
+npm run nyc-instrument
+
 # Start the first server for 'examples' app in the background (&=background)
 npm run start-examples-test &
 WS_FID_PID=$!
 
-
 # Start the second server for 'test-app' in the background
 npm run start &
 EXAMPLES_FID_PID=$!
 
-# sleep for 3 seconds to wait for both servers to be fired up
-sleep 3
+# sleep for 30 seconds to wait for both servers to be fired up
+sleep 30
 
 if [ "$USE_CYPRESS_DASHBOARD" == "true" ]; then
   echo "Running tests with recording"
@@ -41,4 +43,3 @@ kill $WS_FID_PID
 kill $EXAMPLES_FID_PID
 
 exit $?
-

container/src/services/webcomponents.service.ts

@@ -461,11 +461,11 @@ export class WebComponentService {
         };
       }
       // @ts-ignore
-      if (!window.Luigi) {
+      if (!window['Luigi']) {
         // @ts-ignore
         window.Luigi = {};
         // @ts-ignore
-        if (!window.Luigi._registerWebcomponent) {
+        if (!window['Luigi']['_registerWebcomponent']) {
           // @ts-ignore
           window.Luigi._registerWebcomponent = (src, element) => {
             this.containerService.getContainerManager()._registerWebcomponent(src, element);

container/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "include": [
+    "instrumented/**/*",
     "src/**/*",
     "src/node_modules",
     "test/**/*"