test(query-devtools/Explorer): add tests for action menu buttons by sukvvon · Pull Request #10729 · TanStack/query

sukvvon · 2026-05-19T01:12:19Z

🎯 Changes

Extend Explorer.test.tsx with tests for action menu buttons that appear when editable is enabled — CopyButton, ClearArrayButton, DeleteItemButton, and ToggleValueButton — along with their conditional rendering.

Added cases (action menu, 6):

should copy the serialized value to the clipboard when the copy button is clicked — stubs navigator.clipboard.writeText and verifies the superjson payload.
should clear array items via "setQueryData" when the clear-array button is clicked — asserts the active query is updated to [].
should delete the entry at the current "dataPath" when the delete button is clicked — covers itemsDeletable + dataPath together.
should toggle a boolean value via "setQueryData" when the toggle button is clicked — locks the boolean type path that renders ToggleValueButton.
should not render action buttons when "editable" is false — guards the <Show when={props.editable}> boundary.
should not render "ClearArrayButton" when value is not an array — locks the type() === 'array' condition.

✅ 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 test coverage for action menu functionality in Explorer, including clipboard operations, array item management, value toggling, and conditional button visibility based on configuration states.

coderabbitai · 2026-05-19T01:12:32Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74d2784b-39d5-4cba-a8b3-7c465ea645a2

📥 Commits

Reviewing files that changed from the base of the PR and between caace85 and 4401a86.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

This PR adds a new test suite for Explorer's action menu functionality. It introduces a type-only import of Query and creates comprehensive test cases verifying clipboard copying, array item mutation, boolean toggling, and conditional button rendering based on the editable prop and data type.

Changes

Explorer Action Menu Tests

Layer / File(s)	Summary
Action menu test suite `packages/query-devtools/src/__tests__/Explorer.test.tsx`	Adds `Query` type import and a new `describe('action menu')` test group exercising clipboard copy, array clearing via `setQueryData`, item deletion by `dataPath`, boolean toggling by `dataPath`, and conditional action button rendering when `editable` is false or the value is not an array.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

TanStack/query#10727: Both PRs modify packages/query-devtools/src/__tests__/Explorer.test.tsx to add test cases for Explorer behavior, covering different interaction scenarios with the same component.
TanStack/query#10714: Both PRs extend test coverage for the Explorer component, with this PR focusing on editable action menu interactions (copy, delete, toggle) and the retrieved PR on primitive/expand rendering.

Poem

🐰 A test suite hops in with careful design,
Clicking and copying, making sure actions align—
Booleans toggle and arrays clear bright,
Explorer's menu shines when editable's right!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding tests for action menu buttons in the Explorer component.
Description check	✅ Passed	The description is complete with all required sections filled out: detailed changes summary, checklist items confirmed, and release impact clearly marked as dev-only.
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-explorer-action-menu

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

nx-cloud · 2026-05-19T01:12:47Z

View your CI Pipeline Execution ↗ for commit d6aad05

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

☁️ Nx Cloud last updated this comment at 2026-05-19 01:18:22 UTC

github-actions · 2026-05-19T01:13:18Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-19T01:16:59Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 4401a86

github-actions · 2026-05-19T01:17:34Z

size-limit report 📦

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

test(query-devtools/Explorer): add tests for action menu buttons

d6aad05

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

ci: apply automated fixes

4401a86

sukvvon self-assigned this May 19, 2026

sukvvon merged commit 57f8ec7 into main May 19, 2026
11 checks passed

sukvvon deleted the test/query-devtools-explorer-action-menu branch May 19, 2026 01:29

coderabbitai Bot mentioned this pull request May 19, 2026

test(query-devtools/Explorer): add tests for inline edit on primitive rows #10731

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Explorer): add tests for action menu buttons#10729

test(query-devtools/Explorer): add tests for action menu buttons#10729
sukvvon merged 2 commits into
mainfrom
test/query-devtools-explorer-action-menu

sukvvon commented May 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 19, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

nx-cloud Bot commented May 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 19, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 19, 2026

Uh oh!

github-actions Bot commented May 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 19, 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 19, 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

Poem

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 19, 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 19, 2026

Uh oh!

github-actions Bot commented May 19, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 19, 2026 •

edited

Loading

nx-cloud Bot commented May 19, 2026 •

edited

Loading

github-actions Bot commented May 19, 2026 •

edited

Loading