HarperFast / HarperFast/studio
Test databases sidebar tree interactions (nav / expand / context menus)
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 4
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 40
Description
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/`); clicking the synthetic **"Create a Table"** row fires `setWatchedValue('ShowCreateTable', { databaseName: })`. 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`.
Contributor guide
Research direction
Start with DatabasesTree/index.tsx, DatabaseTreeContextMenu.tsx, and TableContextMenuItems.tsx, then read CLAUDE.md and PickColumnsDropdown.test.tsx for the jsdom conventions. Add interaction tests using the router, QueryClient, permission mocks, and watcher subscription spy, covering navigation, expansion, context-menu actions, and re-anchoring. Run npx vitest run src/features/instance/databases, npx tsc -b, and npx oxlint.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100