fix: respect user-provided textAnchor prop on XAxis/YAxis#7028
fix: respect user-provided textAnchor prop on XAxis/YAxis#7028PavelVanecek merged 4 commits intorecharts:mainfrom
Conversation
Fixes a regression introduced in v3.7.0 where the textAnchor prop on XAxis/YAxis was being ignored. The calculated textAnchor (from orientation/mirror) was overriding the user-provided value. Now uses user-provided textAnchor if present, otherwise falls back to the calculated value. Fixes recharts#7027
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughTick label horizontal alignment in CartesianAxis now prefers a valid Changes
Sequence Diagram(s)(Skipped — change is a small rendering override and tests, not a multi-component sequential flow that requires visualization.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/cartesian/CartesianAxis.tsx (1)
393-395: Add a regression test to guard the user-providedtextAnchorbehaviour.No test file was included in this PR. The regression in
#7027was not caught by the existing test suite, so a targeted test (e.g., verifying that a tick<Text>renders with the explicitly-passedtextAnchorrather than the orientation-derived default) would prevent it from recurring.As per coding guidelines: "Aim for 100% unit test code coverage when writing new code."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/cartesian/CartesianAxis.tsx` around lines 393 - 395, Add a regression unit test that mounts/renders the CartesianAxis component and verifies that when axisProps.textAnchor is explicitly provided the tick <Text> element uses that value instead of the orientation-derived default from getTickTextAnchor; locate the behavior around the textAnchor assignment in CartesianAxis (the const textAnchor = (axisProps.textAnchor as TextAnchor) ?? getTickTextAnchor(orientation, mirror);) and write an assertion that a tick's rendered text element has the expected textAnchor attribute when axisProps.textAnchor is set, plus a complementary case where axisProps.textAnchor is undefined to ensure the fallback to getTickTextAnchor still works.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/cartesian/CartesianAxis.tsx`:
- Around line 393-394: Replace the unsafe type assertion on axisProps.textAnchor
in CartesianAxis by using the existing isValidTextAnchor type guard: check
axisProps.textAnchor with isValidTextAnchor and use it when truthy, otherwise
fall back to getTickTextAnchor(orientation, mirror); update the textAnchor
assignment in the CartesianAxis component to use this predicate (referencing
axisProps.textAnchor, isValidTextAnchor, getTickTextAnchor, orientation, and
mirror).
---
Nitpick comments:
In `@src/cartesian/CartesianAxis.tsx`:
- Around line 393-395: Add a regression unit test that mounts/renders the
CartesianAxis component and verifies that when axisProps.textAnchor is
explicitly provided the tick <Text> element uses that value instead of the
orientation-derived default from getTickTextAnchor; locate the behavior around
the textAnchor assignment in CartesianAxis (the const textAnchor =
(axisProps.textAnchor as TextAnchor) ?? getTickTextAnchor(orientation, mirror);)
and write an assertion that a tick's rendered text element has the expected
textAnchor attribute when axisProps.textAnchor is set, plus a complementary case
where axisProps.textAnchor is undefined to ensure the fallback to
getTickTextAnchor still works.
PavelVanecek
left a comment
There was a problem hiding this comment.
Can you add a test please? VR or unit
|
Added regression tests to verify user-provided textAnchor is respected (with both custom and default cases). All tests passing locally. |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
test/cartesian/CartesianAxis.spec.tsx (2)
360-403: Consider adding a vertical-axis (left/right orientation)textAnchortest to match PR scope.The PR title and linked issue mention both XAxis and YAxis. The fix in
CartesianAxis.tsxapplies to all orientations, but both new tests only coverorientation="bottom". A parallel test asserting that a user-providedtextAnchoron a vertical axis (e.g.,orientation="left") is also respected would give complete regression coverage for the stated fix.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/cartesian/CartesianAxis.spec.tsx` around lines 360 - 403, Add a parallel test in CartesianAxis.spec.tsx that renders <CartesianAxis> with a vertical orientation (e.g., orientation="left" or "right") inside <Surface> using the same ticks, exampleScale and viewBox, passing a user-provided textAnchor (for example "start"), then query the tick elements by the '.recharts-cartesian-axis-tick-value' selector and assert each tick has the expected 'text-anchor' attribute; mirror the existing horizontal tests (the ones using orientation="bottom") but change orientation and positioning props so the test targets the vertical-axis code paths in CartesianAxis.
360-403: Missingvi.useFakeTimers()andvi.runOnlyPendingTimers()in both new tests.The coding guidelines require
vi.useFakeTimers()in all tests andvi.runOnlyPendingTimers()after renders (when not usingcreateSelectorTestCase). Both new tests omit these. While none of the pre-existing tests in this file include them either, that is a pre-existing gap — the new tests being added now should follow the guideline.♻️ Proposed fix
+import { beforeEach, afterEach } from 'vitest'; + beforeEach(() => { + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.useRealTimers(); + }); it('Respects user-provided textAnchor prop on horizontal axis', () => { const { container } = render( <Surface width={500} height={500}> <CartesianAxis orientation="bottom" y={100} width={400} height={50} viewBox={{ x: 0, y: 0, width: 500, height: 500 }} ticks={ticks} textAnchor="start" scale={exampleScale} /> </Surface>, ); + vi.runOnlyPendingTimers(); const tickTexts = container.querySelectorAll('.recharts-cartesian-axis-tick-value'); expect(tickTexts).toHaveLength(5); tickTexts.forEach(text => { expect(text).toHaveAttribute('text-anchor', 'start'); }); }); it('Uses default textAnchor when not provided', () => { const { container } = render( <Surface width={500} height={500}> <CartesianAxis orientation="bottom" y={100} width={400} height={50} viewBox={{ x: 0, y: 0, width: 500, height: 500 }} ticks={ticks} scale={exampleScale} /> </Surface>, ); + vi.runOnlyPendingTimers(); const tickTexts = container.querySelectorAll('.recharts-cartesian-axis-tick-value'); expect(tickTexts).toHaveLength(5); tickTexts.forEach(text => { expect(text).toHaveAttribute('text-anchor', 'middle'); }); });As per coding guidelines: "Use
vi.useFakeTimers()in all tests due to Redux autoBatchEnhancer dependency on timers andrequestAnimationFrame" and "Callvi.runOnlyPendingTimers()to advance timers after renders when not usingcreateSelectorTestCasehelper".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/cartesian/CartesianAxis.spec.tsx` around lines 360 - 403, Add test timer setup and advancement to both new tests ("Respects user-provided textAnchor prop on horizontal axis" and "Uses default textAnchor when not provided"): call vi.useFakeTimers() at the start of each it block before render and call vi.runOnlyPendingTimers() immediately after the render(...) completes so pending timers/RAF are flushed; ensure this is applied inside the same it blocks surrounding the render of <CartesianAxis ... /> to satisfy the Redux autoBatchEnhancer and requestAnimationFrame requirements.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@test/cartesian/CartesianAxis.spec.tsx`:
- Around line 360-403: Add a parallel test in CartesianAxis.spec.tsx that
renders <CartesianAxis> with a vertical orientation (e.g., orientation="left" or
"right") inside <Surface> using the same ticks, exampleScale and viewBox,
passing a user-provided textAnchor (for example "start"), then query the tick
elements by the '.recharts-cartesian-axis-tick-value' selector and assert each
tick has the expected 'text-anchor' attribute; mirror the existing horizontal
tests (the ones using orientation="bottom") but change orientation and
positioning props so the test targets the vertical-axis code paths in
CartesianAxis.
- Around line 360-403: Add test timer setup and advancement to both new tests
("Respects user-provided textAnchor prop on horizontal axis" and "Uses default
textAnchor when not provided"): call vi.useFakeTimers() at the start of each it
block before render and call vi.runOnlyPendingTimers() immediately after the
render(...) completes so pending timers/RAF are flushed; ensure this is applied
inside the same it blocks surrounding the render of <CartesianAxis ... /> to
satisfy the Redux autoBatchEnhancer and requestAnimationFrame requirements.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7028 +/- ##
==========================================
+ Coverage 90.12% 90.19% +0.07%
==========================================
Files 526 526
Lines 39183 39630 +447
Branches 5423 5440 +17
==========================================
+ Hits 35312 35746 +434
- Misses 3862 3875 +13
Partials 9 9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 12.44kB (0.43%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-umdAssets Changed:
view changes for bundle: recharts/bundle-es6Assets Changed:
view changes for bundle: recharts/bundle-cjsAssets Changed:
|
Replaced the 'as TextAnchor' type assertion with the existing isValidTextAnchor helper function as requested in code review. This provides better type safety and follows the project's established patterns.
The ternary expression was too long for prettier. Split it across multiple lines to satisfy the formatter.
|
The VR test failure is fixed on main branch already |
Fixes a regression introduced in #6990 where the
textAnchorprop on XAxis/YAxis was being ignored.The calculated
textAnchor(from orientation/mirror) was overriding the user-provided value because it was assigned after spreadingaxisProps.Change: Now uses user-provided
textAnchorif present, otherwise falls back to the calculated value.Fixes #7027
Summary by CodeRabbit
Improvements
Tests