@butlerw/vellum 0.1.0

package/src/tui/components/Input/__tests__/Autocomplete.test.tsx

@@ -0,0 +1,374 @@
+/**
+ * Autocomplete Component Tests (T011)
+ *
+ * Tests for the Autocomplete dropdown component.
+ */
+
+import { render } from "ink-testing-library";
+import type React from "react";
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "../../../theme/index.js";
+import { Autocomplete } from "../Autocomplete.js";
+
+/**
+ * Wrapper to provide theme context for tests
+ */
+function renderWithTheme(element: React.ReactElement) {
+  return render(<ThemeProvider>{element}</ThemeProvider>);
+}
+
+describe("Autocomplete", () => {
+  const defaultOptions = ["/help", "/history", "/hello", "/clear", "/quit"];
+
+  describe("Rendering", () => {
+    it("should render without crashing when visible", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("should render nothing when not visible", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={false}
+        />
+      );
+
+      // Should render empty or minimal when not visible
+      const frame = lastFrame() ?? "";
+      expect(frame.trim()).toBe("");
+    });
+
+    it("should render nothing when no options match", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/xyz"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      expect(frame.trim()).toBe("");
+    });
+
+    it("should render nothing when input is empty", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input=""
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Empty input shows all options (useful for '/' picker)
+      expect(frame).toContain("help");
+      expect(frame).toContain("history");
+    });
+  });
+
+  describe("Filtering", () => {
+    it("should filter options by prefix (case-insensitive)", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Should show /help and /hello (prefix match)
+      expect(frame).toContain("help");
+      expect(frame).toContain("hello");
+      // Should NOT show /history (different prefix)
+      expect(frame).not.toContain("history");
+      // Should NOT show /clear or /quit
+      expect(frame).not.toContain("clear");
+      expect(frame).not.toContain("quit");
+    });
+
+    it("should be case-insensitive when filtering", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+      const options = ["/Help", "/HELLO", "/History"];
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={options}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Should match regardless of case
+      expect(frame).toContain("Help");
+      expect(frame).toContain("HELLO");
+    });
+
+    it("should show all matching options when input is a common prefix", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/h"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Should show /help, /history, and /hello
+      expect(frame).toContain("help");
+      expect(frame).toContain("history");
+      expect(frame).toContain("hello");
+    });
+  });
+
+  describe("maxVisible", () => {
+    it("should limit displayed options to maxVisible", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+      // Use equal-length options so fuzzy scoring doesn't reorder them
+      const manyOptions = ["/opt1", "/opt2", "/opt3", "/opt4", "/opt5", "/opt6", "/opt7"];
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/opt"
+          options={manyOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+          maxVisible={3}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Should show exactly 3 options and overflow indicator
+      const optionMatches = frame.match(/opt\d/g) ?? [];
+      expect(optionMatches.length).toBe(3);
+      // Should show "4 more" indicator
+      expect(frame).toContain("4 more");
+    });
+
+    it("should not show overflow indicator when all options fit", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+          maxVisible={5}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Only 2 options match (/help, /hello), so no overflow
+      expect(frame).not.toContain("more");
+    });
+
+    it("should use default maxVisible of 10", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+      // Need more than 10 options to see overflow
+      const manyOptions = [
+        "/a1",
+        "/a2",
+        "/a3",
+        "/a4",
+        "/a5",
+        "/a6",
+        "/a7",
+        "/a8",
+        "/a9",
+        "/a10",
+        "/a11",
+        "/a12",
+        "/a13",
+      ];
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/a"
+          options={manyOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Default is 10, so should show "3 more" for 13 options
+      expect(frame).toContain("3 more");
+    });
+  });
+
+  describe("Selection indicator", () => {
+    it("should show selection indicator for first item by default", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Should have the selection indicator (›)
+      expect(frame).toContain("›");
+    });
+
+    it("keeps the selected option visible when navigating beyond maxVisible", async () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+      const manyOptions = ["/a1", "/a2", "/a3", "/a4", "/a5"];
+
+      const { lastFrame, stdin } = renderWithTheme(
+        <Autocomplete
+          input=""
+          options={manyOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+          maxVisible={2}
+        />
+      );
+
+      // Initially shows first window
+      expect(lastFrame()).toContain("a1");
+      expect(lastFrame()).toContain("a2");
+      expect(lastFrame()).toContain("›");
+
+      // Move selection down 3 times: should scroll window and keep highlight visible
+      await act(async () => {
+        stdin.write("\u001b[B");
+        await new Promise((r) => setTimeout(r, 0));
+      });
+      await act(async () => {
+        stdin.write("\u001b[B");
+        await new Promise((r) => setTimeout(r, 0));
+      });
+      await act(async () => {
+        stdin.write("\u001b[B");
+        await new Promise((r) => setTimeout(r, 0));
+      });
+
+      const frame = lastFrame() ?? "";
+
+      // With maxVisible=2 and selection index=3, the window should include a3 and a4
+      expect(frame).toContain("a3");
+      expect(frame).toContain("a4");
+      // Ensure highlight indicator never disappears
+      expect(frame).toContain("›");
+    });
+  });
+
+  describe("Props interface", () => {
+    it("should accept all required props", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/test"
+          options={["/test1", "/test2"]}
+          onSelect={onSelect}
+          onCancel={onCancel}
+        />
+      );
+
+      expect(lastFrame()).toBeTruthy();
+    });
+
+    it("should accept all optional props", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/test"
+          options={["/test1", "/test2"]}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+          maxVisible={10}
+        />
+      );
+
+      expect(lastFrame()).toBeTruthy();
+    });
+  });
+
+  describe("Border styling", () => {
+    it("should render with a bordered box", () => {
+      const onSelect = vi.fn();
+      const onCancel = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <Autocomplete
+          input="/he"
+          options={defaultOptions}
+          onSelect={onSelect}
+          onCancel={onCancel}
+          visible={true}
+        />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Ink's Box with borderStyle="single" uses unicode box characters
+      // Check that content is displayed (border characters may vary)
+      expect(frame.length).toBeGreaterThan(0);
+      expect(frame).toContain("help");
+    });
+  });
+});

package/src/tui/components/Input/__tests__/TextInput.test.tsx

@@ -0,0 +1,241 @@
+/**
+ * TextInput Component Tests (T009, T013)
+ *
+ * Tests for the TextInput component with multiline support.
+ *
+ * Note: ink-testing-library's stdin.write() does not synchronously trigger
+ * useInput hooks. Tests focus on:
+ * - Rendering behavior (verifiable via lastFrame())
+ * - Props contract verification
+ * - Visual state assertions
+ *
+ * Behavioral tests (onChange, onSubmit) are validated via:
+ * - Integration tests at the CLI level
+ * - Manual testing documentation
+ */
+
+import { render } from "ink-testing-library";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "../../../theme/index.js";
+import { TextInput } from "../TextInput.js";
+
+/**
+ * Wrapper to provide theme context for tests
+ */
+function renderWithTheme(element: React.ReactElement) {
+  return render(<ThemeProvider>{element}</ThemeProvider>);
+}
+
+describe("TextInput", () => {
+  describe("Rendering", () => {
+    it("should render without crashing", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(<TextInput value="" onChange={onChange} />);
+      // Empty value with focus shows cursor, which renders as a space with inverse
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("should render placeholder when value is empty", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value="" onChange={onChange} placeholder="Type here..." focused={false} />
+      );
+      expect(lastFrame()).toContain("Type here...");
+    });
+
+    it("should render value when provided", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value="Hello World" onChange={onChange} focused={false} />
+      );
+      expect(lastFrame()).toContain("Hello World");
+    });
+
+    it("should show cursor indicator when focused", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value="Test" onChange={onChange} focused={true} />
+      );
+      // The cursor should be at the end, shown as inverse text
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("Test");
+    });
+  });
+
+  describe("Multiline mode", () => {
+    it("should render multiple lines", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value={"Line 1\nLine 2\nLine 3"} onChange={onChange} multiline focused={false} />
+      );
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("Line 1");
+      expect(frame).toContain("Line 2");
+      expect(frame).toContain("Line 3");
+    });
+
+    it("should render cursor on correct line in multiline mode", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value={"First\nSecond"} onChange={onChange} multiline focused={true} />
+      );
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("First");
+      expect(frame).toContain("Second");
+    });
+  });
+
+  describe("Props contract", () => {
+    it("should accept all required props", () => {
+      const onChange = vi.fn();
+      const onSubmit = vi.fn();
+
+      const { lastFrame } = renderWithTheme(
+        <TextInput
+          value="test"
+          onChange={onChange}
+          onSubmit={onSubmit}
+          placeholder="placeholder"
+          multiline={true}
+          disabled={false}
+          maxLength={100}
+          focused={true}
+        />
+      );
+
+      expect(lastFrame()).toBeTruthy();
+    });
+
+    it("should render with disabled state", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value="disabled text" onChange={onChange} disabled={true} />
+      );
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("disabled text");
+    });
+
+    it("should respect maxLength visually (value can be at max)", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput value="12345" onChange={onChange} maxLength={5} focused={false} />
+      );
+      expect(lastFrame()).toContain("12345");
+    });
+  });
+
+  describe("onChange callback contract", () => {
+    it("should accept onChange prop as function", () => {
+      const onChange = vi.fn();
+      // This verifies the prop type contract
+      expect(() => {
+        renderWithTheme(<TextInput value="" onChange={onChange} />);
+      }).not.toThrow();
+    });
+
+    it("should not throw when onChange is called with new value", () => {
+      // Simulates controlled component pattern
+      let currentValue = "";
+      const onChange = vi.fn((newValue: string) => {
+        currentValue = newValue;
+      });
+
+      const { rerender } = renderWithTheme(<TextInput value={currentValue} onChange={onChange} />);
+
+      // Simulate external value change (as would happen from onChange callback)
+      currentValue = "typed text";
+      expect(() => {
+        rerender(
+          <ThemeProvider>
+            <TextInput value={currentValue} onChange={onChange} />
+          </ThemeProvider>
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe("onSubmit callback contract", () => {
+    it("should accept onSubmit prop as function", () => {
+      const onChange = vi.fn();
+      const onSubmit = vi.fn();
+      expect(() => {
+        renderWithTheme(<TextInput value="" onChange={onChange} onSubmit={onSubmit} />);
+      }).not.toThrow();
+    });
+
+    it("should work without onSubmit (optional prop)", () => {
+      const onChange = vi.fn();
+      expect(() => {
+        renderWithTheme(<TextInput value="" onChange={onChange} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe("Disabled state contract", () => {
+    it("should accept disabled prop", () => {
+      const onChange = vi.fn();
+      expect(() => {
+        renderWithTheme(<TextInput value="test" onChange={onChange} disabled={true} />);
+      }).not.toThrow();
+    });
+
+    it("should render differently when disabled vs enabled", () => {
+      const onChange = vi.fn();
+
+      const { lastFrame: enabledFrame } = renderWithTheme(
+        <TextInput value="test" onChange={onChange} disabled={false} focused={true} />
+      );
+
+      const { lastFrame: disabledFrame } = renderWithTheme(
+        <TextInput value="test" onChange={onChange} disabled={true} focused={true} />
+      );
+
+      // Both should render, component handles disabled state
+      expect(enabledFrame()).toBeTruthy();
+      expect(disabledFrame()).toBeTruthy();
+    });
+  });
+
+  describe("Multiline mode contract", () => {
+    it("should accept multiline prop", () => {
+      const onChange = vi.fn();
+      expect(() => {
+        renderWithTheme(<TextInput value="test" onChange={onChange} multiline={true} />);
+      }).not.toThrow();
+    });
+
+    it("should handle newlines in value when multiline", () => {
+      const onChange = vi.fn();
+      const { lastFrame } = renderWithTheme(
+        <TextInput
+          value="line1\nline2\nline3"
+          onChange={onChange}
+          multiline={true}
+          focused={false}
+        />
+      );
+      const frame = lastFrame() ?? "";
+      // All lines should be present
+      expect(frame).toContain("line1");
+      expect(frame).toContain("line2");
+      expect(frame).toContain("line3");
+    });
+  });
+
+  describe("Focus state", () => {
+    it("should accept focused prop", () => {
+      const onChange = vi.fn();
+      expect(() => {
+        renderWithTheme(<TextInput value="test" onChange={onChange} focused={true} />);
+      }).not.toThrow();
+    });
+
+    it("should default focused to true", () => {
+      const onChange = vi.fn();
+      // Default prop behavior - should render with cursor
+      const { lastFrame } = renderWithTheme(<TextInput value="test" onChange={onChange} />);
+      expect(lastFrame()).toBeTruthy();
+    });
+  });
+});