Skip to content

Input.test.md

Latest commit

 

History

History
835 lines (627 loc) · 8.43 KB

Input.test.md

File metadata and controls

835 lines (627 loc) · 8.43 KB
kind test
component Input
version 1

Input Tests — Basic Rendering

renders text value

value: "hello"
onChange: callback
hello

renders empty with cursor

value: ""
onChange: callback
focus: true
showCursor: true
█

renders placeholder when empty

value: ""
placeholder: "Type here..."
onChange: callback
focus: true
showCursor: true
█ype here...

renders placeholder without cursor when unfocused

value: ""
placeholder: "Type here..."
onChange: callback
focus: false
Type here...

renders empty without placeholder or cursor

value: ""
onChange: callback
focus: false
showCursor: false

Input Tests — Placeholder Styling

placeholder uses textTertiary color

value: ""
placeholder: "Search..."
onChange: callback
focus: false
- selector: label("Search...")
  color: textTertiary

placeholder partial text uses textTertiary after inverse first char

value: ""
placeholder: "Search..."
onChange: callback
focus: true
showCursor: true
- selector: label("earch...")
  color: textTertiary

Input Tests — Cursor Display

shows inverse cursor at position

value: "abc"
onChange: callback
focus: true
showCursor: true
abc█

hides cursor when showCursor is false

value: "abc"
onChange: callback
focus: true
showCursor: false
abc

hides cursor when focus is false

value: "abc"
onChange: callback
focus: false
showCursor: true
abc

Input Tests — Masking

masks all characters

value: "secret"
onChange: callback
mask: "*"
******

masks with cursor

value: "pass"
onChange: callback
mask: "●"
focus: true
showCursor: true
●●●●█

Input Tests — Character Input

inserts character at cursor

value: ""
onChange: callback
focus: true
"a"

value: "a"
callback: onChange("a")

inserts multiple characters sequentially

value: ""
onChange: callback
focus: true
"h" "i"

value: "hi"
callback: onChange("hi")

Input Tests — Backspace and Delete

backspace deletes character before cursor

value: "abc"
onChange: callback
focus: true
backspace

value: "ab"
callback: onChange("ab")

ctrl+h acts as backspace

value: "abc"
onChange: callback
focus: true
ctrl+h

value: "ab"
callback: onChange("ab")

ctrl+d deletes character after cursor

value: "abc"
onChange: callback
focus: true
home ctrl+d

value: "bc"
callback: onChange("bc")

Input Tests — Word Operations

ctrl+w deletes word before cursor

value: "hello world"
onChange: callback
focus: true
ctrl+w

value: "hello "
callback: onChange("hello ")

ctrl+u clears line before cursor

value: "hello world"
onChange: callback
focus: true
ctrl+u

value: ""
callback: onChange("")

ctrl+k clears line after cursor

value: "hello world"
onChange: callback
focus: true
home ctrl+k

value: ""
callback: onChange("")

Input Tests — Cursor Movement

left arrow moves cursor left

value: "abc"
onChange: callback
focus: true
showCursor: true
←

ab█c

right arrow moves cursor right from middle

value: "abc"
onChange: callback
focus: true
showCursor: true
← ← →

ab█c

home moves to start of line

value: "hello"
onChange: callback
focus: true
showCursor: true
home

█ello

end moves to end of line

value: "hello"
onChange: callback
focus: true
showCursor: true
home end

hello█

ctrl+a moves to start of line

value: "hello"
onChange: callback
focus: true
showCursor: true
ctrl+a

█ello

ctrl+e moves to end of line

value: "hello"
onChange: callback
focus: true
showCursor: true
home ctrl+e

hello█

ctrl+b moves left

value: "abc"
onChange: callback
focus: true
showCursor: true
ctrl+b

ab█c

ctrl+f moves right

value: "abc"
onChange: callback
focus: true
showCursor: true
ctrl+b ctrl+f

abc█

alt+left moves one word left

value: "hello world"
onChange: callback
focus: true
showCursor: true
alt+left

hello █orld

alt+right moves one word right

value: "hello world"
onChange: callback
focus: true
showCursor: true
home alt+right

hello█ world

Input Tests — Submission

enter fires onSubmit

value: "done"
onChange: callback
onSubmit: callback
focus: true
enter

callback: onSubmit("done")

backslash-enter inserts newline instead of submitting

value: "line\\"
onChange: callback
onSubmit: callback
focus: true
enter

value: "line\n"
callback: onChange("line\n")

backslash-enter is disabled in singleLine mode

value: "line\\"
onChange: callback
onSubmit: callback
focus: true
singleLine: true
enter

callback: onSubmit("line\\")

Input Tests — Save

ctrl+s fires onSave

value: "text"
onChange: callback
onSave: callback
focus: true
ctrl+s

callback: onSave("text")

Input Tests — Multiline

shift+enter inserts newline

value: "line1"
onChange: callback
focus: true
maxLines: 3
width: 40
shift+enter

value: "line1\n"
callback: onChange("line1\n")

up arrow at first line fires onUpArrow

value: "first\nsecond"
onChange: callback
onUpArrow: callback
focus: true
maxLines: 3
width: 40
ctrl+home ↑

callback: onUpArrow()

down arrow at last line fires onDownArrow

value: "first\nsecond"
onChange: callback
onDownArrow: callback
focus: true
maxLines: 3
width: 40
ctrl+end ↓

callback: onDownArrow()

up arrow navigates within text

value: "first\nsecond"
onChange: callback
focus: true
maxLines: 3
width: 40
showCursor: true
ctrl+end ↑

first█
second

scrolls to keep cursor visible

value: "line1\nline2\nline3\nline4\nline5"
onChange: callback
focus: true
maxLines: 2
width: 40
showCursor: true
ctrl+end

line4
line5█

Input Tests — Single-Line Mode

shift+enter does nothing in singleLine mode

value: "text"
onChange: callback
focus: true
singleLine: true
shift+enter

value: "text"

strips newlines from pasted text in singleLine mode

value: ""
onChange: callback
focus: true
singleLine: true
"line1\nline2"

value: "line1line2"
callback: onChange("line1line2")

Input Tests — Cursor Blink

cursor blinks at configured interval

value: "text"
onChange: callback
focus: true
showCursor: true
cursorBlink: true
cursorBlinkInterval: 530
cursor_visible: true

After 530ms:

cursor_visible: false

After 1060ms:

cursor_visible: true

cursor blink resets when focus changes

value: "text"
onChange: callback
focus: true
showCursor: true
cursorBlink: true
cursor_visible: true

Input Tests — Ignored Keys

tab is ignored and passed to parent

value: "text"
onChange: callback
focus: true
tab

value: "text"

escape is ignored and passed to parent

value: "text"
onChange: callback
focus: true
escape

value: "text"

ctrl+c is ignored and passed to parent

value: "text"
onChange: callback
focus: true
ctrl+c

value: "text"

Input Tests — Imperative Handle

insertText inserts at cursor position

value: "helo"
onChange: callback
focus: true
imperative:insertText("l")

value: "helol"
callback: onChange("helol")