test(query-devtools/Explorer): add tests for resetting 'CopyButton' state after success and failure by sukvvon · Pull Request #10738 · TanStack/query

sukvvon · 2026-05-20T01:27:29Z

🎯 Changes

Extend Explorer.test.tsx with tests that lock the CopyButton state reset behavior — after either a successful or failed copy, the button should return to its idle state 1500ms later so the user can copy again.

Added cases (action menu, 2):

should reset the copy button to the idle state 1500ms after a successful copy — clicks Copy, asserts the success aria-label, advances timers by 1500ms, then asserts the idle aria-label is back.
should reset the copy button to the idle state 1500ms after a failed copy — same flow with clipboard.writeText rejected, asserting the error → idle transition.

✅ 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 copy-to-clipboard functionality, including validation of success and error states with state reset behavior.

…tate after success and failure

coderabbitai · 2026-05-20T01:27:42Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0a1aaa34-f4cb-4cff-8ef0-93933fb0eaf7

📥 Commits

Reviewing files that changed from the base of the PR and between e3ebf3f and 3ec438f.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

This PR adds test coverage for the copy-to-clipboard action in the Query DevTools Explorer component. Two new test cases validate the timer-driven UI state transitions: one for successful clipboard operations and one for failure scenarios, both confirming the button resets to its idle state after 1500ms.

Changes

Copy-to-clipboard action tests

Layer / File(s)	Summary
Copy-to-clipboard state transition tests `packages/query-devtools/src/__tests__/Explorer.test.tsx`	New async test cases verify the "Copy object to clipboard" button's state transitions for successful clipboard writes (idle → copied → reset) and failed writes (idle → error → reset), advancing timers by 1500ms to confirm the reset behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

TanStack/query#10734: Tests the Explorer's CopyButton clipboard-failure behavior and error UI state transitions.
TanStack/query#10729: Adds initial copy-to-clipboard button action menu tests and clipboard write coverage.

Suggested labels

package: query-devtools

Poem

🐰 A copy button tested with care,
Through success and failure, a timer's repair,
From idle to copied, then back once more,
1500 milliseconds open the door!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding tests for the CopyButton state reset behavior after success and failure scenarios.
Description check	✅ Passed	The description follows the template structure with all required sections completed: detailed Changes section, fully checked Checklist items, and Release Impact section clearly marked as dev-only with no release.
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-copy-reset

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

nx-cloud · 2026-05-20T01:27:58Z

View your CI Pipeline Execution ↗ for commit 3ec438f

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

☁️ Nx Cloud last updated this comment at 2026-05-20 01:31:52 UTC

github-actions · 2026-05-20T01:28:15Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-20T01:30:47Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3ec438f

github-actions · 2026-05-20T01:31:24Z

size-limit report 📦

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

test(query-devtools/Explorer): add tests for resetting 'CopyButton' s…

3ec438f

…tate after success and failure

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

sukvvon self-assigned this May 20, 2026

sukvvon merged commit 48b7d66 into main May 20, 2026
12 of 13 checks passed

sukvvon deleted the test/query-devtools-explorer-copy-reset branch May 20, 2026 01:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Explorer): add tests for resetting 'CopyButton' state after success and failure#10738

test(query-devtools/Explorer): add tests for resetting 'CopyButton' state after success and failure#10738
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-copy-reset

sukvvon commented May 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

pkg-pr-new Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

Uh oh!

github-actions Bot commented May 20, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 20, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading

nx-cloud Bot commented May 20, 2026 •

edited

Loading