termcast 1.3.9 → 1.3.16

package/src/examples/list-dropdown-default.vitest.tsx

@@ -1,187 +1,252 @@
-// 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/list-dropdown-default.tsx'],
-    {
-      cols: 80,
-      rows: 30,
-    },
-  )
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-dropdown-default.tsx'],
+    cols: 80,
+    rows: 30,
+  })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('dropdown defaults to first item when no value is provided', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
-      // wait for list to show up
       return /Dropdown Default Value Example/i.test(text)
     },
   })
 
-  // Small delay to ensure dropdown is initialized with default value
-  await driver.waitIdle()
+  await session.waitIdle()
 
-  const initialSnapshot = await driver.text()
+  const initialSnapshot = await session.text()
 
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Dropdown Default Value Example ───────────────────────────────────────────
 
 
      Search...                                                          Apple ▾
 
-
     ›First Item This list has a dropdown
      Second Item The dropdown should default to first item
-
      Vegetables
      Carrot With another dropdown
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
-  `)
 
-  // The dropdown should show "Apple" as the default value
-  // since it's the first item and no value/defaultValue was provided
+
+
+
+
+
+
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 }, 10000)
 
 test('dropdown opens and shows items', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       return /Dropdown Default Value Example/i.test(text)
     },
   })
 
-  // Open dropdown with ctrl+p
-  await driver.keys.ctrlP()
+  await session.press(['ctrl', 'p'])
 
-  const dropdownOpenSnapshot = await driver.text()
+  const dropdownOpenSnapshot = await session.text()
   expect(dropdownOpenSnapshot).toMatchInlineSnapshot(`
     "
 
 
-      Filter by category                                                 esc
+     Dropdown Default Value Example ───────────────────────────────────────────
+    ┃                                                                          ┃
+    ┃   Filter by category                                               esc   ┃
+    ┃                                                                          ┃
+    ┃   Select category...                                                     ┃
+    ┃                                                                          ┃
+    ┃  ›Apple                                                                  ┃
+    ┃   Banana                                                                 ┃
+    ┃   Orange                                                                 ┃
+    ┃   Grape                                                                  ┃
+    ┃                                                                          ┃
+    ┃                                                                          ┃
+    ┃   ↵ select   ↑↓ navigate                                                 ┃
+    ┃                                                                          ┃
+
+
+
 
-      Select category...
-     ›Apple
-      Banana
-      Orange
-      Grape
 
 
-      ↵ select   ↑↓ navigate
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
-  // Navigate down to second item
-  await driver.keys.down()
+  await session.press('down')
 
-  const afterDownSnapshot = await driver.text()
+  const afterDownSnapshot = await session.text()
   expect(afterDownSnapshot).toMatchInlineSnapshot(`
     "
 
 
-      Filter by category                                                 esc
+     Dropdown Default Value Example ───────────────────────────────────────────
+    ┃                                                                          ┃
+    ┃   Filter by category                                               esc   ┃
+    ┃                                                                          ┃
+    ┃   Select category...                                                     ┃
+    ┃                                                                          ┃
+    ┃   Apple                                                                  ┃
+    ┃  ›Banana                                                                 ┃
+    ┃   Orange                                                                 ┃
+    ┃   Grape                                                                  ┃
+    ┃                                                                          ┃
+    ┃                                                                          ┃
+    ┃   ↵ select   ↑↓ navigate                                                 ┃
+    ┃                                                                          ┃
+
 
-      Select category...
-      Apple
-     ›Banana
-      Orange
-      Grape
 
 
-      ↵ select   ↑↓ navigate
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
-  // Select the second item
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const afterSelectSnapshot = await driver.text()
+  const afterSelectSnapshot = await session.text()
   expect(afterSelectSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Dropdown Default Value Example ───────────────────────────────────────────
 
 
      Search...                                                         Banana ▾
 
-
     ›First Item This list has a dropdown
      Second Item The dropdown should default to first item
-
      Vegetables
      Carrot With another dropdown
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 }, 10000)
 
 test('clicking dropdown opens it', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       return /Dropdown Default Value Example/i.test(text)
     },
   })
 
-  // Click on the dropdown (it should show "Apple" by default)
-  await driver.clickText('Apple')
+  await session.click('Apple', { first: true })
 
-  const afterClickSnapshot = await driver.text()
+  const afterClickSnapshot = await session.text()
   expect(afterClickSnapshot).toMatchInlineSnapshot(`
     "
 
 
-      Filter by category                                                 esc
+     Dropdown Default Value Example ───────────────────────────────────────────
+    ┃                                                                          ┃
+    ┃   Filter by category                                               esc   ┃
+    ┃                                                                          ┃
+    ┃   Select category...                                                     ┃
+    ┃                                                                          ┃
+    ┃  ›Apple                                                                  ┃
+    ┃   Banana                                                                 ┃
+    ┃   Orange                                                                 ┃
+    ┃   Grape                                                                  ┃
+    ┃                                                                          ┃
+    ┃                                                                          ┃
+    ┃   ↵ select   ↑↓ navigate                                                 ┃
+    ┃                                                                          ┃
+
+
+
+
+
 
-      Select category...
-     ›Apple
-      Banana
-      Orange
-      Grape
 
 
-      ↵ select   ↑↓ navigate
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
-  // Select Orange
-  await driver.clickText('Orange')
+  await session.click('Orange', { first: true })
 
-  const afterSelectOrangeSnapshot = await driver.text()
+  const afterSelectOrangeSnapshot = await session.text()
   expect(afterSelectOrangeSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Dropdown Default Value Example ───────────────────────────────────────────
 
 
      Search...                                                         Orange ▾
 
-
     ›First Item This list has a dropdown
      Second Item The dropdown should default to first item
-
      Vegetables
      Carrot With another dropdown
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 }, 10000)

package/src/examples/list-fetch-data.tsx

@@ -120,4 +120,4 @@ const AllList = () => {
   )
 }
 
-renderWithProviders(<AllList />)
+await renderWithProviders(<AllList />)

package/src/examples/list-fetch-data.vitest.tsx

@@ -1,31 +1,30 @@
 import { test, expect, beforeEach, afterEach } 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/list-fetch-data.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-fetch-data.tsx'],
     cols: 70,
-    rows: 50,
+    rows: 25,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('list shows initial items after fetch', async () => {
-  // Wait for initial loading state
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       return /SVG Library/i.test(text)
     },
   })
 
-  // Wait for items to actually appear
-  const afterFetchSnapshot = await driver.text({
+  const afterFetchSnapshot = await session.text({
     waitFor: (text) => {
-      // Wait until we see at least one section title
       return text.includes('Icons') || text.includes('Home Icon')
     },
     timeout: 2000,
@@ -33,11 +32,11 @@ test('list shows initial items after fetch', async () => {
   expect(afterFetchSnapshot).toMatchInlineSnapshot(`
     "
 
+
      SVG Library ────────────────────────────────────────────────────
 
      Search...
 
-
      Icons
     ›Home Icon Category: Icons
      User Icon Category: Icons
@@ -45,32 +44,30 @@ test('list shows initial items after fetch', async () => {
 
      Illustrations
      Welcome Banner Category: Illustrations
-     Hero Image Category: Illustrations
+     Hero
+
+
+
+
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
-  // Verify that categories and items are displayed
-  expect(afterFetchSnapshot).toContain('Icons')
-  expect(afterFetchSnapshot).toContain('Illustrations')
-  expect(afterFetchSnapshot).toContain('Home Icon')
-  expect(afterFetchSnapshot).toContain('User Icon')
-  expect(afterFetchSnapshot).toContain('Settings Icon')
-  expect(afterFetchSnapshot).toContain('Welcome Banner')
-  expect(afterFetchSnapshot).toContain('Hero Image')
-
-  // Test navigation
-  await driver.keys.down()
-  const afterDownSnapshot = await driver.text()
+
+
+  await session.press('down')
+  const afterDownSnapshot = await session.text()
   expect(afterDownSnapshot).toMatchInlineSnapshot(`
     "
 
+
      SVG Library ────────────────────────────────────────────────────
 
      Search...
 
-
      Icons
      Home Icon Category: Icons
     ›User Icon Category: Icons
@@ -81,20 +78,26 @@ test('list shows initial items after fetch', async () => {
      Hero Image Category: Illustrations
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
-  await driver.keys.down()
-  await driver.keys.down()
-  const afterThreeDownsSnapshot = await driver.text()
+  await session.press('down')
+  await session.press('down')
+  const afterThreeDownsSnapshot = await session.text()
   expect(afterThreeDownsSnapshot).toMatchInlineSnapshot(`
     "
 
+
      SVG Library ────────────────────────────────────────────────────
 
      Search...
 
-
      Icons
      Home Icon Category: Icons
      User Icon Category: Icons
@@ -105,6 +108,12 @@ test('list shows initial items after fetch', async () => {
      Hero Image Category: Illustrations
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 }, 10000)

package/src/examples/list-scrollbox.tsx

@@ -0,0 +1,46 @@
+import { renderWithProviders, Icon, Color } from 'termcast'
+import List from 'termcast'
+
+const iconConfigs = [
+  { name: 'Circle', color: Color.Red },
+  { name: 'Star', color: Color.Yellow },
+  { name: 'Heart', color: Color.Magenta },
+  { name: 'Bolt', color: Color.Orange },
+  { name: 'Bookmark', color: Color.Blue },
+  { name: 'Calendar', color: Color.Green },
+  { name: 'Clock', color: Color.Purple },
+  { name: 'Document', color: Color.SecondaryText },
+  { name: 'Folder', color: Color.Blue },
+  { name: 'Globe', color: Color.Green },
+] as const
+
+function ListScrollboxExample() {
+  const items = Array.from({ length: 20 }, (_, i) => {
+    const config = iconConfigs[i % iconConfigs.length]
+    return {
+      id: `item-${i + 1}`,
+      title: `Item ${i + 1}`,
+      subtitle: `Description for item ${i + 1}`,
+      icon: { source: Icon[config.name], tintColor: config.color },
+    }
+  })
+
+  return (
+    <List
+      navigationTitle='Scrollbox Test'
+      searchBarPlaceholder='Search items...'
+    >
+      {items.map((item) => (
+        <List.Item
+          key={item.id}
+          id={item.id}
+          title={item.title}
+          subtitle={item.subtitle}
+          icon={item.icon}
+        />
+      ))}
+    </List>
+  )
+}
+
+await renderWithProviders(<ListScrollboxExample />)

package/src/examples/list-scrollbox.vitest.tsx

@@ -0,0 +1,103 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-scrollbox.tsx'],
+    cols: 50,
+    rows: 12,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('list scrollbox auto-scrolls when navigating down', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Item 1/i.test(text)
+    },
+  })
+
+  const initialSnapshot = await session.text()
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Scrollbox Test ─────────────────────────────
+     Search items...
+
+    ›♠ Item 1 Description for item 1             ▲
+     ■ Item 2 Description for item 2             ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+
+  const afterFiveDownsSnapshot = await session.text()
+  expect(afterFiveDownsSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Scrollbox Test ─────────────────────────────
+     Search items...
+
+     ▼ Item 5 Description for item 5             ▲
+    ›♦ Item 6 Description for item 6             ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+
+  const afterEightDownsSnapshot = await session.text()
+  expect(afterEightDownsSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Scrollbox Test ─────────────────────────────
+     Search items...
+
+     ★ Item 8 Description for item 8             ▲
+    ›■ Item 9 Description for item 9             ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+
+  await session.press('up')
+  await session.press('up')
+  await session.press('up')
+  await session.press('up')
+  await session.press('up')
+  await session.press('up')
+  await session.press('up')
+
+  const afterScrollBackUpSnapshot = await session.text()
+  expect(afterScrollBackUpSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Scrollbox Test ─────────────────────────────
+     Search items...
+
+    ›■ Item 2 Description for item 2             ▲
+     ♠ Item 3 Description for item 3             ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+}, 15000)

package/src/examples/list-with-detail.tsx

@@ -158,4 +158,4 @@ const ListWithDetailExample = () => {
   )
 }
 
-renderWithProviders(<ListWithDetailExample />)
+await renderWithProviders(<ListWithDetailExample />)