test(query-devtools/Explorer): add test for deleting fields via inline delete buttons by sukvvon · Pull Request #10742 · TanStack/query

sukvvon · 2026-05-20T10:46:04Z

🎯 Changes

Extend Explorer.test.tsx with a test that locks the inline DeleteItemButton flow on object fields — clicking the trash icon on a field removes only that key from the active query's cache, and remaining rows stay interactive so subsequent fields can be deleted one by one.

Added cases (inline edit, 1):

should delete fields from the active query when their inline delete buttons are clicked — mounts the parent Explorer over { name: 'Anna', age: 30 } with defaultExpanded so the production prop propagation (itemsDeletable, accumulated dataPath) is exercised, then clicks each row's delete button in turn and asserts the cache becomes { name: 'Anna' } and finally {}.

✅ 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 the Explorer component's inline delete functionality, verifying that delete buttons correctly remove individual object fields from the active query.

…e delete buttons

nx-cloud · 2026-05-20T10:46:38Z

View your CI Pipeline Execution ↗ for commit a959443

Command	Status	Duration	Result
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	27s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-20 11:01:17 UTC

github-actions · 2026-05-20T10:46:53Z

🚀 Changeset Version Preview

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

coderabbitai · 2026-05-20T10:49:17Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7ace1580-fb53-4f0d-ad32-9dffcc179c3d

📥 Commits

Reviewing files that changed from the base of the PR and between 48b7d66 and a959443.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/Explorer.test.tsx

📝 Walkthrough

Walkthrough

This PR extends the Explorer devtools test suite by adding support for scoped DOM queries and a new inline edit test case. The test verifies that inline delete buttons on expandable object rows correctly remove fields from the active query and update the query data accordingly.

Changes

Inline Delete Test Coverage

Layer / File(s)	Summary
Inline delete test with scoped DOM queries `packages/query-devtools/src/__tests__/Explorer.test.tsx`	Import of `within` enables scoped row-level DOM queries. New `inline edit` test renders an editable expanded object, clicks "Delete item" buttons within scoped row elements for `age` and `name` fields, and asserts each deletion updates queryClient data to remove those fields.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

TanStack/query#10731: Both PRs extend packages/query-devtools/src/__tests__/Explorer.test.tsx with new "inline edit" coverage around the inline delete ("Delete item") UI and its effect on the active query data.
TanStack/query#10729: Both PRs update packages/query-devtools/src/__tests__/Explorer.test.tsx with UI-driven delete behavior checks: the main PR validates inline edit delete buttons remove object fields, while the retrieved PR adds DeleteItemButton tests that delete entries via dataPath and update setQueryData/active query.
TanStack/query#10714: The main PR extends packages/query-devtools/src/__tests__/Explorer.test.tsx by adding inline edit/delete behavior assertions, which builds on the existing Explorer test harness and rendering suite introduced in PR #10714.

Poem

🐰 A tester's delight, scoped rows in sight,
Delete buttons dance with data so bright,
Each field falls clean, the query's now lean—
The finest inline edits we've ever seen! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a test for deleting fields via inline delete buttons in the Explorer component.
Description check	✅ Passed	The description includes all required sections (Changes, Checklist, Release Impact) with detailed information about the test being added and completion of checklist items.
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-explorer-primitive-delete

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

pkg-pr-new · 2026-05-20T11:00:43Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: a959443

github-actions · 2026-05-20T11:01:18Z

size-limit report 📦

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

test(query-devtools/Explorer): add test for deleting fields via inlin…

a959443

…e delete buttons

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

sukvvon self-assigned this May 20, 2026

sukvvon merged commit e196f9f into main May 20, 2026
18 of 21 checks passed

sukvvon deleted the test/query-devtools-explorer-primitive-delete branch May 20, 2026 11:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Explorer): add test for deleting fields via inline delete buttons#10742

test(query-devtools/Explorer): add test for deleting fields via inline delete buttons#10742
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-primitive-delete

sukvvon commented May 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nx-cloud Bot commented May 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

coderabbitai Bot commented May 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

pkg-pr-new Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 20, 2026

🚀 Changeset Version Preview

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

pkg-pr-new Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 20, 2026 •

edited by coderabbitai Bot

Loading

nx-cloud Bot commented May 20, 2026 •

edited

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading