Convert RadialBarChart stories to VR tests#6551
Merged
Merged
Conversation
Contributor
WalkthroughRemoved many RadialBarChart Storybook story variants from the stories file and added a comprehensive visual regression (VR) test suite for RadialBarChart covering stacked, rings, axis, reversal, and angled configurations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (42)
test-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Angled-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Angled-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Angled-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Angles-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Angles-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Angles-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Both-Angles-And-Reverse-Axis-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Both-Angles-And-Reverse-Axis-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Both-Angles-And-Reverse-Axis-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Angle-Axis-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Angle-Axis-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Angle-Axis-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Both-Axes-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Both-Axes-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Both-Axes-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Radius-Axis-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Radius-Axis-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Reversed-Radius-Axis-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Custom-Domain-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Custom-Domain-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Custom-Domain-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-And-Types-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-And-Types-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-And-Types-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Implicit-Axes-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Implicit-Axes-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Implicit-Axes-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Radius-Axis-Vertically-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Radius-Axis-Vertically-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Radius-Axis-Vertically-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Types-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Types-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Types-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Stacked-RadialBar-Chart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Stacked-RadialBar-Chart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Stacked-RadialBar-Chart-1-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (2)
storybook/stories/Examples/RadialBarChart/RadialBarChart.stories.tsx(0 hunks)test-vr/tests/RadialBarChart.spec-vr.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- storybook/stories/Examples/RadialBarChart/RadialBarChart.stories.tsx
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to storybook/** : Use Storybook for high-fidelity examples intended for publication; prefer unit or VR tests for low-fidelity cases due to Chromatic limits
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to test-vr/__snapshots__/** : Commit newly recorded or updated visual regression snapshot files under test-vr/__snapshots__ to the repository
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to storybook/** : Use Storybook for high-fidelity examples intended for publication; prefer unit or VR tests for low-fidelity cases due to Chromatic limits
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : When testing selectors, verify render counts using the spy and rerenderSameComponent from createSelectorTestCase
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
test-vr/tests/RadialBarChart.spec-vr.tsx (4)
1-5: LGTM!The imports are appropriate for VR tests. Using
RechartsHookInspectorandpageDatafrom the storybook directory is reasonable for visual regression testing.
7-20: LGTM!The stacked RadialBar test configuration is comprehensive, testing multiple RadialBar components with the same stackId, along with Legend, PolarGrid, axes, and a styled Tooltip cursor.
22-55: LGTM!The LOTR-themed test data is creative and provides good variety for testing different RadialBarChart configurations. The data structure (name, rings, fill) supports all the test scenarios below.
57-235: LGTM!The test suite provides excellent coverage of RadialBarChart configurations, progressively testing:
- Implicit and explicit axes
- Data keys and types
- Custom domains
- Axis orientations and reversals
- Angle-based chart variations
The tests are well-organized and comprehensive.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6551 +/- ##
=======================================
Coverage 91.62% 91.62%
=======================================
Files 483 483
Lines 40267 40267
Branches 4568 4568
=======================================
Hits 36896 36896
Misses 3355 3355
Partials 16 16 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
test-vr/tests/RadialBarChart.spec-vr.tsx (1)
34-55: Consider importing ringsData from test/_data.ts.The
ringsDataconstant is duplicated fromtest/_data.ts(lines 273-294). While the LOTR comment adds nice context, you could reduce duplication by importing the data and adding the comment separately.If you prefer to keep the data local for test readability, that's reasonable too.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
test-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Both-Angles-And-Reverse-Axis-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Both-Angles-And-Reverse-Axis-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Chart-Reversed-By-Both-Angles-And-Reverse-Axis-1-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (1)
test-vr/tests/RadialBarChart.spec-vr.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to storybook/** : Use Storybook for high-fidelity examples intended for publication; prefer unit or VR tests for low-fidelity cases due to Chromatic limits
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to test-vr/__snapshots__/** : Commit newly recorded or updated visual regression snapshot files under test-vr/__snapshots__ to the repository
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to storybook/** : Use Storybook for high-fidelity examples intended for publication; prefer unit or VR tests for low-fidelity cases due to Chromatic limits
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : When testing selectors, verify render counts using the spy and rerenderSameComponent from createSelectorTestCase
Applied to files:
test-vr/tests/RadialBarChart.spec-vr.tsx
🧬 Code graph analysis (1)
test-vr/tests/RadialBarChart.spec-vr.tsx (2)
storybook/stories/data/Page.ts (1)
pageData(259-259)test/_data.ts (1)
ringsData(274-295)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
test-vr/tests/RadialBarChart.spec-vr.tsx (4)
1-5: LGTM! Imports are appropriate for VR tests.The imports correctly include Playwright CT utilities, Recharts components, and test data sources.
7-20: Well-structured VR test for stacked radial bars.The test correctly configures stacked RadialBar components and validates the visual output.
57-220: Excellent progressive test coverage of axis configurations.The test suite systematically covers implicit axes, explicit axes, data keys, types, custom domains, orientations, and reversals. Each test validates a distinct configuration without duplication.
222-250: Previous critical issue resolved - tests now correctly differentiate angle vs. axis reversal.The "Chart Reversed By Both Angles And Reverse Axis" test (lines 237-250) now correctly includes
reversedprops on bothPolarAngleAxis(line 243) andPolarRadiusAxis(line 244), distinguishing it from the "Chart Reversed By Angles" test (lines 222-235) which only uses reversed angles without thereversedprops. This properly validates both reversal mechanisms.
ckifer
approved these changes
Nov 2, 2025
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
2 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.
Description
These are valuable as VR tests but they are not great examples so let's keep the screenshots but get rid of the stories. Also brings down the amount of work we send to Chromatic.
Summary by CodeRabbit
Tests
Chores