Skip to content

test(query-devtools/Devtools): add tests for mutation details, sort order, and filter#10686

Merged
sukvvon merged 4 commits into
mainfrom
test/query-devtools-devtools-mutations
May 10, 2026
Merged

test(query-devtools/Devtools): add tests for mutation details, sort order, and filter#10686
sukvvon merged 4 commits into
mainfrom
test/query-devtools-devtools-mutations

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 10, 2026

🎯 Changes

Add tests for the mutation-side interactions in the Devtools body component.

mutation details — selecting a mutation:

  • Opens the mutation details panel when a mutation row is clicked.

mutation sort order — sort order toggle in the mutations view:

  • Persists 'TanstackQueryDevtools.mutationSortOrder' to localStorage and toggles its value across consecutive clicks.

mutation filter — filter input in the mutations view:

  • Filters mutations by their mutationKey, asserting that a non-matching mutation is excluded from the rendered list.

✅ 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 Devtools mutations functionality, including mutation details panel rendering, sort order persistence, and mutation filtering capabilities.

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: 2758116f-b1b7-4308-bdf2-49eb62665d37

📥 Commits

Reviewing files that changed from the base of the PR and between 428fa54 and 82568be.

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

📝 Walkthrough

Walkthrough

This pull request adds three new test cases to the Devtools test suite, extending coverage for mutations functionality. The tests verify mutation details panel display, sort order persistence in localStorage, and mutation filtering by key within the Mutations view.

Changes

Mutation Devtools Test Coverage

Layer / File(s) Summary
Mutation UI Interactions
packages/query-devtools/src/__tests__/Devtools.test.tsx
Test suite adds mutation details test case that clicks a mutation row to display the "Mutation Details" panel, and a mutation filter test that applies a key-based filter and verifies the matching mutation entry remains visible.
Mutation State Persistence
packages/query-devtools/src/__tests__/Devtools.test.tsx
Test suite adds mutation sort order test case that toggles the "Sort order" control and asserts the persisted TanstackQueryDevtools.mutationSortOrder value in localStorage.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • TanStack/query#10684: Modifies the same test file with overlapping mutation-related test additions for the Mutations view.

Poem

🐰 Three new tests hop into the test file,
Mutations now click and sort with style,
Filtering trims the list with care,
localStorage remembers the order there,
Devtools tests ready—hop, declare!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: adding tests for three mutation-focused features (details, sort order, and filter) in the Devtools component.
Description check ✅ Passed The description follows the required template with all sections completed: Changes section details the three test suites, Checklist items are marked, and Release Impact correctly identifies this as dev-only with no changeset needed.
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-mutations

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 8af6d5b

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

☁️ Nx Cloud last updated this comment at 2026-05-10 16:12:23 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.

@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@10686

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 82568be

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: 2

🤖 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__/Devtools.test.tsx`:
- Around line 599-608: The test currently only asserts the existence of the
localStorage key for mutation sort order; update the test in the 'should toggle
the mutation sort order in the mutations view' case to read the current value
from localStorage (key 'TanstackQueryDevtools.mutationSortOrder') before
clicking the 'Sort order' control (use renderDevtools and getByLabelText(/Sort
order/)), perform the click, then assert that the stored value has changed
(e.g., is not equal to the initial value); optionally click again and assert it
toggles back to the original value to verify a true toggle behavior.
- Around line 612-630: The test "should filter mutations by their submission
timestamp" is currently nondiscriminating because it only creates one mutation
and then filters, so add a second mutation whose mutationKey does NOT match
'filter-test' (e.g., ['other-mutation']) by using
queryClient.getMutationCache().build(...) and executing it, then assert the
rendered mutations list contains two items before applying the filter (use
renderDevtools() output queries such as getAllByLabelText(/Mutation submitted
at/) or a container query), perform the existing filter input via
fireEvent.input(rendered.getByLabelText('Filter queries by query key'), {
target: { value: 'filter-test' } }), and finally assert the list shrinks to one
item after filtering to prove the filter actually excludes the non-matching
mutation; keep using renderDevtools, queryClient, and getByLabelText to locate
elements.
🪄 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: 3d87417e-3838-444b-ac0d-9714cd0e0a1c

📥 Commits

Reviewing files that changed from the base of the PR and between abdc308 and 428fa54.

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

Comment thread packages/query-devtools/src/__tests__/Devtools.test.tsx
Comment thread packages/query-devtools/src/__tests__/Devtools.test.tsx Outdated
@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 4746ac4 into main May 10, 2026
8 checks passed
@sukvvon sukvvon deleted the test/query-devtools-devtools-mutations branch May 10, 2026 16:18
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