[frontend] pass to v8 e2e test & coverage

openbas-front/.yarnrc.yml

@@ -1,3 +1,5 @@
+defaultSemverRangePrefix: ""
+
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
-defaultSemverRangePrefix: ""
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

openbas-front/package.json

@@ -96,7 +96,7 @@
     "@types/react-syntax-highlighter": "15",
     "@types/seamless-immutable": "7.1.19",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/parser": "8.15.0",
+    "@typescript-eslint/parser": "8.16.0",
     "@vitejs/plugin-react": "4.3.0",
     "chokidar": "4.0.1",
     "cross-env": "7.0.3",
@@ -115,12 +115,12 @@
     "fs-extra": "11.2.0",
     "globals": "15.12.0",
     "jsdom": "25.0.1",
-    "nyc": "17.1.0",
+    "monocart-coverage-reports": "2.11.3",
+    "monocart-reporter": "2.9.11",
     "swagger-typescript-api": "13.0.22",
     "typescript": "5.7.2",
-    "typescript-eslint": "8.15.0",
+    "typescript-eslint": "8.16.0",
     "vite": "5.4.7",
-    "vite-plugin-istanbul": "6.0.2",
     "vitest": "2.1.1"
   },
   "engines": {
@@ -136,10 +136,11 @@
     "check-ts": "tsc --noEmit",
     "i18n-checker": "node i18n-checker.js",
     "generate-types-from-api": "swagger-typescript-api --no-client -p http://localhost:8080/api-docs -o src/utils -n api-types.d.ts --sort-types",
-    "test:e2e": "yarn playwright test",
-    "test:e2e:ui": "yarn playwright test --ui",
-    "generate-test-e2e": "npx playwright codegen http://localhost:3001/",
-    "test:e2e:coverage": "npx nyc report --reporter=html && start \"\" coverage/index.html"
+    "test:e2e": "yarn playwright test --workers=1 --retries=2",
+    "test:e2e:ui": "yarn playwright test --ui --workers=1",
+    "generate-test-e2e": "yarn playwright codegen http://localhost:3000/",
+    "show-report-e2e": "start \"\" test-results/report.html && start \"\" test-results/coverage/index.html",
+    "test:e2e:coverage": "E2E_COVERAGE=true yarn playwright test && yarn show-report-e2e"
   },
   "resolutions": {
     "mini-css-extract-plugin": "2.9.1",
@@ -149,5 +150,5 @@
   "workspaces": [
     "packages/*"
   ],
-  "packageManager": "[email protected].1"
+  "packageManager": "[email protected].3"
 }

openbas-front/playwright.config.ts

@@ -20,16 +20,36 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [
+    ['list'],
+    ['monocart-reporter', {
+      name: `OpenBAS Report`,
+      outputFile: './test-results/report.html',
+      // global coverage report options
+      coverage: {
+        entryFilter: () => true,
+        sourceFilter: (sourcePath: string) => sourcePath.startsWith('src'),
+      },
+      /*
+      onEnd: async (reportData) => {
+        // teams integration with webhook
+        await teamsWebhook(reportData);
+      } */
+    }],
+  ],
   /* 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: 'http://127.0.0.1:3000',
+    baseURL: 'http://localhost:3001',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    ignoreHTTPSErrors: true,
   },
-
+  expect: { timeout: 60000 },
+  timeout: 200000,
   /* Configure projects for major browsers */
   projects: [
     { name: 'setup', testMatch: /.*\.setup\.ts/ },
@@ -38,6 +58,10 @@ export default defineConfig({
       use: {
         ...devices['Desktop Chrome'],
         storageState: 'tests_e2e/.auth/user.json',
+        viewport: {
+          width: 1920,
+          height: 1080,
+        },
       },
       dependencies: ['setup'],
     },

openbas-front/tests_e2e/conf/mcr.config.ts

@@ -0,0 +1,27 @@
+import { CoverageReportOptions } from 'monocart-coverage-reports';
+
+// https://github.com/cenfun/monocart-coverage-reports
+const coverageOptions: CoverageReportOptions = {
+
+  name: 'OpenBAS Playwright Coverage Report',
+
+  reports: [
+    'console-details',
+    'v8',
+    'lcovonly',
+  ],
+
+  entryFilter: {
+    '**/node_modules/**': false,
+    '**/**': true,
+  },
+
+  sourceFilter: {
+    '**/node_modules/**': false,
+    '**/**': true,
+  },
+
+  outputDir: './test-results/coverage',
+};
+
+export default coverageOptions;

openbas-front/tests_e2e/fixtures/baseFixtures.ts

@@ -1,28 +1,52 @@
-/* eslint-disable  @typescript-eslint/no-explicit-any, no-underscore-dangle */
-import { test as baseTest } from '@playwright/test';
-import * as crypto from 'crypto';
-import * as fs from 'fs';
-import * as path from 'path';
+import { Page, test as testBase } from '@playwright/test';
+import MCR from 'monocart-coverage-reports';
 
-const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
+import coverageOptions from '../conf/mcr.config';
 
-export function generateUUID(): string {
-  return crypto.randomBytes(16).toString('hex');
-}
+// fixtures
+const test = testBase.extend<{
+  autoTestFixture: string;
+}>({
+  autoTestFixture: [async ({ context }, use) => {
+    const activateCoverage = process.env.E2E_COVERAGE;
+    const isChromium = test.info().project.name === 'chromium';
 
-export const test = baseTest.extend({
-  context: async ({ context }, use) => {
-    await context.addInitScript(() => window.addEventListener('beforeunload', () => (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__))));
-    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
-    await context.exposeFunction('collectIstanbulCoverage', (coverageJSON: string) => {
-      if (coverageJSON) fs.writeFileSync(path.join(istanbulCLIOutput, `playwright_coverage_${generateUUID()}.json`), coverageJSON);
-    });
-    await use(context);
-    for (const page of context.pages()) {
-      // eslint-disable-next-line no-await-in-loop
-      await page.evaluate(() => (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__)));
+    const handlePageEvent = async (page: Page) => {
+      await Promise.all([
+        page.coverage.startJSCoverage({
+          resetOnNavigation: false,
+        }),
+        page.coverage.startCSSCoverage({
+          resetOnNavigation: false,
+        }),
+      ]);
+    };
+
+    // console.log('autoTestFixture setup...');
+    // coverage API is chromium only
+    if (activateCoverage && isChromium) {
+      context.on('page', handlePageEvent);
+    }
+
+    await use('autoTestFixture');
+
+    // console.log('autoTestFixture teardown...');
+    if (activateCoverage && 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,
+  }],
 });
 
-export const { expect } = test;
+// eslint-disable-next-line import/prefer-default-export
+export { test };

openbas-front/vite.config.ts

@@ -1,6 +1,5 @@
 import react from '@vitejs/plugin-react';
 import { createLogger, defineConfig, loadEnv, transformWithEsbuild } from 'vite';
-import IstanbulPlugin from 'vite-plugin-istanbul';
 
 const logger = createLogger();
 const loggerError = logger.error;
@@ -27,6 +26,7 @@ export default ({ mode }: { mode: string }) => {
     build: {
       target: ['chrome58'],
       sourcemap: true,
+      minify: false,
     },
 
     resolve: {
@@ -118,11 +118,6 @@ export default ({ mode }: { mode: string }) => {
         },
       },
       react(),
-      [IstanbulPlugin({
-        include: 'src/*',
-        exclude: ['node_modules', 'test/'],
-        extension: ['.js', '.jsx', '.ts', '.tsx'],
-      })],
     ],
 
     server: {