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-actions Bot added the package: query-devtools label May 23, 2026

sukvvon self-assigned this May 23, 2026

sukvvon merged commit a00c0d2 into main May 23, 2026
12 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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!

coderabbitai Bot commented May 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026

Uh oh!

pkg-pr-new Bot commented May 23, 2026

Uh oh!

github-actions Bot commented May 23, 2026

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

Suggested labels

Poem

❌ Failed checks (1 warning)

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

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 23, 2026

Uh oh!

github-actions Bot 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

coderabbitai Bot commented May 23, 2026 •

edited

Loading

nx-cloud Bot commented May 23, 2026 •

edited

Loading