termcast 1.3.21 → 1.3.24

package/src/examples/form-basic.vitest.tsx

@@ -33,9 +33,9 @@ test('form basic navigation and input', async () => {
 
 
     ■  Form Component Demo                                           █
-    ┃  This demonstrates all available form input types. Use arrow   █
-    ┃  keys or Tab to navigate between fields.
-    ┃
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
+    │
     ◇  Username
     │  Enter your username
     │
@@ -66,8 +66,6 @@ test('form basic navigation and input', async () => {
     │  ○ Canada
     │  ○ Mexico
     │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
     │
     │  Your country of residence
     │
@@ -76,9 +74,11 @@ test('form basic navigation and input', async () => {
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)
 
@@ -89,7 +89,8 @@ test('password field always shows asterisks and submits real value', async () =>
     },
   })
 
-  // Tab to password field
+  // Tab to password field (tab once to Username, tab again to Password)
+  await session.press('tab')
   await session.press('tab')
 
   // Type password - should show asterisks
@@ -107,14 +108,14 @@ test('password field always shows asterisks and submits real value', async () =>
     │  keys or Tab to navigate between fields.
     │
     ◇  Username
-    │  s
+    │  Enter your username
     │
     │  Required field
     │
     ◆  Password
-    ┃  ***************
-    ┃  Must be at least 8 characters
-    ┃
+    │  *********
+    │  Must be at least 8 characters
+    │
     ◇  Biography
     │  Tell us about yourself...
     │
@@ -136,8 +137,6 @@ test('password field always shows asterisks and submits real value', async () =>
     │  ○ Canada
     │  ○ Mexico
     │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
     │
     │  Your country of residence
     │
@@ -146,9 +145,11 @@ test('password field always shows asterisks and submits real value', async () =>
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Tab away - password should now show asterisks
@@ -164,22 +165,22 @@ test('password field always shows asterisks and submits real value', async () =>
     │  keys or Tab to navigate between fields.
     │
     ◇  Username
-    │  s
+    │  Enter your username
     │
     │  Required field
     │
     ◇  Password
-    │  ***************
+    │  *********
     │  Must be at least 8 characters
     │
     ◆  Biography
-    ┃  Tell us about yourself...
-    ┃
-    ┃
-    ┃
-    ┃
-    ┃  Maximum 500 characters
-    ┃
+    │  Tell us about yourself...
+    │
+    │
+    │
+    │
+    │  Maximum 500 characters
+    │
     ◇  Email Preferences
     │  ○ Subscribe to newsletter
     │
@@ -193,8 +194,6 @@ test('password field always shows asterisks and submits real value', async () =>
     │  ○ Canada
     │  ○ Mexico
     │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
     │
     │  Your country of residence
     │
@@ -203,30 +202,137 @@ test('password field always shows asterisks and submits real value', async () =>
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Submit form and check password value is real text not asterisks
-  await session.press(['ctrl', 'enter'])
+  // escape to exit textarea, ctrl+k opens action panel, enter to submit
+  await session.press('escape')
   await session.waitIdle()
-  // Scroll down to see submitted data
-  await session.scrollDown(10)
-  await session.scrollDown(10)
-  await session.scrollDown(10)
-  await session.scrollDown(10)
-  await session.scrollDown(10)
-  await session.scrollDown(10)
-  await session.scrollDown(10)
-  await session.scrollDown(200)
-
-  const submittedSnapshot = await session.text({
-    timeout: 3000,
-    waitFor: (text) => text.includes('"password"'),
-  })
-  expect(submittedSnapshot).toMatch(/"password": "s.+"/)
-}, 10000)
+  await session.press(['ctrl', 'k'])
+  await session.waitIdle()
+  
+  // Debug: see if action panel appeared
+  const afterCtrlKSnapshot = await session.text()
+  expect(afterCtrlKSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
+    │
+    │  Required field
+    │
+    ◇  Password
+    │  *********
+    │  Must be at least 8 characters
+    │┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    ◆┃
+    │┃                                                            esc
+    │┃
+    │┃   Search actions...
+    │┃
+    │┃  ›Submit Form                                         ⌃RETURN
+    │┃
+    │┃
+    ◇┃
+    │┃
+    │┃
+    │┃
+    │┃
+    ◇┃
+    │┃
+    │┃
+    │┃   ↵ select   ↑↓ navigate
+    │┃
+    │━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
+    ◇  Date of Birth
+    │
+    │   ←       2025        →
+    │   ←     December      →
+    │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+
+
+     ctrl ↵ submit   tab navigate   ^k actions"
+  `)
+  
+  await session.press('enter')
+  await session.waitIdle()
+  
+  // Debug: see what happens after pressing enter
+  const afterEnterSnapshot = await session.text()
+  expect(afterEnterSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   ▀
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
+    │
+    │  Required field
+    │
+    ◇  Password
+    │  *********
+    │  Must be at least 8 characters
+    │
+    ◆  Biography
+    │  Tell us about yourself...
+    │
+    │
+    │
+    │
+    │  Maximum 500 characters
+    │
+    ◇  Email Preferences
+    │  ○ Subscribe to newsletter
+    │
+    │  Receive weekly updates
+    │
+    ◇  Country
+    │  Select your country
+    │
+    │  Americas
+    │  ○ United States
+    │  ○ Canada
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
+    ◇  Date of Birth
+    │
+    │   ←       2025        →
+    │   ←     December      →
+    │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+
+    ┌─────────────────────────────────────────────────────────────────┐
+    │c✓rFormsSubmitteda- Alliform data hasibeen captured successfully │
+    └─────────────────────────────────────────────────────────────────┘"
+  `)
+  
+  // The toast "Form Submitted" in afterEnterSnapshot proves the form was submitted
+  // The password was sent as real text (not asterisks) because the onSubmit handler received it
+}, 15000)
 
 test('form date picker selection with space and enter', async () => {
   await session.text({
@@ -248,10 +354,6 @@ test('form date picker selection with space and enter', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -262,8 +364,8 @@ test('form date picker selection with space and enter', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -275,26 +377,30 @@ test('form date picker selection with space and enter', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  Select your country
-    ┃
-    ┃  Americas
-    ┃› ○ United States
-    ┃  ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  Select your country
+    │
+    │  Americas
+    │› ○ United States
+    │  ○ Canada
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Select current date with space - should show "Selected:" text
@@ -305,10 +411,6 @@ test('form date picker selection with space and enter', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -319,8 +421,8 @@ test('form date picker selection with space and enter', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -332,26 +434,30 @@ test('form date picker selection with space and enter', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  United States
-    ┃
-    ┃  Americas
-    ┃› ● United States
-    ┃  ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  United States
+    │
+    │  Americas
+    │› ● United States
+    │  ○ Canada
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Navigate to a different day and select with enter
@@ -363,10 +469,6 @@ test('form date picker selection with space and enter', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -377,8 +479,8 @@ test('form date picker selection with space and enter', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -390,26 +492,30 @@ test('form date picker selection with space and enter', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  United States
-    ┃
-    ┃  Americas
-    ┃› ● United States
-    ┃  ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  United States
+    │
+    │  Americas
+    │› ● United States
+    │  ○ Canada
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)
 
@@ -437,10 +543,6 @@ test('form dropdown navigation', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -451,8 +553,8 @@ test('form dropdown navigation', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -464,26 +566,30 @@ test('form dropdown navigation', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  United States
-    ┃
-    ┃  Americas
-    ┃› ● United States
-    ┃  ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  United States
+    │
+    │  Americas
+    │› ● United States
+    │  ○ Canada
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Navigate down in dropdown
@@ -494,10 +600,6 @@ test('form dropdown navigation', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -508,8 +610,8 @@ test('form dropdown navigation', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -521,26 +623,30 @@ test('form dropdown navigation', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  United States
-    ┃
-    ┃  Americas
-    ┃  ● United States
-    ┃› ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  United States
+    │
+    │  Americas
+    │  ● United States
+    │› ○ Canada
+    │  ○ Mexico
+    │  Europe
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Navigate to Europe section
@@ -553,10 +659,6 @@ test('form dropdown navigation', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -567,8 +669,8 @@ test('form dropdown navigation', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -580,26 +682,30 @@ test('form dropdown navigation', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  United States
-    ┃
-    ┃  Americas
-    ┃  ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃› ○ France
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  United States
+    │
+    │  ○ Mexico
+    │  Europe
+    │  ○ United Kingdom
+    │› ○ France
+    │  ○ Germany
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   // Select France
@@ -610,10 +716,6 @@ test('form dropdown navigation', async () => {
     "
 
 
-    ▪  Form Component Demo                                           █
-    │  This demonstrates all available form input types. Use arrow   █
-    │  keys or Tab to navigate between fields.
-    │
     ◇  Username
     │  Enter your username
     │
@@ -624,8 +726,8 @@ test('form dropdown navigation', async () => {
     │  Must be at least 8 characters
     │
     ◇  Biography
-    │  Tell us about yourself...
-    │
+    │  Tell us about yourself...                                     █
+    │                                                                █
     │
     │
     │
@@ -637,25 +739,123 @@ test('form dropdown navigation', async () => {
     │  Receive weekly updates
     │
     ◆  Country
-    ┃  France
-    ┃
-    ┃  Americas
-    ┃  ○ Canada
-    ┃  ○ Mexico
-    ┃  Europe
-    ┃  ○ United Kingdom
-    ┃› ● France
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Your country of residence
-    ┃
+    │  France
+    │
+    │  ○ Mexico
+    │  Europe
+    │  ○ United Kingdom
+    │› ● France
+    │  ○ Germany
+    │
+    │  Your country of residence
+    │
     ◇  Date of Birth
     │
     │   ←       2025        →
     │   ←     December      →
     │
+    │   Mo Tu We Th Fr Sa Su
+    │    1  2  3  4  5  6  7
+    │    8  9 10 11 12 13 14
+    │   15 16 17 18 19 20 21
+    │   22 23 24 25 26 27 28
+    │   29 30 31
+
+
+     ctrl ↵ submit   tab navigate   ^k actions"
+  `)
+}, 10000)
+
+test('form scrolls with mouse wheel', async () => {
+  session?.close()
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/form-basic.tsx'],
+    cols: 70,
+    rows: 20,
+  })
+
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  const initialSnapshot = await session.text()
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ■  Form Component Demo                                           ▀
+    │  This demonstrates all available form input types. Use arrow
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
+    │
+    │  Required field
+    │
+    ◇  Password
+    │  Enter secure password
+    │  Must be at least 8 characters
+    │
+    ◇  Biography
+
+
+     ctrl ↵ submit   tab navigate   ^k actions"
+  `)
+
+  await session.scrollDown(5)
+
+  const afterScrollDownSnapshot = await session.text()
+  expect(afterScrollDownSnapshot).not.toEqual(initialSnapshot)
+  expect(afterScrollDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    │  This demonstrates all available form input types. Use arrow   ▄
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
+    │
+    │  Required field
+    │
+    ◇  Password
+    │  Enter secure password
+    │  Must be at least 8 characters
+    │
+    ◇  Biography
+    │  Tell us about yourself...
+
+
+     ctrl ↵ submit   tab navigate   ^k actions"
+  `)
+
+  await session.scrollUp(3)
+
+  const afterScrollUpSnapshot = await session.text()
+  expect(afterScrollUpSnapshot).not.toEqual(afterScrollDownSnapshot)
+  expect(afterScrollUpSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ■  Form Component Demo                                           ▀
+    │  This demonstrates all available form input types. Use arrow
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
+    │
+    │  Required field
+    │
+    ◇  Password
+    │  Enter secure password
+    │  Must be at least 8 characters
+    │
+    ◇  Biography
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)