HarperFast / HarperFast/studio

Test databases sidebar tree interactions (nav / expand / context menus)

Open
#1,490 0 comments 0 reactions 0 assignees View on GitHub
good first issue
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.