termcast 1.3.10 → 1.3.16

package/src/examples/simple-grid.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/simple-grid.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-grid.tsx'],
     cols: 70,
-    rows: 50,
+    rows: 25,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('grid navigation and display', async () => {
-  const initialSnapshot = await driver.text({
+  const initialSnapshot = await session.text({
     waitFor: (text) => {
       // wait for grid to show up with all sections and items
       return (
@@ -32,14 +33,14 @@ test('grid navigation and display', async () => {
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-    ›Apple
-     Banana
+     Fruits                                                          ▲
+    ›Apple                                                           █
+     Banana                                                          █
      Cherry
 
      Animals
@@ -50,30 +51,27 @@ test('grid navigation and display', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ 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(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-     Apple
-    ›Banana
+     Fruits                                                          ▲
+     Apple                                                           █
+    ›Banana                                                          █
      Cherry
 
      Animals
@@ -84,31 +82,28 @@ test('grid navigation and display', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Navigate right to Animals section
-  await driver.keys.down()
-  await driver.keys.down()
+  await session.press('down')
+  await session.press('down')
 
-  const animalsSnapshot = await driver.text()
+  const animalsSnapshot = await session.text()
   expect(animalsSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-     Apple
-     Banana
+     Fruits                                                          ▲
+     Apple                                                           █
+     Banana                                                          █
      Cherry
 
      Animals
@@ -119,64 +114,60 @@ test('grid navigation and display', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Open actions with ctrl+k
-  await driver.keys.ctrlK()
+  await session.press(['ctrl', 'k'])
 
-  const actionsSnapshot = await driver.text()
+  const actionsSnapshot = await session.text()
   expect(actionsSnapshot).toMatchInlineSnapshot(`
     "
 
-    Simple Grid Example ────────────────────────────────────────────
-
-    Search items...
-
-
-    Fruits
-    Apple
-    Banana
-    Cherry
-
-
-                                                                esc
-
-     Search actions...
-    ›Show Details
-     Copy Emoji                                                  ⌃C
-
-
-     ↵ select   ↑↓ navigate
-
-    Moon
-    Sun
 
-
-    ↵ select   ↑↓ navigate   ^k actions"
+      Simple Grid Example ────────────────────────────────────────────
+
+      Search items...
+
+      Fruits                                                          ▲
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Show Details                                                   ┃
+    ┃   Copy Emoji                                               ⌃C    ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Close actions with escape
-  await driver.keys.escape()
+  await session.press('esc')
 
-  const afterEscapeSnapshot = await driver.text()
+  const afterEscapeSnapshot = await session.text()
   expect(afterEscapeSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-     Apple
-     Banana
+     Fruits                                                          ▲
+     Apple                                                           █
+     Banana                                                          █
      Cherry
 
      Animals
@@ -187,18 +178,15 @@ test('grid navigation and display', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 }, 15000)
 
 test('grid search functionality', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for grid to show up
       return /Simple Grid Example/i.test(text)
@@ -206,9 +194,9 @@ test('grid search functionality', async () => {
   })
 
   // Search for "cat"
-  await driver.keys.type('cat')
+  await session.type('cat')
 
-  const searchCatSnapshot = await driver.text({
+  const searchCatSnapshot = await session.text({
     waitFor: (text) => {
       return /cat/i.test(text)
     },
@@ -216,23 +204,37 @@ test('grid search functionality', async () => {
   expect(searchCatSnapshot).toMatchInlineSnapshot(`
     "
 
+
     Simple Grid Example ────────────────────────────────────────────
 
     cat
 
+
     Cat
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+
+
+    ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Clear search and search for "space"
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.type('space')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.type('space')
 
-  const searchSpaceSnapshot = await driver.text({
+  const searchSpaceSnapshot = await session.text({
     waitFor: (text) => {
       return /space/i.test(text)
     },
@@ -240,38 +242,49 @@ test('grid search functionality', async () => {
   expect(searchSpaceSnapshot).toMatchInlineSnapshot(`
     "
 
+
     Simple Grid Example ────────────────────────────────────────────
 
     space
 
+
+
     Rocket
     Star
     Moon
     Sun
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+    ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Clear search completely
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
 
-  const clearedSearchSnapshot = await driver.text()
+  const clearedSearchSnapshot = await session.text()
   expect(clearedSearchSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-    ›Apple
-     Banana
+     Fruits                                                          ▲
+    ›Apple                                                           █
+     Banana                                                          █
      Cherry
 
      Animals
@@ -282,19 +295,16 @@ test('grid search functionality', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Search for something that doesn't exist
-  await driver.keys.type('xyz123')
+  await session.type('xyz123')
 
-  const noResultsSnapshot = await driver.text({
+  const noResultsSnapshot = await session.text({
     waitFor: (text) => {
       return /xyz123/i.test(text)
     },
@@ -302,107 +312,120 @@ test('grid search functionality', async () => {
   expect(noResultsSnapshot).toMatchInlineSnapshot(`
     "
 
+
     Simple Grid Example ────────────────────────────────────────────
 
     xyz123
 
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
-  `)
-}, 10000)
 
-test('grid item selection and actions', async () => {
-  await driver.text({
-    waitFor: (text) => {
-      // wait for grid to show up
-      return /Simple Grid Example/i.test(text)
-    },
-  })
 
-  // Select first item and open actions
-  await driver.keys.enter()
 
-  const firstItemActionsSnapshot = await driver.text()
-  expect(firstItemActionsSnapshot).toMatchInlineSnapshot(`
-    "
 
-     Simple Grid Example ────────────────────────────────────────────
-
-     Search items...
 
 
-     Fruits
-    ›Apple
-     Banana
-     Cherry
 
 
-                                                                 esc
 
-      Search actions...
-     ›Show Details
-      Copy Emoji                                                  ⌃C
 
 
-      ↵ select   ↑↓ navigate
 
-     Moon
-     Sun
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+    ↵ select  ↑↓ navigate  ^k actions"
   `)
+}, 10000)
 
-  // Navigate down in actions
-  await driver.keys.down()
-
-  const secondActionSnapshot = await driver.text()
-  expect(secondActionSnapshot).toMatchInlineSnapshot(`
-    "
-
-     Simple Grid Example ────────────────────────────────────────────
-
-     Search items...
-
-
-     Fruits
-    ›Apple
-     Banana
-     Cherry
+test('grid item selection and actions', async () => {
+  await session.text({
+    waitFor: (text) => {
+      // wait for grid to show up
+      return /Simple Grid Example/i.test(text)
+    },
+  })
 
+  // Select first item and open actions
+  await session.press('enter')
 
-                                                                 esc
+  const firstItemActionsSnapshot = await session.text()
+  expect(firstItemActionsSnapshot).toMatchInlineSnapshot(`
+    "
 
-      Search actions...
-      Show Details
-     ›Copy Emoji                                                  ⌃C
 
+      Simple Grid Example ────────────────────────────────────────────
+
+      Search items...
+
+      Fruits                                                          ▲
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Show Details                                                   ┃
+    ┃   Copy Emoji                                               ⌃C    ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
+  `)
 
-      ↵ select   ↑↓ navigate
+  // Navigate down in actions
+  await session.press('down')
 
-     Moon
-     Sun
+  const secondActionSnapshot = await session.text()
+  expect(secondActionSnapshot).toMatchInlineSnapshot(`
+    "
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+      Simple Grid Example ────────────────────────────────────────────
+
+      Search items...
+
+      Fruits                                                          ▲
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃   Show Details                                                   ┃
+    ┃  ›Copy Emoji                                               ⌃C    ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Select "Copy Emoji" action
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const afterCopySnapshot = await driver.text()
+  const afterCopySnapshot = await session.text()
   expect(afterCopySnapshot).toMatchInlineSnapshot(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-    ›Apple
-     Banana
+     Fruits                                                          ▲
+    ›Apple                                                           █
+     Banana                                                          █
      Cherry
 
      Animals
@@ -413,18 +436,15 @@ test('grid item selection and actions', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 }, 10000)
 
 test('grid mouse interaction', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for grid to show up
       return /Simple Grid Example/i.test(text)
@@ -432,20 +452,20 @@ test('grid mouse interaction', async () => {
   })
 
   // Click on "Dog" item
-  await driver.clickText('Dog')
+  await session.click('Dog', { first: true })
 
-  const afterClickDogSnapshot = await driver.text()
+  const afterClickDogSnapshot = await session.text()
   expect(afterClickDogSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Simple Grid Example ────────────────────────────────────────────
 
      Search items...
 
-
-     Fruits
-     Apple
-     Banana
+     Fruits                                                          ▲
+     Apple                                                           █
+     Banana                                                          █
      Cherry
 
      Animals
@@ -456,80 +476,84 @@ test('grid mouse interaction', async () => {
      Others
      House
      Car
-     Rocket
-     Star
-     Moon
-     Sun
+     Rocket                                                          ▼
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
-  // Click on "Star" item
-  await driver.clickText('Star')
+  // Navigate down to make "Star" visible (it's below Rocket in Others section)
+  // Star is not visible with rows: 25 initially, so we need to scroll/navigate to it
+  await session.press('down') // Cat
+  await session.press('down') // Rabbit
+  await session.press('down') // House
+  await session.press('down') // Car
+  await session.press('down') // Rocket
+  await session.press('down') // Star (now visible)
 
-  const afterClickStarSnapshot = await driver.text()
+  // Click on "Star" item (now visible after navigation)
+  await session.click('Star', { first: true })
+
+  const afterClickStarSnapshot = await session.text()
   expect(afterClickStarSnapshot).toMatchInlineSnapshot(`
     "
 
-     Simple Grid Example ────────────────────────────────────────────
 
-     Search items...
-
-
-     Fruits
-     Apple
-     Banana
-     Cherry
-
-     Animals
-     Dog
-     Cat
-     Rabbit
-
-     Others
-     House
-     Car
-     Rocket
-    ›Star
-     Moon
-     Sun
-
-
-     ↵ select   ↑↓ navigate   ^k actions"
+      Simple Grid Example ────────────────────────────────────────────
+
+      Search items...
+
+      Apple                                                           ▲
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Show Details                                                   ┃
+    ┃   Copy Emoji                                               ⌃C    ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Click on "Apple" to go back to first section
-  await driver.clickText('Apple')
+  await session.click('Apple', { first: true })
 
-  const afterClickAppleSnapshot = await driver.text()
+  const afterClickAppleSnapshot = await session.text()
   expect(afterClickAppleSnapshot).toMatchInlineSnapshot(`
     "
 
-     Simple Grid Example ────────────────────────────────────────────
-
-     Search items...
-
-
-     Fruits
-    ›Apple
-     Banana
-     Cherry
-
-     Animals
-     Dog
-     Cat
-     Rabbit
-
-     Others
-     House
-     Car
-     Rocket
-     Star
-     Moon
-     Sun
-
 
-     ↵ select   ↑↓ navigate   ^k actions"
+      Simple Grid Example ────────────────────────────────────────────
+
+      Search items...
+
+      Apple                                                           ▲
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Show Details                                                   ┃
+    ┃   Copy Emoji                                               ⌃C    ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 }, 10000)