feat: Add code coverage for local runs (#1084)

.github/workflows/playwright-ui.yml

@@ -45,5 +45,5 @@ jobs:
         if: failure()
         with:
           name: playwright-report
-          path: core/playwright-report/
+          path: core/test-results/
           retention-days: 30

.github/workflows/playwright-visual-regression.yml

@@ -45,5 +45,5 @@ jobs:
         if: failure()
         with:
           name: playwright-report
-          path: core/playwright-report/
+          path: core/test-results/
           retention-days: 30

core/next.config.js

@@ -22,6 +22,18 @@ const nextConfig = {
     ignoreDuringBuilds: !!process.env.CI,
     dirs: ['app', 'client', 'components', 'lib', 'middlewares'],
   },
+  webpack: (config) => {
+    if (process.env.NODE_V8_COVERAGE) {
+      Object.defineProperty(config, 'devtool', {
+        get() {
+          return 'source-map';
+        },
+        set() {},
+      });
+    }
+
+    return config;
+  },
   // default URL generation in BigCommerce uses trailing slash
   trailingSlash: process.env.TRAILING_SLASH !== 'false',
   async headers() {

core/package.json

@@ -72,6 +72,8 @@
     "dotenv-cli": "^7.4.2",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.4",
+    "monocart-coverage-reports": "^2.9.1",
+    "monocart-reporter": "^2.6.0",
     "postcss": "^8.4.39",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",

core/playwright.config.ts

@@ -1,8 +1,38 @@
 import { defineConfig, devices } from '@playwright/test';
 import { config } from 'dotenv';
+import { CoverageReportOptions } from 'monocart-reporter';
 
 config();
 
+const coverageReportOptions: CoverageReportOptions = {
+  name: 'Catalyst Code Coverage Report',
+
+  entryFilter: (entry) => {
+    return entry.url.includes('next/static/chunks') || entry.url.includes('next/server/app');
+  },
+
+  sourceFilter: (sourcePath) => {
+    return (
+        sourcePath.startsWith('bigcommerce/catalyst-core') &&
+        (sourcePath.endsWith('.ts') || sourcePath.endsWith('.tsx'))
+    );
+  },
+
+  sourcePath: (fileSource) => {
+    const list = ['core/'];
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const pre of list) {
+      if (fileSource.startsWith(pre)) {
+        return fileSource.slice(pre.length);
+      }
+    }
+
+    return fileSource;
+  },
+  reports: ['v8'],
+};
+
 export default defineConfig({
   testDir: './tests',
   expect: {
@@ -11,7 +41,15 @@ export default defineConfig({
     },
   },
   fullyParallel: !!process.env.CI,
-  reporter: 'html',
+  reporter: process.env.CI
+      ? [['list'], ['monocart-reporter']]
+      : [['list'], ['monocart-reporter',
+        {
+          coverage: coverageReportOptions,
+        },
+      ],
+      ],
+  globalTeardown: './tests/global-teardown.js',
   use: {
     baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
     screenshot: 'only-on-failure',
@@ -28,4 +66,4 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
   ],
-});
+});

core/tests/fixtures.js

@@ -0,0 +1,33 @@
+import { test as testBase } from '@playwright/test';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { addCoverageReport } from 'monocart-reporter';
+
+const test = testBase.extend({
+    autoTestFixture: [
+        async ({ page }, use) => {
+            const isChromium = test.info().project.name === 'tests-chromium';
+
+            if (isChromium && !process.env.CI) {
+                await Promise.all([
+                    page.coverage.startJSCoverage({
+                        resetOnNavigation: false,
+                    }),
+                ]);
+            }
+
+            await use('autoTestFixture');
+
+            if (isChromium && !process.env.CI) {
+                const [jstCoverage] = await Promise.all([page.coverage.stopJSCoverage()]);
+
+                await addCoverageReport(jstCoverage, test.info());
+            }
+        },
+        {
+            scope: 'test',
+            auto: true,
+        },
+    ],
+});
+
+export { test };

core/tests/global-teardown.js

