test(query-devtools/Explorer): add test for action buttons rendered inside a paginated page by sukvvon · Pull Request #10743 · TanStack/query

sukvvon · 2026-05-20T11:38:06Z

🎯 Changes

Extend Explorer.test.tsx with a test that locks the prop propagation from a parent Explorer to its paginated children — when a paginated page is opened, each child item should receive activeQuery and editable so its action menu renders the same as a non-paginated child.

Added cases (pagination, 1):

should render action buttons for items inside a paginated page — uses a 200-element Array<Array<number>> so the parent paginates and each child is itself an array, then opens the first page and asserts that more than one Remove all items button is rendered (one for the parent plus one per array child inside the page).

✅ 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 to verify action controls render correctly when exploring paginated data sets in the Explorer interface.

…nside a paginated page

nx-cloud · 2026-05-20T11:38:33Z

View your CI Pipeline Execution ↗ for commit 0c80f03

Command	Status	Duration	Result
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	26s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-20 11:47:54 UTC

github-actions · 2026-05-20T11:39:02Z

🚀 Changeset Version Preview

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

coderabbitai · 2026-05-20T11:40:38Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8277ea59-ac92-4fa2-b7bf-c7d0ae6d708a

📥 Commits

Reviewing files that changed from the base of the PR and between e196f9f and 3636cd5.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

Added a test case to Explorer that constructs a 200-item paginated array, expands the explorer by default, and verifies that item-level "Remove all items" action buttons render correctly within the paginated page section.

Changes

Explorer pagination action button test

Layer / File(s)	Summary
Pagination action button rendering test `packages/query-devtools/src/__tests__/Explorer.test.tsx`	New test verifies that "Remove all items" action buttons are rendered for items inside a paginated page when the explorer is default-expanded and the page header is clicked.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

TanStack/query#10737: Both PRs modify Explorer.test.tsx to add pagination-focused assertions around page headers' expanded/collapsed behavior and rendering of items within paginated pages.
TanStack/query#10727: Both PRs extend Explorer.test.tsx with assertions for pagination and default-expanded rendering, including verification of action controls within paginated pages.
TanStack/query#10714: Both PRs modify Explorer.test.tsx to extend rendering coverage for collections, including expand/collapse behavior and pagination-related assertions.

Poem

🐰 A test hop through pages galore,
With buttons that click and explore,
When expanded so wide,
Items dance side by side,
Pagination confirmed, I adore!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a test for action buttons rendered inside paginated pages in the Explorer component.
Description check	✅ Passed	The description follows the repository template, includes detailed changes and motivation, and both checklist items are completed with appropriate selections for a test-only change.
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-paginated-action-menu

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

pkg-pr-new · 2026-05-20T11:47:19Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3636cd5

github-actions · 2026-05-20T11:47:55Z

size-limit report 📦

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

test(query-devtools/Explorer): add test for action buttons rendered i…

0c80f03

…nside a paginated page

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

ci: apply automated fixes

3636cd5

sukvvon self-assigned this May 20, 2026

sukvvon merged commit ec4a59a into main May 20, 2026
14 of 15 checks passed

sukvvon deleted the test/query-devtools-explorer-paginated-action-menu branch May 20, 2026 11:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Explorer): add test for action buttons rendered inside a paginated page#10743

test(query-devtools/Explorer): add test for action buttons rendered inside a paginated page#10743
sukvvon merged 2 commits into
mainfrom
test/query-devtools-explorer-paginated-action-menu

sukvvon commented May 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nx-cloud Bot commented May 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

pkg-pr-new Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 20, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

🚀 Changeset Version Preview

Uh oh!

coderabbitai Bot commented May 20, 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

Poem

Uh oh!

pkg-pr-new Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 20, 2026 •

edited by coderabbitai Bot

Loading

nx-cloud Bot commented May 20, 2026 •

edited

Loading

github-actions Bot commented May 20, 2026 •

edited

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading