Skip to content

SelectAutocomplete.test.md

Latest commit

 

History

History
525 lines (412 loc) · 6.99 KB

SelectAutocomplete.test.md

File metadata and controls

525 lines (412 loc) · 6.99 KB
kind test
component SelectAutocomplete
version 1

SelectAutocomplete Tests

renders items with search input and first highlighted

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
  - { label: "Gamma", value: "c" }
searchPlaceholder: "Search..."
 Search...
❯ Alpha
  Beta
  Gamma
↑↓ to navigate · Enter to select

typing filters items with fuzzy match

items:
  - { label: "JavaScript", value: "js" }
  - { label: "TypeScript", value: "ts" }
  - { label: "Python", value: "py" }
fuzzy: true
"sc"

sc
❯ JavaScript
  TypeScript
↑↓ to navigate · Enter to select

typing filters items with substring match

items:
  - { label: "JavaScript", value: "js" }
  - { label: "TypeScript", value: "ts" }
  - { label: "Python", value: "py" }
fuzzy: false
"Script"

Script
❯ JavaScript
  TypeScript
↑↓ to navigate · Enter to select

shows no-results message when search matches nothing

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
"xyz"

xyz
No matches for "xyz"
↑↓ to navigate · Enter to select

escape item remains visible when all items filtered out

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
escapeItem: { label: "Cancel", value: "cancel" }
"xyz"

xyz
No matches for "xyz"
❯ Cancel (Esc)
↑↓ to navigate · Enter to select · Esc to cancel

moves highlight down with wrapping

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
↓ ↓ ↓

 Type to filter...
  Alpha
❯ Beta
↑↓ to navigate · Enter to select

moves highlight up with wrapping

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
↑

 Type to filter...
  Alpha
❯ Beta
↑↓ to navigate · Enter to select

selects item on Enter

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
↓ enter

after: selected
selected_value: "b"

enter is no-op when list is empty

items:
  - { label: "Alpha", value: "a" }
"zzz" enter

zzz
No matches for "zzz"
↑↓ to navigate · Enter to select

escape clears search on first press

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
"test" escape

 Type to filter...
❯ Alpha
  Beta
↑↓ to navigate · Enter to select

escape closes on second press when search already empty

items:
  - { label: "Alpha", value: "a" }
onEscape: callback
escape

after: dismissed
callback_fired: onEscape

escape selects escapeItem when provided

items:
  - { label: "Alpha", value: "a" }
escapeItem: { label: "Cancel", value: "cancel" }
escape

after: dismissed
selected_value: "cancel"

ctrl+g behaves like escape

items:
  - { label: "Alpha", value: "a" }
onEscape: callback
ctrl+g

after: dismissed
callback_fired: onEscape

two-stage escape: clear then close

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
escapeItem: { label: "Cancel", value: "cancel" }
"test"

test
No matches for "test"
❯ Cancel (Esc)
↑↓ to navigate · Enter to select · Esc to cancel

escape

 Type to filter...
❯ Alpha
  Beta
  Cancel (Esc)
↑↓ to navigate · Enter to select · Esc to cancel

escape

after: dismissed
selected_value: "cancel"

backspace removes last character from search

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
"abc" backspace

ab
❯ Alpha
  Beta
↑↓ to navigate · Enter to select

shows current indicator on marked item

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b", current: true }
 Type to filter...
❯ Alpha
  Beta ✓
↑↓ to navigate · Enter to select

appends escape item with Esc suffix

items:
  - { label: "Alpha", value: "a" }
escapeItem: { label: "Cancel", value: "cancel" }
 Type to filter...
❯ Alpha
  Cancel (Esc)
↑↓ to navigate · Enter to select · Esc to cancel

highlight resets to first item after filter change

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
  - { label: "Gamma", value: "c" }
↓ ↓

 Type to filter...
  Alpha
  Beta
❯ Gamma
↑↓ to navigate · Enter to select

"Al"

Al
❯ Alpha
↑↓ to navigate · Enter to select

left arrow fires onLeftArrow

items:
  - { label: "Alpha", value: "a" }
onLeftArrow: callback
←

callback_fired: onLeftArrow

right arrow fires onRightArrow

items:
  - { label: "Alpha", value: "a" }
onRightArrow: callback
→

callback_fired: onRightArrow

hides HintBar when hideHints is true

items:
  - { label: "Alpha", value: "a" }
hideHints: true
 Type to filter...
❯ Alpha

shows additional and extra hints in HintBar

items:
  - { label: "Alpha", value: "a" }
additionalHints: { "←→": "to switch tabs" }
 Type to filter...
❯ Alpha
↑↓ to navigate · ←→ to switch tabs · Enter to select

Style assertions

highlighted item uses selected color

items:
  - { label: "Alpha", value: "a" }
  - { label: "Beta", value: "b" }
- selector: indicator(0)
  icon: iconPrompt
  color: selected
- selector: item(0)
  color: selected
- selector: item(1)
  color: null

current item uses statusSuccess color

items:
  - { label: "Alpha", value: "a", current: true }
- selector: item(0)
  contains: "✓"
  color: statusSuccess
- selector: indicator(0)
  color: statusSuccess

search placeholder uses textTertiary

items:
  - { label: "Alpha", value: "a" }
searchPlaceholder: "Filter..."
- selector: component("SearchInput")
  placeholder_color: textTertiary

escape item suffix uses textSecondary

items:
  - { label: "Alpha", value: "a" }
escapeItem: { label: "Cancel", value: "cancel" }
- selector: item(1)
  contains: "(Esc)"
  color: textSecondary

no-results message uses textSecondary

items:
  - { label: "Alpha", value: "a" }
"zzz"

- selector: label("No matches")
  color: textSecondary

Accessibility assertions

screen reader replaces check glyph with text

items:
  - { label: "Beta", value: "b", current: true }
screen_reader: true
 Type to filter...
❯ Beta (current)
↑↓ to navigate · Enter to select