Skip to content

test(query-devtools/Devtools): add tests for settings menu#10690

Merged
sukvvon merged 5 commits intomainfrom
test/query-devtools-devtools-settings-menu
May 10, 2026
Merged

test(query-devtools/Devtools): add tests for settings menu#10690
sukvvon merged 5 commits intomainfrom
test/query-devtools-devtools-settings-menu

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 10, 2026

🎯 Changes

Adds tests for the settings menu in Devtools.tsx, covering 7 cases:

  • should show "Position" sub-trigger when the settings menu is opened
  • should open "Position" sub-menu when the sub-trigger is activated
  • should persist "position" when a position radio item is selected
  • should open "Theme" sub-menu when the sub-trigger is activated
  • should persist "theme_preference" when a theme radio item is selected
  • should open "Hide disabled queries" sub-menu when the sub-trigger is activated
  • should persist "hideDisabledQueries" when a hide-disabled radio item is selected

Kobalte's DropdownMenu is exercised through its keyboard activation path (Enter on the trigger and radio items, ArrowRight on sub-triggers), avoiding the need for a PointerEvent polyfill in jsdom.

✅ 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
    • Improved test coverage for the DevTools settings menu: verifies keyboard navigation opens the Settings menu and its sub-menus (Position, Theme preference, Hide disabled queries), asserts sub-menu controls render correctly (including portal-based content), and confirms persistence of position, theme preference, and hide-disabled-queries in localStorage.

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: 16a3e72d-28bf-4cc4-805c-ddb36e77596e

📥 Commits

Reviewing files that changed from the base of the PR and between e6432af and 3beb4ff.

📒 Files selected for processing (1)
  • packages/query-devtools/src/__tests__/Devtools.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/query-devtools/src/tests/Devtools.test.tsx

📝 Walkthrough

Walkthrough

Test updates: removed a PointerEvent polyfill from test setup and added keyboard-driven settings menu tests that traverse Position, Theme, and Hide-disabled-queries sub-menus and verify persistence to localStorage.

Changes

Settings Menu Test Coverage

Layer / File(s) Summary
Test Setup Cleanup
packages/query-devtools/src/__tests__/Devtools.test.tsx
The PointerEvent global polyfill stub is removed from the beforeEach setup.
Keyboard Navigation Tests — Position
packages/query-devtools/src/__tests__/Devtools.test.tsx
New tests open settings via keyboard, navigate to the Position sub-menu, select "top", and assert TanstackQueryDevtools.position is persisted.
Keyboard Navigation Tests — Theme (open)
packages/query-devtools/src/__tests__/Devtools.test.tsx
New tests navigate to the Theme sub-menu and assert the "Theme preference" menu is rendered.
Keyboard Navigation Tests — Theme (select)
packages/query-devtools/src/__tests__/Devtools.test.tsx
New tests select "Light" and assert TanstackQueryDevtools.theme_preference is persisted.
Keyboard Navigation Tests — Hide disabled queries (open)
packages/query-devtools/src/__tests__/Devtools/Devtools.test.tsx
New tests open the Hide disabled queries sub-menu via keyboard and assert the control is rendered (portal-based).
Keyboard Navigation Tests — Hide disabled queries (select)
packages/query-devtools/src/__tests__/Devtools.test.tsx
New tests select the hide-disabled option and assert TanstackQueryDevtools.hideDisabledQueries is persisted.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hop through keys and tiny panes,
Opening menus, toggling gains,
Position, theme, hide set and stored,
localStorage hums, no stub ignored,
Tests tidy now — a carrot reward.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: adding tests for the settings menu in the Devtools test file.
Description check ✅ Passed The description follows the required template with all major sections completed: detailed changes explanation, checklist items checked appropriately, and correct release impact designation.
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-settings-menu

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 51ebac5

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

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

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

🤖 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 826-828: Replace conditional guards that silently skip
interactions with explicit presence assertions, then perform the event; for each
occurrence (subTrigger, themeTrigger, hideTrigger, topItem, lightItem, hideItem)
remove the surrounding if (el) { ... } and instead assert the element exists
(e.g., expect(<symbol>).toBeInTheDocument() or expect(<symbol>).not.toBeNull())
immediately before calling fireEvent.keyDown or other interactions so the test
fails fast when a selector is missing and the interaction always runs when the
element is present.
🪄 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: cb404dae-f4b8-4a89-942d-23c44fc19ada

📥 Commits

Reviewing files that changed from the base of the PR and between 3e74fcb and e3d358a.

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

Comment thread packages/query-devtools/src/__tests__/Devtools.test.tsx Outdated
@sukvvon sukvvon self-assigned this May 10, 2026
@sukvvon sukvvon force-pushed the test/query-devtools-devtools-settings-menu branch from 9c20961 to e6432af Compare May 10, 2026 17:58
@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@10690

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3beb4ff

@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%)

…ttings button' covered by other settings menu tests
@sukvvon sukvvon merged commit fdea97d into main May 10, 2026
8 checks passed
@sukvvon sukvvon deleted the test/query-devtools-devtools-settings-menu branch May 10, 2026 18:10
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