feat(PieChart): add dataKey to Legend payload#7137
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds a Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 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)
📝 Coding Plan
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.
🧹 Nitpick comments (1)
test/chart/PieChart.spec.tsx (1)
412-482: Add one multi-Pielegend selector test to lock in disambiguation behavior.Given the PR goal, a case with two
Piecomponents using differentdataKeyvalues would guard against regressions and verify that legend items can be mapped back to the correctPie.As per coding guidelines:
test/**/*.{test,spec}.{ts,tsx}: "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 `@test/chart/PieChart.spec.tsx` around lines 412 - 482, Add a test that covers the multi-Pie legend disambiguation by rendering a test case with two Pie components that use different dataKey values, then invoke selectPieLegend for one pie and assert the legend items map back to that Pie only; specifically, update the PieChart.spec.tsx suite to add a new test (e.g., "selectPieLegend with multiple pies") that uses renderTestCase to set up two pies, calls selectPieLegend(state, 'pie1', undefined), and uses expectLastCalledWith to verify the returned legend payloads correspond to the correct dataKey and payloads for pie1; reference the existing selectPieLegend, renderTestCase, and expectLastCalledWith helpers to implement the assertion.
🤖 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/chart/PieChart.spec.tsx`:
- Around line 412-482: Add a test that covers the multi-Pie legend
disambiguation by rendering a test case with two Pie components that use
different dataKey values, then invoke selectPieLegend for one pie and assert the
legend items map back to that Pie only; specifically, update the
PieChart.spec.tsx suite to add a new test (e.g., "selectPieLegend with multiple
pies") that uses renderTestCase to set up two pies, calls selectPieLegend(state,
'pie1', undefined), and uses expectLastCalledWith to verify the returned legend
payloads correspond to the correct dataKey and payloads for pie1; reference the
existing selectPieLegend, renderTestCase, and expectLastCalledWith helpers to
implement the assertion.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 22916185-e853-4712-b4a0-a9fe1f3cc9cc
📒 Files selected for processing (2)
src/state/selectors/pieSelectors.tstest/chart/PieChart.spec.tsx
Bundle ReportChanges will increase total bundle size by 126 bytes (0.0%) ⬆️. 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-cjsAssets Changed:
view changes for bundle: recharts/bundle-es6Assets Changed:
view changes for bundle: recharts/bundle-treeshaking-polarAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7137 +/- ##
=======================================
Coverage 89.59% 89.59%
=======================================
Files 536 536
Lines 40401 40402 +1
Branches 5498 5498
=======================================
+ Hits 36197 36198 +1
Misses 4196 4196
Partials 8 8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
3ef11ce to
781d44b
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
test/chart/PieChart.spec.tsx (1)
484-550: Good test coverage for the linked issue, with a minor suggestion.The new test suite effectively validates:
- Legend payload contains
dataKey- The
dataKeymatches the Pie's prop value- Function-typed
dataKeyis preserved by referenceConsider adding selector call count verification to align with coding guidelines for spotting unnecessary re-renders. For example:
expect(spy).toHaveBeenCalledTimes(3);Additionally, the second test (lines 512-519) largely overlaps with the first test (lines 504-510), since both verify that
dataKeyequals'visits'. Consider consolidating them if desired, though having explicit iteration is a valid stylistic choice for thoroughness.Based on learnings: "Verify the number of selector calls using the spy object from
createSelectorTestCaseto spot unnecessary re-renders and improve performance"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/chart/PieChart.spec.tsx` around lines 484 - 550, Add selector call count assertions using the spy returned by createSelectorTestCase to detect unnecessary re-renders: in the tests that call renderIssueTestCase and renderFnTestCase (the tests using selectPieLegend for 'issue-pie' and 'fn-pie'), add an assertion like expect(spy).toHaveBeenCalledTimes(3) (or the correct expected number for the lifecycle of these selector calls) immediately after obtaining spy to validate call count; ensure you reference the spy from createSelectorTestCase and keep the existing payload/dataKey assertions intact.
🤖 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/chart/PieChart.spec.tsx`:
- Around line 484-550: Add selector call count assertions using the spy returned
by createSelectorTestCase to detect unnecessary re-renders: in the tests that
call renderIssueTestCase and renderFnTestCase (the tests using selectPieLegend
for 'issue-pie' and 'fn-pie'), add an assertion like
expect(spy).toHaveBeenCalledTimes(3) (or the correct expected number for the
lifecycle of these selector calls) immediately after obtaining spy to validate
call count; ensure you reference the spy from createSelectorTestCase and keep
the existing payload/dataKey assertions intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9171c430-446a-45a2-9c17-2f0f39bfdcb0
📒 Files selected for processing (1)
test/chart/PieChart.spec.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (2)
test/chart/PieChart.spec.tsx (2)
504-519: Consider consolidating redundant tests.The test at lines 512-519 largely duplicates the verification in lines 504-510, as both confirm that
dataKeyequals'visits'. Consider merging them into a single test or removing the redundant assertions.Also, per coding guidelines, consider verifying the number of selector calls using
expect(spy).toHaveBeenCalledTimes(...)to spot unnecessary re-renders.♻️ Suggested consolidation
test('Legend payload should contain dataKey', () => { const { spy } = renderIssueTestCase(state => selectPieLegend(state, 'issue-pie', undefined)); expectLastCalledWith(spy, [ expect.objectContaining({ dataKey: 'visits' }), expect.objectContaining({ dataKey: 'visits' }), ]); + expect(spy).toHaveBeenCalledTimes(3); }); - test('Legend payload dataKey matches the Pie dataKey prop', () => { - const { spy } = renderIssueTestCase(state => selectPieLegend(state, 'issue-pie', undefined)); - const payload = spy.mock.lastCall?.[0]; - expect(payload).toBeDefined(); - payload?.forEach(entry => { - expect(entry.dataKey).toBe('visits'); - }); - });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/chart/PieChart.spec.tsx` around lines 504 - 519, The two tests duplicating verification of the Pie legend dataKey should be consolidated: combine the assertions in the tests named "Legend payload should contain dataKey" and "Legend payload dataKey matches the Pie dataKey prop" into a single test that both checks the legend payload entries contain dataKey 'visits' (using expect.objectContaining or iterating payload) and also asserts the selector was invoked the expected number of times (use expect(spy).toHaveBeenCalledTimes(...)); locate and update the tests that call renderIssueTestCase and selectPieLegend (and the spy variable) to perform both checks in one test and remove the redundant test.
521-549: Good coverage for function dataKey.The test correctly verifies that when
dataKeyis a function, the function reference is preserved in the legend payload. CreatingrenderFnTestCaseinside the test is acceptable here since it requires a different component configuration.Minor suggestion: Add call count verification per coding guidelines.
♻️ Add call count verification
const { spy } = renderFnTestCase(state => selectPieLegend(state, 'fn-pie', undefined)); const payload = spy.mock.lastCall?.[0]; expect(payload).toBeDefined(); payload?.forEach(entry => { expect(entry.dataKey).toBe(dataKeyFn); expect(typeof entry.dataKey).toBe('function'); }); + expect(spy).toHaveBeenCalledTimes(3); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/chart/PieChart.spec.tsx` around lines 521 - 549, Add a call-count assertion for the test "Legend payload should contain dataKey even when dataKey is a function": after creating renderFnTestCase and obtaining const { spy } = renderFnTestCase(...) (the spy used with selectPieLegend/'fn-pie'), assert the spy was invoked the expected number of times (e.g., expect(spy).toHaveBeenCalledTimes(1) or equivalent) before inspecting payload, so the test verifies the selector was actually called once and follows call-count guidelines.
🤖 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/chart/PieChart.spec.tsx`:
- Around line 504-519: The two tests duplicating verification of the Pie legend
dataKey should be consolidated: combine the assertions in the tests named
"Legend payload should contain dataKey" and "Legend payload dataKey matches the
Pie dataKey prop" into a single test that both checks the legend payload entries
contain dataKey 'visits' (using expect.objectContaining or iterating payload)
and also asserts the selector was invoked the expected number of times (use
expect(spy).toHaveBeenCalledTimes(...)); locate and update the tests that call
renderIssueTestCase and selectPieLegend (and the spy variable) to perform both
checks in one test and remove the redundant test.
- Around line 521-549: Add a call-count assertion for the test "Legend payload
should contain dataKey even when dataKey is a function": after creating
renderFnTestCase and obtaining const { spy } = renderFnTestCase(...) (the spy
used with selectPieLegend/'fn-pie'), assert the spy was invoked the expected
number of times (e.g., expect(spy).toHaveBeenCalledTimes(1) or equivalent)
before inspecting payload, so the test verifies the selector was actually called
once and follows call-count guidelines.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 36090a69-345f-4ec8-b6ea-b9bb3f9af67e
📒 Files selected for processing (2)
src/state/selectors/pieSelectors.tstest/chart/PieChart.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/state/selectors/pieSelectors.ts
Fixes #7056. The
Legendpayload inPieChartlacked thedataKeyproperty, unlike other charts such asAreaChartandLineChart. This PR adds thedataKeyfromPiesettings to thePielegend payload for consistency across chart types.Summary by CodeRabbit
Bug Fixes
Tests