test(Playwright): migrate component tests to the story-gallery model

package.json

@@ -19,10 +19,10 @@
     "test:prepare": "rimraf temp && lerna run build",
     "test:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
     "test": "yarn test:prepare && cypress run --component --browser chrome --spec packages",
-    "test:pw": "playwright test -c playwright-ct.config.ts",
-    "test:pw:open": "playwright test -c playwright-ct.config.ts --ui",
-    "test:pw:ci": "playwright test -c playwright-ct.config.ts --project chromium",
-    "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out test-results playwright-report playwright-ct && lerna run clean",
+    "test:pw": "playwright test",
+    "test:pw:open": "playwright test --ui",
+    "test:pw:ci": "PW_COVERAGE=true playwright test --project chromium && nyc report --temp-dir temp/.nyc_output_playwright --report-dir temp/playwright-coverage --reporter lcovonly",
+    "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out test-results playwright-report && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
     "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",
     "lint": "eslint .",
@@ -68,7 +68,6 @@
     "@cypress/code-coverage": "4.0.3",
     "@eslint/compat": "2.1.0",
     "@eslint/js": "9.39.5",
-    "@playwright/experimental-ct-react": "1.62.1",
     "@playwright/test": "1.62.1",
     "@semantic-release/github": "12.0.9",
     "@testing-library/cypress": "10.1.3",
@@ -98,8 +97,8 @@
     "husky": "9.1.7",
     "lerna": "10.0.0",
     "lint-staged": "17.2.0",
-    "monocart-reporter": "2.12.4",
     "npm-run-all2": "9.0.3",
+    "nyc": "18.0.0",
     "pagefind": "1.5.2",
     "postcss": "8.5.25",
     "postcss-cli": "11.0.1",
@@ -140,6 +139,10 @@
       "**/src/enums/*",
       "**/*.stories.tsx",
       "**/*.test.{ts,tsx}",
+      "**/*.spec.{ts,tsx}",
+      "**/*.gallery.tsx",
+      "**/test/**",
+      "packages/charts/src/test-utils/**",
       "**/*.module.css.ts",
       "**/node_modules/**",
       "**/dist/**",

packages/charts/src/components/BarChart/test/BarChart.spec.tsx

