ContextQMD
Back to Fresh

Usability Test Plan: Markdown Compose Seamless Canvas

docs/internal/usability-test-plan.md

0.3.26.2 KB
Original Source

Usability Test Plan: Markdown Compose Seamless Canvas

Test Environment

  • Terminal: tmux session
  • Test file: docs/internal/test_usability.md
  • Editor: ./target/release/fresh docs/internal/test_usability.md

Test Cases

T1: Compose Mode Toggle

Steps:

  1. Open docs/internal/test_usability.md
  2. Verify file opens in normal mode (raw markdown visible, line numbers shown)
  3. Open command palette (Ctrl+P or equivalent)
  4. Search for "Markdown: Toggle Compose"
  5. Execute the command

Expected:

  • Line numbers disappear
  • Text reflows to 80-char compose width
  • Emphasis markers get styled (bold, italic, etc.)
  • Status bar shows compose mode enabled

Reverse: 6. Toggle again → back to normal mode with line numbers

T2: Emphasis Concealment (Cursor Away)

Steps:

  1. Enable compose mode
  2. Move cursor to a line WITHOUT emphasis (e.g., the "## Emphasis Tests" heading)
  3. Look at lines with **bold text**, *italic text*, etc.

Expected:

  • **bold text** → shows "bold text" in bold (no asterisks visible)
  • *italic text* → shows "italic text" in italic (no asterisk visible)
  • `inline code` → shows "inline code" with background highlight (no backticks visible)
  • ~~strikethrough text~~ → shows "strikethrough text" struck through (no tildes visible)
  • ***bold italic text*** → shows "bold italic text" bold+italic (no asterisks visible)

T3: Emphasis Cursor-Aware Reveal

Steps:

  1. In compose mode, navigate cursor INTO the word "bold" on the **bold text** line
  2. Observe what happens to the asterisks

Expected:

  • When cursor enters the **bold text** span, the ** markers appear
  • When cursor leaves (move to different line), markers disappear again
  • Same behavior for all emphasis types (italic, code, strikethrough, bold-italic)

T4: Link Concealment (Cursor Away)

Steps:

  1. In compose mode, move cursor away from link lines
  2. Look at [Fresh Editor](https://github.com/user/fresh)

Expected:

  • Shows just "Fresh Editor" (no brackets, no URL)
  • Text styled with blue color and underline
  • Image link ![image alt](...) is NOT concealed (stays raw)

Steps:

  1. Move cursor to the "Fresh Editor" link text
  2. Move cursor away

Expected:

  • When cursor enters link span → full [Fresh Editor](https://github.com/user/fresh) syntax revealed
  • When cursor leaves → concealed back to just "Fresh Editor"

T6: Table Grid Rendering (Cursor Away)

Steps:

  1. In compose mode, move cursor away from both tables
  2. Observe table rendering

Expected:

  • Pipe characters | → box-drawing │
  • Separator row |---------|--------|-------| → ├─────────┼────────┼───────┤
  • Header and data rows use │ dividers
  • Table structure looks like a proper grid

T7: Table Cursor-Aware Reveal

Steps:

  1. Move cursor onto a table data row (e.g., the "Alice | 30 | NYC" row)
  2. Observe that row

Expected:

  • The row where cursor sits shows raw | characters
  • Other table rows still show box-drawing characters
  • Moving cursor to different row: previous row conceals, new row reveals

T8: Visual Line Cursor Movement

Steps:

  1. In compose mode, navigate to the long paragraph in "## Wrapping Test"
  2. Position cursor at start of the wrapped paragraph
  3. Press Down arrow repeatedly

Expected:

  • Cursor moves to the next VISUAL line (not jumping to the next logical line)
  • Each Down press moves through the visual wrapped lines
  • Up arrow works symmetrically
  • Cursor column position is maintained (or adjusted to line length)

T9: Multi-Cursor Conceal

Steps:

  1. In compose mode, place cursor on a bold span
  2. Add a second cursor (if multi-cursor is supported, e.g., Ctrl+D or similar)
  3. Place second cursor on a link span

Expected:

  • Both the bold span (where cursor 1 is) and the link span (where cursor 2 is) show raw syntax
  • Other spans remain concealed
  • (If multi-cursor isn't easily accessible, skip this test)

T10: Soft Wrapping and Hanging Indents

Steps:

  1. In compose mode, look at the long bullet items in "## List with Long Text"
  2. Observe wrapping behavior

Expected:

  • Long list items wrap at ~80 chars
  • Continuation lines are indented to align with the text after the bullet marker (hanging indent)
  • Block quote text wraps with proper continuation indent
  • Code blocks do NOT wrap (displayed as-is)
  • Table rows do NOT wrap

Results (2026-02-12)

TestResultNotes
T1: Compose togglePASSLine numbers hide, text reflows, status bar shows "ON"
T2: Emphasis concealmentPASSAll 5 types work (bold, italic, code, strikethrough, bold-italic)
T3: Emphasis cursor revealPASS** markers appear on cursor entry, hide on exit
T4: Link concealmentPASS[text](url) → styled "text"; ![img]() unaffected
T5: Link cursor revealPASSFull [text](url) syntax shown when cursor in link
T6: Table grid renderingPASS│, ├──┼──┤ box-drawing, proper corners
T7: Table cursor revealPASSRaw pipes on cursor row, box-drawing on others
T8: Visual line movementPASSDown: Col 1→79→160→236→next line. Up: reverse
T9: Multi-cursor concealSKIPNot manually tested (API supports it)
T10: Wrapping/hanging indentPASSLists: 2-space hanging indent, code: no wrap

Editing Tests

TestResultNotes
T11: Edit emphasis textPASSTyped "VERY " inside **bold text** → **VERY bold text**
T12: Edit link textPASSTyped " v2" inside link → [Fresh v2 Editor](url) preserved
T13: Edit table cellPASSTyped "X" after "Alice" → `
T14: Edit wrapped paragraphPASSTyped at start → text reflows, wrapping adjusts correctly

Bugs Found During Testing

  1. Render glitch on scroll: Briefly shows raw markdown before plugin transform renders
  2. Cursor/overlay flicker while typing: Highlights momentarily jump (off-by-one frame lag)
  3. Mouse wheel scroll: Does not work in compose mode
  4. Table columns not aligned: No auto-padding to equal column widths