termcast 1.3.21 → 1.3.24

package/dist/examples/form-dropdown.vitest.js

@@ -0,0 +1,854 @@
+import { test, expect, afterEach, beforeEach } from 'vitest';
+import { launchTerminal } from 'tuistory/src';
+let session;
+beforeEach(async () => {
+    session = await launchTerminal({
+        command: 'bun',
+        args: ['src/examples/form-dropdown.tsx'],
+        cols: 70,
+        rows: 50,
+    });
+});
+afterEach(() => {
+    session?.close();
+});
+test('form dropdown shows inline options', async () => {
+    const initialSnapshot = await session.text({
+        waitFor: (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'));
+        },
+    });
+    expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  TypeScript, Rust
+    ┃
+    ┃  Frontend
+    ┃› ● TypeScript
+    ┃  ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('space');
+    const afterToggleTypeScriptSnapshot = await session.text();
+    expect(afterToggleTypeScriptSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃› ○ TypeScript
+    ┃  ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('down');
+    const afterDownSnapshot = await session.text();
+    expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃  ○ TypeScript
+    ┃› ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('down');
+    await session.press('down');
+    await session.press('down');
+    await session.press('down');
+    const afterMultipleDownSnapshot = await session.text();
+    expect(afterMultipleDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ○ Svelte
+    ┃  Backend
+    ┃› ○ Node.js
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    └  ○ Low
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('enter');
+    const afterSelectSnapshot = await session.text();
+    expect(afterSelectSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust, Node.js
+    ┃
+    ┃  Frontend
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ○ Svelte
+    ┃  Backend
+    ┃› ● Node.js
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    └  ○ Low
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+}, 10000);
+test('form dropdown keyboard navigation', async () => {
+    await session.text({
+        waitFor: (text) => {
+            return /Dropdown Component Demo/i.test(text);
+        },
+    });
+    await session.press('space');
+    const afterToggleSnapshot = await session.text();
+    expect(afterToggleSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃› ○ TypeScript
+    ┃  ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('down');
+    await session.press('down');
+    await session.press('down');
+    await session.press('down');
+    const lastVisibleSnapshot = await session.text();
+    expect(lastVisibleSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃  ○ JavaScript
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃› ○ Svelte
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('down');
+    const nextPageSnapshot = await session.text();
+    expect(nextPageSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃  ○ Svelte
+    ┃  Backend
+    ┃› ○ Node.js
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    └  ○ Low
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('up');
+    const backToPreviousPageSnapshot = await session.text();
+    expect(backToPreviousPageSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃› ○ Svelte
+    ┃  Backend
+    ┃  ○ Node.js
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    └  ○ Low
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('esc');
+    const afterEscapeSnapshot = await session.text();
+    expect(afterEscapeSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  Rust
+    ┃
+    ┃  Frontend
+    ┃  ○ React
+    ┃  ○ Vue
+    ┃› ○ Svelte
+    ┃  Backend
+    ┃  ○ Node.js
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    └  ○ Low
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+}, 10000);
+test('form dropdown with default value', async () => {
+    await session.text({
+        waitFor: (text) => {
+            return /Dropdown Component Demo/i.test(text);
+        },
+    });
+    await session.press('tab');
+    const secondDropdownFocusedSnapshot = await session.text();
+    expect(secondDropdownFocusedSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◇  Programming Languages
+    │  TypeScript, Rust
+    │
+    │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
+    │  ○ React
+    │  ○ Vue
+    │  ↑↓ to see more options
+    │
+    │  Choose your preferred programming languages
+    │
+    ◆  Editor Theme
+    ┃  Dracula
+    ┃
+    ┃› ○ Monokai
+    ┃  ● Dracula
+    ┃  ○ One Dark
+    ┃  ○ Nord
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Select your preferred editor color theme
+    ┃
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('space');
+    const afterToggleMonokaiSnapshot = await session.text();
+    expect(afterToggleMonokaiSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◇  Programming Languages
+    │  TypeScript, Rust
+    │
+    │  Frontend
+    │  ● TypeScript
+    │  ○ JavaScript
+    │  ○ React
+    │  ○ Vue
+    │  ↑↓ to see more options
+    │
+    │  Choose your preferred programming languages
+    │
+    ◆  Editor Theme
+    ┃  Monokai
+    ┃
+    ┃› ● Monokai
+    ┃  ○ Dracula
+    ┃  ○ One Dark
+    ┃  ○ Nord
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Select your preferred editor color theme
+    ┃
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('esc');
+    await session.press(['alt', 'enter']);
+    const afterSubmitSnapshot = await session.text({
+        waitFor: (text) => {
+            return /Submitted Data/i.test(text);
+        },
+    });
+    expect(afterSubmitSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ▪  Dropdown Component Demo                                       █
+    │  Test dropdown with sections, multiple selection, and more     █
+    │  features                                                      █
+    │                                                                █
+    ◇  Programming Languages                                         █
+    │  TypeScript, Rust                                              █
+    │                                                                █
+    │  Frontend                                                      █
+    │  ● TypeScript                                                  █
+    │  ○ JavaScript                                                  █
+    │  ○ React                                                       █
+    │  ○ Vue                                                         █
+    │  ↑↓ to see more options                                        █
+    │                                                                █
+    │  Choose your preferred programming languages
+    │
+    ◆  Editor Theme
+    ┃  Monokai
+    ┃
+    ┃› ● Monokai
+    ┃  ○ Dracula
+    ┃  ○ One Dark
+    ┃  ○ Nord
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Select your preferred editor color theme
+    ┃
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    ▪  Submitted Data
+    │  {
+    │    "languages": [
+    │      "typescript",
+    │      "rust"
+    │    ],
+    │    "theme": "monokai",
+    │    "priority": ""
+    │  }
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+}, 10000);
+test('selecting second-to-last visible item should not scroll', async () => {
+    await session.text({
+        waitFor: (text) => {
+            return /Dropdown Component Demo/i.test(text);
+        },
+    });
+    await session.press('down');
+    await session.press('down');
+    const beforeSelectSnapshot = await session.text();
+    expect(beforeSelectSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  TypeScript, Rust
+    ┃
+    ┃  Frontend
+    ┃  ● TypeScript
+    ┃  ○ JavaScript
+    ┃› ○ React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+    await session.press('enter');
+    const afterSelectSnapshot = await session.text();
+    expect(afterSelectSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+
+
+    ▪  Dropdown Component Demo
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
+    ◆  Programming Languages
+    ┃  TypeScript, Rust, React
+    ┃
+    ┃  Frontend
+    ┃  ● TypeScript
+    ┃  ○ JavaScript
+    ┃› ● React
+    ┃  ○ Vue
+    ┃  ↑↓ to see more options
+    ┃
+    ┃  Choose your preferred programming languages
+    ┃
+    ◇  Editor Theme
+    │  Dracula
+    │
+    │  ○ Monokai
+    │  ● Dracula
+    │  ○ One Dark
+    │  ○ Nord
+    │  ↑↓ to see more options
+    │
+    │  Select your preferred editor color theme
+    │
+    ◇  Task Priority
+    │  Select priority level
+    │
+    │  ○ Critical
+    │  ○ High
+    │  ○ Medium
+    │  ○ Low
+    └
+
+
+
+
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `);
+}, 10000);
+//# sourceMappingURL=form-dropdown.vitest.js.map