test(query-devtools/Devtools): add test for 'pip_open' reset when the popup is blocked by sukvvon · Pull Request #10761 · TanStack/query

sukvvon · 2026-05-23T05:08:33Z

🎯 Changes

Extend Devtools.test.tsx with a test that locks the popup-blocked fallback for the picture-in-picture window — when window.open returns null, the pip_open reactive effect should log the failure and reset the persisted pip_open flag so the user is not left in a broken state.

Added cases (picture-in-picture, 1):

should log and reset "pip_open" when the browser blocks the popup — stubs window.open to return null, seeds pip_open=true in localStorage to trigger the auto-open effect, and asserts both the console.error call and that pip_open is reset to "false".

✅ 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 a test covering popup/picture-in-picture blocking: verifies an error is logged when the popup is blocked and that the UI state flag in local storage is reset.
- Ensures robust handling of blocked popups to prevent stale stored state.

coderabbitai · 2026-05-23T05:08:44Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3d03d8a5-7a08-4576-8d6e-6a76c13f5434

📥 Commits

Reviewing files that changed from the base of the PR and between 80c2c52 and c73b449.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

Adds a test that simulates the browser blocking the picture-in-picture popup by stubbing window.open to return null, asserts an error is logged containing "Failed to open popup", and ensures localStorage's TanstackQueryDevtools.pip_open is reset to 'false'.

Changes

Picture-in-Picture Popup Blocked Test

Layer / File(s)	Summary
Popup-blocked error handling test `packages/query-devtools/src/__tests__/Devtools.test.tsx`	New test simulates browser popup blocking by stubbing `open` to return `null`, asserts `console.error` contains "Failed to open popup", and verifies `localStorage`'s `TanstackQueryDevtools.pip_open` is reset to `'false'`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

TanStack/query#10760: Both PRs extend the Picture-in-Picture test suite with popup-related test cases that stub window.open and assert localStorage behavior.

Suggested labels

package: query-devtools

Poem

🐰 A popup blocked? No fear, dear friend,
The test now checks this error's end,
With open stubbed and logs confirmed,
The localStorage flag is earned,
When browsers say "no," our tests hop on trend!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change—adding a test for 'pip_open' reset when a popup is blocked.
Description check	✅ Passed	The description follows the template structure with completed 🎯 Changes section, checked ✅ Checklist items, and 🚀 Release Impact assessment marked as docs/CI/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-devtools-pip-popup-blocked

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

nx-cloud · 2026-05-23T05:08:58Z

View your CI Pipeline Execution ↗ for commit 80c2c52

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

☁️ Nx Cloud last updated this comment at 2026-05-23 05:19:40 UTC

github-actions · 2026-05-23T05:09:13Z

🚀 Changeset Version Preview

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

coderabbitai

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__/Devtools.test.tsx`:
- Around line 434-454: The test creates a spy via vi.spyOn(console, 'error')
(assigned to consoleError) but never restores it; wrap the test body inside a
try { ... } finally { consoleError.mockRestore() } block so the spy is always
restored after running renderDevtools and assertions, ensuring no leakage
between tests; reference the existing vi.stubGlobal('open', ...) and the
renderDevtools(...) call and ensure the finally block calls
consoleError.mockRestore() to clean up the spy (and optionally restore any other
stubs if present).

🪄 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: 399c4350-e9d6-4c5d-9a2b-2b2aaae43021

📥 Commits

Reviewing files that changed from the base of the PR and between a00c0d2 and 80c2c52.

📒 Files selected for processing (1)

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

pkg-pr-new · 2026-05-23T05:11:49Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: c73b449

github-actions · 2026-05-23T05:12:30Z

size-limit report 📦

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

… popup is blocked

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

sukvvon self-assigned this May 23, 2026

coderabbitai Bot reviewed May 23, 2026

View reviewed changes

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

test(query-devtools/Devtools): add test for 'pip_open' reset when the…

c73b449

… popup is blocked

sukvvon force-pushed the test/query-devtools-devtools-pip-popup-blocked branch from 80c2c52 to c73b449 Compare May 23, 2026 05:14

sukvvon merged commit 217b67a into main May 23, 2026
10 checks passed

sukvvon deleted the test/query-devtools-devtools-pip-popup-blocked branch May 23, 2026 05:26

coderabbitai Bot mentioned this pull request May 23, 2026

test(query-devtools/Devtools): add tests for in-page panel visibility while a PiP window is open #10762

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Devtools): add test for 'pip_open' reset when the popup is blocked#10761

test(query-devtools/Devtools): add test for 'pip_open' reset when the popup is blocked#10761
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-pip-popup-blocked

sukvvon commented May 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

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

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

🚀 Changeset Version Preview

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 23, 2026 •

edited

Loading

nx-cloud Bot commented May 23, 2026 •

edited

Loading

github-actions Bot commented May 23, 2026 •

edited

Loading

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

edited

Loading

github-actions Bot commented May 23, 2026 •

edited

Loading