test(query-devtools/Devtools): add tests for opening a picture-in-picture window by sukvvon · Pull Request #10760 · TanStack/query

sukvvon · 2026-05-23T04:56:57Z

🎯 Changes

Extend Devtools.test.tsx with tests that lock the entry points for the Devtools picture-in-picture window — clicking the inline PiP button opens a popup window with the expected target / features and persists pip_open, and a stored pip_open=true triggers the same auto-open on mount.

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

should open a PiP window when the picture-in-picture button is clicked — stubs window.open with a fake PiP window, clicks the inline PiP button, and asserts the open call shape and the pip_open localStorage value.
should automatically open a PiP window when "pip_open" is "true" in "localStorage" — seeds pip_open=true in localStorage and asserts the pip_open reactive effect calls window.open on mount without any explicit click.

The new picture-in-picture describe ships a typed FakePipWindow (Pick<Window, ...>) and a stubPipWindow() helper so subsequent PiP scenarios (popup blocked, in-page panel toggle, pagehide) can reuse the same setup.

✅ 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 Picture-in-Picture functionality in DevTools, verifying window opening behavior and state persistence through local storage.

…ture window

coderabbitai · 2026-05-23T04:57:10Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a07a2c80-6e0d-47e5-b341-5cb122edd327

📥 Commits

Reviewing files that changed from the base of the PR and between b94b24e and 3bdac28.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

This PR adds test coverage for Picture-in-Picture functionality in the query devtools. Tests verify that clicking the PiP button opens a window with the correct parameters and persists the pip_open flag to localStorage, and that the PiP window auto-opens on initial render when the flag is already enabled.

Changes

Picture-in-Picture Tests

Layer / File(s)	Summary
PiP window and auto-open behavior tests `packages/query-devtools/src/__tests__/Devtools.test.tsx`	Test suite stubs `window.open` to verify PiP opens with correct window name, width, height, and popup features; asserts `localStorage` persistence of `pip_open` state; and validates auto-open behavior when the flag is pre-set.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

package: query-devtools

Poem

🐰 A window within a window opens wide,
PiP tests ensure it works with pride,
localStorage remembers the view,
Auto-open happens on cue,
DevTools now shines, unified! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding tests for picture-in-picture window functionality in the Devtools component.
Description check	✅ Passed	The description follows the template structure with complete 🎯 Changes and ✅ Checklist sections, including detailed test case descriptions and Release Impact clarification.
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-open

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

nx-cloud · 2026-05-23T04:57:20Z

View your CI Pipeline Execution ↗ for commit 3bdac28

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

☁️ Nx Cloud last updated this comment at 2026-05-23 05:01:32 UTC

github-actions · 2026-05-23T04:57:36Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-23T05:00:12Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3bdac28

github-actions · 2026-05-23T05:00:52Z

size-limit report 📦

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

test(query-devtools/Devtools): add tests for opening a picture-in-pic…
3bdac28
…ture window

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

sukvvon self-assigned this May 23, 2026

sukvvon merged commit a00c0d2 into mainMay 23, 2026
12 checks passed

sukvvon deleted the test/query-devtools-devtools-pip-open branch May 23, 2026 05:03

Navigation Menu

Uh oh!

Uh oh!

test(query-devtools/Devtools): add tests for opening a picture-in-picture window - #10760

test(query-devtools/Devtools): add tests for opening a picture-in-picture window#10760
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-pip-open

sukvvon commented May 23, 2026•
edited by coderabbitai Bot
Loading

Uh oh!

coderabbitaiBot commented May 23, 2026•
edited
Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloudBot commented May 23, 2026•
edited
Loading

Uh oh!

github-actionsBot commented May 23, 2026

Uh oh!

pkg-pr-newBot commented May 23, 2026

Uh oh!

github-actionsBot commented May 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

sukvvon commented May 23, 2026• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitaiBot 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

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Uh oh!

github-actionsBot commented May 23, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-newBot commented May 23, 2026

Uh oh!

github-actionsBot commented May 23, 2026

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

coderabbitaiBot commented May 23, 2026•
edited
Loading

nx-cloudBot commented May 23, 2026•
edited
Loading