Skip to content

test(query-devtools/Explorer): add test for independently toggling two pages#10737

Merged
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-pagination-collapse
May 20, 2026
Merged

test(query-devtools/Explorer): add test for independently toggling two pages#10737
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-pagination-collapse

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 20, 2026 •
edited by coderabbitai Bot
Loading

🎯 Changes

Extend Explorer.test.tsx with a test that locks the independent toggle behavior of pagination — each page header maintains its own expand/collapse state without affecting other pages.

Added cases (pagination, 1):

  • should independently toggle two pages when their headers are clicked — opens [0...99] and [100...199] simultaneously, asserts both pages render their items, then closes [0...99] and asserts only that page is hidden while [100...199] stays open.

✅ 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 pagination functionality to verify page headers can be toggled independently without affecting other pages.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 20, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e45a92a1-8983-4fe0-b21b-dd3e0e3c1ae4

📥 Commits

Reviewing files that changed from the base of the PR and between 359184e and 3203c75.

📒 Files selected for processing (1)
  • packages/query-devtools/src/__tests__/Explorer.test.tsx
📝 Walkthrough

Walkthrough

A new test case added to the Explorer test suite verifies that pagination page headers can be toggled independently, confirming items from both pages display and hide correctly based on their individual expansion states.

Changes

Pagination Test Coverage

Layer / File(s) Summary
Pagination independence test
packages/query-devtools/src/__tests__/Explorer.test.tsx		 New test case clicks two different page headers (first and second pages), asserts expected item visibility for each page, then re-clicks the first page header to confirm only that page's items collapse while the second page remains expanded.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

  • TanStack/query#10727: Adds pagination behavior tests for page header toggle and independent show/hide of items in the same test file.

Suggested labels

package: query-devtools

Poem

🐰 A page-turner's tale—two headers dance,
Toggling free with independent stance,
First opens wide, then second too,
Collapse and check what's left in view!
Tests assert the truth once more,
Pagination works as it's meant for. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: adding a test for independent page toggling in the Explorer component's pagination.
Description check ✅ Passed The description follows the template structure with all required sections completed: changes explained, checklist items marked, and release impact clarified.
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-pagination-collapse

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 20, 2026 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 3203c75

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

☁️ Nx Cloud last updated this comment at 2026-05-20 00:59:49 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 20, 2026

🚀 Changeset Version Preview

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

@sukvvon sukvvon self-assigned this May 20, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 20, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3203c75

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 20, 2026

size-limit report 📦

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

@sukvvon sukvvon merged commit e3ebf3f into main May 20, 2026
12 of 13 checks passed
@sukvvon sukvvon deleted the test/query-devtools-explorer-pagination-collapse branch May 20, 2026 01:12
@coderabbitai coderabbitai Bot mentioned this pull request May 20, 2026
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@sukvvon sukvvon

Labels

package: query-devtools

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@sukvvon