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

sukvvon · 2026-05-23T05:30:21Z

🎯 Changes

Extend Devtools.test.tsx with tests that lock the in-page panel visibility around the picture-in-picture lifecycle — the in-page panel should disappear while a PiP window is open, and reappear (with pip_open cleared from localStorage) once the PiP window is closed.

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

should hide the in-page panel while a PiP window is open — opens the PiP window via the inline button and asserts the in-page .tsqd-main-panel-container is no longer rendered.
should restore the in-page panel and reset "pip_open" when the PiP window is closed — opens the PiP window, invokes the registered pagehide listener directly to simulate the PiP window closing, and asserts that the in-page open button is back and 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
- Expanded test coverage for picture-in-picture devtools panel behavior, including deterministic simulation of PiP lifecycle events and panel visibility management.
- Added tests ensuring the in-page panel is restored after PiP closes and the persisted PiP-open state is cleared.

coderabbitai · 2026-05-23T05:30:34Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 03488316-3d21-4d84-b9e0-e0fbbad3d1a3

📥 Commits

Reviewing files that changed from the base of the PR and between 0a2696e and 6b62496.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

Enhances the PiP test stub to record event listeners and add a fire(event) helper. Adds two tests verifying the in-page devtools panel hides while PiP is open and that a simulated PiP pagehide restores the panel and resets TanstackQueryDevtools.pip_open to 'false'.

Changes

PiP Lifecycle and Visibility Tests

Layer / File(s)	Summary
PiP event-stub and lifecycle tests `packages/query-devtools/src/__tests__/Devtools.test.tsx`	The PiP window stub records `addEventListener` handlers and exposes `fire(event)`; tests assert the in-page panel is hidden when PiP opens and restored on `pagehide`, with the `TanstackQueryDevtools.pip_open` localStorage flag reset.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

TanStack/query#10760: Adds PiP-related tests and localStorage lifecycle assertions in the same test file.
TanStack/query#10761: Covers PiP open failure and localStorage reset behaviors in DevTools tests.

Suggested labels

package: query-devtools

Poem

🐰 I stubbed a window, caught its little cries,
Handlers stored safe for simulated goodbyes.
When PiP peeks out, the panel hides from sight,
On pagehide it hops back — localStorage set right.
Hooray for tests that make behavior light! ✨

🚥 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 directly and clearly summarizes the main change: adding tests for in-page panel visibility during PiP window lifecycle.
Description check	✅ Passed	The description provides detailed change information, completed checklist items, and correctly marks the change as dev-only with no release impact needed.
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-panel-toggle

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

nx-cloud · 2026-05-23T05:30:48Z

View your CI Pipeline Execution ↗ for commit 0a2696e

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

☁️ Nx Cloud last updated this comment at 2026-05-23 05:45:09 UTC

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

🚀 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:33:48Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 6b62496

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

size-limit report 📦

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

… while a PiP window is open

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

sukvvon self-assigned this May 23, 2026

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

sukvvon force-pushed the test/query-devtools-devtools-pip-panel-toggle branch from 0a2696e to 6b62496Compare May 23, 2026 05:40

sukvvon merged commit 50a71c3 into mainMay 23, 2026
10 checks passed

sukvvon deleted the test/query-devtools-devtools-pip-panel-toggle branch May 23, 2026 05:48

Navigation Menu

Uh oh!

Uh oh!

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

test(query-devtools/Devtools): add tests for in-page panel visibility while a PiP window is open#10762
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-pip-panel-toggle

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

Possibly related PRs

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•
edited
Loading

Uh oh!

pkg-pr-newBot commented May 23, 2026•
edited
Loading

Uh oh!

github-actionsBot commented May 23, 2026•
edited
Loading

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

Possibly related PRs

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

Uh oh!

🚀 Changeset Version Preview

Uh oh!

pkg-pr-newBot 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• 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

coderabbitaiBot commented May 23, 2026•
edited
Loading

nx-cloudBot commented May 23, 2026•
edited
Loading

github-actionsBot commented May 23, 2026•
edited
Loading

pkg-pr-newBot commented May 23, 2026•
edited
Loading

github-actionsBot commented May 23, 2026•
edited
Loading