Skip to content

test(query-devtools/utils): add tests for 'sortFns'#10650

Merged
sukvvon merged 1 commit intomainfrom
test/query-devtools-sort-fns
May 6, 2026
Merged

test(query-devtools/utils): add tests for 'sortFns'#10650
sukvvon merged 1 commit intomainfrom
test/query-devtools-sort-fns

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 6, 2026

🎯 Changes

Add unit tests for the sortFns record of query-sort helpers in query-devtools/utils.tsx.

sortFns exposes three string keys ('last updated', 'query hash', 'status') that map to comparators used to order queries in the devtools panel.

Cases:

  • 'last updated' (dateSort) — places the more recently updated query first
  • 'query hash' (queryHashSort) — sorts queries alphabetically by query hash; returns 0 when hashes are identical
  • 'status' (statusAndDateSort) — places fetching queries before idle ones, places inactive (no observers) queries last, and falls back to "last updated" sort within the same status rank

Each test uses a real QueryClient and Query instance; 'status' tests rely on a real QueryObserver (with enabled: false to avoid triggering an automatic fetch). Subscribers are unsubscribed at the end of each test, and queryClient.clear() runs in afterEach to keep tests isolated.

dateSort's behavior when dataUpdatedAt values are equal is intentionally left unasserted while its intent is being clarified separately.

✅ 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

  • New Features

    • Sorting functions are now exposed for customizing how queries and mutations are ordered in the developer tools.
  • Tests

    • Expanded and more comprehensive test coverage for sorting behavior, covering last-updated, identity, and status-based scenarios to ensure reliable ordering.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 6, 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: f4c9ceb4-e559-4d59-afb3-cf136533343e

📥 Commits

Reviewing files that changed from the base of the PR and between 77b31af and a0aede9.

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

📝 Walkthrough

Walkthrough

Adds a new comprehensive test suite for sortFns in query-devtools, plus runtime imports (QueryClient, QueryObserver), a buildQuery test helper, and tests for last-updated, query-hash, and status-based sorting including observer scenarios. (50 words)

Changes

Test Suite for sortFns

Layer / File(s) Summary
Test Imports
packages/query-devtools/src/__tests__/utils.test.ts
Adds runtime imports QueryClient, QueryObserver from @tanstack/query-core; adds type import Query; imports sortFns from ../utils.
Test Setup & Helpers
packages/query-devtools/src/__tests__/utils.test.ts
Creates a QueryClient instance and defines buildQuery helper to construct Query objects with configurable state, meta, queryHash, and timestamps.
Test Cases — Last Updated
packages/query-devtools/src/__tests__/utils.test.ts
Adds tests verifying sort by last updated timestamps using constructed queries and observer scenarios.
Test Cases — Query Hash
packages/query-devtools/src/__tests__/utils.test.ts
Adds tests asserting deterministic ordering by queryHash when timestamps equal.
Test Cases — Status
packages/query-devtools/src/__tests__/utils.test.ts
Adds tests covering status-based ordering (active/idle/pending) and interactions with observers; includes teardown/cleanup logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐇
I hopped through tests with careful cheer,
Built queries, watchers, far and near,
Hashes sorted, timestamps bright,
Observers watched the order right,
A rabbit claps for tests sincere.

🚥 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 and clearly describes the main change: adding tests for the sortFns utility in query-devtools.
Description check ✅ Passed The description comprehensively covers all required template sections with detailed explanations of changes, test cases, and checklist completion.
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-sort-fns

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 6, 2026

View your CI Pipeline Execution ↗ for commit dae692c

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

☁️ Nx Cloud last updated this comment at 2026-05-06 05:43:47 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

🚀 Changeset Version Preview

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 6, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: a0aede9

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

