test(query-devtools/utils): add tests for 'convertRemToPixels' by sukvvon · Pull Request #10648 · TanStack/query

sukvvon · 2026-05-06T01:22:21Z

🎯 Changes

Add unit tests for the convertRemToPixels helper in query-devtools/utils.tsx.

The helper multiplies the given rem value by the document root's computed font-size.

Cases:

1 rem → root font size in pixels
0 rem → 0
2 rem → 2 × root font size
decimal rem (0.5) → fractional pixels
reflects the current root font size when it changes
negative rem values preserve the sign (guards against Math.abs regressions)
non-integer font sizes (e.g. 15.5px) — guards parseFloat against parseInt regressions

The root font size is set explicitly to '16px' in beforeEach (jsdom defaults to an empty font-size, which would yield NaN) and cleared in afterEach to keep tests isolated.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Tests
- Added tests covering rem-to-pixel conversions, including dynamic font-size scenarios.
- Added a new case validating the right-side variant of sided-property behavior.
- Consolidated and improved test setup using lifecycle hooks for clearer, more reliable tests.

coderabbitai · 2026-05-06T01:22:35Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 088d0116-fd0c-4f01-9d18-f1391b985081

📥 Commits

Reviewing files that changed from the base of the PR and between cab241b and 65c55f3.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/utils.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

packages/query-devtools/src/tests/utils.test.ts

📝 Walkthrough

Walkthrough

Adds/updates tests in packages/query-devtools/src/__tests__/utils.test.ts: imports lifecycle hooks and convertRemToPixels, adds a getSidedProp assertion for the right variant, and introduces a convertRemToPixels test suite with font-size setup/teardown and multiple rem→pixel cases (including dynamic and non-integer roots).

Changes

Utils tests: getSidedProp + convertRemToPixels

Layer / File(s)	Summary
Imports / Test wiring `packages/query-devtools/src/__tests__/utils.test.ts`	Adds `beforeEach`/`afterEach` to vitest import and imports `convertRemToPixels` from `../utils`.
Small assertion update `packages/query-devtools/src/__tests__/utils.test.ts` (around describe('getSidedProp'))	Adds an assertion verifying `getSidedProp('padding','right')` returns `'paddingRight'`.
Test setup/teardown `packages/query-devtools/src/__tests__/utils.test.ts` (describe 'convertRemToPixels')	`beforeEach` sets `document.documentElement.style.fontSize = '16px'`; `afterEach` resets it.
Test cases `packages/query-devtools/src/__tests__/utils.test.ts` (describe 'convertRemToPixels')	Adds tests for rem→pixel conversions: 1→16, 0→0, 2→32, 0.5→8, dynamic root change (20px → 1rem = 20), negative (-1 → -16), and non-integer root (15.5px → 1rem = 15.5).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through tests with care,

rems to pixels here and there,
Sixteen, twenty, fifteen point five —
numbers dance and code feels alive,
setup snug, teardown fair.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding tests for the convertRemToPixels utility, which matches the primary objective of the PR.
Description check	✅ Passed	The description comprehensively covers all required template sections with detailed information about changes, test cases, checklist completion, and release impact clarification.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/query-devtools-convert-rem-to-pixels

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

nx-cloud · 2026-05-06T01:22:51Z

View your CI Pipeline Execution ↗ for commit cab241b

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	2m 50s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-06 01:30:26 UTC

github-actions · 2026-05-06T01:23:28Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

pkg-pr-new · 2026-05-06T01:24:52Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10648

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10648

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10648

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10648

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10648

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10648

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10648

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10648

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10648

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10648

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10648

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10648

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10648

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10648

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10648

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10648

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10648

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10648

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10648

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10648

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10648

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10648

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10648

commit: 65c55f3

github-actions · 2026-05-06T01:25:03Z

size-limit report 📦

Path	Size
react full	12.1 KB (0%)
react minimal	9.07 KB (0%)

github-actions Bot added the package: query-devtools label May 6, 2026

sukvvon self-assigned this May 6, 2026

test(query-devtools/utils): add tests for 'convertRemToPixels'

65c55f3

sukvvon force-pushed the test/query-devtools-convert-rem-to-pixels branch from cab241b to 65c55f3 Compare May 6, 2026 01:26

sukvvon merged commit 24d0834 into main May 6, 2026
8 checks passed

sukvvon deleted the test/query-devtools-convert-rem-to-pixels branch May 6, 2026 01:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/utils): add tests for 'convertRemToPixels'#10648

test(query-devtools/utils): add tests for 'convertRemToPixels'#10648
sukvvon merged 1 commit intomainfrom
test/query-devtools-convert-rem-to-pixels

sukvvon commented May 6, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 6, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

nx-cloud Bot commented May 6, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 6, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 6, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 6, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

nx-cloud Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 6, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 6, 2026 •

edited

Loading

nx-cloud Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading

pkg-pr-new Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading