@xincli/opentui-core 0.4.6

package/src/testing/capture-spans.test.ts

@@ -0,0 +1,216 @@
+import { describe, test, expect, beforeEach, afterEach } from "bun:test"
+import { createTestRenderer, type TestRenderer } from "./test-renderer.js"
+import { TextRenderable } from "../renderables/Text.js"
+import { BoxRenderable } from "../renderables/Box.js"
+import { TextAttributes, type CapturedFrame } from "../types.js"
+import { RGBA } from "../lib/index.js"
+import { StyledText } from "../lib/styled-text.js"
+
+describe("captureSpans", () => {
+  let renderer: TestRenderer
+  let renderOnce: () => Promise<void>
+  let captureSpans: () => CapturedFrame
+
+  beforeEach(async () => {
+    const setup = await createTestRenderer({ width: 40, height: 10 })
+    renderer = setup.renderer
+    renderOnce = setup.renderOnce
+    captureSpans = setup.captureSpans
+  })
+
+  afterEach(() => {
+    renderer.destroy()
+  })
+
+  test("returns correct dimensions and line count", async () => {
+    await renderOnce()
+    const data = captureSpans()
+
+    expect(data.cols).toBe(40)
+    expect(data.rows).toBe(10)
+    expect(data.lines.length).toBe(10)
+  })
+
+  test("captures text content in spans", async () => {
+    const text = new TextRenderable(renderer, { content: "Hello World" })
+    renderer.root.add(text)
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const textContent = firstLine.spans.map((s) => s.text).join("")
+
+    expect(textContent).toContain("Hello World")
+  })
+
+  test("groups consecutive cells with same styling into single span", async () => {
+    const text = new TextRenderable(renderer, { content: "AAAA" })
+    renderer.root.add(text)
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const aaaSpan = firstLine.spans.find((s) => s.text.includes("AAAA"))
+
+    expect(aaaSpan).toBeDefined()
+    expect(aaaSpan!.width).toBeGreaterThanOrEqual(4)
+  })
+
+  test("captures foreground color", async () => {
+    const text = new TextRenderable(renderer, {
+      content: "Red Text",
+      fg: RGBA.fromHex("#ff0000"),
+    })
+    renderer.root.add(text)
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const redSpan = firstLine.spans.find((s) => s.text.includes("Red"))
+
+    expect(redSpan).toBeDefined()
+    expect(redSpan!.fg.r).toBe(1)
+    expect(redSpan!.fg.g).toBe(0)
+    expect(redSpan!.fg.b).toBe(0)
+  })
+
+  test("captures background color", async () => {
+    const box = new BoxRenderable(renderer, {
+      width: 10,
+      height: 3,
+      backgroundColor: RGBA.fromHex("#00ff00"),
+    })
+    renderer.root.add(box)
+    await renderOnce()
+
+    const data = captureSpans()
+    const secondLine = data.lines[1]
+    const greenSpan = secondLine.spans.find((s) => s.bg.g === 1 && s.bg.r === 0 && s.bg.b === 0)
+
+    expect(greenSpan).toBeDefined()
+  })
+
+  test("returns alpha 0 for transparent colors", async () => {
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const transparentSpan = firstLine.spans.find((s) => s.bg.a === 0)
+
+    expect(transparentSpan).toBeDefined()
+  })
+
+  test("captures text attributes", async () => {
+    const text = new TextRenderable(renderer, {
+      content: "Styled",
+      attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE | TextAttributes.DIM,
+    })
+    renderer.root.add(text)
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const styledSpan = firstLine.spans.find((s) => s.text.includes("Styled"))
+
+    expect(styledSpan).toBeDefined()
+    expect(styledSpan!.attributes & TextAttributes.BOLD).toBeTruthy()
+    expect(styledSpan!.attributes & TextAttributes.ITALIC).toBeTruthy()
+    expect(styledSpan!.attributes & TextAttributes.UNDERLINE).toBeTruthy()
+    expect(styledSpan!.attributes & TextAttributes.DIM).toBeTruthy()
+  })
+
+  test("includes cursor position", async () => {
+    await renderOnce()
+    const data = captureSpans()
+
+    expect(data.cursor).toEqual([expect.any(Number), expect.any(Number)])
+  })
+
+  test("splits spans when styling changes", async () => {
+    const text1 = new TextRenderable(renderer, {
+      content: "AAA",
+      fg: RGBA.fromHex("#ff0000"),
+    })
+    const text2 = new TextRenderable(renderer, {
+      content: "BBB",
+      fg: RGBA.fromHex("#00ff00"),
+    })
+    renderer.root.add(text1)
+    renderer.root.add(text2)
+    await renderOnce()
+
+    const data = captureSpans()
+    const allSpans = data.lines.flatMap((l) => l.spans)
+
+    expect(allSpans.some((s) => s.fg.r === 1 && s.fg.g === 0)).toBe(true)
+    expect(allSpans.some((s) => s.fg.g === 1 && s.fg.r === 0)).toBe(true)
+  })
+
+  test("preserves tag-only color intent differences in captured spans", async () => {
+    const text = new TextRenderable(renderer, {
+      content: new StyledText([
+        { __isChunk: true, text: "A", fg: RGBA.fromHex("#aabbcc") },
+        { __isChunk: true, text: "B", fg: RGBA.defaultForeground("#aabbcc") },
+      ]),
+    })
+
+    renderer.root.add(text)
+    await renderOnce()
+
+    const firstLine = captureSpans().lines[0]
+    const contentSpans = firstLine.spans.filter((span) => span.text.trim().length > 0)
+
+    expect(contentSpans).toHaveLength(2)
+    expect(contentSpans[0].text).toBe("A")
+    expect(contentSpans[1].text).toBe("B")
+    expect(contentSpans[0].fg.intent).toBe("rgb")
+    expect(contentSpans[1].fg.intent).toBe("default")
+  })
+
+  test("handles box-drawing characters without crashing", async () => {
+    const text = new TextRenderable(renderer, {
+      content: "├── folder",
+    })
+    renderer.root.add(text)
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const textContent = firstLine.spans.map((s) => s.text).join("")
+
+    expect(textContent).toContain("├── folder")
+  })
+
+  test("handles box borders without crashing", async () => {
+    const box = new BoxRenderable(renderer, {
+      width: 10,
+      height: 4,
+      border: true,
+      borderStyle: "single",
+      borderColor: RGBA.fromHex("#ffffff"),
+    })
+    renderer.root.add(box)
+    await renderOnce()
+
+    const data = captureSpans()
+    expect(data.lines.length).toBe(10)
+
+    const firstLine = data.lines[0]
+    const textContent = firstLine.spans.map((s) => s.text).join("")
+    expect(textContent.includes("┌") || textContent.includes("─")).toBe(true)
+  })
+
+  test("handles multi-width characters correctly", async () => {
+    const text = new TextRenderable(renderer, {
+      content: "A🌟B",
+    })
+    renderer.root.add(text)
+    await renderOnce()
+
+    const data = captureSpans()
+    const firstLine = data.lines[0]
+    const textContent = firstLine.spans.map((s) => s.text).join("")
+
+    expect(textContent).toContain("A🌟B")
+  })
+})

package/src/testing/integration.test.ts

@@ -0,0 +1,276 @@
+import { describe, test, expect } from "bun:test"
+import { createMockMouse, MouseButtons } from "./mock-mouse.js"
+import { MouseParser } from "../lib/parse.mouse.js"
+
+class MockRenderer {
+  public stdin: { emit: (event: string, data: Buffer) => void }
+  public emittedData: Buffer[] = []
+
+  constructor() {
+    this.stdin = {
+      emit: (event: string, chunk: Buffer) => {
+        this.emittedData.push(chunk)
+      },
+    }
+  }
+
+  getEmittedData(): Buffer {
+    return Buffer.concat(this.emittedData)
+  }
+}
+
+// Helper function to parse all events from buffer
+function parseAllEvents(emittedData: Buffer, parser: MouseParser) {
+  return parser.parseAllMouseEvents(emittedData)
+}
+
+describe("mock-mouse + parser integration", () => {
+  test("simple click is correctly parsed", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.click(10, 5)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(2)
+    expect(parsedEvents[0]).toEqual({
+      type: "down",
+      button: 0,
+      x: 10,
+      y: 5,
+      modifiers: { shift: false, alt: false, ctrl: false },
+      scroll: undefined,
+    })
+    expect(parsedEvents[1]).toEqual({
+      type: "up",
+      button: 0,
+      x: 10,
+      y: 5,
+      modifiers: { shift: false, alt: false, ctrl: false },
+      scroll: undefined,
+    })
+  })
+
+  test("double click is correctly parsed", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.doubleClick(10, 5)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(4)
+    // All events should be at the same position with LEFT button
+    parsedEvents.forEach((event) => {
+      expect(event.x).toBe(10)
+      expect(event.y).toBe(5)
+      expect(event.button).toBe(0)
+    })
+    // Should alternate down/up
+    expect(parsedEvents.map((e) => e.type)).toEqual(["down", "up", "down", "up"])
+  })
+
+  test("pressDown and release separately are correctly parsed", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.pressDown(10, 5, MouseButtons.MIDDLE)
+    await mockMouse.release(10, 5, MouseButtons.MIDDLE)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(2)
+    expect(parsedEvents[0]).toEqual({
+      type: "down",
+      button: 1, // MIDDLE button
+      x: 10,
+      y: 5,
+      modifiers: { shift: false, alt: false, ctrl: false },
+      scroll: undefined,
+    })
+    expect(parsedEvents[1]).toEqual({
+      type: "up",
+      button: 1,
+      x: 10,
+      y: 5,
+      modifiers: { shift: false, alt: false, ctrl: false },
+      scroll: undefined,
+    })
+  })
+
+  test("different buttons work correctly", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    // Test RIGHT button
+    await mockMouse.click(10, 5, MouseButtons.RIGHT)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(2)
+    parsedEvents.forEach((event) => {
+      expect(event.button).toBe(2) // RIGHT button
+      expect(event.x).toBe(10)
+      expect(event.y).toBe(5)
+    })
+  })
+
+  test("all scroll directions are correctly parsed", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.scroll(15, 8, "up")
+    await mockMouse.scroll(15, 8, "down")
+    await mockMouse.scroll(15, 8, "left")
+    await mockMouse.scroll(15, 8, "right")
+
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(4)
+    const expectedDirections: ("up" | "down" | "left" | "right")[] = ["up", "down", "left", "right"]
+    const expectedButtons = [0, 1, 2, 0] // Based on parser logic: button & 3, with button=3 becoming 0
+    parsedEvents.forEach((event, index) => {
+      expect(event.type).toBe("scroll")
+      expect(event.button).toBe(expectedButtons[index])
+      expect(event.x).toBe(15)
+      expect(event.y).toBe(8)
+      expect(event.scroll).toEqual({
+        direction: expectedDirections[index],
+        delta: 1,
+      })
+    })
+  })
+
+  test("scroll with modifiers is correctly parsed", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.scroll(15, 8, "left", { modifiers: { shift: true } })
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(1)
+    expect(parsedEvents[0]).toEqual({
+      type: "scroll",
+      button: 2, // WHEEL_LEFT (66) & 3 = 2
+      x: 15,
+      y: 8,
+      modifiers: { shift: true, alt: false, ctrl: false },
+      scroll: { direction: "left", delta: 1 },
+    })
+  })
+
+  test("drag events are correctly parsed", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.drag(5, 5, 15, 10)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    // Should have down, several drag events, and up
+    expect(parsedEvents.length).toBeGreaterThan(3)
+    expect(parsedEvents[0].type).toBe("down")
+    expect(parsedEvents[0].button).toBe(0)
+    expect(parsedEvents[0].x).toBe(5)
+    expect(parsedEvents[0].y).toBe(5)
+
+    // Check that intermediate events are drag events
+    for (let i = 1; i < parsedEvents.length - 1; i++) {
+      expect(parsedEvents[i].type).toBe("drag")
+      expect(parsedEvents[i].button).toBe(0)
+    }
+
+    const lastEvent = parsedEvents[parsedEvents.length - 1]
+    expect(lastEvent.type).toBe("up")
+    expect(lastEvent.x).toBe(15)
+    expect(lastEvent.y).toBe(10)
+  })
+
+  test("moveTo without button press generates move events", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.moveTo(15, 8)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(1)
+    expect(parsedEvents[0]).toEqual({
+      type: "move",
+      button: 0,
+      x: 15,
+      y: 8,
+      modifiers: { shift: false, alt: false, ctrl: false },
+      scroll: undefined,
+    })
+  })
+
+  test("moveTo with button press generates drag events", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.pressDown(5, 5)
+    await mockMouse.moveTo(15, 8)
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents).toHaveLength(2)
+    expect(parsedEvents[0].type).toBe("down")
+    expect(parsedEvents[1].type).toBe("drag")
+    expect(parsedEvents[1].x).toBe(15)
+    expect(parsedEvents[1].y).toBe(8)
+  })
+
+  test("all modifier combinations work", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    const modifierCombos = [
+      { shift: true },
+      { alt: true },
+      { ctrl: true },
+      { shift: true, alt: true },
+      { shift: true, ctrl: true },
+      { alt: true, ctrl: true },
+      { shift: true, alt: true, ctrl: true },
+    ]
+
+    for (const modifiers of modifierCombos) {
+      const testRenderer = new MockRenderer()
+      const testMouse = createMockMouse(testRenderer as any)
+      const testParser = new MouseParser()
+
+      await testMouse.click(10, 5, MouseButtons.LEFT, { modifiers })
+      const parsedEvents = parseAllEvents(testRenderer.getEmittedData(), testParser)
+
+      expect(parsedEvents).toHaveLength(2)
+      parsedEvents.forEach((event) => {
+        expect(event.modifiers).toEqual({
+          ...modifiers,
+          shift: modifiers.shift || false,
+          alt: modifiers.alt || false,
+          ctrl: modifiers.ctrl || false,
+        })
+      })
+    }
+  })
+
+  test("drag with different button and modifiers", async () => {
+    const mockRenderer = new MockRenderer()
+    const mockMouse = createMockMouse(mockRenderer as any)
+    const parser = new MouseParser()
+
+    await mockMouse.drag(5, 5, 15, 10, MouseButtons.RIGHT, { modifiers: { alt: true } })
+    const parsedEvents = parseAllEvents(mockRenderer.getEmittedData(), parser)
+
+    expect(parsedEvents.length).toBeGreaterThan(3)
+    parsedEvents.forEach((event) => {
+      expect(event.button).toBe(2) // RIGHT button
+      expect(event.modifiers.alt).toBe(true)
+    })
+  })
+})

package/src/testing/manual-clock.ts

@@ -0,0 +1,117 @@
+import type { Clock, TimerHandle } from "../lib/clock.js"
+
+interface ScheduledTimer {
+  id: number
+  fireAt: number
+  order: number
+  delayMs: number
+  repeat: boolean
+  fn: () => void
+}
+
+function compareTimers(left: ScheduledTimer, right: ScheduledTimer): number {
+  if (left.fireAt !== right.fireAt) {
+    return left.fireAt - right.fireAt
+  }
+
+  return left.order - right.order
+}
+
+export class ManualClock implements Clock {
+  private time = 0
+  private nextId = 1
+  private nextOrder = 0
+  private readonly timers = new Map<number, ScheduledTimer>()
+
+  public now(): number {
+    return this.time
+  }
+
+  public setTime(time: number): void {
+    const targetTime = Math.floor(time)
+
+    if (targetTime >= this.time) {
+      this.advance(targetTime - this.time)
+      return
+    }
+
+    this.time = targetTime
+  }
+
+  public setTimeout(fn: () => void, delayMs: number): TimerHandle {
+    return this.schedule(fn, delayMs, false)
+  }
+
+  public clearTimeout(handle: TimerHandle): void {
+    this.timers.delete(Number(handle))
+  }
+
+  public setInterval(fn: () => void, delayMs: number): TimerHandle {
+    return this.schedule(fn, delayMs, true)
+  }
+
+  public clearInterval(handle: TimerHandle): void {
+    this.clearTimeout(handle)
+  }
+
+  public advance(delayMs: number): void {
+    const targetTime = this.time + Math.max(0, Math.floor(delayMs))
+
+    while (true) {
+      const nextTimer = this.peekNextTimer()
+      if (!nextTimer || nextTimer.fireAt > targetTime) {
+        break
+      }
+
+      this.timers.delete(nextTimer.id)
+      this.time = nextTimer.fireAt
+      nextTimer.fn()
+
+      if (nextTimer.repeat && !this.timers.has(nextTimer.id)) {
+        this.timers.set(nextTimer.id, {
+          ...nextTimer,
+          fireAt: this.time + nextTimer.delayMs,
+          order: this.nextOrder++,
+        })
+      }
+    }
+
+    this.time = targetTime
+  }
+
+  public runAll(): void {
+    while (true) {
+      const nextTimer = this.peekNextTimer()
+      if (!nextTimer) {
+        return
+      }
+
+      this.advance(nextTimer.fireAt - this.time)
+    }
+  }
+
+  private schedule(fn: () => void, delayMs: number, repeat: boolean): number {
+    const id = this.nextId++
+    const normalizedDelay = Math.max(0, Math.floor(delayMs))
+    this.timers.set(id, {
+      id,
+      fireAt: this.time + normalizedDelay,
+      order: this.nextOrder++,
+      delayMs: normalizedDelay,
+      repeat,
+      fn,
+    })
+    return id
+  }
+
+  private peekNextTimer(): ScheduledTimer | null {
+    let nextTimer: ScheduledTimer | null = null
+    for (const timer of this.timers.values()) {
+      if (!nextTimer || compareTimers(timer, nextTimer) < 0) {
+        nextTimer = timer
+      }
+    }
+
+    return nextTimer
+  }
+}