UI-tests und fixes aus tests

public/js/test/tests.md

@@ -0,0 +1,244 @@
+# hyprcrd GUI Test Coverage
+
+Self-contained in-app test suite. No external dependencies.
+
+## Activation
+
+- **URL**: append `?test=1`
+- **Keyboard**: `Ctrl+Shift+T`
+- **Safety**: automatic backup before run, auto-restore after
+- **Visibility**: panel hides during tests so you can watch interactions, shows results after
+
+## Test Files
+
+| File | Suites | Tests | Focus |
+|---|---|---|---|
+| `shell.test.js` | 1 | 7 | Header, footer, toolbar, file inputs |
+| `settings.test.js` | 6 | 11 | All 7 tabs, open/close, account, behavior, CalDAV, relay, notifications |
+| `board.test.js` | 3 | 11 | Card rendering, split preview, card lifecycle |
+| `toolbar.test.js` | 2 | 7 | Filter toggles (done/termine/tagged), superview, sort modes |
+| `buckets.test.js` | 2 | 8 | Bucket bar, filtering, create/delete appearance |
+| `context-menu.test.js` | 1 | 5 | Right-click, actions, submenus, close |
+| `card-interactions.test.js` | 4 | 10 | Tags, due dates, done badges, favorites, color, bucket, grouping |
+| `search.test.js` | 1 | 6 | Open (Ctrl+K, button), input focus, typing, ESC |
+| `calendar.test.js` | 1 | 7 | Open, month title, navigation, today, close |
+| `gallery.test.js` | 1 | 5 | Open, image count, select-none, close |
+| `help.test.js` | 1 | 4 | F1 toggle, button, content sections |
+| `multiselect.test.js` | 1 | 5 | Ctrl+click select/deselect, multiple, click-outside clear |
+| `detail.test.js` | 1 | 6 | Structure, controls, open, title, ESC, close |
+| `detail-interactions.test.js` | 4 | 4 | Done toggle, edit from detail, zen mode, backlinks |
+| `editor.test.js` | 3 | 8 | Structure, open/close, card create |
+| `editor-features.test.js` | 5 | 7 | Color picker, preview, line numbers, save flow, edit existing |
+| `api.test.js` | 3 | 10 | Cards CRUD, buckets CRUD, auth & misc endpoints |
+| `relay.test.js` | 2 | 3 | Push API, poll API (unconfigured state) |
+| `notifications.test.js` | 2 | 4 | Banner element, localStorage, settings selects |
+| `theme.test.js` | 2 | 6 | CSS vars, localStorage, applyTheme, themes object |
+
+**Total: 21 files, ~45 suites, ~150 tests**
+
+## Coverage by Area
+
+### App Shell
+- [x] Header with logo
+- [x] Board element (relative positioning)
+- [x] All footer buttons (logout, import, export, logseq, vault, settings)
+- [x] All header buttons (search, calendar, gallery, add)
+- [x] Toolbar controls (split, superview, hide-done, hide-termine, hide-tagged, sort)
+- [x] Footer card count
+- [x] Hidden file inputs
+
+### Toolbar Toggles
+- [x] hide-done toggles state and `.active` class
+- [x] hide-termine toggles state and `.active` class
+- [x] hide-tagged toggles state and `.active` class
+- [x] superview toggles state and `.active` class
+- [x] sort cycles through all modes (manual, newest, oldest, alpha, tag)
+- [x] superview renders list items
+
+### Bucket Bar
+- [x] Renders bucket tabs
+- [x] "all" bucket exists
+- [x] Clicking bucket filters cards
+- [x] "current" bucket works
+- [x] "journal" bucket works
+- [x] "unsorted" bucket works
+- [x] New bucket appears in bar
+- [x] Deleted bucket disappears from bar
+
+### Settings Panel
+- [x] Opens on button click
+- [x] All 7 tabs exist (branding, account, theme, caldav, relay, behavior, notifications)
+- [x] Tab switching shows correct panels
+- [x] Closes on X button
+- [x] Closes on overlay background click
+- [x] Account: password fields exist and masked
+- [x] Account: vault key field
+- [x] Behavior: all selects (current-days, card-height, card-width, body-lines, click-action)
+- [x] Behavior: all toggles (show-tags, show-thumbnails, show-done-badge, confirm-delete, auto-save)
+- [x] CalDAV: connection fields (url, user, pass, test, save, sync-now)
+- [x] Relay: fields (url, key, save, test)
+- [x] Notifications: lookahead, time controls
+
+### Board
+- [x] Cards render with data-id
+- [x] Cards are draggable
+- [x] Cards have color bar
+- [x] Valid data-id attributes
+- [x] Split preview opens/closes
+- [x] Split preview empty state
+- [x] Split preview shows card on click
+- [x] Active card highlighted in split mode
+- [x] New card appears on board after create
+- [x] Deleted card gone from board
+- [x] Deleted card clears split preview
+
+### Card Interactions
+- [x] Tag chips visible (if setting on)
+- [x] Tag click filters board
+- [x] Tag right-click removes tag
+- [x] Due date shows due pill
+- [x] Done tag shows done badge
+- [x] Overdue card has danger border
+- [x] Favorite toggles via context menu
+- [x] Color change via context menu
+- [x] Bucket assignment via context menu
+- [x] Cards can be grouped (parent_id)
+- [x] Child card hidden under parent on board
+
+### Context Menu
+- [x] Opens on right-click
+- [x] All actions present (open, edit, duplicate, due-date, save-md, push-relay, favorite, color, bucket, tags, delete)
+- [x] Color submenu with presets
+- [x] Tag submenu with input
+- [x] Closes on document click
+
+### Search
+- [x] Opens with Ctrl+K
+- [x] Opens with button
+- [x] Input focused on open
+- [x] Input and results area exist
+- [x] Typing triggers results
+- [x] Closes with ESC
+
+### Calendar
+- [x] Button exists
+- [x] Opens on click
+- [x] Month title displayed
+- [x] Navigation buttons (prev, next, today)
+- [x] Month navigation works
+- [x] Today resets to current month
+- [x] Closes on close button
+
+### Gallery
+- [x] Button exists
+- [x] Opens on click
+- [x] Grid has user-select: none
+- [x] Image count shown
+- [x] Closes on close button
+
+### Help
+- [x] Opens with F1
+- [x] Toggles with F1
+- [x] Opens with button
+- [x] Has content sections
+
+### Multi-Select
+- [x] Select bar hidden by default
+- [x] All action buttons (group, bucket, unbucket, color, tag, export, delete, clear)
+- [x] Ctrl+click selects card
+- [x] Ctrl+click deselects card
+- [x] Multiple cards selectable with count
+- [x] Click outside clears selection
+
+### Detail View
+- [x] Structural elements (title, body, meta, tags)
+- [x] Control buttons (edit, delete, done, zen, close)
+- [x] Opens on card click (non-split mode)
+- [x] Shows card title
+- [x] Closes on ESC
+- [x] Closes on close button
+- [x] Done button toggles #done tag
+- [x] Edit button opens editor with card data
+- [x] Zen mode button exists
+- [x] Backlinks section exists
+
+### Editor
+- [x] Structural elements (modal, title, body, preview, color presets)
+- [x] Save buttons (save, save-close, cancel)
+- [x] Due date and done toggle
+- [x] Opens on add button
+- [x] Title focused on open
+- [x] Closes on cancel
+- [x] Closes on ESC
+- [x] Opens on board right-click
+- [x] Color presets render
+- [x] Color preset changes card color
+- [x] Preview pane and toggle exist
+- [x] Line numbers gutter and toggle exist
+- [x] Full save flow (type title+body → save-close → card exists)
+- [x] Edit existing card loads data
+
+### API Endpoints
+- [x] GET /api/cards — returns array
+- [x] GET /api/cards/meta — returns array
+- [x] POST /api/cards — creates card
+- [x] PATCH /api/cards/:id — updates (returns card object)
+- [x] DELETE /api/cards/:id — deletes (returns {ok})
+- [x] Tag extraction from body
+- [x] Due date persistence
+- [x] Bucket assignment
+- [x] GET /api/buckets — returns array
+- [x] POST /api/buckets — creates bucket
+- [x] PATCH /api/buckets/:id — renames (returns bucket object)
+- [x] DELETE /api/buckets/:id — deletes (returns {ok})
+- [x] GET /api/auth/status — logged in
+- [x] GET /api/relay/settings — reachable
+- [x] GET /api/caldav/settings — reachable
+- [x] Unknown endpoint returns 404
+
+### Relay API
+- [x] Push without config returns error
+- [x] Push without card_id returns 400
+- [x] Poll without config returns 0 pulled
+
+### Notifications
+- [x] Banner element exists
+- [x] Settings in localStorage
+- [x] Lookahead select has options
+- [x] Time select has options
+
+### Theme
+- [x] CSS custom properties set (bg, accent, text, surface, border, muted, dim, bright)
+- [x] Theme persisted in localStorage
+- [x] applyTheme function available
+- [x] Themes object with 5+ themes
+- [x] Card layout CSS vars
+
+## Not Yet Covered
+
+- Drag and drop (card reorder, bucket assignment via drag)
+- Box-select rubber band
+- CalDAV sync flow (requires server)
+- Relay push/poll with configured relay
+- File upload (paste, drag into editor)
+- Image fullscreen viewer (zoom, pan)
+- Zen mode resize handles
+- Notification banner dismiss
+- Undo (Ctrl+Z)
+- Logseq import flow (requires ZIP file)
+- Export download verification
+- Datepicker dialog interaction
+- Editor autocomplete (tags, links, snippets)
+- Calendar day popup and card creation
+- Search drag-and-drop to group
+
+## Adding Tests
+
+1. Create `yourfeature.test.js` in `public/js/test/`
+2. Import runner: `import { describe, it, expect, ... } from './runner.js'`
+3. Add import to `tests.js`
+4. Update this file
+
+Tests don't need manual cleanup — backup is auto-restored after every run.
+Use `csrf()` for API calls. Use `closeAll()` in `afterEach` for UI state.
+Sync is paused during test runs (`window._testRunning`).