termcast 1.3.10 → 1.3.18

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

@@ -1,22 +1,23 @@
-// node-pty does not work in bun, so we use vitest to run this test
 import { test, expect, afterEach, beforeEach } from 'vitest'
-import { NodeTuiDriver } from 'termcast/src/e2e-node'
+import { launchTerminal, Session } from 'tuistory/src'
 
-let driver: NodeTuiDriver
+let session: Session
 
-beforeEach(() => {
-  driver = new NodeTuiDriver('bun', ['src/examples/form-basic.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/form-basic.tsx'],
     cols: 70,
     rows: 50,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('form basic navigation and input', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for form to show up
       return /Form Component Demo/i.test(text)
@@ -24,17 +25,20 @@ test('form basic navigation and input', async () => {
   })
 
   // Small delay to ensure all form components are rendered
-  await driver.waitIdle()
+  await session.waitIdle()
 
-  const initialSnapshot = await driver.text()
+  const initialSnapshot = await session.text()
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◆  Username
+
+    ■  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
@@ -70,92 +74,47 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-
-  // Type in username field
-  await driver.keys.type('johndoe')
+    │   ←     December      →
+    │
 
-  const afterUsernameSnapshot = await driver.text()
-  expect(afterUsernameSnapshot).toMatchInlineSnapshot(`
-    "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◆  Username
-    │  johndoe
-    │  Required field
-    │
-    ◇  Password
-    │  Enter secure 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
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◇  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
   `)
+}, 10000)
+
+test('password field always shows asterisks and submits real value', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
 
   // Tab to password field
-  await driver.keys.tab()
-  await driver.keys.type('securepass123')
+  await session.press('tab')
+
+  // Type password - should show asterisks
+  await session.type('secret123')
 
-  const afterPasswordSnapshot = await driver.text()
-  expect(afterPasswordSnapshot).toMatchInlineSnapshot(`
+  const passwordTypingSnapshot = await session.text({
+    waitFor: (text) => text.includes('*********'),
+  })
+  expect(passwordTypingSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
     │
     ◇  Username
-    │  johndoe
+    │  s
+    │
     │  Required field
     │
     ◆  Password
-    │  securepass123
-    │  Must be at least 8 characters
-    │
+    ┃  ***************
+    ┃  Must be at least 8 characters
+    ┃
     ◇  Biography
     │  Tell us about yourself...
     │
@@ -185,43 +144,42 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Tab to biography field
-  await driver.keys.tab()
-  await driver.keys.type('I am a software developer')
+  // Tab away - password should now show asterisks
+  await session.press('tab')
 
-  const afterBioSnapshot = await driver.text()
-  expect(afterBioSnapshot).toMatchInlineSnapshot(`
+  const passwordUnfocusedSnapshot = await session.text()
+  expect(passwordUnfocusedSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
     │
     ◇  Username
-    │  johndoe
+    │  s
+    │
     │  Required field
     │
     ◇  Password
-    │  *************
+    │  ***************
     │  Must be at least 8 characters
     │
     ◆  Biography
-    │  I am a software developer
-    │
-    │
-    │
-    │
-    │  Maximum 500 characters
-    │
+    ┃  Tell us about yourself...
+    ┃
+    ┃
+    ┃
+    ┃
+    ┃  Maximum 500 characters
+    ┃
     ◇  Email Preferences
     │  ○ Subscribe to newsletter
     │
@@ -243,340 +201,67 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-
-  // Tab to newsletter checkbox and toggle it
-  await driver.keys.tab()
-  await driver.keys.space()
-
-  const afterCheckboxSnapshot = await driver.text()
-  expect(afterCheckboxSnapshot).toMatchInlineSnapshot(`
-    "
-
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◇  Username
-    │  johndoe
-    │  Required field
-    │
-    ◇  Password
-    │  *************
-    │  Must be at least 8 characters
-    │
-    ◇  Biography
-    │  I am a software developer
-    │
-    │
-    │
-    │
-    │  Maximum 500 characters
-    │
-    ◆  Email Preferences
-    │  ● Subscribe to newsletter
-    │
-    │  Receive weekly updates
-    │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◇  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-
-  // Tab to country dropdown and select United States
-  await driver.keys.tab()
-  await driver.keys.space()
-
-  const afterSelectUSSnapshot = await driver.text()
-  expect(afterSelectUSSnapshot).toMatchInlineSnapshot(`
-    "
-
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◇  Username
-    │  johndoe
-    │  Required field
-    │
-    ◇  Password
-    │  *************
-    │  Must be at least 8 characters
-    │
-    ◇  Biography
-    │  I am a software developer
-    │
-    │
-    │
-    │
-    │  Maximum 500 characters
-    │
-    ◇  Email Preferences
-    │  ● Subscribe to newsletter
-    │
-    │  Receive weekly updates
-    │
-    ◆  Country
-    │  United States
-    │
-    │  Americas
-    │› ● United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◇  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-
-  // Select United States
-  await driver.keys.enter()
-
-  const afterCountrySelectSnapshot = await driver.text()
-  expect(afterCountrySelectSnapshot).toMatchInlineSnapshot(`
-    "
-
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◇  Username
-    │  johndoe
-    │  Required field
-    │
-    ◇  Password
-    │  *************
-    │  Must be at least 8 characters
-    │
-    ◇  Biography
-    │  I am a software developer
-    │
-    │
-    │
-    │
-    │  Maximum 500 characters
-    │
-    ◇  Email Preferences
-    │  ● Subscribe to newsletter
-    │
-    │  Receive weekly updates
+    │   ←     December      →
     │
-    ◆  Country
-    │  United States
-    │
-    │  Americas
-    │› ● United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◇  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-
-  // Tab to date picker
-  await driver.keys.tab()
-  await driver.keys.type('1990-05-15')
 
-  const afterDateSnapshot = await driver.text()
-  expect(afterDateSnapshot).toMatchInlineSnapshot(`
-    "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◇  Username
-    │  johndoe
-    │  Required field
-    │
-    ◇  Password
-    │  *************
-    │  Must be at least 8 characters
-    │
-    ◇  Biography
-    │  I am a software developer
-    │
-    │
-    │
-    │
-    │  Maximum 500 characters
-    │
-    ◇  Email Preferences
-    │  ● Subscribe to newsletter
-    │
-    │  Receive weekly updates
-    │
-    ◇  Country
-    │  United States
-    │
-    │  Americas
-    │  ● United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◆  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
   `)
 
-  // Submit form with Cmd+Enter
-  await driver.keys.cmdEnter()
-
-  const afterSubmitSnapshot = await driver.text({
-    waitFor: (text) => {
-      // wait for submitted data to show
-      return /Submitted Data:/i.test(text)
-    },
+  // Submit form and check password value is real text not asterisks
+  await session.press(['ctrl', 'enter'])
+  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(afterSubmitSnapshot).toMatchInlineSnapshot(`
-    "
-
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◇  Username
-    │  johndoe
-    │  Required field
-    │
-    ◇  Password
-    │  *************
-    │  Must be at least 8 characters
-    │
-    ◇  Biography
-    │  I am a software developer
-    │
-    │
-    │
-    │
-    │  Maximum 500 characters
-    │
-    ◇  Email Preferences
-    │  ● Subscribe to newsletter
-    │
-    │  Receive weekly updates
-    │
-    ◇  Country
-    │  United States
-    │
-    │  Americas
-    │  ● United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◆  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-}, 15000)
+  expect(submittedSnapshot).toMatch(/"password": "s.+"/)
+}, 10000)
 
-test('form navigation with shift+tab', async () => {
-  await driver.text({
+test('form date picker selection with space and enter', async () => {
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /Form Component Demo/i.test(text)
     },
   })
 
-  // Fill some fields first
-  await driver.keys.type('testuser')
-  await driver.keys.tab()
-  await driver.keys.type('password')
-  await driver.keys.tab()
+  // Navigate to dropdown, then space to select first item which focuses date picker
+  // (This is what the dropdown test does and "Selected:" shows in that case)
+  await session.press('tab') // -> password
+  await session.press('tab') // -> bio
+  await session.press('tab') // -> checkbox
+  await session.press('tab') // -> dropdown
+  await session.press('tab') // -> date picker
 
-  const afterForwardTabSnapshot = await driver.text()
-  expect(afterForwardTabSnapshot).toMatchInlineSnapshot(`
+  const datePickerFocusedSnapshot = await session.text()
+  expect(datePickerFocusedSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
     │
     ◇  Username
-    │  testuser
+    │  Enter your username
+    │
     │  Required field
     │
     ◇  Password
-    │  ********
+    │  Enter secure password
     │  Must be at least 8 characters
     │
-    ◆  Biography
+    ◇  Biography
     │  Tell us about yourself...
     │
     │
@@ -589,105 +274,48 @@ test('form navigation with shift+tab', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
+    ◆  Country
+    ┃  Select your country
+    ┃
+    ┃  Americas
+    ┃› ○ United States
+    ┃  ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
-  `)
-
-  // Navigate backwards with Shift+Tab
-  await driver.keys.shiftTab()
+    │   ←     December      →
+    │
 
-  const afterBackwardTabSnapshot = await driver.text()
-  expect(afterBackwardTabSnapshot).toMatchInlineSnapshot(`
-    "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
-    │
-    ◇  Username
-    │  testuser
-    │  Required field
-    │
-    ◆  Password
-    │  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
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◇  Date of Birth
-    │
-    │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
   `)
 
-  // Go back to username field
-  await driver.keys.shiftTab()
+  // Select current date with space - should show "Selected:" text
+  await session.press('space')
 
-  const backToUsernameSnapshot = await driver.text()
-  expect(backToUsernameSnapshot).toMatchInlineSnapshot(`
+  const afterSpaceSelectSnapshot = await session.text()
+  expect(afterSpaceSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
     │
-    ◆  Username
-    │  testuser
     │  Required field
     │
     ◇  Password
-    │  ********
+    │  Enter secure password
     │  Must be at least 8 characters
     │
     ◇  Biography
@@ -703,49 +331,49 @@ test('form navigation with shift+tab', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
+    ◆  Country
+    ┃  United States
+    ┃
+    ┃  Americas
+    ┃› ● United States
+    ┃  ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Clear and type new username
-  await driver.keys.ctrlA()
-  await driver.keys.type('newuser')
+  // Navigate to a different day and select with enter
+  await session.press('right') // move to next day
+  await session.press('enter')
 
-  const afterEditUsernameSnapshot = await driver.text()
-  expect(afterEditUsernameSnapshot).toMatchInlineSnapshot(`
+  const afterEnterSelectSnapshot = await session.text()
+  expect(afterEnterSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  Form Component Demo                                           █
+    │  This demonstrates all available form input types. Use arrow   █
+    │  keys or Tab to navigate between fields.
+    │
+    ◇  Username
+    │  Enter your username
     │
-    ◆  Username
-    │  testusernewuser
     │  Required field
     │
     ◇  Password
-    │  ********
+    │  Enter secure password
     │  Must be at least 8 characters
     │
     ◇  Biography
@@ -761,35 +389,33 @@ test('form navigation with shift+tab', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
+    ◆  Country
+    ┃  United States
+    ┃
+    ┃  Americas
+    ┃› ● United States
+    ┃  ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 10000)
 
+
 test('form dropdown navigation', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for form to show up
       return /Form Component Demo/i.test(text)
@@ -797,24 +423,27 @@ test('form dropdown navigation', async () => {
   })
 
   // Navigate to dropdown
-  await driver.keys.tab() // username
-  await driver.keys.tab() // password
-  await driver.keys.tab() // bio
-  await driver.keys.tab() // checkbox
-  await driver.keys.tab() // dropdown
+  await session.press('tab') // username
+  await session.press('tab') // password
+  await session.press('tab') // bio
+  await session.press('tab') // checkbox
+  await session.press('tab') // dropdown
 
   // Navigate to dropdown area (already showing inline options)
-  await driver.keys.space()
+  await session.press('space')
 
-  const dropdownFocusedSnapshot = await driver.text()
+  const dropdownFocusedSnapshot = await session.text()
   expect(dropdownFocusedSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  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
@@ -834,44 +463,44 @@ test('form dropdown navigation', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◆  Date of Birth
+    ◆  Country
+    ┃  United States
+    ┃
+    ┃  Americas
+    ┃› ● United States
+    ┃  ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
+    ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
   // Navigate down in dropdown
-  await driver.keys.down()
+  await session.press('down')
 
-  const afterDownSnapshot = await driver.text()
+  const afterDownSnapshot = await session.text()
   expect(afterDownSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  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
@@ -891,46 +520,46 @@ test('form dropdown navigation', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◆  Date of Birth
+    ◆  Country
+    ┃  United States
+    ┃
+    ┃  Americas
+    ┃  ● United States
+    ┃› ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
+    ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
   // Navigate to Europe section
-  await driver.keys.down()
-  await driver.keys.down()
-  await driver.keys.down()
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
 
-  const europeSelectionSnapshot = await driver.text()
+  const europeSelectionSnapshot = await session.text()
   expect(europeSelectionSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  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
@@ -950,44 +579,44 @@ test('form dropdown navigation', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◆  Date of Birth
+    ◆  Country
+    ┃  United States
+    ┃
+    ┃  Americas
+    ┃  ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃› ○ France
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
+    ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
   // Select France
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const afterFranceSelectSnapshot = await driver.text()
+  const afterFranceSelectSnapshot = await session.text()
   expect(afterFranceSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       Form Component Demo
-    │  This demonstrates all available form input types. Use arrow key
+
+    ▪  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
@@ -1007,29 +636,26 @@ test('form dropdown navigation', async () => {
     │
     │  Receive weekly updates
     │
-    ◇  Country
-    │  Select your country
-    │
-    │  Americas
-    │  ○ United States
-    │  ○ Canada
-    │  ○ Mexico
-    │  Europe
-    │  ○ United Kingdom
-    │  ↑↓ to see more options
-    │
-    │  Your country of residence
-    │
-    ◆  Date of Birth
+    ◆  Country
+    ┃  France
+    ┃
+    ┃  Americas
+    ┃  ○ Canada
+    ┃  ○ Mexico
+    ┃  Europe
+    ┃  ○ United Kingdom
+    ┃› ● France
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Your country of residence
+    ┃
+    ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←      October      →
-    │
-    │   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"
+    │   ←     December      →
+    │
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 10000)