Skip to content

test(query-devtools/Devtools): add tests for 'errorTypes' prop and error trigger via select#10688

Merged
sukvvon merged 2 commits intomainfrom
test/query-devtools-devtools-error-type-select
May 10, 2026
Merged

test(query-devtools/Devtools): add tests for 'errorTypes' prop and error trigger via select#10688
sukvvon merged 2 commits intomainfrom
test/query-devtools-devtools-error-type-select

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 10, 2026

🎯 Changes

Add tests for the error type select that appears in the query details panel when errorTypes is provided.

error type select — error simulation via custom error types:

  • Renders the error type select when errorTypes is provided.
  • Sets the query status to 'error' when an error type is selected from the dropdown.

✅ 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 error-type selection in the query devtools editor, verifying UI rendering and error state triggering when error types are selected.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 10, 2026

📝 Walkthrough

Walkthrough

A new test suite validates the error type selector feature in the devtools query editor. Two test cases verify that the error-type selection UI renders when errorTypes is provided, and that selecting an error type correctly transitions the query state to error status.

Changes

Error Type Select Tests

Layer / File(s) Summary
Error Type Selector Tests
packages/query-devtools/src/__tests__/Devtools.test.tsx
New describe('error type select') block with two test cases: one asserts the selector UI appears when errorTypes are provided, the other asserts that selecting a specific error type updates the query's status to 'error'.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A selector sprouts, error types take their place,
Two tests dance through the devtools space,
UI appears, states transform with grace,
The error type flow finds its proper pace!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding tests for the errorTypes prop and error trigger functionality in the query-devtools Devtools component.
Description check ✅ Passed The description follows the template with all required sections completed: Changes section details the test additions, Checklist is fully marked, and Release Impact correctly identifies this as dev-only.
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-error-type-select

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 b428f5b

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

☁️ Nx Cloud last updated this comment at 2026-05-10 16:50:51 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)

712-733: ⚡ Quick win

Assert selected error payload, not only status.

Line 730 currently proves the query enters error state, but it can still pass if selection ignores the chosen error type and uses a generic/default error. Add an assertion for the actual error object/message from the selected initializer.

Proposed test tightening
-      expect(queryClient.getQueryState(['error-select-trigger'])?.status).toBe(
-        'error',
-      )
+      const state = queryClient.getQueryState(['error-select-trigger'])
+      expect(state?.status).toBe('error')
+      expect((state?.error as Error)?.message).toBe('Network')
🤖 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 712 -
733, The test currently only asserts the query status becomes 'error'; update
the assertion to also verify the actual error payload created by the selected
initializer is applied: after triggering the select in the test (the entry using
renderDevtools and errorTypes with initializer() => new Error('Network')), read
the query state via queryClient.getQueryState(['error-select-trigger']) and
assert its .error (or .error.message) equals the expected Error produced by the
initializer (e.g., message 'Network' and/or that it's an Error instance). This
ensures the selection uses the chosen initializer rather than a generic default.
🤖 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 712-733: The test currently only asserts the query status becomes
'error'; update the assertion to also verify the actual error payload created by
the selected initializer is applied: after triggering the select in the test
(the entry using renderDevtools and errorTypes with initializer() => new
Error('Network')), read the query state via
queryClient.getQueryState(['error-select-trigger']) and assert its .error (or
.error.message) equals the expected Error produced by the initializer (e.g.,
message 'Network' and/or that it's an Error instance). This ensures the
selection uses the chosen initializer rather than a generic default.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 16d22058-b55f-4a79-80c7-cd3411234f8b

📥 Commits

Reviewing files that changed from the base of the PR and between f24d1a3 and 6faa337.

📒 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@10688

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 6faa337

@github-actions
Copy link
Copy Markdown
Contributor

size-limit report 📦

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

@sukvvon sukvvon merged commit 7e45976 into main May 10, 2026
8 checks passed
@sukvvon sukvvon deleted the test/query-devtools-devtools-error-type-select branch May 10, 2026 17:05
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