fix: e2e test coverage setup (#4897)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Added support for code coverage reporting with the integration of
`vite-plugin-istanbul`.
	- Introduced a new configuration file for code coverage settings.

- **Improvements**
	- Updated project to use ECMAScript modules for better compatibility.
- Enhanced UI test coverage with additional test cases and improved
error handling.
- Refactored test suites to utilize a custom module for better
organization and maintainability.
- Improved the login process and dashboard loading in test cases for
better reliability.

- **Bug Fixes**
- Resolved issues related to import statements affecting test execution.

- **Documentation**
- Updated `.gitignore` to exclude coverage directories from version
control.

These updates enhance the functionality, maintainability, and
reliability of the application and its testing framework.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.github/workflows/playwright.yml

@@ -62,11 +62,14 @@ jobs:
           node-version: 18
 
       - name: Build frontend code
+        env:
+          VITE_COVERAGE: "true"
+          COVERAGE: "true"
         run: cd web && npm install && npm run build
 
       - name: Build and run binary
         run: cargo build --release --target x86_64-unknown-linux-gnu
-
+        
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -114,9 +117,6 @@ jobs:
       - name: Download artifacts
         uses: actions/download-artifact@v4
 
-      - name: Display structure of downloaded files
-        run: ls -la .
-
       - name: Start OpenObserve
         run: chmod +x ./debug-binary/openobserve && ./debug-binary/openobserve > o2.log 2>&1 &
 
@@ -126,6 +126,9 @@ jobs:
       - name: Ensure we are getting a reply from the server
         run: curl http://localhost:5080/web/login
 
+      - name: Create coverage json folder
+        run: mkdir -p tests/ui-testing/.nyc_output
+
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
@@ -144,9 +147,64 @@ jobs:
       #   if: always()
       #   run: cat o2.log
 
+      - name: Sanitize Test Filename
+        shell: bash 
+        run: |
+          # Assign the matrix variable to a Bash variable
+          SANITIZED_FILENAME="${{ matrix.testfilename }}"
+          # Replace all '/' characters with '_'
+          SANITIZED_FILENAME="${SANITIZED_FILENAME//\//_}"
+          # Export as a GitHub Actions environment variable
+          echo "SANITIZED_FILENAME=$SANITIZED_FILENAME" >> $GITHUB_ENV
+
+      - name: Upload Coverage Data
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-coverage-${{ env.SANITIZED_FILENAME }}
+          path: tests/ui-testing/.nyc_output
+          include-hidden-files: true
+
+      - name: Generate Coverage Report
+        run: cd tests/ui-testing && npx nyc report
+
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+
+  generate_coverage_report:
+    name: Generate Coverage Report
+    needs: [build_binary, ui_integration_tests]
+    runs-on: ubuntu-latest
+    if: always()
+
+    steps:
+      - name: Clone the current repo
+        uses: actions/checkout@v4
+
+      - name: Download Playwright Coverage Data
+        uses: actions/download-artifact@v4
+        with:
+          pattern: playwright-coverage-*  # Match all artifacts with this prefix
+          path: merged-coverage
+          merge-multiple: true 
+
+      - name: Verify Downloaded Files
+        run: ls -R merged-coverage # Check the structure and contents
+
+      - name: Move Coverage Files to .nyc_output
+        run: |
+          mkdir -p tests/ui-testing/.nyc_output
+          mv merged-coverage/* tests/ui-testing/.nyc_output/ || echo "No files to move"
+
+      - name: Generate Coverage Report
+        run: cd tests/ui-testing && npm ci && npx nyc report
+
+      - name: Upload Coverage Report
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: tests/ui-testing/coverage-report
+          retention-days: 30

tests/ui-testing/.gitignore

@@ -13,3 +13,5 @@ cypress/screenshots
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+coverage/
+.nyc_output/

tests/ui-testing/.nycrc

@@ -0,0 +1,9 @@
+{
+    "extension": [".ts", ".js"],
+    "include": ["src/**/*.ts"],
+    "exclude": ["node_modules/**", "test/**"],
+    "reporter": ["text", "html"],
+    "sourceMap": true,
+    "instrument": true,
+    "excludeAfterRemap": false
+  }

tests/ui-testing/package.json

@@ -14,7 +14,8 @@
     "cypress-multi-reporters": "^1.6.2",
     "cypress-xpath": "^2.0.1",
     "mocha": "^10.2.0",