size-limit report 📦

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

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.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@packages/query-devtools/src/__tests__/utils.test.ts`:
- Around line 992-996: The test expectation and comparator disagree: update the
dateSort comparator (function dateSort in utils.tsx) to return 0 when
dataUpdatedAt timestamps are equal (instead of always -1), then update the test
in utils.test.ts (the case using buildQuery) to expect 0 for equal timestamps so
the comparator correctly signals equivalence; alternatively, if you intend
deterministic tie-breaking that places the second query first, keep dateSort
returning 1 on equal timestamps and change the test expectation to 1 — pick one
behavior and make dateSort and the test for buildQuery consistent.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3c6d4ea5-bfbe-4abe-8081-dc6c56367e7b

📥 Commits

Reviewing files that changed from the base of the PR and between 150300f and dae692c.

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

Comment thread packages/query-devtools/src/__tests__/utils.test.ts Outdated
@sukvvon sukvvon force-pushed the test/query-devtools-sort-fns branch from dae692c to 77b31af Compare May 6, 2026 05:27
@sukvvon sukvvon self-assigned this May 6, 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__/utils.test.ts (1)

1032-1038: ⚡ Quick win

Harden observer cleanup with try/finally in status tests.

unsubscribe() currently runs only on the success path. If an assertion fails, the subscription cleanup is skipped. Wrapping assertions in try/finally keeps test isolation deterministic.

Suggested patch
       const unsubscribe = addObserver(idle)
-
-      expect(statusSort(fetching, idle)).toBe(-1)
-      expect(statusSort(idle, fetching)).toBe(1)
-
-      unsubscribe()
+      try {
+        expect(statusSort(fetching, idle)).toBe(-1)
+        expect(statusSort(idle, fetching)).toBe(1)
+      } finally {
+        unsubscribe()
+      }
@@
       const unsubscribe = addObserver(active)
-
-      expect(statusSort(active, inactive)).toBe(-1)
-      expect(statusSort(inactive, active)).toBe(1)
-
-      unsubscribe()
+      try {
+        expect(statusSort(active, inactive)).toBe(-1)
+        expect(statusSort(inactive, active)).toBe(1)
+      } finally {
+        unsubscribe()
+      }

Also applies to: 1049-1055

🤖 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__/utils.test.ts` around lines 1032 -
1038, The test is not guaranteeing observer cleanup because unsubscribe() is
only called on the success path; wrap the assertions that run while the observer
is active in a try/finally so unsubscribe() always runs. Locate the test that
calls addObserver(idle) and returns an unsubscribe function (reference symbols:
addObserver, unsubscribe, statusSort, fetching, idle) and modify it so the
assertions (expect(statusSort(...))) occur inside a try block and call
unsubscribe() in the finally block; apply the same try/finally pattern to the
analogous test around lines referencing the second occurrence (the block that
spans the other status checks, e.g., the one noted at 1049-1055).
🤖 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__/utils.test.ts`:
- Around line 1032-1038: The test is not guaranteeing observer cleanup because
unsubscribe() is only called on the success path; wrap the assertions that run
while the observer is active in a try/finally so unsubscribe() always runs.
Locate the test that calls addObserver(idle) and returns an unsubscribe function
(reference symbols: addObserver, unsubscribe, statusSort, fetching, idle) and
modify it so the assertions (expect(statusSort(...))) occur inside a try block
and call unsubscribe() in the finally block; apply the same try/finally pattern
to the analogous test around lines referencing the second occurrence (the block
that spans the other status checks, e.g., the one noted at 1049-1055).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 56bf6167-74c0-47c9-a201-fe01f1d094c1

📥 Commits

Reviewing files that changed from the base of the PR and between dae692c and 77b31af.

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

@sukvvon sukvvon force-pushed the test/query-devtools-sort-fns branch from 77b31af to a0aede9 Compare May 6, 2026 05:39
@sukvvon sukvvon merged commit 0db5b90 into main May 6, 2026
8 checks passed
@sukvvon sukvvon deleted the test/query-devtools-sort-fns branch May 6, 2026 07:21
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