termcast 1.3.10 → 1.3.18

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

@@ -1,40 +1,52 @@
-// 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-dropdown.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/form-dropdown.tsx'],
     cols: 70,
     rows: 50,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('form dropdown shows inline options', async () => {
-  await driver.text({
+  const initialSnapshot = await session.text({
     waitFor: (text) => {
-      // wait for form to show up
-      return /Dropdown Component Demo/i.test(text)
+      return (
+        /Dropdown Component Demo/i.test(text) &&
+        text.includes('Programming Languages') &&
+        text.includes('TypeScript') &&
+        text.includes('Editor Theme') &&
+        text.includes('Task Priority') &&
+        text.includes('Critical') &&
+        text.includes('↵ submit')
+      )
     },
   })
-
-  const initialSnapshot = await driver.text()
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
     │  TypeScript, Rust
     │
     │  Frontend
-    │› ● TypeScript
+    │  ● TypeScript
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
@@ -63,24 +75,33 @@ test('form dropdown shows inline options', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Toggle TypeScript selection by pressing space
-  await driver.keys.space()
+  await session.press('space')
 
-  const afterToggleTypeScriptSnapshot = await driver.text()
+  const afterToggleTypeScriptSnapshot = await session.text()
   expect(afterToggleTypeScriptSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
-    │› ○ TypeScript
+    │  ● TypeScript
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
@@ -109,25 +130,34 @@ test('form dropdown shows inline options', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Navigate down
-  await driver.keys.down()
+  await session.press('down')
 
-  const afterDownSnapshot = await driver.text()
+  const afterDownSnapshot = await session.text()
   expect(afterDownSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
-    │  ○ TypeScript
-    │› ○ JavaScript
+    │  ● TypeScript
+    │  ○ JavaScript
     │  ○ React
     │  ○ Vue
     │  ↑↓ to see more options
@@ -155,31 +185,39 @@ test('form dropdown shows inline options', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Navigate down to see pagination
-  await driver.keys.down()
-  await driver.keys.down()
-  await driver.keys.down()
-  await driver.keys.down()
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
 
-  const afterMultipleDownSnapshot = await driver.text()
+  const afterMultipleDownSnapshot = await session.text()
   expect(afterMultipleDownSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ○ Svelte
-    │  Backend
-    │› ○ Node.js
     │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
@@ -205,28 +243,36 @@ test('form dropdown shows inline options', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Select an item
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const afterSelectSnapshot = await driver.text()
+  const afterSelectSnapshot = await session.text()
   expect(afterSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust, Node.js
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ○ Svelte
-    │  Backend
-    │› ● Node.js
     │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
@@ -252,33 +298,41 @@ test('form dropdown shows inline options', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 10000)
 
 test('form dropdown keyboard navigation', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /Dropdown Component Demo/i.test(text)
     },
   })
 
-  // Toggle TypeScript selection by pressing space
-  await driver.keys.space()
+  await session.press('space')
 
-  const afterToggleSnapshot = await driver.text()
+  const afterToggleSnapshot = await session.text()
   expect(afterToggleSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
-    │› ○ TypeScript
+    │  ● TypeScript
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
@@ -307,30 +361,39 @@ test('form dropdown keyboard navigation', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Navigate to last visible item
-  await driver.keys.down()
-  await driver.keys.down()
-  await driver.keys.down()
-  await driver.keys.down()
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
 
-  const lastVisibleSnapshot = await driver.text()
+  const lastVisibleSnapshot = await session.text()
   expect(lastVisibleSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
+    │  ● TypeScript
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │› ○ Svelte
     │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
@@ -356,28 +419,36 @@ test('form dropdown keyboard navigation', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Navigate to next page
-  await driver.keys.down()
+  await session.press('down')
 
-  const nextPageSnapshot = await driver.text()
+  const nextPageSnapshot = await session.text()
   expect(nextPageSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ○ Svelte
-    │  Backend
-    │› ○ Node.js
     │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
@@ -403,28 +474,36 @@ test('form dropdown keyboard navigation', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Go back up
-  await driver.keys.up()
+  await session.press('up')
 
-  const backToPreviousPageSnapshot = await driver.text()
+  const backToPreviousPageSnapshot = await session.text()
   expect(backToPreviousPageSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │› ○ Svelte
-    │  Backend
-    │  ○ Node.js
     │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
@@ -450,28 +529,36 @@ test('form dropdown keyboard navigation', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Escape doesn't close anything since dropdown is always inline
-  await driver.keys.escape()
+  await session.press('esc')
 
-  const afterEscapeSnapshot = await driver.text()
+  const afterEscapeSnapshot = await session.text()
   expect(afterEscapeSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  Rust
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │› ○ Svelte
-    │  Backend
-    │  ○ Node.js
     │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
@@ -497,44 +584,52 @@ test('form dropdown keyboard navigation', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 10000)
 
 test('form dropdown with default value', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /Dropdown Component Demo/i.test(text)
     },
   })
 
-  // Navigate to second dropdown
-  await driver.keys.tab()
+  await session.press('tab')
 
-  const secondDropdownFocusedSnapshot = await driver.text()
+  const secondDropdownFocusedSnapshot = await session.text()
   expect(secondDropdownFocusedSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◇  Programming Languages
-    │  TypeScript, Rust
-    │
-    │  Frontend
-    │  ● TypeScript
-    │  ○ JavaScript
-    │  ○ React
-    │  ○ Vue
-    │  ↑↓ to see more options
-    │
-    │  Choose your preferred programming languages
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
     │
-    ◆  Editor Theme
+    ◆  Programming Languages
+    ┃  TypeScript, Rust
+    ┃
+    ┃  Frontend
+    ┃› ● TypeScript
+    ┃  ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
     │  Dracula
     │
-    │› ○ Monokai
+    │  ○ Monokai
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
@@ -552,36 +647,45 @@ test('form dropdown with default value', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Toggle Monokai selection by pressing space
-  await driver.keys.space()
+  await session.press('space')
 
-  const afterToggleMonokaiSnapshot = await driver.text()
+  const afterToggleMonokaiSnapshot = await session.text()
   expect(afterToggleMonokaiSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◇  Programming Languages
-    │  TypeScript, Rust
-    │
-    │  Frontend
-    │  ● TypeScript
-    │  ○ JavaScript
-    │  ○ React
-    │  ○ Vue
-    │  ↑↓ to see more options
-    │
-    │  Choose your preferred programming languages
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
     │
-    ◆  Editor Theme
-    │  Monokai
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃› ○ TypeScript
+    ┃  ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
     │
-    │› ● Monokai
-    │  ○ Dracula
+    │  ○ Monokai
+    │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
     │  ↑↓ to see more options
@@ -598,14 +702,17 @@ test('form dropdown with default value', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Submit form
-  await driver.keys.escape()
-  await driver.keys.cmdEnter()
+  await session.press('esc')
+  await session.press(['alt', 'enter'])
 
-  const afterSubmitSnapshot = await driver.text({
+  const afterSubmitSnapshot = await session.text({
     waitFor: (text) => {
       return /Submitted Data/i.test(text)
     },
@@ -613,26 +720,28 @@ test('form dropdown with default value', async () => {
   expect(afterSubmitSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◇  Programming Languages
-    │  TypeScript, Rust
-    │
-    │  Frontend
-    │  ● TypeScript
-    │  ○ JavaScript
-    │  ○ React
-    │  ○ Vue
-    │  ↑↓ to see more options
-    │
-    │  Choose your preferred programming languages
-    │
-    ◆  Editor Theme
-    │  Monokai
+
+    ▪  Dropdown Component Demo                                       █
+    │  Test dropdown with sections, multiple selection, and more     █
+    │  features                                                      █
+    │                                                                █
+    ◆  Programming Languages                                         █
+    ┃  Rust, TypeScript                                              █
+    ┃                                                                █
+    ┃  Frontend                                                      █
+    ┃› ● TypeScript                                                  █
+    ┃  ○ JavaScript                                                  █
+    ┃  ○ React                                                       █
+    ┃  ○ Vue                                                         █
+    ┃  ↑↓ to see more options                                        █
+    ┃                                                                █
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
     │
-    │› ● Monokai
-    │  ○ Dracula
+    │  ○ Monokai
+    │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
     │  ↑↓ to see more options
@@ -646,39 +755,51 @@ test('form dropdown with default value', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
-
-
-     ↵ submit   ↑↓ navigate   ^k actions"
+    ▪  Submitted Data
+    │  {
+    │    "languages": [
+    │      "rust",
+    │      "typescript"
+    │    ],
+    │    "theme": "dracula",
+    │    "priority": ""
+    │  }
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 10000)
 
 test('selecting second-to-last visible item should not scroll', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /Dropdown Component Demo/i.test(text)
     },
   })
 
-  // Navigate down twice to get to Green (second-to-last visible item)
-  await driver.keys.down()
-  await driver.keys.down()
+  await session.press('down')
+  await session.press('down')
 
-  const beforeSelectSnapshot = await driver.text()
+  const beforeSelectSnapshot = await session.text()
   expect(beforeSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
     │  TypeScript, Rust
     │
     │  Frontend
     │  ● TypeScript
     │  ○ JavaScript
-    │› ○ React
+    │  ○ React
     │  ○ Vue
     │  ↑↓ to see more options
     │
@@ -705,26 +826,35 @@ test('selecting second-to-last visible item should not scroll', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Press Enter to select Green
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const afterSelectSnapshot = await driver.text()
+  const afterSelectSnapshot = await session.text()
   expect(afterSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       Dropdown Component Demo
-    │  Test dropdown with sections, multiple selection, and more featu
-    │
-    ◆  Programming Languages
-    │  TypeScript, Rust, React
+
+
+
+
+
+    ■  Dropdown Component Demo
+    ┃  Test dropdown with sections, multiple selection, and more
+    ┃  features
+    ┃
+    ◇  Programming Languages
+    │  TypeScript, Rust
     │
     │  Frontend
     │  ● TypeScript
     │  ○ JavaScript
-    │› ● React
+    │  ○ React
     │  ○ Vue
     │  ↑↓ to see more options
     │
@@ -751,8 +881,10 @@ test('selecting second-to-last visible item should not scroll', async () => {
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
-  `)
 
-  // The window should NOT have scrolled - should still show Red, Blue, Green, Yellow
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+  `)
 }, 10000)