Skip to content

test(query-devtools/Explorer): add test for 'CopyButton' error state on clipboard failure#10734

Merged
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-copy-error
May 19, 2026
Merged

test(query-devtools/Explorer): add test for 'CopyButton' error state on clipboard failure#10734
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-copy-error

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 19, 2026

🎯 Changes

Extend Explorer.test.tsx with a test for the error path of CopyButton — when navigator.clipboard.writeText rejects, the button's aria-label should switch to the error state and the failure should be logged via console.error.

Also enable fake timers globally in beforeEach/afterEach so promise rejection microtasks can be flushed deterministically with vi.advanceTimersByTimeAsync(0) (without affecting any existing case).

Added cases (action menu, 1):

  • should switch the copy button to an error state when clipboard write fails — stubs navigator.clipboard.writeText with mockRejectedValue, silences console.error via vi.spyOn, and asserts both the post-rejection aria-label and the console.error call shape.

✅ 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 suite with improved timer handling for deterministic UI updates.
    • Added comprehensive test coverage for clipboard copy failure scenarios, ensuring proper error state transitions and logging when clipboard operations fail.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 19, 2026

📝 Walkthrough

Walkthrough

The test suite now wraps each test with vi.useFakeTimers() and restores real timers in afterEach for deterministic timer-dependent UI updates. A new test verifies clipboard copy failure handling: when navigator.clipboard.writeText rejects, the UI switches to an error state and console.error is called with a "Failed to copy:" message.

Changes

Explorer test suite clipboard handling

Layer / File(s) Summary
Fake timer infrastructure setup
packages/query-devtools/src/__tests__/Explorer.test.tsx
Introduces vi.useFakeTimers() at the start of each test and restores real timers in afterEach to ensure timer-dependent UI updates behave deterministically across the test suite.
Clipboard copy failure handling test
packages/query-devtools/src/__tests__/Explorer.test.tsx
Adds async test that stubs navigator.clipboard.writeText to reject, verifies the "Copy object to clipboard" action renders an error state ("Error copying object to clipboard"), and confirms console.error is called with the "Failed to copy:" prefix and the thrown error.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • TanStack/query#10729: Both PRs modify packages/query-devtools/src/__tests__/Explorer.test.tsx by adding/expanding action-menu-related tests (including clipboard copy behavior), so the changes directly overlap in the same test file's action menu coverage.
  • TanStack/query#10714: Both PRs modify packages/query-devtools/src/__tests__/Explorer.test.tsx by extending the Explorer test suite—main PR adds fake-timer setup and an action-menu clipboard failure test, while the retrieved PR adds rendering tests for primitives/collections—so the changes are related within the same test infrastructure.

Suggested labels

package: query-devtools

Poem

🐰 A rabbit hops through timers now,
vi.useFakeTimers() shows the way,
Clipboard clicks that fail go "pow!"
With errors logged and caught, hooray!
Tests run true, no more fray. 🎉

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The pull request title accurately summarizes the main change: adding a test for CopyButton's error state when clipboard write fails.
Description check ✅ Passed The pull request description follows the required template and includes all essential sections with complete information about changes, checklist completion, and release impact.
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-error

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 19, 2026

View your CI Pipeline Execution ↗ for commit a9ec428

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

☁️ Nx Cloud last updated this comment at 2026-05-19 12:24:43 UTC

@github-actions
Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

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

@sukvvon sukvvon self-assigned this May 19, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/query-devtools/src/__tests__/Explorer.test.tsx`:
- Around line 26-29: The afterEach teardown currently calls vi.useRealTimers()
and queryClient.clear() but does not restore mocks or any replaced globals,
which lets per-test stubs like console.error and navigator leak; update the
afterEach (the same block containing vi.useRealTimers() and queryClient.clear())
to call vi.restoreAllMocks() and vi.resetAllMocks() to restore spies/stubs and
mocks, and if tests replace navigator directly ensure you restore the original
navigator (e.g., save originalNavigator in beforeEach and reassign it in
afterEach or delete the stubbed global navigator) so console.error and navigator
stubs do not persist across tests.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 81c8b79a-e453-4c81-bc0a-9e6d04ad22d9

📥 Commits

Reviewing files that changed from the base of the PR and between a4cebdb and a9ec428.

📒 Files selected for processing (1)
  • packages/query-devtools/src/__tests__/Explorer.test.tsx

Comment on lines 26 to 29
afterEach(() => {
vi.useRealTimers()
queryClient.clear()
})
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Harden teardown to avoid cross-test mock/global leakage (Line 27).

With fake timers enabled globally and new per-test spies/stubs, teardown should also restore mocks/globals; otherwise console.error and navigator stubs can bleed into later tests.

Suggested patch
   afterEach(() => {
     vi.useRealTimers()
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
     queryClient.clear()
   })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
afterEach(() => {
vi.useRealTimers()
queryClient.clear()
})
afterEach(() => {
vi.useRealTimers()
vi.restoreAllMocks()
vi.unstubAllGlobals()
queryClient.clear()
})
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/query-devtools/src/__tests__/Explorer.test.tsx` around lines 26 -
29, The afterEach teardown currently calls vi.useRealTimers() and
queryClient.clear() but does not restore mocks or any replaced globals, which
lets per-test stubs like console.error and navigator leak; update the afterEach
(the same block containing vi.useRealTimers() and queryClient.clear()) to call
vi.restoreAllMocks() and vi.resetAllMocks() to restore spies/stubs and mocks,
and if tests replace navigator directly ensure you restore the original
navigator (e.g., save originalNavigator in beforeEach and reassign it in
afterEach or delete the stubbed global navigator) so console.error and navigator
stubs do not persist across tests.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 19, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: a9ec428

@github-actions
Copy link
Copy Markdown
Contributor

size-limit report 📦

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

@sukvvon sukvvon merged commit 359184e into main May 19, 2026
12 of 13 checks passed
@sukvvon sukvvon deleted the test/query-devtools-explorer-copy-error branch May 19, 2026 12:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant