Skip to content

test(query-devtools/Devtools): add tests for sort dropdown, hide disabled queries, and sort order toggle#10689

Merged
sukvvon merged 3 commits intomainfrom
test/query-devtools-devtools-sort
May 10, 2026
Merged

test(query-devtools/Devtools): add tests for sort dropdown, hide disabled queries, and sort order toggle#10689
sukvvon merged 3 commits intomainfrom
test/query-devtools-devtools-sort

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 10, 2026

🎯 Changes

Add tests for the sort dropdown, the hideDisabledQueries filter, and the sort order toggle in the Devtools body component.

sort by — sort dropdown and disabled-query filter:

  • Persists 'TanstackQueryDevtools.sort' to localStorage when the queries-view sort dropdown is changed.
  • Persists 'TanstackQueryDevtools.mutationSort' to localStorage when the mutations-view sort dropdown is changed.
  • Hides disabled queries from the row list when 'TanstackQueryDevtools.hideDisabledQueries' is 'true'.

sort order — ascending/descending toggle:

  • Persists 'TanstackQueryDevtools.sortOrder' and toggles its value across consecutive clicks of the sort order button.

✅ 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 Devtools test coverage: verifies sort and sort-order toggles persist, mutation sort preference persists, and the “hide disabled queries” preference filters the displayed list via localStorage.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 10, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e3253e5e-4635-4c95-b473-fc6d24e11a70

📥 Commits

Reviewing files that changed from the base of the PR and between 4d4617c and a3946f7.

📒 Files selected for processing (1)
  • packages/query-devtools/src/__tests__/Devtools.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/query-devtools/src/tests/Devtools.test.tsx

📝 Walkthrough

Walkthrough

This pull request adds test coverage for localStorage persistence in the query devtools, verifying that sort key selections, mutation sort preferences, disabled query filtering, and sort order toggles are correctly persisted and retrieved from browser storage.

Changes

Devtools Sort and Filter Tests

Layer / File(s) Summary
Test Dependencies
packages/query-devtools/src/__tests__/Devtools.test.tsx
Import statement updated to include QueryObserver from @tanstack/query-core to support observer-based test scenarios.
Sort Key and Filter Persistence
packages/query-devtools/src/__tests__/Devtools.test.tsx
Tests confirm that selecting a sort key in the queries view persists to localStorage under TanstackQueryDevtools.sort, mutations sort key persists under TanstackQueryDevtools.mutationSort, and disabled queries are filtered from the view when hideDisabledQueries is enabled in localStorage.
Sort Order Toggle Persistence
packages/query-devtools/src/__tests__/Devtools.test.tsx
Test verifies that toggling sort order updates localStorage at TanstackQueryDevtools.sortOrder and persists the changed state across multiple clicks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • TanStack/query#10686: Both PRs modify the same Devtools.test.tsx file to add tests for Devtools sorting and filtering behavior, including mutation sort-order persistence to localStorage.
  • TanStack/query#10650: Both PRs add or modify tests around query-devtools sorting and both import QueryObserver to test the same sorting functionality.

Poem

🐰 A rabbit hops through test suites bright,
Asserting localStorage stays just right—
Sorts and filters dance in storage's keep,
While devtools dreams and toggles leap.
Coverage grows, the tests all pass,
Hop on, dear code, like grass on grass! 🌿

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main changes: adding tests for sort dropdown, hideDisabledQueries filter, and sort order toggle in the Devtools component.
Description check ✅ Passed The description provides detailed coverage of all required template sections with specific test behaviors documented, checklist items completed, and correct release impact assessment.
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-devtools-sort

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 10, 2026

View your CI Pipeline Execution ↗ for commit c78c224

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

☁️ Nx Cloud last updated this comment at 2026-05-10 17:25:43 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 10, 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 10, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/query-devtools/src/__tests__/Devtools.test.tsx (1)

791-805: ⚡ Quick win

Tighten sort-order toggle assertion to expected values.

This currently only checks “value changed,” so it can pass with unexpected values. Consider asserting the allowed domain and exact opposite after the second click.

Suggested test assertion hardening
       fireEvent.click(rendered.getByLabelText(/Sort order/))
       const afterFirstToggle = localStorage.getItem(
         'TanstackQueryDevtools.sortOrder',
       )
-      expect(afterFirstToggle).not.toBeNull()
+      expect(['asc', 'desc']).toContain(afterFirstToggle)

       fireEvent.click(rendered.getByLabelText(/Sort order/))
       const afterSecondToggle = localStorage.getItem(
         'TanstackQueryDevtools.sortOrder',
       )
-      expect(afterSecondToggle).not.toBe(afterFirstToggle)
+      expect(afterSecondToggle).toBe(
+        afterFirstToggle === 'asc' ? 'desc' : 'asc',
+      )
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/query-devtools/src/__tests__/Devtools.test.tsx` around lines 791 -
805, The test "should toggle the sort order when the sort order button is
clicked" only asserts the localStorage value changed; update it to assert
concrete allowed values and exact opposites: after clicking the button (via
rendered.getByLabelText(/Sort order/)) read localStorage key
'TanstackQueryDevtools.sortOrder' and assert it is either 'asc' or 'desc' (not
null), then click again and assert the new value equals the exact opposite
string of the first ('asc' ↔ 'desc'); reference the render helper renderDevtools
and the label text "Sort order" to locate the test.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/query-devtools/src/__tests__/Devtools.test.tsx`:
- Around line 791-805: The test "should toggle the sort order when the sort
order button is clicked" only asserts the localStorage value changed; update it
to assert concrete allowed values and exact opposites: after clicking the button
(via rendered.getByLabelText(/Sort order/)) read localStorage key
'TanstackQueryDevtools.sortOrder' and assert it is either 'asc' or 'desc' (not
null), then click again and assert the new value equals the exact opposite
string of the first ('asc' ↔ 'desc'); reference the render helper renderDevtools
and the label text "Sort order" to locate the test.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 21f6b0eb-181f-4e85-8616-10e155c1280e

📥 Commits

Reviewing files that changed from the base of the PR and between 7e45976 and 4d4617c.

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 10, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: a3946f7

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 10, 2026

size-limit report 📦

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

@sukvvon sukvvon merged commit 3e74fcb into main May 10, 2026
8 checks passed
@sukvvon sukvvon deleted the test/query-devtools-devtools-sort branch May 10, 2026 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant