termcast 1.3.10 → 1.3.16

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

@@ -1,43 +1,53 @@
-// 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-tagpicker.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/form-tagpicker.tsx'],
     cols: 70,
     rows: 50,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('form tagpicker shows inline options', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /TagPicker Component Demo/i.test(text)
     },
   })
 
-  // Small delay to ensure form components are fully rendered
-  await driver.waitIdle()
+  await session.waitIdle()
 
-  const initialSnapshot = await driver.text()
+  const initialSnapshot = await session.text()
 
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
     │  Choose your favorite sport...
     │
-    │› ○ Basketball
+    │  ○ Basketball
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
@@ -53,27 +63,46 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Select Basketball by pressing space
-  await driver.keys.space()
+  await session.press('space')
 
-  const afterSelectBasketballSnapshot = await driver.text()
+  const afterSelectBasketballSnapshot = await session.text()
   expect(afterSelectBasketballSnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
-    │› ● Basketball
+    │  ○ Basketball
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
@@ -89,28 +118,47 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
-    │  ● Basketball
-    │› ○ Football
+    │  ○ Basketball
+    │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
     │  ↑↓ to see more options
@@ -125,33 +173,52 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
+    │  ○ Basketball
+    │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ○ Golf
-    │› ○ Swimming
     │  ↑↓ to see more options
     │
     │  Select your favorite sport from the list
@@ -164,30 +231,49 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball, Swimming
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
+    │  ○ Basketball
+    │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ○ Golf
-    │› ● Swimming
     │  ↑↓ to see more options
     │
     │  Select your favorite sport from the list
@@ -200,36 +286,54 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 15000)
 
 test('form tagpicker keyboard navigation', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /TagPicker Component Demo/i.test(text)
     },
   })
 
-  // Select Basketball by pressing space
-  await driver.keys.space()
+  await session.press('space')
 
-  const afterSelectSnapshot = await driver.text()
+  const afterSelectSnapshot = await session.text()
   expect(afterSelectSnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
-    │› ● Basketball
+    │  ○ Basketball
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
@@ -245,33 +349,52 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
+    │  ○ Basketball
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │› ○ Golf
     │  ↑↓ to see more options
     │
     │  Select your favorite sport from the list
@@ -284,30 +407,49 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
+    │  ○ Basketball
+    │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ○ Golf
-    │› ○ Swimming
     │  ↑↓ to see more options
     │
     │  Select your favorite sport from the list
@@ -320,30 +462,49 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
+    │  ○ Basketball
+    │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │› ○ Golf
-    │  ○ Swimming
     │  ↑↓ to see more options
     │
     │  Select your favorite sport from the list
@@ -356,30 +517,49 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Escape doesn't close anything since tagpicker is always inline
-  await driver.keys.escape()
+  await session.press('esc')
 
-  const afterEscapeSnapshot = await driver.text()
+  const afterEscapeSnapshot = await session.text()
   expect(afterEscapeSnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
+
+
+
+
+
+
+
+
+
+
+
+    ■  TagPicker Component Demo
+    ┃  Test tag picker with multiple selection support
+    ┃
+    ◇  Favorite Sport
+    │  Choose your favorite sport...
     │
+    │  ○ Basketball
+    │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │› ○ Golf
-    │  ○ Swimming
     │  ↑↓ to see more options
     │
     │  Select your favorite sport from the list
@@ -392,99 +572,144 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 15000)
 
 test('form tagpicker with default value', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for form to show up
       return /TagPicker Component Demo/i.test(text)
     },
   })
 
-  // Navigate to second tagpicker
-  await driver.keys.tab()
+  await session.press('tab')
 
-  const secondTagpickerFocusedSnapshot = await driver.text()
+  const secondTagpickerFocusedSnapshot = await session.text()
   expect(secondTagpickerFocusedSnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
+
+
+
+
+
+
+
+
+
+
+
+    ▪  TagPicker Component Demo
     │  Test tag picker with multiple selection support
     │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ↑↓ to see more options
-    │
-    │  Select your favorite sport from the list
-    │
-    ◆  Country
+    ◆  Favorite Sport
+    ┃  Choose your favorite sport...
+    ┃
+    ┃› ○ Basketball
+    ┃  ○ Football
+    ┃  ○ Tennis
+    ┃  ○ Baseball
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Select your favorite sport from the list
+    ┃
+    ◇  Country
     │  Germany
     │
-    │› ● Germany
+    │  ● Germany
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
-  // Deselect Germany by pressing space (it was selected by default)
-  await driver.keys.space()
+  await session.press('space')
 
-  const afterDeselectGermanySnapshot = await driver.text()
+  const afterDeselectGermanySnapshot = await session.text()
   expect(afterDeselectGermanySnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
+
+
+
+
+
+
+
+
+
+
+
+    ▪  TagPicker Component Demo
     │  Test tag picker with multiple selection support
     │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ↑↓ to see more options
-    │
-    │  Select your favorite sport from the list
-    │
-    ◆  Country
-    │  Select a country
+    ◆  Favorite Sport
+    ┃  Basketball
+    ┃
+    ┃› ● Basketball
+    ┃  ○ Football
+    ┃  ○ Tennis
+    ┃  ○ Baseball
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Select your favorite sport from the list
+    ┃
+    ◇  Country
+    │  Germany
     │
-    │› ○ Germany
+    │  ● Germany
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
-    │
     └
 
 
-     ↵ 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)
     },
@@ -492,32 +717,52 @@ test('form tagpicker with default value', async () => {
   expect(afterSubmitSnapshot).toMatchInlineSnapshot(`
     "
 
-       TagPicker Component Demo
+
+
+
+
+
+
+
+    ▪  TagPicker Component Demo
     │  Test tag picker with multiple selection support
     │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ↑↓ to see more options
-    │
-    │  Select your favorite sport from the list
-    │
-    ◆  Country
-    │  Select a country
+    ◆  Favorite Sport
+    ┃  Choose your favorite sport...
+    ┃
+    ┃› ○ Basketball
+    ┃  ○ Football
+    ┃  ○ Tennis
+    ┃  ○ Baseball
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Select your favorite sport from the list
+    ┃
+    ◇  Country
+    │  Germany
     │
-    │› ○ Germany
+    │  ● Germany
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
     │  ↑↓ to see more options
     │
-    └
+    ▪  Submitted Data
+    │  {
+    │    "sports": [],
+    │    "countries": [
+    │      "ger"
+    │    ]
+    │  }
+    │
+
+
+
+
+
+
 
 
-     ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 15000)