test(query-devtools/Devtools): add tests for open and close interactions and 'localStorage' persistence by sukvvon · Pull Request #10683 · TanStack/query

sukvvon · 2026-05-10T15:01:24Z

🎯 Changes

Add tests for the open/close button interactions and the resulting localStorage persistence on the Devtools body component.

Verifies the panel renders when the open button is clicked.
Verifies the open button is hidden once the panel is open.
Verifies the panel hides when the close button is clicked.
Verifies the open button reappears after the panel is closed.
Verifies 'TanstackQueryDevtools.open' is set to 'true' after the open button is clicked.
Verifies 'TanstackQueryDevtools.open' is set to 'false' after the close button is clicked.

✅ 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
- Enhanced test coverage for the devtools panel open/close functionality and state persistence, ensuring reliable behavior when toggling the panel and maintaining user preferences.

…ons and 'localStorage' persistence

coderabbitai · 2026-05-10T15:01:39Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3d8fad5b-fc4e-4a82-b34f-03f23103eb3c

📥 Commits

Reviewing files that changed from the base of the PR and between f46b22a and 1570eb1.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/Devtools.test.tsx

📝 Walkthrough

Walkthrough

The test suite for the devtools component is enhanced with import of fireEvent and a new "open and close" test section verifying panel visibility toggling, button state management, and localStorage persistence of the TanstackQueryDevtools.open flag across open and close interactions.

Changes

Devtools Open/Close Functionality Tests

Layer / File(s)	Summary
Test Infrastructure `packages/query-devtools/src/__tests__/Devtools.test.tsx`	Testing library import expanded to include `fireEvent` for simulating user interactions.
Open/Close Behavior Tests `packages/query-devtools/src/__tests__/Devtools.test.tsx`	Five test cases verify devtools panel opening/closing via button clicks, visibility toggling, and localStorage persistence of the `TanstackQueryDevtools.open` flag.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

TanStack/query#10682: Both PRs modify the same Devtools.test.tsx test suite and cover the Devtools open/close behavior and localStorage-backed open state.

Suggested labels

package: query-devtools

Poem

A devtools panel opens wide, ✨
With clicks and closes, side by side,
LocalStorage holds the state so true,
Button visibility turns on cue! 🐰

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and accurately describes the main change: adding tests for open/close interactions and localStorage persistence in the Devtools component.
Description check	✅ Passed	The description follows the template structure with completed 🎯 Changes section, checked ✅ Checklist items, and 🚀 Release Impact indicating dev-only changes.
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-devtools-open-and-close

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

nx-cloud · 2026-05-10T15:01:52Z

View your CI Pipeline Execution ↗ for commit 1570eb1

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

☁️ Nx Cloud last updated this comment at 2026-05-10 15:05:37 UTC

github-actions · 2026-05-10T15:02:08Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-10T15:03:49Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10683

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 1570eb1

github-actions · 2026-05-10T15:03:59Z

size-limit report 📦

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

test(query-devtools/Devtools): add tests for open and close interacti…

1570eb1

…ons and 'localStorage' persistence

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

sukvvon self-assigned this May 10, 2026

sukvvon merged commit be4f84f into main May 10, 2026
10 checks passed

sukvvon deleted the test/query-devtools-devtools-open-and-close branch May 10, 2026 15:08

This was referenced May 10, 2026

test(query-devtools/Devtools): add tests for query details panel and query actions #10685

Merged

test(query-devtools/Devtools): add test for hiding the panel when the 'TANSTACK' logo is clicked #10693

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Devtools): add tests for open and close interactions and 'localStorage' persistence#10683

test(query-devtools/Devtools): add tests for open and close interactions and 'localStorage' persistence#10683
sukvvon merged 1 commit intomainfrom
test/query-devtools-devtools-open-and-close

sukvvon commented May 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 10, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 10, 2026

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

github-actions Bot commented May 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 10, 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 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 10, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

github-actions Bot commented May 10, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 10, 2026 •

edited

Loading

nx-cloud Bot commented May 10, 2026 •

edited

Loading