Follow-up from the review of #1471 (databases tab tree-nav redesign). Reviewers @kriszyp and @DavidCockerill noted the tree interaction logic isn't covered by tests — the tree builder (buildItems.test.ts) is, but the click/expand/context-menu wiring is not.
Files under test
src/features/instance/databases/components/DatabasesTree/index.tsx — DatabasesTree (react-complex-tree ControlledTreeEnvironment)
src/features/instance/databases/components/DatabasesTree/DatabaseTreeContextMenu.tsx
src/features/instance/databases/components/TableContextMenuItems.tsx
Behaviors to lock in
- Single-click a table navigates to it; single-click a database navigates to its overview (
/databases/<db>); clicking the synthetic "Create a Table" row fires setWatchedValue('ShowCreateTable', { databaseName: <focused db> }). Mode is DoubleClickItemToExpand, so double-click / the chevron expands a database without navigating.
- Right-click a database → Create a Table + Drop Database; right-click a table → Add Record(s) / Import Data / Export CSV / Drop Table (Drop Table hidden when it's the last table in the DB) — each firing the correct target-carrying watched value (see
src/lib/storage/watchedValueKeys.ts).
- An already-open context menu re-anchors on a second right-click (content is keyed by cursor position).
Notes
- Follow the repo's Radix-in-jsdom conventions in
CLAUDE.md ("Testing Radix menus in jsdom") and mirror src/features/instance/databases/components/PickColumnsDropdown.test.tsx (no @testing-library/user-event; use fireEvent, /** @vitest-environment jsdom */, pointer-event polyfills).
- Provide a TanStack Router context (
useNavigate/useParams) + QueryClient, and mock the permission hooks. ⚠️ Importing usePermissions pulls in the auth store (touches localStorage), so prefer jsdom env and/or mock it.
- Assert watched-value fires via a
useListener subscription spy on the events bus (src/lib/events/watcher.ts).
Verify with npx vitest run src/features/instance/databases, npx tsc -b, npx oxlint.
Follow-up from the review of #1471 (databases tab tree-nav redesign). Reviewers @kriszyp and @DavidCockerill noted the tree interaction logic isn't covered by tests — the tree builder (
buildItems.test.ts) is, but the click/expand/context-menu wiring is not.Files under test
src/features/instance/databases/components/DatabasesTree/index.tsx—DatabasesTree(react-complex-treeControlledTreeEnvironment)src/features/instance/databases/components/DatabasesTree/DatabaseTreeContextMenu.tsxsrc/features/instance/databases/components/TableContextMenuItems.tsxBehaviors to lock in
/databases/<db>); clicking the synthetic "Create a Table" row firessetWatchedValue('ShowCreateTable', { databaseName: <focused db> }). Mode isDoubleClickItemToExpand, so double-click / the chevron expands a database without navigating.src/lib/storage/watchedValueKeys.ts).Notes
CLAUDE.md("Testing Radix menus in jsdom") and mirrorsrc/features/instance/databases/components/PickColumnsDropdown.test.tsx(no@testing-library/user-event; usefireEvent,/** @vitest-environment jsdom */, pointer-event polyfills).useNavigate/useParams) +QueryClient, and mock the permission hooks.usePermissionspulls in the auth store (toucheslocalStorage), so prefer jsdom env and/or mock it.useListenersubscription spy on the events bus (src/lib/events/watcher.ts).Verify with
npx vitest run src/features/instance/databases,npx tsc -b,npx oxlint.