refactor(charts): migrate Cypress tests to Playwright Component Tests #8609
Merged
Conversation
Replace all 15 Cypress component test files (.cy.tsx) in the charts package with Playwright CT equivalents (.spec.tsx). Shared test component factories reduce boilerplate across chart types. - 105 tests passing, 7 skipped (keyboard focus edge cases) - ColumnChartWithTrend excluded (scheduled for removal) - Shared factories: createClickTestComponent, createLegendConfigTestComponent, createZoomingTestComponents, createStackTotalsTestComponents
- PieChart/DonutChart: use element.focus() for consumer handler tests
- ScatterChart: use Tab from before button for accessibility tests
- RadialChart: use dispatchEvent('click') for click handler test
- TimelineChart: remove deprecated wheel zoom test
- ScatterChart keyboard+consumer handler combo remains fixme (1 test)
110 passing, 1 skipped
…UI5/webcomponents-react into refactor/charts-test-playwright
…on accessor coverage
… coverage gaps - Migrate ColumnChartWithTrend from Cypress to Playwright (Basic, click handlers, Loading Placeholder, in Grid, zoomingTool, legendConfig, PassThrough props) - Add missing PieChart/DonutChart sector focus tests: wrap-around navigation, Space key activation, activeSegment out-of-bounds clamping, dataset shrink resets keyboard state - Strengthen stack totals tooltip assertions (BarChart, ColumnChart, ComposedChart) to verify the numeric total value, not just presence of "Total" text
- Assert .recharts-active-shape exists after Enter activation in PieChart/DonutChart sector focus tests - Test hold-Space-navigate-release behavior: Space activates on keyup so holding Space while navigating activates the landed-on sector
Add tests for custom library logic that has zero coverage:
- onDataPointClick: BarChart, ColumnChart, LineChart, ComposedChart,
BulletChart, RadarChart (each with chart-specific event enrichment)
- highlightColor: BarChart, ColumnChart (getCellColors conditional fill)
- loading={true} with data (BusyIndicator overlay): BarChart, PieChart
- secondYAxis: BarChart, ColumnChart, ComposedChart
- layout="vertical": ComposedChart, BulletChart
New shared factories in test-utils/componentFactories.tsx:
createDataPointClickTestComponent, createHighlightColorTestComponent,
createLoadingOverlayTestComponent, createSecondYAxisTestComponent,
createVerticalLayoutTestComponent.
The Cypress test "TimelineChartBody: scales when the mouse wheel event happens" was attempted as test.fixme in the Playwright migration and later deleted because Playwright's dispatched wheel event doesn't drive the body's zoom logic the same way Cypress did.
All Cypress tests in packages/charts have been migrated to Playwright, so the cypress matrix entry for charts (and the React-18 react-is override that only applied to it) is dead. Drop both. Expand the Playwright sourceFilter to include packages/charts/src (excluding resources, interfaces, enums, test-utils, dist, stories, and re-export index.ts barrels — mirroring the Cypress excludes). Split the resulting lcov.info per-package and upload two reports from the Playwright job: packages/main under flag 'playwright', packages/ charts under flag 'charts' — preserving the historical per-package breakdown in Coveralls. The carryforward list already names both.
…ction Chart specs imported test from @playwright/experimental-ct-react directly, bypassing the autoTestFixture in playwright/fixtures/main- fixtures.ts that calls page.coverage.startJSCoverage and feeds the result into monocart-reporter. As a result, the charts entries in the sourceFilter (added in the previous CI commit) had nothing to filter — no coverage was actually collected for the charts package. Switch all 12 chart component specs and 3 hook specs to import test from main-fixtures.js. The autoTestFixture is auto: true and runs only on chromium (matches CI), so behavior on other projects is unchanged. Verified locally with CI=true that lcov.info now contains entries for packages/charts/src/.
Drop the awk lcov split and second Coveralls upload introduced for a separate 'charts' flag — in a monorepo, running test:pw covers all component packages and a single aggregate coverage view is what we want. Charts coverage now folds into the existing 'playwright' flag. Remove 'charts' from the carryforward list since it's no longer reported (cypress matrix dropped it earlier).
The previous click position (x: box.width * 0.08, y: box.height * 0.3) sometimes landed on the data <text> label rendered inside the bar at insideTop. Real user clicks on labels don't fire onDataPointClick (only clicks on the bar shape do), so the test was flaky depending on where the math landed. Compute the first bar's bounding box and click 3px from the bottom edge — that lands inside the path but below where the insideTop label extends. Verified 20/20 passes locally.
Replaces the trivial createLoadingOverlayTestComponent factory and the per-chart 'Loading Placeholder' test with a single testLoadingStates helper that registers a 'loading states' test verifying all three ChartContainer rendering paths in one go: - empty dataset → Placeholder, no BusyIndicator, no chart elements - empty dataset + loading=true → identical to empty (loading is a no-op on the placeholder branch — verified) - has data + loading=true → BusyIndicator overlay on top of the chart Lives in test-utils/sharedTests.tsx (separate from componentFactories to avoid pulling Playwright's test runner into the client bundle). Each chart spec now calls testLoadingStates(Chart, baseProps, emptyProps, chartElementSelector) once, replacing the previous 'Loading Placeholder' test and (for Bar/Pie) the 'loading overlay with data' test. Coverage extended to all 9 charts that use ChartContainer (RadialChart included via its value-driven dataset). TimelineChart skipped — it doesn't go through ChartContainer and has no loading prop.
Adds three shared test functions to test-utils/sharedTests.tsx: - testZoomingTool(Chart, baseProps): registers the 3-test zoomingTool describe block (enabled / disabled / custom) - testPassThroughProps(Chart, emptyProps): registers the HTML standard props pass-through test - testStackAggregateTotals(Chart, baseProps, stackMeasures): registers the 2-test showStackAggregateTotals describe block, computing the expected per-row stacked totals from the dataset and stacked measure accessors Each chart spec now calls these functions instead of inlining the tests. Removed the now-unused createZoomingTestComponents and createStackTotalsTestComponents factories from componentFactories.tsx along with their per-chart export bindings. highlightColor remains inline (only Bar/Column use it; sharing it as a test function caused a Vite bundling conflict when passing the TestComponent through as a parameter). legendConfig and secondYAxis also stay inline per scope discussion.
|
Size Change: 0 B Total Size: 517 kB ℹ️ View Unchanged
|
The Cypress matrix used to override resolutions["react-is"] to "18" for the React 18 + charts shard because recharts' internal type detection misbehaves when react@18 runs against react-is@19. When the charts cypress shard was deleted (charts moved to Playwright), the override went with it — but the Playwright matrix also runs against React 18 and now covers charts, so the same override is needed here. Move the override into the Playwright job, gated on matrix.react == '18'. Applies before installing React 18 so the yarn resolution is used. Also: stabilize BulletChart onDataPointClick by waiting for the first bar's path to render before measuring its bounding box. Without the waitFor() the locator can resolve before recharts has positioned elements, and boundingBox() returns null. Local repro was rare; CI caught it once.
Coverage Report for CI Build 26151688107Coverage increased (+0.2%) to 84.114%Details
Uncovered ChangesNo uncovered changes found. Coverage Regressions122 previously-covered lines in 7 files lost coverage.
Coverage Stats
💛 - Coveralls |
- Both Playwright and Cypress now exclude **/*.module.css.ts. These are auto-generated by the build (gitignored, per project CLAUDE.md) and contain only type declarations, so including them adds noise to the coverage report. - Tighten Playwright's barrel-file rule to match Cypress: only the top-level packages/*/src/index.ts is excluded, not every nested index.ts (which would silently drop coverage for any future internal barrel).
MarcusNotheis
approved these changes
May 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.