Convert to npm workspace, add router tests by PavelVanecek · Pull Request #6579 · recharts/recharts

PavelVanecek · 2025-11-07T13:18:01Z

Description

I wanted to have unit tests for the router but was struggling with mixed React instances. Turns out that npm workspaces are quite easy to set up and solve exactly this problem so let's have that.

I also added tests, fixed couple of bugs discovered by those tests and updated eslint config to have fewer warnings.

Summary by CodeRabbit

Bug Fixes
- Improved compatibility with environments lacking ResizeObserver
- Tightened navigation matching to reduce false positives
Improvements
- Updated header and landing page layout and styling
- Minor storybook lint/comment cleanups
Tests
- Added comprehensive route rendering tests and expanded test project setup
Chores
- Multi-package workspace and test tooling reconfiguration; CI/install flow simplified and centralized

coderabbitai · 2025-11-07T13:18:18Z

Walkthrough

Refactors testing to multi-project/workspace layout, updates ESLint config, guards ResizeObserver usage for non-browser environments, adjusts website package/build configs and Vite aliases, refactors website markup/CSS and navigation matching, and adds a comprehensive route test suite for the site.

Changes

Cohort / File(s)	Summary
Testing & Workspace / Config `package.json`, `vitest.config.mts`, `eslint.config.mjs`	Added workspace `www`; updated npm test scripts to multi-project pattern (unit:lib, unit:website); removed storybook vitest plugin and explicit React aliases; ESLint import/no-extraneous-dependencies packageDir includes `'.', './www'`; default-export-override basePath/files expanded.
Website Packages & Build `www/package.json`, `www/vite.config.ts`, `.github/workflows/*.yml`, `DEVELOPING.md`	Moved/removed React and test deps in www; added `react-router-dom` to www; removed React dev aliases in Vite; simplified CI/npm install steps and dev setup docs (removed duplicate website npm ci).
Responsive / ResizeObserver Guards `src/chart/RechartsWrapper.tsx`, `src/component/ResponsiveContainer.tsx`	Added guards so ResizeObserver is only created/used when defined and the DOM node exists (skip observer setup in environments without ResizeObserver).
Website Markup, Layout & Styles `www/src/layouts/Frame.tsx`, `www/src/views/IndexView/index.tsx`, `www/src/views/IndexView/IndexView.css`	Changed logo markup (removed h1 wrapper), title rendered as `h1`, simplified element wrappers, and refactored CSS to a flex-centered layout while removing legacy spacing and blocks.
Navigation Logic `www/src/navigation.ts`	Added internal `stripTrailingSlash` and switched active-item matching from substring `contains` to `startsWith` using normalized paths.
Stories / Type Lint Cleanup `storybook/stories/Examples/AreaChart.stories.tsx`, `storybook/stories/Examples/TimeSeries.stories.tsx`, `www/src/docs/exampleComponents/PieChart/CustomActiveShapePieChart.tsx`	Removed eslint-disable comments and a TypeScript error suppression, re-enabling standard lint/type checks.
Website Route Tests `www/test/routes/index.spec.tsx`	Added comprehensive route test suite using MemoryRouter to assert presence/structure across index, guides, API docs, examples, storybook iframe, and 404 routes.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Browser
participant Navigation
participant strip as stripTrailingSlash
Note over Navigation,strip: Active item resolution (new)
Browser->>Navigation: request current path
Navigation->>strip: stripTrailingSlash(path)
strip-->>Navigation: normalized path
Navigation->>Navigation: item.url.startsWith(normalized path)? (startsWith)
alt match
Navigation-->>Browser: mark item active
else no match
Navigation-->>Browser: no active item
end

mermaid
sequenceDiagram
participant Environment
participant Component
Note over Component,Environment: ResizeObserver guard
Environment->>Component: mount node present?
alt node && ResizeObserver defined
Component->>Environment: new ResizeObserver(...) created
else otherwise
Component-->>Environment: skip observer setup
end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas to inspect closely:
- vitest multi-project config and package.json workspace/scripts (ensure tests run as intended).
- navigation matching change (startsWith + trailing-slash normalization) for edge cases with similar prefixes.
- ResizeObserver guards for SSR and test environments.
- CI workflow changes removing website-specific install step (verify build context and dependency availability).
- New route tests for flakiness and locale/path variants.

Possibly related PRs

