refactor(charts): migrate Cypress tests to Playwright Component Tests (#8609)

Author: Lukas742

.github/workflows/test.yml

@@ -56,6 +56,10 @@ jobs:
       - name: Install
         run: yarn install --immutable
 
+      - name: Override react-is for charts
+        if: ${{ matrix.react == '18' }}
+        run: jq '.resolutions["react-is"] = "18"' package.json > tmp.json && mv tmp.json package.json
+
       - name: Install React 18
         if: ${{ matrix.react == '18' }}
         run: |
@@ -88,7 +92,6 @@ jobs:
       matrix:
         spec:
           - base
-          - charts
           - cypress-commands
           - main/src/components
           - main/src/webComponents
@@ -108,10 +111,6 @@ jobs:
       - name: Install
         run: yarn install --immutable
 
-      - name: Override react-is for charts
-        if: ${{ matrix.react == '18' && matrix.spec == 'charts' }}
-        run: jq '.resolutions["react-is"] = "18"' package.json > tmp.json && mv tmp.json package.json
-
       - name: Install 18
         if: ${{ matrix.react == '18' }}
         run: |
@@ -154,4 +153,4 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           parallel-finished: true
-          carryforward: 'base,charts,cypress-commands,main/src/components,main/src/internal,playwright'
+          carryforward: 'base,cypress-commands,main/src/components,main/src/internal,playwright'

cypress.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
         '**/src/enums/*',
         '**/*.stories.tsx',
         '**/*.test.{ts,tsx}',
+        '**/*.module.css.ts',
         '**/node_modules/**',
         '**/dist/**',
         'packages/*/src/index.ts',

packages/charts/src/components/BarChart/BarChart.cy.tsx

@@ -0,0 +1,92 @@
+import { expect, test } from '../../../../../../playwright/fixtures/main-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 };
+
+test.describe('BarChart', () => {
+  test('Basic', async ({ mount, page }) => {
+    await mount(<BarChart {...baseProps} />);
+    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 page.getByText('January').click();
+    await expect(page.getByTestId('click-count')).toHaveText('1');
+
+    await page.locator('[name="January"]').first().click();
+    await expect(page.getByTestId('click-count')).toHaveText('2');
+    await expect(page.getByTestId('last-payload')).toHaveText(JSON.stringify(complexDataSet[0]));
+
+    await page.locator('.recharts-legend-item-text').filter({ hasText: 'Users' }).click();
+    await expect(page.getByTestId('legend-click-count')).toHaveText('1');
+    await expect(page.getByTestId('last-legend-value')).toHaveText('Users');
+
+    await page.locator('.recharts-legend-item-text').filter({ hasText: 'Vol.' }).click();
+    await expect(page.getByTestId('last-legend-datakey')).toHaveText('volume');
+  });
+
+  testLoadingStates(BarChart, baseProps, { dimensions: [], measures: [] }, '.recharts-bar');
+
+  test('legendConfig', async ({ mount, page }) => {
+    await mount(<BarChartLegendConfigTest />);
+    await expect(page.getByTestId('catval').first()).toBeVisible();
+  });
+
+  testZoomingTool(BarChart, baseProps);
+
+  testPassThroughProps(BarChart, { dimensions: [], measures: [] });
+
+  testStackAggregateTotals(BarChart, { dataset: complexDataSet.slice(0, 3), dimensions }, [
+    { accessor: 'users', stackId: 'A', label: 'Users' },
+    { accessor: 'sessions', stackId: 'A', label: 'Active Sessions' },
+  ]);
+
+  test('onDataPointClick', async ({ mount, page }) => {
+    await mount(<BarChartDataPointClickTest />);
+
+    await page.locator('[name="January"]').first().click();
+    await expect(page.getByTestId('dp-click-count')).toHaveText('1');
+    await expect(page.getByTestId('dp-last-datakey')).not.toHaveText('');
+    await expect(page.getByTestId('dp-last-value')).not.toHaveText('');
+    await expect(page.getByTestId('dp-last-data-index')).not.toHaveText('-1');
+    await expect(page.getByTestId('dp-last-payload')).toHaveText(JSON.stringify(complexDataSet[0]));
+  });
+
+  test('highlightColor', async ({ mount, page }) => {
+    await mount(<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 />);
+    // 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/BarChart/test/BarChart.spec.tsx

@@ -0,0 +1,48 @@
+import { complexDataSet } from '../../../resources/DemoProps.js';
+import {
+  createClickTestComponent,
+  createDataPointClickTestComponent,
+  createHighlightColorTestComponent,
+  createLegendConfigTestComponent,
+  createSecondYAxisTestComponent,
+} from '../../../test-utils/componentFactories.js';
+import { BarChart } from '../index.js';
+
+const dimensions = [{ accessor: 'name', interval: 0 }];
+
+const measures = [
+  {
+    accessor: (data: Record<string, number>) => data.users,
+    label: 'Users',
+    formatter: (val: number) => val.toLocaleString('en'),
+  },
+  {
+    accessor: (data: Record<string, number>) => data.sessions,
+    label: 'Active Sessions',
+    formatter: (val: number) => `${val} sessions`,
+    hideDataLabel: true,
+  },
+  { accessor: 'volume', label: 'Vol.' },
+];
+
+const baseProps = { dataset: complexDataSet, dimensions, measures };
+
+export const BarChartClickTest = createClickTestComponent(BarChart, baseProps, {
+  trackLegendValue: true,
+});
+
+export const BarChartLegendConfigTest = createLegendConfigTestComponent(BarChart, baseProps);
+
+export const BarChartDataPointClickTest = createDataPointClickTestComponent(BarChart, baseProps);
+
+export const BarChartHighlightColorTest = createHighlightColorTestComponent(BarChart, baseProps, [
+  {
+    accessor: 'users',
+    label: 'Users',
+    highlightColor: (value: number) => (value > 200 ? 'red' : 'green'),
+  },
+  { accessor: 'sessions', label: 'Active Sessions' },
+  { accessor: 'volume', label: 'Vol.' },
+]);
+
+export const BarChartSecondYAxisTest = createSecondYAxisTestComponent(BarChart, baseProps, 'volume');