@@ -1,38 +1,23 @@
-import { expect, test } from '../../../../../../playwright/fixtures/main-fixtures.js';
+import { expect, test } from '../../../../../../playwright/fixtures/gallery-fixtures.js';
 import { complexDataSet } from '../../../resources/DemoProps.js';
 import {
   testLoadingStates,
   testPassThroughProps,
   testStackAggregateTotals,
   testZoomingTool,
-} from '../../../test-utils/sharedTests.js';
-import { BarChart } from '../index.js';
-import {
-  BarChartClickTest,
-  BarChartDataPointClickTest,
-  BarChartHighlightColorTest,
-  BarChartLegendConfigTest,
-  BarChartSecondYAxisTest,
-} from './BarChartTestComponents.js';
-
-const dimensions = [{ accessor: 'name', interval: 0 }];
-const measures = [
-  { accessor: 'users', label: 'Users' },
-  { accessor: 'sessions', label: 'Active Sessions' },
-  { accessor: 'volume', label: 'Vol.' },
-];
-const baseProps = { dataset: complexDataSet, dimensions, measures };
+} from '../../../test-utils/chartGalleryTests.js';
+import type { Chart } from '../../../test-utils/ChartHarness.gallery.js';
 
 test.describe('BarChart', () => {
   test('Basic', async ({ mount, page }) => {
-    await mount(<BarChart {...baseProps} />);
+    await mount<typeof Chart>('ChartHarness/Chart', { chart: 'BarChart' });
     await expect(page.locator('.recharts-responsive-container')).toBeVisible();
     await expect(page.locator('.recharts-bar')).toHaveCount(3);
     await expect(page.locator('.recharts-bar-rectangles')).toHaveCount(3);
   });
 
   test('click handlers', async ({ mount, page }) => {
-    await mount(<BarChartClickTest />);
+    await mount('BarChart/BarChartClickTest');
 
     await page.getByText('January').click();
     await expect(page.getByTestId('click-count')).toHaveText('1');
@@ -49,24 +34,21 @@ test.describe('BarChart', () => {
     await expect(page.getByTestId('last-legend-datakey')).toHaveText('volume');
   });
 
-  testLoadingStates(BarChart, baseProps, { dimensions: [], measures: [] }, '.recharts-bar');
+  testLoadingStates('BarChart', '.recharts-bar');
 
   test('legendConfig', async ({ mount, page }) => {
-    await mount(<BarChartLegendConfigTest />);
+    await mount('BarChart/BarChartLegendConfigTest');
     await expect(page.getByTestId('catval').first()).toBeVisible();
   });
 
-  testZoomingTool(BarChart, baseProps);
+  testZoomingTool('BarChart');
 
-  testPassThroughProps(BarChart, { dimensions: [], measures: [] });
+  testPassThroughProps('BarChart');
 
-  testStackAggregateTotals(BarChart, { dataset: complexDataSet.slice(0, 3), dimensions }, [
-    { accessor: 'users', stackId: 'A', label: 'Users' },
-    { accessor: 'sessions', stackId: 'A', label: 'Active Sessions' },
-  ]);
+  testStackAggregateTotals('BarChart');
 
   test('onDataPointClick', async ({ mount, page }) => {
-    await mount(<BarChartDataPointClickTest />);
+    await mount('BarChart/BarChartDataPointClickTest');
 
     await page.locator('[name="January"]').first().click();
     await expect(page.getByTestId('dp-click-count')).toHaveText('1');
@@ -77,15 +59,15 @@ test.describe('BarChart', () => {
   });
 
   test('highlightColor', async ({ mount, page }) => {
-    await mount(<BarChartHighlightColorTest />);
+    await mount('BarChart/BarChartHighlightColorTest');
 
     // January has users=100 (<=200 → green), February has users=230 (>200 → red)
     await expect(page.locator('.recharts-bar-rectangle [fill="green"]').first()).toBeAttached();
     await expect(page.locator('.recharts-bar-rectangle [fill="red"]').first()).toBeAttached();
   });
 
   test('secondYAxis', async ({ mount, page }) => {
-    await mount(<BarChartSecondYAxisTest />);
+    await mount('BarChart/BarChartSecondYAxisTest');
     // BarChart is horizontal so the secondary "Y" axis renders as an additional XAxis
     await expect(page.locator('.recharts-xAxis')).toHaveCount(2);
   });

packages/charts/src/components/BulletChart/test/BulletChart.spec.tsx

@@ -1,42 +1,18 @@
-import { expect, test } from '../../../../../../playwright/fixtures/main-fixtures.js';
+import { expect, test } from '../../../../../../playwright/fixtures/gallery-fixtures.js';
 import { complexDataSet } from '../../../resources/DemoProps.js';
-import { testLoadingStates, testPassThroughProps, testZoomingTool } from '../../../test-utils/sharedTests.js';
-import { BulletChart } from '../index.js';
-import {
-  BulletChartClickTest,
-  BulletChartDataPointClickTest,
-  BulletChartLegendConfigTest,
-  BulletChartVerticalLayoutTest,
-} from './BulletChartTestComponents.js';
-
-const dimensions = [{ accessor: 'name', interval: 0 }];
-const measures = [
-  { accessor: 'users', label: 'Users', type: 'primary' as const },
-  { accessor: 'sessions', label: 'Active Sessions', type: 'comparison' as const },
-  { accessor: 'volume', label: 'Vol.', type: 'additional' as const },
-];
-const baseProps = { dataset: complexDataSet, dimensions, measures };
+import { testLoadingStates, testPassThroughProps, testZoomingTool } from '../../../test-utils/chartGalleryTests.js';
+import type { Chart } from '../../../test-utils/ChartHarness.gallery.js';
 
 test.describe('BulletChart', () => {
   test('Basic', async ({ mount, page }) => {
-    await mount(
-      <BulletChart
-        dataset={complexDataSet}
-        dimensions={[{ accessor: 'name', interval: 0 }]}
-        measures={[
-          { accessor: 'users', label: 'Users', type: 'primary' },
-          { accessor: 'sessions', label: 'Active Sessions', type: 'comparison' },
-          { accessor: 'volume', label: 'Vol.', type: 'additional' },
-        ]}
-      />,
-    );
+    await mount<typeof Chart>('ChartHarness/Chart', { chart: 'BulletChart' });
     await expect(page.locator('.recharts-responsive-container')).toBeVisible();
     await expect(page.locator('.recharts-bar')).toHaveCount(3);
     await expect(page.locator('.recharts-bar-rectangles')).toHaveCount(3);
   });
 
   test('click handlers', async ({ mount, page }) => {
-    await mount(<BulletChartClickTest />);
+    await mount('BulletChart/BulletChartClickTest');
 
     await page.getByText('January').click();
     await expect(page.getByTestId('click-count')).toHaveText('1');
@@ -53,28 +29,19 @@ test.describe('BulletChart', () => {
     await expect(page.getByTestId('last-legend-datakey')).toHaveText('volume');
   });
 
-  testLoadingStates(
-    BulletChart,
-    {
-      dataset: complexDataSet,
-      dimensions: [{ accessor: 'name', interval: 0 }],
-      measures: [{ accessor: 'users', label: 'Users', type: 'primary' as const }],
-    },
-    { dimensions: [], measures: [] },
-    '.recharts-bar',
-  );
+  testLoadingStates('BulletChart', '.recharts-bar');
 
   test('legendConfig', async ({ mount, page }) => {
-    await mount(<BulletChartLegendConfigTest />);
+    await mount('BulletChart/BulletChartLegendConfigTest');
     await expect(page.getByTestId('catval').first()).toBeVisible();
   });
 
-  testZoomingTool(BulletChart, baseProps);
+  testZoomingTool('BulletChart');
 
-  testPassThroughProps(BulletChart, { dimensions: [], measures: [] });
+  testPassThroughProps('BulletChart');
 
   test('onDataPointClick', async ({ mount, page }) => {
-    await mount(<BulletChartDataPointClickTest />);
+    await mount('BulletChart/BulletChartDataPointClickTest');
 
     // make sure not to click the label, as currently the event is only fired when the actual bar is clicked.
     const firstBar = page.locator('.recharts-bar-rectangle path').first();
@@ -87,7 +54,7 @@ test.describe('BulletChart', () => {
   });
 
   test('layout="vertical"', async ({ mount, page }) => {
-    await mount(<BulletChartVerticalLayoutTest />);
+    await mount('BulletChart/BulletChartVerticalLayoutTest');
     await expect(page.locator('.recharts-responsive-container')).toBeVisible();
     // Vertical layout renders bars along Y axis and uses XAxis for values
     await expect(page.locator('.recharts-bar')).toHaveCount(3);

packages/charts/src/components/ColumnChart/test/ColumnChart.spec.tsx

@@ -1,48 +1,23 @@
-import { expect, test } from '../../../../../../playwright/fixtures/main-fixtures.js';
+import { expect, test } from '../../../../../../playwright/fixtures/gallery-fixtures.js';
 import { complexDataSet } from '../../../resources/DemoProps.js';
 import {
   testLoadingStates,
   testPassThroughProps,
   testStackAggregateTotals,
   testZoomingTool,
-} from '../../../test-utils/sharedTests.js';
-import { ColumnChart } from '../index.js';
-import {
-  ColumnChartClickTest,
-  ColumnChartDataPointClickTest,
-  ColumnChartHighlightColorTest,
-  ColumnChartLegendConfigTest,
-  ColumnChartSecondYAxisTest,
-} from './ColumnChartTestComponents.js';
-
-const dimensions = [{ accessor: 'name', interval: 0 }];
-const measures = [
-  { accessor: 'users', label: 'Users' },
-  { accessor: 'sessions', label: 'Active Sessions' },
-  { accessor: 'volume', label: 'Vol.' },
-];
-const baseProps = { dataset: complexDataSet, dimensions, measures };
+} from '../../../test-utils/chartGalleryTests.js';
+import type { Chart } from '../../../test-utils/ChartHarness.gallery.js';
 
 test.describe('ColumnChart', () => {
   test('Basic', async ({ mount, page }) => {
-    await mount(
-      <ColumnChart
-        dataset={complexDataSet}
-        dimensions={[{ accessor: 'name', interval: 0 }]}
-        measures={[
-          { accessor: 'users', label: 'Users' },
-          { accessor: 'sessions', label: 'Active Sessions' },
-          { accessor: 'volume', label: 'Vol.' },
-        ]}
-      />,
-    );
+    await mount<typeof Chart>('ChartHarness/Chart', { chart: 'ColumnChart' });
     await expect(page.locator('.recharts-responsive-container')).toBeVisible();
     await expect(page.locator('.recharts-bar')).toHaveCount(3);
     await expect(page.locator('.recharts-bar-rectangles')).toHaveCount(3);
   });
 
   test('click handlers', async ({ mount, page }) => {
-    await mount(<ColumnChartClickTest />);
+    await mount('ColumnChart/ColumnChartClickTest');
 
     await page.getByText('January').click();
     await expect(page.getByTestId('click-count')).toHaveText('1');
@@ -59,33 +34,21 @@ test.describe('ColumnChart', () => {
     await expect(page.getByTestId('last-legend-datakey')).toHaveText('volume');
   });
 
-  testLoadingStates(
-    ColumnChart,
-    {
-      dataset: complexDataSet,
-      dimensions: [{ accessor: 'name', interval: 0 }],
-      measures: [{ accessor: 'users', label: 'Users' }],
-    },
-    { dimensions: [], measures: [] },
-    '.recharts-bar',
-  );
+  testLoadingStates('ColumnChart', '.recharts-bar');
 
   test('legendConfig', async ({ mount, page }) => {
-    await mount(<ColumnChartLegendConfigTest />);
+    await mount('ColumnChart/ColumnChartLegendConfigTest');
     await expect(page.getByTestId('catval').first()).toBeVisible();
   });
 
-  testZoomingTool(ColumnChart, baseProps);
+  testZoomingTool('ColumnChart');
 
-  testPassThroughProps(ColumnChart, { dimensions: [], measures: [] });
+  testPassThroughProps('ColumnChart');
 
-  testStackAggregateTotals(ColumnChart, { dataset: complexDataSet.slice(0, 3), dimensions }, [
-    { accessor: 'users', stackId: 'A', label: 'Users' },
-    { accessor: 'sessions', stackId: 'A', label: 'Active Sessions' },
-  ]);
+  testStackAggregateTotals('ColumnChart');
 
   test('onDataPointClick', async ({ mount, page }) => {
-    await mount(<ColumnChartDataPointClickTest />);
+    await mount('ColumnChart/ColumnChartDataPointClickTest');
 
     await page.locator('[name="January"]').first().click();
     await expect(page.getByTestId('dp-click-count')).toHaveText('1');
@@ -96,7 +59,7 @@ test.describe('ColumnChart', () => {
   });
 
   test('highlightColor', async ({ mount, page }) => {
-    await mount(<ColumnChartHighlightColorTest />);
+    await mount('ColumnChart/ColumnChartHighlightColorTest');
 
     // January has users=100 (<=200 → green), February has users=230 (>200 → red)
     const greenCells = page.locator('.recharts-bar-rectangle [fill="green"]');
@@ -106,7 +69,7 @@ test.describe('ColumnChart', () => {
   });
 
   test('secondYAxis', async ({ mount, page }) => {
-    await mount(<ColumnChartSecondYAxisTest />);
+    await mount('ColumnChart/ColumnChartSecondYAxisTest');
 
     // ColumnChart is vertical so secondYAxis renders as an additional YAxis
     await expect(page.locator('.recharts-yAxis')).toHaveCount(2);