Rename SankeyChart doc to Sankey #6560 — modifies useCurrentNavItem / navigation matching logic (directly related).
Switch code editor to codemirror #6531 — edits eslint.config.mjs default-export-override basePath and globs (related to ESLint changes).
OmniDoc #6552 — adjusts vitest.config.mts multi-project testing and plugin usage (related to test config changes).

Suggested reviewers

ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the conversion to npm workspaces and addition of router tests, reflecting the main changes concisely.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch router-tests

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7aec312 and 1d3e88b.

📒 Files selected for processing (5)

.github/workflows/ci.yml (0 hunks)
.github/workflows/copilot-setup-steps.yml (0 hunks)
.github/workflows/deploy-staging.yml (0 hunks)
.github/workflows/deploy-website.yml (0 hunks)
DEVELOPING.md (0 hunks)

💤 Files with no reviewable changes (5)

.github/workflows/ci.yml
.github/workflows/deploy-staging.yml
.github/workflows/copilot-setup-steps.yml
.github/workflows/deploy-website.yml
DEVELOPING.md

⏰ 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). (1)

GitHub Check: Build, Test, Pack

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…ace installs it all from the root

codecov · 2025-11-07T14:34:01Z

Bundle Report

Changes will increase total bundle size by 236 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.12MB	82 bytes (0.01%) ⬆️
recharts/bundle-es6	965.13kB	82 bytes (0.01%) ⬆️
recharts/bundle-umd	508.25kB	72 bytes (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`chart/RechartsWrapper.js`	41 bytes	12.46kB	0.33%
`component/ResponsiveContainer.js`	41 bytes	9.28kB	0.44%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`chart/RechartsWrapper.js`	41 bytes	14.3kB	0.29%
`component/ResponsiveContainer.js`	41 bytes	10.61kB	0.39%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	72 bytes	508.25kB	0.01%

codecov · 2025-11-07T14:34:34Z

Codecov Report

❌ Patch coverage is 95.23810% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 94.58%. Comparing base (9dd5431) to head (1d3e88b).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
www/src/views/IndexView/index.tsx	91.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6579      +/-   ##
==========================================
+ Coverage   91.18%   94.58%   +3.39%     
==========================================
  Files         492      492              
  Lines       40999    40994       -5     
  Branches     4584     4748     +164     
==========================================
+ Hits        37384    38773    +1389     
+ Misses       3598     2216    -1382     
+ Partials       17        5      -12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

PavelVanecek added 6 commits November 7, 2025 22:07

Convert to npm workspace

6e4f051

Add router tests

8890e3f

Fix bug where navigation did not show up on certain routes

90a3592

Check for undefined ResizeObserver

2cf95a7

h1 should be the main title, not logo

32bcc23

Update eslint config

7aec312

We no longer need to install website dependencies separately - worksp…

1d3e88b

…ace installs it all from the root

PavelVanecek requested a review from ckifer November 8, 2025 00:06

ckifer approved these changes Nov 8, 2025

View reviewed changes

ckifer merged commit 079c766 into main Nov 8, 2025
31 checks passed

PavelVanecek deleted the router-tests branch November 8, 2025 01:08

coderabbitai Bot mentioned this pull request Dec 3, 2025

On website, use recharts from the source code instead of npm registry #6725

Merged

coderabbitai Bot mentioned this pull request Jan 5, 2026

docs: ColorModePicker style and layout #6851

Merged

7 tasks

coderabbitai Bot mentioned this pull request Feb 7, 2026

[animations] auto disable primitives animations based on user system preferences #6956

Merged

7 tasks

This was referenced Feb 26, 2026

docs: update local development instructions for starting the website #7061

Merged

[Docs] New router, add links to hooks #7099

Merged

coderabbitai Bot mentioned this pull request Mar 14, 2026

ci: restructure CI workflow for parallel jobs and improved build process #7135

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Convert to npm workspace, add router tests#6579

Convert to npm workspace, add router tests#6579
ckifer merged 7 commits into
mainfrom
router-tests

PavelVanecek commented Nov 7, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Nov 7, 2025 •

edited

Loading

Uh oh!

codecov Bot commented Nov 7, 2025

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Nov 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

PavelVanecek commented Nov 7, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

codecov Bot commented Nov 7, 2025

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PavelVanecek commented Nov 7, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Nov 7, 2025 •

edited

Loading

codecov Bot commented Nov 7, 2025 •

edited

Loading