-    "mochawesome": "^7.1.3"
+    "mochawesome": "^7.1.3",
+    "nyc": "^17.1.0"
   },
   "dependencies": {
     "@google-cloud/local-auth": "^2.1.0",

tests/ui-testing/playwright-tests/alerts.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 const uniqueText = `${new Date().valueOf()}`
 

tests/ui-testing/playwright-tests/baseFixtures.js

@@ -0,0 +1,44 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as crypto from 'crypto';
+import { test as baseTest } from '@playwright/test';
+
+const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
+
+export function generateUUID() {
+  return crypto.randomBytes(16).toString('hex');
+}
+
+export const test = baseTest.extend({
+  context: async ({ context }, use) => {
+    await context.addInitScript(() =>
+      window.addEventListener('beforeunload', () => {
+        try {
+          (window).collectIstanbulCoverage(JSON.stringify((window).__coverage__))
+        } catch (error) {
+          console.error('Failed to collect coverage on page unload:', error);
+        }
+      }),
+    );
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+    await context.exposeFunction('collectIstanbulCoverage', async (coverageJSON) => {
+      if (!coverageJSON) return;
+      const filename = path.join(istanbulCLIOutput, `playwright_coverage_${generateUUID()}.json`);
+      try {
+        await fs.promises.writeFile(filename, coverageJSON);
+      } catch (error) {
+        console.error('Failed to write coverage data:', error);
+      }
+    });
+    await use(context);
+    await Promise.all(context.pages().map(async (page) => {
+      try {
+        await page.evaluate(() => (window).collectIstanbulCoverage(JSON.stringify((window).__coverage__)))
+      } catch (error) {
+        console.error('Failed to collect final coverage for page:', error);
+      }
+    }));
+  }
+});
+
+export const expect = test.expect;

tests/ui-testing/playwright-tests/dashboards/dashboard.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "../baseFixtures";
 import logData from "../../cypress/fixtures/log.json";
 import logsdata from "../../../test-data/logs_data.json";
 

tests/ui-testing/playwright-tests/dashboards/dashboardtype.spec.js

@@ -1,7 +1,8 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "../baseFixtures";
 import logData from "../../cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../../test-data/logs_data.json";
+
+// TODO - Modernize imports to use consistent ES module syntax
 const fs = require('fs');
 const { PNG } = require('pngjs');
 const pixelmatch = require('pixelmatch');

tests/ui-testing/playwright-tests/dashboards/variable.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "../baseFixtures";
 import logData from "../../cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../../test-data/logs_data.json";
 
 test.describe.configure({ mode: 'parallel' });

tests/ui-testing/playwright-tests/dashboards/visualize.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "../baseFixtures";
 import logData from "../../cypress/fixtures/log.json";
 import logsdata from "../../../test-data/logs_data.json";
 
@@ -12,6 +12,7 @@ async function login(page) {
   //Enter Password
   await page.locator('[data-cy="login-password"]').fill(process.env["ZO_ROOT_USER_PASSWORD"]);
   await page.locator('[data-cy="login-sign-in"]').click();
+  // TODO : Replace all timeouts with waitForSelector for reliable tests
   await page.waitForTimeout(4000);
   await page.goto(process.env["ZO_BASE_URL"]);
 }

tests/ui-testing/playwright-tests/dashboards/vrl.spec.js

@@ -1,7 +1,6 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "../baseFixtures";
 import logData from "../../cypress/fixtures/log.json";
 import logsdata from "../../../test-data/logs_data.json";
-import { parseArgs } from "util";
 
 const randomDashboardName =
   "Dashboard_" + Math.random().toString(36).substr(2, 9);

tests/ui-testing/playwright-tests/functions.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
 import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";

tests/ui-testing/playwright-tests/indexquery.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../cypress/fixtures/log.json";
 import logsdata from "../../test-data/logs_data.json";
 

tests/ui-testing/playwright-tests/logspage.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 
 test.describe.configure({ mode: "parallel" });

tests/ui-testing/playwright-tests/logsqueries.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 
 test.describe.configure({ mode: 'parallel' });

tests/ui-testing/playwright-tests/logsquickmode.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 
 test.describe.configure({ mode: 'parallel' });

tests/ui-testing/playwright-tests/multiselect-stream.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
 import logsdata from "../../test-data/logs_data.json";
 import { toZonedTime } from "date-fns-tz";

tests/ui-testing/playwright-tests/pipeline.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 
 test.describe.configure({ mode: 'parallel' });

tests/ui-testing/playwright-tests/region.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 
 test.describe.configure({ mode: 'parallel' });

tests/ui-testing/playwright-tests/reports.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
 import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";

tests/ui-testing/playwright-tests/sanity.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from './baseFixtures';
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 import { toZonedTime } from "date-fns-tz";
 
@@ -64,6 +63,7 @@ const selectStreamAndStreamTypeForLogs = async (page, stream) => {
     .first()
     .click({ force: true });
 };
+
 test.describe("Sanity testcases", () => {
   // let logData;
   function removeUTFCharacters(text) {
@@ -104,7 +104,7 @@ test.describe("Sanity testcases", () => {
       page.locator('[data-test="logs-search-bar-quick-mode-toggle-btn"]')
     ).toBeVisible();
   });
-  test("should click on interesting fields icon and display query in editor", async ({
+    test("should click on interesting fields icon and display query in editor", async ({
     page,
   }) => {
     await page.waitForSelector(
@@ -439,7 +439,6 @@ test.describe("Sanity testcases", () => {
     await expect(
       page
         .locator(".q-notification__message")
-
         .getByText(/Template Saved Successfully/)
         .first()
     ).toBeVisible();
@@ -996,9 +995,6 @@ test.describe("Sanity testcases", () => {
 
     // Use a more specific locator for 'e2e_automate' by targeting its unique container or parent element
     await page.locator('[data-test="logs-search-index-list"]').getByText('e2e_automate').click();
-});
-
-
-
 
+  });
 });

tests/ui-testing/playwright-tests/schema.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 
 test.describe.configure({ mode: 'parallel' });

tests/ui-testing/playwright-tests/unflattened.spec.js

@@ -1,6 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./baseFixtures";
 import logData from "../../ui-testing/cypress/fixtures/log.json";
-import { log } from "console";
 import logsdata from "../../test-data/logs_data.json";
 import UnflattenedPage from "../pages/unflattened";
 

web/package-lock.json

@@ -98,6 +98,7 @@
         "tailwindcss": "^3.4.4",
         "typescript": "~5.5.3",
         "vite": "^5.4.6",
+        "vite-plugin-istanbul": "^6.0.2",
         "vite-plugin-monaco-editor": "^1.1.0",
         "vitest": "^2.1.1",
         "vitest-canvas-mock": "^0.3.3",
@@ -1794,6 +1795,123 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -7664,6 +7782,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -8454,6 +8585,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/get-stream": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
@@ -9969,6 +10109,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
+      "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@istanbuljs/schema": "^0.1.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -12025,6 +12181,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
@@ -14149,6 +14314,12 @@
         "node": "*"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true
+    },
     "node_modules/sshpk": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
@@ -15520,6 +15691,96 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/vite-plugin-istanbul": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-istanbul/-/vite-plugin-istanbul-6.0.2.tgz",
+      "integrity": "sha512-0/sKwjEEIwbEyl43xX7onX3dIbMJAsigNsKyyVPalG1oRFo5jn3qkJbS2PUfp9wrr3piy1eT6qRoeeum2p4B2A==",
+      "dev": true,
+      "dependencies": {
+        "@istanbuljs/load-nyc-config": "^1.1.0",
+        "espree": "^10.0.1",
+        "istanbul-lib-instrument": "^6.0.2",
+        "picocolors": "^1.0.0",
+        "source-map": "^0.7.4",
+        "test-exclude": "^6.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=4 <=6"
+      }
+    },
+    "node_modules/vite-plugin-istanbul/node_modules/eslint-visitor-keys": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
+      "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/vite-plugin-istanbul/node_modules/espree": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
+      "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.12.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/vite-plugin-istanbul/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/vite-plugin-istanbul/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/vite-plugin-istanbul/node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/vite-plugin-monaco-editor": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",

web/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "license": "AGPL-3.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "devcloud": "NODE_ENV=devcloud vite --mode=devcloud",
@@ -112,6 +113,7 @@
     "tailwindcss": "^3.4.4",
     "typescript": "~5.5.3",
     "vite": "^5.4.6",
+    "vite-plugin-istanbul": "^6.0.2",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vitest": "^2.1.1",
     "vitest-canvas-mock": "^0.3.3",

web/postcss.config.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

web/tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 // eslint-disable-next-line no-undef
-module.exports = {
+export default {
   prefix: "tw-",
   content: [
     "./index.html",

web/vite.config.ts

@@ -26,6 +26,9 @@ import dotenv from "dotenv";
 import fs from "fs-extra";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 import visualizer from "rollup-plugin-visualizer";
+import "dotenv/config";
+
+import istanbul from "vite-plugin-istanbul";
 
 // Load environment variables from the appropriate .env file
 if (process.env.NODE_ENV === "production") {
@@ -46,7 +49,7 @@ const enterpriseResolverPlugin = {
 
       const enterprisePath = path.resolve(
         __dirname,
-        `./src/enterprise/${fileName}`
+        `./src/enterprise/${fileName}`,
       );
       const defaultPath = path.resolve(__dirname, `./src/${fileName}`);
 
@@ -108,9 +111,17 @@ export default defineConfig({
     quasar({
       sassVariables: "src/styles/quasar-variables.sass",
     }),
+    process.env.VITE_COVERAGE === "true" &&
+      istanbul({
+        include: "src/**/*",
+        exclude: ["node_modules", "test/"],
+        extension: [".js", ".ts", ".vue"],
+        requireEnv: false,
+        forceBuildInstrument: true,
+      }),
     enterpriseResolverPlugin,
     vueJsx(),
-    monacoEditorPlugin({
+    monacoEditorPlugin.default({
       customDistPath: () => path.resolve(__dirname, "dist/monacoeditorwork"),
     }),
     isTesting && monacoEditorTestResolver(),
@@ -119,7 +130,7 @@ export default defineConfig({
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
       "@enterprise": fileURLToPath(
-        new URL("./src/enterprise", import.meta.url)
+        new URL("./src/enterprise", import.meta.url),
       ),
       stream: "rollup-plugin-node-polyfills/polyfills/stream",
       events: "rollup-plugin-node-polyfills/polyfills/events",
@@ -136,7 +147,7 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         nodePolyfills(),
-        visualizer({
+        visualizer.default({
           open: true,
           gzipSize: true,
           brotliSize: true,