Add screenshots for YAxis widths and ticks#6283
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds visual regression tests to establish baseline screenshots for YAxis component behavior, specifically focusing on width calculations and tick rendering. The tests are intended to help debug a regression identified in pull request #6262.
- Creates comprehensive test suite for YAxis width and tick configurations
- Adds component fixtures for different YAxis scenarios with multiline ticks
- Establishes baseline screenshots for various width="auto" and tick formatting combinations
Reviewed Changes
Copilot reviewed 2 out of 44 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| test-vr/tests/YAxisComponents.tsx | Component fixtures for YAxis test scenarios with various width and tick configurations |
| test-vr/tests/YAxis.spec-vr.tsx | Visual regression test suite covering YAxis width and tick rendering behavior |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| export const YAxisWithWidthAutoTwoLineTicks = () => ( | ||
| <LineChart width={300} height={300} data={pageData}> | ||
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders 3 lines */} |
There was a problem hiding this comment.
[nitpick] The comment mentions 'Text still renders 3 lines' but doesn't specify which Text component or provide context about why this happens. Consider adding more specific details about the expected vs actual behavior to help future developers understand the issue.
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders 3 lines */} | |
| {/* @ts-expect-error The 'maxLines' property is passed to the Text component used for YAxis tick labels, but it is not respected: the tick label still renders as 3 lines instead of the expected maximum of 2 lines. */} |
|
|
||
| export const YAxisWithTwoLineTicks = () => ( | ||
| <LineChart width={300} height={300} data={pageData}> | ||
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders 3 lines */} |
There was a problem hiding this comment.
[nitpick] This comment is identical to the previous one but lacks the width='auto' context. The comment should clarify how this scenario differs from the previous test case to justify having both tests.
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders 3 lines */} | |
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders 3 lines; this test omits width="auto" to check behavior when width is not set to "auto" */} |
| export const YAxisWithLongTicksAndMaxLines1 = () => ( | ||
| <LineChart width={300} height={300} data={pageData}> | ||
| <XAxis dataKey="name" /> | ||
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders multiple lines */} |
There was a problem hiding this comment.
[nitpick] The comment says 'Text still renders multiple lines' but doesn't specify how many lines or provide context about the expected behavior with maxLines: 1. Consider being more specific about the actual rendering behavior for debugging purposes.
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders multiple lines */} | |
| {/* @ts-expect-error this prop is passed down to Text component but doesn't do anything - Text still renders 3 lines (expected: 1 line with maxLines: 1) */} |
| const component = await mount( | ||
| <LineChart width={300} height={100} data={pageData}> | ||
| <XAxis dataKey="name" /> | ||
| {/* @ts-expect-error typescript says angle is invalid prop, but it does work */} |
There was a problem hiding this comment.
[nitpick] The comment explains that TypeScript reports 'angle' as invalid but doesn't explain why this property works despite the type error. Consider adding context about whether this is a typing issue or if there's a better approach to achieve angled ticks.
| {/* @ts-expect-error typescript says angle is invalid prop, but it does work */} | |
| {/* | |
| @ts-expect-error | |
| The 'angle' property is not included in the TypeScript type definitions for the 'tick' prop of YAxis, | |
| but the underlying Recharts implementation does support it at runtime. This allows us to rotate the tick labels. | |
| As of now, there is no type-safe way to pass 'angle' directly unless the type definitions are updated, | |
| or a custom tick renderer is used. Suppressing the type error here is intentional and safe in this context. | |
| */} |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6283 +/- ##
=======================================
Coverage 96.61% 96.61%
=======================================
Files 221 221
Lines 20157 20157
Branches 4134 4134
=======================================
Hits 19475 19475
Misses 675 675
Partials 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
Description
Just tests, no changes.
Related Issue
I want to have baseline to debug the regression from #6262