@@ -0,0 +1,60 @@
+import fs from 'fs';
+import { CDPClient } from 'monocart-coverage-reports';
+import { addCoverageReport } from 'monocart-reporter';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const globalTeardown = async (config) => {
+    if (!process.env.CI) {
+        const client = await CDPClient({
+            port: 9230,
+        });
+
+        console.log('..... global teardown .....');
+
+        const dir = await client.writeCoverage();
+
+        await client.stopCoverage();
+
+        if (!fs.existsSync(dir)) {
+            console.log('not found coverage dir');
+
+            return;
+        }
+
+        const files = fs.readdirSync(dir);
+
+        // eslint-disable-next-line no-restricted-syntax
+        for (const filename of files) {
+            const content = fs.readFileSync(path.resolve(dir, filename)).toString('utf-8');
+            const json = JSON.parse(content);
+            let coverageList = json.result;
+
+            coverageList = coverageList.filter((entry) => entry.url && entry.url.startsWith('file:'));
+            coverageList = coverageList.filter((entry) => entry.url.includes('next/server/app'));
+            coverageList = coverageList.filter((entry) => !entry.url.includes('manifest.js'));
+
+            coverageList.forEach((entry) => {
+                const filePath = fileURLToPath(entry.url);
+
+                if (fs.existsSync(filePath)) {
+                    entry.source = fs.readFileSync(filePath).toString('utf8');
+                } else {
+                    console.log('not found file', filePath);
+                }
+            });
+
+            // there is no test info on teardown, just mock one with required config
+            const mockTestInfo = {
+                config,
+            };
+
+            // eslint-disable-next-line no-await-in-loop
+            await addCoverageReport(coverageList, mockTestInfo);
+        }
+    }  else {
+        console.log('global teardown...');
+    }
+};
+
+export default globalTeardown;

core/tests/ui/desktop/core/components/accordion.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('Verify accordion behavior on header', async ({ page }) => {
   await page.goto('/');

core/tests/ui/desktop/core/components/breadcrumbs.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('Verify breadcrumbs on product selection', async ({ page }) => {
   await page.goto('/');

core/tests/ui/desktop/core/components/carousel.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

core/tests/ui/desktop/core/components/checkbox.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('Filter products by selecting checkbox', async ({ page }) => {
   await page.goto('/');

core/tests/ui/desktop/core/components/counter.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('Increase count and verify the results', async ({ page }) => {
   await page.goto('/orbit-terrarium-large/');

core/tests/ui/desktop/core/components/radio-group.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('Changing selection on radio button options should update query parameters', async ({
   page,

core/tests/ui/desktop/core/components/search.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const productName = '[Sample] Able Brewing System';
 

core/tests/ui/desktop/core/components/select.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

core/tests/ui/desktop/core/components/slideshow.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

core/tests/ui/desktop/core/components/swatch.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('Selecting various options on color panel should update query parameters', async ({
   page,

core/tests/ui/desktop/e2e/404.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 test('404 page', async ({ page }) => {
   await page.goto('/unknown-url');

core/tests/ui/desktop/e2e/account.spec.ts

@@ -1,5 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { expect, Page, test } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const testUserEmail: string = process.env.TEST_ACCOUNT_EMAIL || '';
 const testUserPassword: string = process.env.TEST_ACCOUNT_PASSWORD || '';

core/tests/ui/desktop/e2e/cart.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const sampleProduct = '[Sample] Able Brewing System';
 

core/tests/ui/desktop/e2e/checkout.spec.ts

@@ -1,5 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { expect, Page, test } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const sampleProduct = '[Sample] Laundry Detergent';
 const testUser = faker.person.firstName();

core/tests/ui/desktop/e2e/coupon.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const couponCode = 'OFF25';
 

core/tests/ui/desktop/e2e/login.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const testAccountEmail = process.env.TEST_ACCOUNT_EMAIL || '';
 const testAccountPassword = process.env.TEST_ACCOUNT_PASSWORD || '';

core/tests/ui/desktop/e2e/product.spec.ts

@@ -1,4 +1,6 @@
-import { expect, Page, test } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 async function selectProductForComparison(page: Page, name: string) {
   const productInformation = page.getByRole('heading', { name }).locator('..');

core/tests/ui/desktop/e2e/register.spec.ts

@@ -1,5 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const password = faker.internet.password({ length: 10 });
 const firstName = faker.person.firstName();

core/tests/ui/desktop/e2e/search.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const productName = '[Sample] Smith Journal 13';
 

core/tests/ui/desktop/e2e/shipping.spec.ts

@@ -1,4 +1,6 @@
-import { expect, Page, test } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 async function addEstimatedShippingCosts(
   page: Page,

core/tests/ui/mobile/checkout-experience.spec.ts

@@ -1,5 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '~/tests/fixtures';
 
 const testUser = faker.person.firstName();