test(query-devtools/utils): add tests for 'getQueryStatusColor' by sukvvon · Pull Request #10670 · TanStack/query

sukvvon · 2026-05-09T03:37:13Z

🎯 Changes

Add unit tests for the getQueryStatusColor helper in query-devtools/utils.tsx.

The helper maps a query's fetchStatus, observerCount, and isStale flag to one of five status colors used in the devtools UI.

Cases:

'blue' when fetchStatus is 'fetching'
'blue' even when there are no observers if fetchStatus is 'fetching' (guards the 'fetching'-over-!observerCount precedence)
'gray' when there are no observers
'purple' when fetchStatus is 'paused'
'purple' even when stale if fetchStatus is 'paused' (guards the 'paused'-over-isStale precedence)
'yellow' when the query is stale
'green' when the query is active and not stale

The queryState is built from a real Query instance via queryClient.getQueryCache().build, mirroring the pattern used by the existing sortFns and mutationSortFns suites. queryClient.clear() runs in afterEach to keep tests isolated.

✅ 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

Release Notes

Tests
- Added comprehensive test coverage for query status color indicators, validating correct color display across multiple query state combinations including fetching, idle states with various observer counts, paused states, stale conditions, and active states.

coderabbitai · 2026-05-09T03:37:26Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 78d87a73-7866-45c2-9528-fad9b5ab8a5a

📥 Commits

Reviewing files that changed from the base of the PR and between 3894b05 and 965b057.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/utils.test.ts

📝 Walkthrough

Walkthrough

This PR adds a comprehensive test suite for the getQueryStatusColor utility function in query-devtools. The test file imports are expanded to include the function under test and required type definitions, then a new test block validates color outputs across all relevant query state combinations.

Changes

Query Status Color Testing

Layer / File(s)	Summary
Test Imports & Dependencies `packages/query-devtools/src/__tests__/utils.test.ts`	Import statement updated to include `getQueryStatusColor` from `../utils` and type-only import expanded to add `FetchStatus` alongside `Mutation`, `MutationStatus`, and `Query`.
Status Color Test Suite `packages/query-devtools/src/__tests__/utils.test.ts`	New `describe('getQueryStatusColor')` block with tests verifying expected color strings (`blue` for fetching, `gray` for idle with no observers, `purple` for paused, `yellow` for idle when stale, `green` for idle when active/not stale) across combinations of fetch status, observer count, and staleness.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

package: query-devtools

Poem

🐰 A test suite hops in with colors so bright,
Mapping each status—from fetching to idle's true light,
With stale and observers, the logic takes shape,
Each assertion a step in a well-tested escape!

🚥 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 clearly and concisely describes the main change: adding tests for the getQueryStatusColor function in query-devtools.
Description check	✅ Passed	The description fully matches the template with all required sections completed: detailed explanation of changes, all checklist items addressed, and release impact clearly stated.
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-get-query-status-color

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

nx-cloud · 2026-05-09T03:37:39Z

View your CI Pipeline Execution ↗ for commit 965b057

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

☁️ Nx Cloud last updated this comment at 2026-05-09 03:41:38 UTC

github-actions · 2026-05-09T03:37:57Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-09T03:39:32Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 965b057

github-actions · 2026-05-09T03:39:42Z

size-limit report 📦

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

test(query-devtools/utils): add tests for 'getQueryStatusColor'

965b057

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

sukvvon self-assigned this May 9, 2026

sukvvon merged commit abad6f0 into main May 9, 2026
10 checks passed

sukvvon deleted the test/query-devtools-get-query-status-color branch May 9, 2026 03:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/utils): add tests for 'getQueryStatusColor'#10670

test(query-devtools/utils): add tests for 'getQueryStatusColor'#10670
sukvvon merged 1 commit into
mainfrom
test/query-devtools-get-query-status-color

sukvvon commented May 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 9, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 9, 2026

Uh oh!

pkg-pr-new Bot commented May 9, 2026

Uh oh!

github-actions Bot commented May 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Release Notes

Uh oh!

coderabbitai Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 9, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 9, 2026

Uh oh!

github-actions Bot commented May 9, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 9, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 9, 2026 •

edited

Loading

nx-cloud Bot commented May 9, 2026 •

edited

Loading