hyprcrd/public/js/test/tests.md

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

• Header with logo
• Board element (relative positioning)
• All footer buttons (logout, import, export, logseq, vault, settings)
• All header buttons (search, calendar, gallery, add)
• Toolbar controls (split, superview, hide-done, hide-termine, hide-tagged, sort)
• Footer card count
• Hidden file inputs

Toolbar Toggles

• hide-done toggles state and .active class
• hide-termine toggles state and .active class
• hide-tagged toggles state and .active class
• superview toggles state and .active class
• sort cycles through all modes (manual, newest, oldest, alpha, tag)
• superview renders list items

Bucket Bar

• Renders bucket tabs
• "all" bucket exists
• Clicking bucket filters cards
• "current" bucket works
• "journal" bucket works
• "unsorted" bucket works
• New bucket appears in bar
• Deleted bucket disappears from bar

Settings Panel

• Opens on button click
• All 7 tabs exist (branding, account, theme, caldav, relay, behavior, notifications)
• Tab switching shows correct panels
• Closes on X button
• Closes on overlay background click
• Account: password fields exist and masked
• Account: vault key field
• Behavior: all selects (current-days, card-height, card-width, body-lines, click-action)
• Behavior: all toggles (show-tags, show-thumbnails, show-done-badge, confirm-delete, auto-save)
• CalDAV: connection fields (url, user, pass, test, save, sync-now)
• Relay: fields (url, key, save, test)
• Notifications: lookahead, time controls

Board

• Cards render with data-id
• Cards are draggable
• Cards have color bar
• Valid data-id attributes
• Split preview opens/closes
• Split preview empty state
• Split preview shows card on click
• Active card highlighted in split mode
• New card appears on board after create
• Deleted card gone from board
• Deleted card clears split preview

Card Interactions

• Tag chips visible (if setting on)
• Tag click filters board
• Tag right-click removes tag
• Due date shows due pill
• Done tag shows done badge
• Overdue card has danger border
• Favorite toggles via context menu
• Color change via context menu
• Bucket assignment via context menu
• Cards can be grouped (parent_id)
• Child card hidden under parent on board

Context Menu

• Opens on right-click
• All actions present (open, edit, duplicate, due-date, save-md, push-relay, favorite, color, bucket, tags, delete)
• Color submenu with presets
• Tag submenu with input
• Closes on document click

Search

• Opens with Ctrl+K
• Opens with button
• Input focused on open
• Input and results area exist
• Typing triggers results
• Closes with ESC

Calendar

• Button exists
• Opens on click
• Month title displayed
• Navigation buttons (prev, next, today)
• Month navigation works
• Today resets to current month
• Closes on close button

Gallery

• Button exists
• Opens on click
• Grid has user-select: none
• Image count shown
• Closes on close button

Help

• Opens with F1
• Toggles with F1
• Opens with button
• Has content sections

Multi-Select

• Select bar hidden by default
• All action buttons (group, bucket, unbucket, color, tag, export, delete, clear)
• Ctrl+click selects card
• Ctrl+click deselects card
• Multiple cards selectable with count
• Click outside clears selection

Detail View

• Structural elements (title, body, meta, tags)
• Control buttons (edit, delete, done, zen, close)
• Opens on card click (non-split mode)
• Shows card title
• Closes on ESC
• Closes on close button
• Done button toggles #done tag
• Edit button opens editor with card data
• Zen mode button exists
• Backlinks section exists

Editor

• Structural elements (modal, title, body, preview, color presets)
• Save buttons (save, save-close, cancel)
• Due date and done toggle
• Opens on add button
• Title focused on open
• Closes on cancel
• Closes on ESC
• Opens on board right-click
• Color presets render
• Color preset changes card color
• Preview pane and toggle exist
• Line numbers gutter and toggle exist
• Full save flow (type title+body → save-close → card exists)
• Edit existing card loads data

API Endpoints

• GET /api/cards — returns array
• GET /api/cards/meta — returns array
• POST /api/cards — creates card
• PATCH /api/cards/:id — updates (returns card object)
• DELETE /api/cards/:id — deletes (returns {ok})
• Tag extraction from body
• Due date persistence
• Bucket assignment
• GET /api/buckets — returns array
• POST /api/buckets — creates bucket
• PATCH /api/buckets/:id — renames (returns bucket object)
• DELETE /api/buckets/:id — deletes (returns {ok})
• GET /api/auth/status — logged in
• GET /api/relay/settings — reachable
• GET /api/caldav/settings — reachable
• Unknown endpoint returns 404

Relay API

• Push without config returns error
• Push without card_id returns 400
• Poll without config returns 0 pulled

Notifications

• Banner element exists
• Settings in localStorage
• Lookahead select has options
• Time select has options

Theme

• CSS custom properties set (bg, accent, text, surface, border, muted, dim, bright)
• Theme persisted in localStorage
• applyTheme function available
• Themes object with 5+ themes
• 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).