Skip to content

test(preact-query-devtools/PreactQueryDevtools): add tests for forwarding option changes after mount#11020

Merged
sukvvon merged 2 commits into
mainfrom
test/preact-query-devtools-reactive-options
Jul 3, 2026
Merged

test(preact-query-devtools/PreactQueryDevtools): add tests for forwarding option changes after mount#11020
sukvvon merged 2 commits into
mainfrom
test/preact-query-devtools-reactive-options

Conversation

@sukvvon

@sukvvon sukvvon commented Jul 3, 2026

Copy link
Copy Markdown
Member

🎯 Changes

Adds regression tests verifying that PreactQueryDevtools forwards option changes to the underlying devtools instance after mount, not just on the initial render.

The existing tests only cover the initial forwarding of options. Each option is wired through its own useEffect with a dependency array (e.g. [position, devtools]), so if a dependency is accidentally dropped, the option would silently stop being re-forwarded on update — a case the initial-render tests cannot catch.

The new tests use rerender to change each prop after mount and assert the corresponding setter is called again:

  • buttonPosition
  • position
  • initialIsOpen
  • errorTypes
  • theme

✅ 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 coverage for updating devtools props after mount.
    • Verified that changes to button position, panel position, open state, error types, and theme are passed through correctly when the component is re-rendered.

@nx-cloud

nx-cloud Bot commented Jul 3, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 89e038f

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

☁️ Nx Cloud last updated this comment at 2026-07-03 00:47:05 UTC

@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

This PR adds five new test cases to PreactQueryDevtools.test.tsx that verify prop updates after component mount are propagated to the underlying TanstackQueryDevtools instance, checking that rerendering with new buttonPosition, position, initialIsOpen, errorTypes, and theme values triggers the corresponding setter methods.

Changes

Devtools Prop Rerender Test Coverage

Layer / File(s) Summary
Rerender propagation tests
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
Adds five tests that render PreactQueryDevtools, clear the relevant setter mock, rerender with updated buttonPosition, position, initialIsOpen, errorTypes, or theme, and assert the corresponding TanstackQueryDevtools setter is called with the new value.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

  • TanStack/query#10852: Extends the same test file to verify PreactQueryDevtools forwards updated props via rerender to the same set of underlying setters.
  • TanStack/query#10823: Adds analogous devtools adapter tests verifying initialIsOpen, errorTypes, and theme prop-to-setter forwarding.
  • TanStack/query#10999: Adds a matching re-render test asserting setTheme is invoked after a theme change.
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: added tests for forwarding option updates after mount in PreactQueryDevtools.
Description check ✅ Passed The description matches the template with Changes, Checklist, and Release Impact sections filled in and relevant details provided.
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.
✨ 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/preact-query-devtools-reactive-options

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

@github-actions

github-actions Bot commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

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

@sukvvon sukvvon force-pushed the test/preact-query-devtools-reactive-options branch from 89e038f to 09ab6fc Compare July 3, 2026 00:38
@sukvvon sukvvon changed the title test(preact-query/devtools): add tests for forwarding option changes after mount test(preact-query-devtools/PreactQueryDevtools): add tests for forwarding option changes after mount Jul 3, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx (1)

185-263: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider parameterizing these near-identical tests.

All five tests follow the same render → mockClear → rerender → assert pattern, differing only in prop name, values, and mock. A test.each table could reduce duplication while keeping the same coverage. Purely optional since the current form is clear and readable.

🤖 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/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx`
around lines 185 - 263, The five tests in PreactQueryDevtools.test.tsx are
duplicating the same render, mockClear, rerender, and assertion flow for
different props. Refactor the repeated cases around PreactQueryDevtools into a
single parameterized test using test.each, with a table covering buttonPosition,
position, initialIsOpen, errorTypes, and theme, while still asserting the
corresponding setter mock receives the updated value after rerender.
🤖 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/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx`:
- Around line 185-263: The five tests in PreactQueryDevtools.test.tsx are
duplicating the same render, mockClear, rerender, and assertion flow for
different props. Refactor the repeated cases around PreactQueryDevtools into a
single parameterized test using test.each, with a table covering buttonPosition,
position, initialIsOpen, errorTypes, and theme, while still asserting the
corresponding setter mock receives the updated value after rerender.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f54ea7bc-555d-43f1-bacb-6bd9a77b8103

📥 Commits

Reviewing files that changed from the base of the PR and between d6798b5 and 8409659.

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

@pkg-pr-new

pkg-pr-new Bot commented Jul 3, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 8409659

@github-actions

github-actions Bot commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 12.13 KB (0%)
react minimal 9.08 KB (0%)

@sukvvon sukvvon self-assigned this Jul 3, 2026
@sukvvon sukvvon merged commit 6ec2ebc into main Jul 3, 2026
9 checks passed
@sukvvon sukvvon deleted the test/preact-query-devtools-reactive-options branch July 3, 2026 03:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant