@butlerw/vellum 0.1.0

package/src/tui/components/Messages/__tests__/DiffView.test.tsx

@@ -0,0 +1,239 @@
+/**
+ * DiffView Component Tests (T022)
+ *
+ * @module tui/components/Messages/__tests__/DiffView.test
+ */
+
+import { render } from "ink-testing-library";
+import { describe, expect, it } from "vitest";
+import { ThemeProvider } from "../../../theme/index.js";
+import { DiffView } from "../DiffView.js";
+
+/**
+ * Wrap component with ThemeProvider for testing.
+ */
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+// Sample unified diff for testing
+const sampleDiff = `--- a/src/index.ts
++++ b/src/index.ts
+@@ -1,5 +1,6 @@
+ import { foo } from './foo';
++import { bar } from './bar';
+ 
+ function main() {
+-  console.log('hello');
++  console.log('hello world');
+ }`;
+
+const simpleAddition = `@@ -1,3 +1,4 @@
+ line 1
++new line
+ line 2
+ line 3`;
+
+const simpleDeletion = `@@ -1,4 +1,3 @@
+ line 1
+-deleted line
+ line 2
+ line 3`;
+
+describe("DiffView", () => {
+  describe("basic rendering", () => {
+    it("renders diff content", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      expect(lastFrame()).toContain("foo");
+      expect(lastFrame()).toContain("main");
+    });
+
+    it("renders empty diff", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff="" />);
+
+      // Should render borders at minimum
+      expect(lastFrame()).toBeTruthy();
+    });
+
+    it("renders with borders", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      // Check for box-drawing characters (borders)
+      expect(lastFrame()).toMatch(/[─│┌┐└┘┬┴├┤┼╭╮╯╰]/);
+    });
+  });
+
+  describe("file header", () => {
+    it("displays custom fileName when provided", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} fileName="src/index.ts" />);
+
+      expect(lastFrame()).toContain("src/index.ts");
+    });
+
+    it("shows file icon with fileName", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} fileName="test.ts" />);
+
+      expect(lastFrame()).toContain("📄");
+    });
+
+    it("hides built-in diff headers when fileName provided", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} fileName="custom.ts" />);
+
+      // Should not show the original --- and +++ headers
+      expect(lastFrame()).not.toContain("---");
+      expect(lastFrame()).not.toContain("+++");
+    });
+  });
+
+  describe("added lines", () => {
+    it("displays + prefix for added lines", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={simpleAddition} />);
+
+      expect(lastFrame()).toContain("+");
+      expect(lastFrame()).toContain("new line");
+    });
+
+    it("renders added line content correctly", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      expect(lastFrame()).toContain("bar");
+      expect(lastFrame()).toContain("hello world");
+    });
+  });
+
+  describe("removed lines", () => {
+    it("displays - prefix for removed lines", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={simpleDeletion} />);
+
+      expect(lastFrame()).toContain("-");
+      expect(lastFrame()).toContain("deleted line");
+    });
+
+    it("renders removed line content correctly", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      // The original line before modification
+      expect(lastFrame()).toContain("hello");
+    });
+  });
+
+  describe("context lines", () => {
+    it("renders unchanged context lines", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      expect(lastFrame()).toContain("import { foo }");
+      expect(lastFrame()).toContain("function main");
+    });
+  });
+
+  describe("hunk headers", () => {
+    it("renders hunk headers", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      expect(lastFrame()).toContain("@@");
+    });
+  });
+
+  describe("line numbers", () => {
+    it("shows line numbers when enabled", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={simpleAddition} showLineNumbers />);
+
+      // Should show line numbers
+      expect(lastFrame()).toContain("1");
+      expect(lastFrame()).toContain("2");
+    });
+
+    it("hides line numbers when disabled", () => {
+      const { lastFrame } = renderWithTheme(
+        <DiffView diff={simpleAddition} showLineNumbers={false} />
+      );
+
+      // Line numbers separator pattern should not appear in diff content area
+      // Context lines should just have the content
+      expect(lastFrame()).toContain("line 1");
+    });
+  });
+
+  describe("compact mode", () => {
+    it("renders in compact mode without errors", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} compact />);
+
+      expect(lastFrame()).toContain("foo");
+    });
+
+    it("reduces padding in compact mode", () => {
+      const normalRender = renderWithTheme(<DiffView diff={sampleDiff} />);
+      const compactRender = renderWithTheme(<DiffView diff={sampleDiff} compact />);
+
+      // Both should render successfully
+      expect(normalRender.lastFrame()).toBeTruthy();
+      expect(compactRender.lastFrame()).toBeTruthy();
+    });
+  });
+
+  describe("unified diff format parsing", () => {
+    it("parses file headers correctly", () => {
+      const { lastFrame } = renderWithTheme(<DiffView diff={sampleDiff} />);
+
+      // Without fileName prop, should show the original headers
+      expect(lastFrame()).toContain("---");
+      expect(lastFrame()).toContain("+++");
+    });
+
+    it("handles multiple hunks", () => {
+      const multiHunkDiff = `@@ -1,3 +1,4 @@
+ first
++added first
+ second
+@@ -10,3 +11,4 @@
+ tenth
++added tenth
+ eleventh`;
+
+      const { lastFrame } = renderWithTheme(<DiffView diff={multiHunkDiff} />);
+
+      expect(lastFrame()).toContain("first");
+      expect(lastFrame()).toContain("tenth");
+      expect(lastFrame()).toContain("added first");
+      expect(lastFrame()).toContain("added tenth");
+    });
+
+    it("handles diff with only additions", () => {
+      const additionsOnly = `@@ -0,0 +1,3 @@
++new file
++line 2
++line 3`;
+
+      const { lastFrame } = renderWithTheme(<DiffView diff={additionsOnly} />);
+
+      expect(lastFrame()).toContain("new file");
+      expect(lastFrame()).toContain("line 2");
+      expect(lastFrame()).toContain("line 3");
+    });
+
+    it("handles diff with only deletions", () => {
+      const deletionsOnly = `@@ -1,3 +0,0 @@
+-deleted 1
+-deleted 2
+-deleted 3`;
+
+      const { lastFrame } = renderWithTheme(<DiffView diff={deletionsOnly} />);
+
+      expect(lastFrame()).toContain("deleted 1");
+      expect(lastFrame()).toContain("deleted 2");
+      expect(lastFrame()).toContain("deleted 3");
+    });
+  });
+
+  describe("combined props", () => {
+    it("works with all props enabled", () => {
+      const { lastFrame } = renderWithTheme(
+        <DiffView diff={sampleDiff} fileName="src/index.ts" showLineNumbers compact />
+      );
+
+      expect(lastFrame()).toContain("src/index.ts");
+      expect(lastFrame()).toContain("foo");
+    });
+  });
+});

package/src/tui/components/Messages/__tests__/MarkdownRenderer.test.tsx

@@ -0,0 +1,303 @@
+/**
+ * MarkdownRenderer Component Tests (T020)
+ *
+ * @module tui/components/Messages/__tests__/MarkdownRenderer.test
+ */
+
+import { render } from "ink-testing-library";
+import { describe, expect, it } from "vitest";
+import { ThemeProvider } from "../../../theme/index.js";
+import { MarkdownRenderer } from "../MarkdownRenderer.js";
+
+/**
+ * Wrap component with ThemeProvider for testing.
+ */
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe("MarkdownRenderer", () => {
+  describe("headers", () => {
+    it("renders h1 headers with bold styling", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="# Hello World" />);
+
+      expect(lastFrame()).toContain("Hello World");
+      // Header should be present (visual prefix varies)
+      expect(lastFrame()).toBeTruthy();
+    });
+
+    it("renders h2 headers", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="## Section Title" />);
+
+      expect(lastFrame()).toContain("Section Title");
+    });
+
+    it("renders h3 headers", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="### Subsection" />);
+
+      expect(lastFrame()).toContain("Subsection");
+    });
+
+    it("renders multiple header levels", () => {
+      const content = `# Main Title
+## Section
+### Subsection`;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("Main Title");
+      expect(lastFrame()).toContain("Section");
+      expect(lastFrame()).toContain("Subsection");
+    });
+  });
+
+  describe("bold text", () => {
+    it("renders **bold** text", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="This is **bold** text" />);
+
+      expect(lastFrame()).toContain("bold");
+      expect(lastFrame()).toContain("This is");
+      expect(lastFrame()).toContain("text");
+    });
+
+    it("renders __bold__ text with underscores", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="This is __bold__ text" />);
+
+      expect(lastFrame()).toContain("bold");
+    });
+
+    it("renders multiple bold sections", () => {
+      const { lastFrame } = renderWithTheme(
+        <MarkdownRenderer content="**First** and **second** bold" />
+      );
+
+      expect(lastFrame()).toContain("First");
+      expect(lastFrame()).toContain("second");
+    });
+  });
+
+  describe("italic text", () => {
+    it("renders *italic* text with asterisk", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="This is *italic* text" />);
+
+      expect(lastFrame()).toContain("italic");
+    });
+
+    it("renders _italic_ text with underscore", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="This is _italic_ text" />);
+
+      expect(lastFrame()).toContain("italic");
+    });
+  });
+
+  describe("inline code", () => {
+    it("renders `inline code` with backticks", () => {
+      const { lastFrame } = renderWithTheme(
+        <MarkdownRenderer content="Use `console.log()` for debugging" />
+      );
+
+      expect(lastFrame()).toContain("console.log()");
+      expect(lastFrame()).toContain("Use");
+      expect(lastFrame()).toContain("debugging");
+    });
+
+    it("renders multiple inline code sections", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="Compare `foo` and `bar`" />);
+
+      expect(lastFrame()).toContain("foo");
+      expect(lastFrame()).toContain("bar");
+    });
+  });
+
+  describe("code blocks", () => {
+    it("renders code blocks with triple backticks", () => {
+      const content = `Here is code:
+\`\`\`
+const x = 1;
+\`\`\``;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("const x = 1;");
+    });
+
+    it("renders code blocks with language identifier", () => {
+      const content = `\`\`\`typescript
+function hello(): void {
+  console.log("hi");
+}
+\`\`\``;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("typescript");
+      expect(lastFrame()).toContain("function hello()");
+    });
+
+    it("handles multiline code blocks", () => {
+      const content = `\`\`\`
+line 1
+line 2
+line 3
+\`\`\``;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("line 1");
+      expect(lastFrame()).toContain("line 2");
+      expect(lastFrame()).toContain("line 3");
+    });
+  });
+
+  describe("lists", () => {
+    it("renders unordered lists with dash", () => {
+      const content = `- Item 1
+- Item 2
+- Item 3`;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("Item 1");
+      expect(lastFrame()).toContain("Item 2");
+      expect(lastFrame()).toContain("Item 3");
+      expect(lastFrame()).toContain("•");
+    });
+
+    it("renders unordered lists with asterisk", () => {
+      const content = `* First
+* Second`;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("First");
+      expect(lastFrame()).toContain("Second");
+    });
+
+    it("renders ordered lists", () => {
+      const content = `1. First item
+2. Second item
+3. Third item`;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("1.");
+      expect(lastFrame()).toContain("First item");
+      expect(lastFrame()).toContain("2.");
+      expect(lastFrame()).toContain("Second item");
+    });
+
+    it("renders nested list items", () => {
+      const content = `- Parent
+  - Child`;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("Parent");
+      expect(lastFrame()).toContain("Child");
+    });
+  });
+
+  describe("links", () => {
+    it("renders links with text and URL", () => {
+      const { lastFrame } = renderWithTheme(
+        <MarkdownRenderer content="Visit [GitHub](https://github.com) for code" />
+      );
+
+      expect(lastFrame()).toContain("GitHub");
+      expect(lastFrame()).toContain("https://github.com");
+    });
+
+    it("renders multiple links", () => {
+      const { lastFrame } = renderWithTheme(
+        <MarkdownRenderer content="[Link 1](url1) and [Link 2](url2)" />
+      );
+
+      expect(lastFrame()).toContain("Link 1");
+      expect(lastFrame()).toContain("Link 2");
+    });
+  });
+
+  describe("mixed content", () => {
+    it("renders complex markdown with multiple elements", () => {
+      const content = `# Title
+
+This is **bold** and *italic* text with \`code\`.
+
+## List Section
+
+- Item with **bold**
+- Item with \`code\`
+
+\`\`\`javascript
+const hello = "world";
+\`\`\`
+
+Check [docs](https://example.com)`;
+
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("Title");
+      expect(lastFrame()).toContain("bold");
+      expect(lastFrame()).toContain("italic");
+      expect(lastFrame()).toContain("code");
+      expect(lastFrame()).toContain("List Section");
+      expect(lastFrame()).toContain("•");
+      expect(lastFrame()).toContain("javascript");
+      expect(lastFrame()).toContain("hello");
+      expect(lastFrame()).toContain("docs");
+    });
+  });
+
+  describe("compact mode", () => {
+    it("renders with reduced spacing in compact mode", () => {
+      const content = `# Header
+
+Paragraph 1
+
+Paragraph 2`;
+
+      const { lastFrame: normalFrame } = renderWithTheme(
+        <MarkdownRenderer content={content} compact={false} />
+      );
+
+      const { lastFrame: compactFrame } = renderWithTheme(
+        <MarkdownRenderer content={content} compact={true} />
+      );
+
+      // Both should contain content
+      expect(normalFrame()).toContain("Header");
+      expect(compactFrame()).toContain("Header");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles empty content", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="" />);
+
+      // Should not crash, may render empty
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("handles content with only whitespace", () => {
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content="   \n   \n   " />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("handles unclosed code blocks gracefully", () => {
+      const content = `\`\`\`
+code without closing`;
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={content} />);
+
+      expect(lastFrame()).toContain("code without closing");
+    });
+
+    it("handles special characters in content", () => {
+      const specialContent = "Special chars: < > &";
+      const { lastFrame } = renderWithTheme(<MarkdownRenderer content={specialContent} />);
+
+      expect(lastFrame()).toContain("Special chars");
+    });
+
+    it("handles consecutive formatting", () => {
+      const { lastFrame } = renderWithTheme(
+        <MarkdownRenderer content="***bold italic*** should work" />
+      );
+
+      // Verify component renders without crashing
+      expect(lastFrame()).toBeDefined();
+    });
+  });
+});