Skip to content

test(preact-query-devtools/PreactQueryDevtools{,Panel}): add tests for the full prop wiring matrix - #10852

Merged
sukvvon merged 2 commits into
mainfrom
test/preact-query-devtools-mirror-solid-wiring-matrix
Jun 1, 2026
Merged

test(preact-query-devtools/PreactQueryDevtools{,Panel}): add tests for the full prop wiring matrix#10852
sukvvon merged 2 commits into
mainfrom
test/preact-query-devtools-mirror-solid-wiring-matrix

Conversation

@sukvvon

@sukvvonsukvvon commented Jun 1, 2026

Copy link
Copy Markdown
Member

🎯 Changes

Add test cases to both PreactQueryDevtools and PreactQueryDevtoolsPanel that cover the full prop wiring matrix, mirroring the matrix already in place for SolidQueryDevtools (#10823, #10824), SolidQueryDevtoolsPanel (#10827, #10828), and ReactQueryDevtools{,Panel} (#10851).

PreactQueryDevtools

  • initialIsOpensetInitialIsOpen + default (false when omitted)
  • errorTypessetErrorTypes + default ([] when omitted)
  • themesetTheme
  • resolved QueryClientsetClient
  • constructor-only props (styleNonce, shadowDOMTarget, hideDisabledQueries)
  • unmount cleanup

PreactQueryDevtoolsPanel

  • onClosesetOnClose + default (no-op function when omitted)
  • errorTypessetErrorTypes + default
  • themesetTheme
  • resolved QueryClientsetClient
  • constructor-only props (styleNonce, shadowDOMTarget, hideDisabledQueries)
  • style merge contract (preserve default and override on conflict)
  • unmount cleanup

All cases follow the existing mock pattern (`vi.mock('@tanstack/query-devtools', ...)` with per-method spies), and style cases use `toHaveStyle` from @testing-library/jest-dom.

✅ 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
    • Enhanced test coverage for PreactQueryDevtools with improved assertions for prop forwarding and default values.
    • Expanded PreactQueryDevtoolsPanel test suite to validate configuration handling and component lifecycle behavior.

@coderabbitai

coderabbitaiBot commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5e9123a5-fdbe-4ede-8b4d-1ef8afabebdd

📥 Commits

Reviewing files that changed from the base of the PR and between 9d488a1 and 8d40ef4.

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

📝 Walkthrough

Walkthrough

The PR expands test coverage for two Preact devtools wrapper components. Both test suites now import their underlying TanStack devtools dependencies as runtime values and add comprehensive test cases validating prop forwarding, constructor options, and lifecycle behavior.

Changes

Preact Devtools Component Tests

Layer / File(s)Summary
PreactQueryDevtools prop forwarding tests
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
Import of TanstackQueryDevtools switches to runtime value; test cases validate initialIsOpen, errorTypes, and theme forwarding with defaults; confirm QueryClient passes via setClient; validate constructor options (styleNonce, shadowDOMTarget, hideDisabledQueries); and verify unmount is called on component unmount.
PreactQueryDevtoolsPanel prop forwarding and lifecycle tests
packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
Import of TanstackQueryDevtoolsPanel switches to runtime value; test cases validate onClose, errorTypes, and theme forwarding with defaults; confirm QueryClient forwarding via setClient; validate constructor options (styleNonce, shadowDOMTarget, hideDisabledQueries); verify container height styling (default preservation and override); and ensure unmount is called on component unmount.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • TanStack/query#10818: Extends PreactQueryDevtools test suite to verify prop delegation into mocked TanstackQueryDevtools instances.
  • TanStack/query#10828: Adds devtoolsPanel test cases verifying the style merge contract for container height handling.
  • TanStack/query#10827: Extends devtools panel test cases verifying option forwarding and unmount lifecycle behavior.

Suggested labels

package: query-devtools

Poem

🐰 Tests that hop with certainty bright,
Props forwarding through devtools' sight,
Mocks unwrapped from type to runtime's might,
Every option checked, lifecycle tight—
Coverage bounds the feature in flight! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe PR title accurately summarizes the main change: adding comprehensive prop wiring tests for PreactQueryDevtools and PreactQueryDevtoolsPanel components.
Description check✅ PassedThe PR description is comprehensive and well-structured, covering all test cases for both components, with clear organization and complete checklist responses.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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/preact-query-devtools-mirror-solid-wiring-matrix

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

@nx-cloud

nx-cloudBot commented Jun 1, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit c0926c9

CommandStatusDurationResult
nx run-many --target=build --exclude=examples/*...✅ Succeeded6sView ↗
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 12sView ↗

☁️ Nx Cloud last updated this comment at 2026-06-01 01:30:03 UTC

@github-actions

github-actionsBot commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

2 package(s) bumped directly, 23 bumped as dependents.

🟩 Patch bumps

PackageVersionReason
@tanstack/lit-query0.2.6 → 0.2.7Changeset
@tanstack/query-devtools5.100.14 → 5.100.15Changeset
@tanstack/angular-query-experimental5.100.14 → 5.100.15Dependent
@tanstack/angular-query-persist-client5.100.14 → 5.100.15Dependent
@tanstack/eslint-plugin-query5.100.14 → 5.100.15Dependent
@tanstack/preact-query5.100.14 → 5.100.15Dependent
@tanstack/preact-query-devtools5.100.14 → 5.100.15Dependent
@tanstack/preact-query-persist-client5.100.14 → 5.100.15Dependent
@tanstack/query-async-storage-persister5.100.14 → 5.100.15Dependent
@tanstack/query-broadcast-client-experimental5.100.14 → 5.100.15Dependent
@tanstack/query-core5.100.14 → 5.100.15Dependent
@tanstack/query-persist-client-core5.100.14 → 5.100.15Dependent
@tanstack/query-sync-storage-persister5.100.14 → 5.100.15Dependent
@tanstack/react-query5.100.14 → 5.100.15Dependent
@tanstack/react-query-devtools5.100.14 → 5.100.15Dependent
@tanstack/react-query-next-experimental5.100.14 → 5.100.15Dependent
@tanstack/react-query-persist-client5.100.14 → 5.100.15Dependent
@tanstack/solid-query5.100.14 → 5.100.15Dependent
@tanstack/solid-query-devtools5.100.14 → 5.100.15Dependent
@tanstack/solid-query-persist-client5.100.14 → 5.100.15Dependent
@tanstack/svelte-query6.1.33 → 6.1.34Dependent
@tanstack/svelte-query-devtools6.1.33 → 6.1.34Dependent
@tanstack/svelte-query-persist-client6.1.33 → 6.1.34Dependent
@tanstack/vue-query5.100.14 → 5.100.15Dependent
@tanstack/vue-query-devtools6.1.33 → 6.1.34Dependent

@sukvvonsukvvon self-assigned this Jun 1, 2026
@pkg-pr-new

pkg-pr-newBot commented Jun 1, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 8d40ef4

@github-actions

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
react full12.11 KB (0%)
react minimal9.08 KB (0%)

Sign up for freeto 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

@sukvvon