chore: add coverage for playwright tests

contributing/testing-guide.md

@@ -89,7 +89,7 @@ A typical `*.pw.tsx` file may look like the following:
 
 ```tsx
 // inside src/components/button/button.pw.tsx
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../__spec_helper__/base-test";
 import Button from "./button.component";
 import { buttonComponent } from "../../../playwright/component/button/index";
 

jest.config.ts

@@ -23,7 +23,7 @@ const config: Config = {
     "lib",
     "esm",
   ],
-  coverageReporters: ["text-summary", "html"],
+  coverageReporters: ["text-summary", "html", "json"],
   coverageDirectory: "<rootDir>/coverage",
   coverageThreshold: isCI ? undefined : coverageThresholds,
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "mjs"],

package.json

@@ -6,7 +6,8 @@
     "lib",
     "esm",
     "scripts/check_rfcs/check_rfcs.js",
-    "scripts/check_rfcs/index.js"
+    "scripts/check_rfcs/index.js",
+    "scripts/copy_coverage_files/index.js"
   ],
   "scripts": {
     "start": "node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
@@ -35,7 +36,10 @@
     "test:ct": "playwright test -c playwright-ct.config.ts",
     "test:ct:ui": "playwright test --ui -c playwright-ct.config.ts",
     "test:ct:report": "npx playwright show-report",
-    "clear-playwright-cache": "rimraf ./playwright/.cache"
+    "clear-playwright-cache": "rimraf ./playwright/.cache",
+    "clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
+    "test:ct:coverage": "npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
+    "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage"
   },
   "repository": {
     "type": "git",
@@ -191,6 +195,8 @@
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
+    "monocart-coverage-reports": "^2.11.4",
+    "nyc": "^17.1.0",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react-day-picker": "^9.3.2",
@@ -243,4 +249,4 @@
       "@semantic-release/github"
     ]
   }
-}
+}

playwright/helpers/base-test.js

@@ -0,0 +1,59 @@
+import { test as ctBase, expect } from "@playwright/experimental-ct-react17";
+import mcr from "monocart-coverage-reports";
+
+const coverageOptions = {
+  reports: [
+    [
+      "json",
+      {
+        file: "coverage.json",
+      },
+    ],
+  ],
+  lcov: true,
+  name: "My Istanbul Report",
+  all: {
+    dir: ["./src"],
+    filter: {
+      "**/*.component.tsx": true,
+      "**/*.style.ts": true,
+    },
+  },
+  outputDir: "./playwright/coverage",
+};
+
+const test = ctBase.extend({
+  autoTestFixture: [
+    async ({ page }, use) => {
+      // coverage API is chromium only
+      if (test.info().project.name === "chromium") {
+        await Promise.all([
+          page.coverage.startJSCoverage({
+            resetOnNavigation: false,
+          }),
+          page.coverage.startCSSCoverage({
+            resetOnNavigation: false,
+          }),
+        ]);
+      }
+
+      await use("autoTestFixture");
+
+      if (test.info().project.name === "chromium") {
+        const [jsCoverage, cssCoverage] = await Promise.all([
+          page.coverage.stopJSCoverage(),
+          page.coverage.stopCSSCoverage(),
+        ]);
+        const coverageList = [...jsCoverage, ...cssCoverage];
+        await mcr(coverageOptions).add(coverageList);
+        await mcr(coverageOptions).generate();
+      }
+    },
+    {
+      scope: "test",
+      auto: true,
+    },
+  ],
+});
+
+export { test, expect };

scripts/copy_coverage_files/index.js

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const path = require("path");
+
+const destinationDir = "./merged-coverage";
+
+function copyJSONFile(dir) {
+  // Ensure the destination directory exists
+  if (!fs.existsSync(destinationDir)) {
+    fs.mkdirSync(destinationDir, { recursive: true });
+  }
+  // Read files in the source directory
+  fs.readdir(dir, (error, files) => {
+    if (error) {
+      console.error("Error reading source directory:", error);
+      return;
+    }
+
+    const jsonFiles = files.filter(
+      (file) => path.extname(file).toLowerCase() === ".json",
+    );
+
+    // Copy JSON files to destination directory
+    jsonFiles.forEach((file) => {
+      fs.copyFile(
+        path.join(dir, file),
+        path.join(destinationDir, file),
+        fs.constants.COPYFILE_FICLONE, // Optional flags (use fs.constants.COPYFILE_EXCL to prevent overwriting)
+        (err) => {
+          if (err) {
+            console.error(`Error copying file ${file}:`, err);
+          } else {
+            console.log(`Copied file ${file} to ${destinationDir}`);
+          }
+        },
+      );
+    });
+  });
+}
+
+copyJSONFile("./playwright/coverage");
+copyJSONFile("./coverage");

src/components/accordion/accordion.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   accordion,
   accordionIcon,

src/components/action-popover/action-popover.pw.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-await-in-loop */
-import { expect, test } from "@playwright/experimental-ct-react17";
 import React from "react";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { accordionDefaultTitle } from "../../../playwright/components/accordion";
 import {
   actionPopover,

src/components/advanced-color-picker/advanced-color-picker.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { AdvancedColorPickerCustom } from "./components.test-pw";
 import {
   currentColorDescription,

src/components/alert/alert.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   alertTitle,
   alertSubtitle,

src/components/anchor-navigation/anchor-navigation.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 
 import {
   AnchorNavigationComponent,

src/components/badge/badge.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   badge,
   badgeCounter,

src/components/batch-selection/batch-selection.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { BatchSelectionProps } from "../../../src/components/batch-selection";
 import {
   BatchSelectionComponent,

src/components/box/box.pw.tsx

@@ -1,5 +1,5 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
 import React from "react";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { getDataElementByValue } from "../../../playwright/components";
 import {
   assertCssValueIsApproximately,

src/components/breadcrumbs/breadcrumbs.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   breadcrumbsComponent,
   allCrumbs,

src/components/button-bar/button-bar.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   Default as ButtonBarCustom,
   DefaultWithWrapper as ButtonBarWithWrapper,

src/components/button-minor/button-minor.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { ButtonMinorProps } from "./button-minor.component";
 import {
   Default as ButtonMinor,

src/components/button-toggle/button-toggle.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { ButtonToggle, ButtonToggleGroupProps, ButtonToggleProps } from ".";
 import {
   ButtonToggleComponent,

src/components/button/button.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 
 import {
   buttonSubtextPreview,

src/components/carbon-provider/carbon-provider.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { HooksConfig } from "../../../playwright";
 import { SageTheme as SageThemeStory, AllThemes } from "./components.test-pw";
 import Button from "../../../src/components/button";

src/components/card/card.pw.tsx

@@ -1,5 +1,5 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
 import React from "react";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import "../../../playwright/components";
 import {
   card,

src/components/checkbox/checkbox.pw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
 import { CommonCheckableInputProps } from "__internal__/checkable-input/checkable-input.component";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import Box from "../box";
 import { Checkbox, CheckboxProps, CheckboxGroupProps } from ".";
 import {

src/components/confirm/confirm.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import Confirm, { ConfirmProps } from "./confirm.component";
 import {
   ConfirmComponent,

src/components/content/content.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import ContentComponent from "./components.test-pw";
 import { CHARACTERS } from "../../../playwright/support/constants";
 import {

src/components/date-range/date-range.pw.tsx

@@ -1,5 +1,5 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
 import React from "react";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   getDataElementByValue,
   icon,

src/components/date/date.pw.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   DateInputCustom,
   DateInputValidationNewDesign,

src/components/decimal/decimal.pw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
 import { Locator } from "@playwright/test";
+import { test, expect } from "../../../playwright/helpers/base-test";
 
 import {
   commonDataElementInputPreview,

src/components/definition-list/definition-list.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   DLComponent,
   DLReactFragment,

src/components/detail/detail.pw.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import Detail from "./detail.component";
 import {
   childrenPreview,

src/components/dialog-full-screen/dialog-full-screen.pw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
 import type { Page } from "@playwright/test";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   DialogFullScreenComponent,
   NestedDialog,

src/components/dialog/dialog.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 
 import {
   DialogComponent,

src/components/dismissible-box/dismissible-box.pw.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
-
 import { DismissibleBoxProps } from "components/dismissible-box";
+import { test, expect } from "../../../playwright/helpers/base-test";
+
 import {
   DefaultDismissibleBox,
   DefaultDarkVariant,

src/components/draggable/draggable.pw.tsx

@@ -1,5 +1,5 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
 import React from "react";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { checkAccessibility } from "../../../playwright/support/helper";
 
 import {

src/components/drawer/drawer.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import {
   DrawerCustom,
   DrawerCustomFooterHeader,

src/components/duelling-picklist/duelling-picklist.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { PicklistItemProps } from "./picklist-item/picklist-item.component";
 import {
   DuellingPicklistComponent,

src/components/fieldset/fieldset.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import Fieldset from ".";
 import Form, { FormProps } from "../form";
 import FieldsetComponent from "./components.test-pw";

src/components/file-input/file-input.pw.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Page } from "@playwright/test";
-import { test, expect } from "@playwright/experimental-ct-react17";
 import path from "path";
 import { readFileSync } from "fs";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import FileInputComponent from "./components.test-pw";
 import {
   hiddenInput,

src/components/flat-table/flat-table.pw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
 import type { Locator } from "@playwright/test";
+import { test, expect } from "../../../playwright/helpers/base-test";
 import { FlatTableCheckboxProps } from ".";
 import {
   FlatTableComponent,