@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/__tests__/LineNumberRenderable.scrollbox.test.ts

@@ -1,827 +0,0 @@
-import { describe, test, expect, beforeEach, afterEach } from "bun:test"
-import { createTestRenderer, type TestRenderer } from "../../testing.js"
-import { LineNumberRenderable } from "../LineNumberRenderable.js"
-import { CodeRenderable } from "../Code.js"
-import { BoxRenderable } from "../Box.js"
-import { ScrollBoxRenderable } from "../ScrollBox.js"
-import { SyntaxStyle } from "../../syntax-style.js"
-import { RGBA } from "../../lib/RGBA.js"
-
-let currentRenderer: TestRenderer
-let renderOnce: () => Promise<void>
-let captureCharFrame: () => string
-
-beforeEach(async () => {
-  const testRenderer = await createTestRenderer({ width: 60, height: 20 })
-  currentRenderer = testRenderer.renderer
-  renderOnce = testRenderer.renderOnce
-  captureCharFrame = testRenderer.captureCharFrame
-})
-
-afterEach(async () => {
-  if (currentRenderer) {
-    currentRenderer.destroy()
-  }
-})
-
-// Helper to generate multi-line code content
-function generateCode(lineCount: number): string {
-  const lines: string[] = []
-  for (let i = 1; i <= lineCount; i++) {
-    lines.push(`function test${i}() {`)
-    lines.push(`  console.log("Line ${i}");`)
-    lines.push(`  return ${i};`)
-    lines.push(`}`)
-  }
-  return lines.join("\n")
-}
-
-async function settleCodeRenderables(...codeRenderables: CodeRenderable[]): Promise<void> {
-  await renderOnce()
-  await Promise.all(codeRenderables.map((codeRenderable) => codeRenderable.highlightingDone))
-  await renderOnce()
-}
-
-describe("LineNumberRenderable in ScrollBox", () => {
-  test("single Code renderable with line numbers in ScrollBox - correct dimensions", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const code = generateCode(20) // 80 lines of code
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-1",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-1",
-      target: codeRenderable,
-      minWidth: 3,
-      paddingRight: 1,
-      fg: "#888888",
-      bg: "transparent",
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-1",
-      border: true,
-      borderStyle: "single",
-      borderColor: "#ffffff",
-      width: 30,
-      height: 10,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-1",
-      width: "100%",
-      height: "100%",
-      scrollY: true,
-      scrollX: false,
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    await settleCodeRenderables(codeRenderable)
-
-    // Check initial dimensions
-    const gutter = lineNumberRenderable["gutter"]
-    expect(gutter).toBeDefined()
-    expect(gutter!.width).toBeGreaterThan(0)
-    expect(gutter!.height).toBeGreaterThan(0)
-
-    // Box should have correct dimensions (minus borders)
-    expect(box.width).toBe(30)
-    expect(box.height).toBe(10)
-
-    // LineNumberRenderable should fill the box (minus borders)
-    expect(lineNumberRenderable.width).toBe(28) // 30 - 2 for borders
-    expect(lineNumberRenderable.height).toBe(8) // 10 - 2 for borders
-
-    const frame = captureCharFrame()
-    expect(frame).toMatchSnapshot()
-  })
-
-  test("single Code renderable in ScrollBox - scroll and verify dimensions", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const code = generateCode(30) // 120 lines of code
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-scroll",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-scroll",
-      target: codeRenderable,
-      minWidth: 3,
-      paddingRight: 1,
-      fg: "#888888",
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-scroll",
-      border: true,
-      width: 40,
-      height: 12,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-scroll",
-      width: "100%",
-      height: "100%",
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    await settleCodeRenderables(codeRenderable)
-
-    const gutterBeforeScroll = lineNumberRenderable["gutter"]!
-    const widthBeforeScroll = gutterBeforeScroll.width
-    const heightBeforeScroll = gutterBeforeScroll.height
-    const lineNumWidthBeforeScroll = lineNumberRenderable.width
-    const lineNumHeightBeforeScroll = lineNumberRenderable.height
-
-    const frameBeforeScroll = captureCharFrame()
-    expect(frameBeforeScroll).toMatchSnapshot()
-
-    // Scroll down
-    scrollBox.scrollBy(10)
-    await settleCodeRenderables(codeRenderable)
-
-    const gutterAfterScroll = lineNumberRenderable["gutter"]!
-    const widthAfterScroll = gutterAfterScroll.width
-    const heightAfterScroll = gutterAfterScroll.height
-    const lineNumWidthAfterScroll = lineNumberRenderable.width
-    const lineNumHeightAfterScroll = lineNumberRenderable.height
-
-    // Dimensions should remain stable after scrolling
-    expect(widthAfterScroll).toBe(widthBeforeScroll)
-    expect(heightAfterScroll).toBe(heightBeforeScroll)
-    expect(lineNumWidthAfterScroll).toBe(lineNumWidthBeforeScroll)
-    expect(lineNumHeightAfterScroll).toBe(lineNumHeightBeforeScroll)
-
-    const frameAfterScroll = captureCharFrame()
-    expect(frameAfterScroll).toMatchSnapshot()
-
-    // Scroll to bottom
-    scrollBox.scrollBy(1000)
-    await renderOnce()
-
-    const widthAtBottom = lineNumberRenderable["gutter"]!.width
-    const heightAtBottom = lineNumberRenderable["gutter"]!.height
-
-    expect(widthAtBottom).toBe(widthBeforeScroll)
-    expect(heightAtBottom).toBe(heightBeforeScroll)
-
-    const frameAtBottom = captureCharFrame()
-    expect(frameAtBottom).toMatchSnapshot()
-  })
-
-  test("multiple Code renderables with line numbers in ScrollBox - correct dimensions", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-multi",
-      width: "100%",
-      height: "100%",
-    })
-
-    currentRenderer.root.add(scrollBox)
-
-    const boxes: BoxRenderable[] = []
-    const lineNumberRenderables: LineNumberRenderable[] = []
-    const codeRenderables: CodeRenderable[] = []
-
-    // Create 3 code blocks with line numbers in boxes
-    for (let i = 1; i <= 3; i++) {
-      const code = generateCode(5 + i * 2) // Different sizes
-      const codeRenderable = new CodeRenderable(currentRenderer, {
-        id: `code-${i}`,
-        content: code,
-        filetype: "javascript",
-        syntaxStyle,
-        width: "100%",
-        height: "auto",
-      })
-
-      const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-        id: `line-number-${i}`,
-        target: codeRenderable,
-        minWidth: 3,
-        paddingRight: 1,
-        fg: "#888888",
-        width: "100%",
-        height: "100%",
-      })
-
-      const box = new BoxRenderable(currentRenderer, {
-        id: `box-${i}`,
-        border: true,
-        width: 50,
-        height: 8,
-        marginBottom: 2,
-      })
-
-      box.add(lineNumberRenderable)
-      scrollBox.add(box)
-
-      boxes.push(box)
-      lineNumberRenderables.push(lineNumberRenderable)
-      codeRenderables.push(codeRenderable)
-    }
-
-    await settleCodeRenderables(...codeRenderables)
-
-    const frame1 = captureCharFrame()
-    expect(frame1).toMatchSnapshot()
-
-    // Verify all boxes have correct dimensions
-    for (let i = 0; i < 3; i++) {
-      const box = boxes[i]
-      expect(box.width).toBe(50)
-      expect(box.height).toBe(8)
-
-      const lineNumberRenderable = lineNumberRenderables[i]
-      expect(lineNumberRenderable.width).toBe(48) // 50 - 2 for borders
-      expect(lineNumberRenderable.height).toBe(6) // 8 - 2 for borders
-
-      const gutter = lineNumberRenderable["gutter"]
-      expect(gutter).toBeDefined()
-      expect(gutter!.width).toBeGreaterThan(0)
-      expect(gutter!.height).toBe(6)
-    }
-
-    // Scroll down
-    scrollBox.scrollBy(5)
-    await renderOnce()
-
-    const frame2 = captureCharFrame()
-    expect(frame2).toMatchSnapshot()
-
-    // Dimensions should remain stable
-    for (let i = 0; i < 3; i++) {
-      const lineNumberRenderable = lineNumberRenderables[i]
-      expect(lineNumberRenderable.width).toBe(48)
-      expect(lineNumberRenderable.height).toBe(6)
-
-      const gutter = lineNumberRenderable["gutter"]
-      expect(gutter!.width).toBeGreaterThan(0)
-      expect(gutter!.height).toBe(6)
-    }
-  })
-
-  test("nested boxes with different border styles - dimensions correct", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const code = generateCode(25)
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-nested",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-nested",
-      target: codeRenderable,
-      minWidth: 4,
-      paddingRight: 2,
-      fg: "#888888",
-      width: "100%",
-      height: "100%",
-    })
-
-    // Inner box with border
-    const innerBox = new BoxRenderable(currentRenderer, {
-      id: "inner-box",
-      border: true,
-      borderStyle: "rounded",
-      borderColor: "#00ff00",
-      padding: 1,
-      width: 45,
-      height: 15,
-    })
-
-    innerBox.add(lineNumberRenderable)
-
-    // Outer box with border
-    const outerBox = new BoxRenderable(currentRenderer, {
-      id: "outer-box",
-      border: true,
-      borderStyle: "double",
-      borderColor: "#ff0000",
-      padding: 2,
-      width: 55,
-      height: 19,
-    })
-
-    outerBox.add(innerBox)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-nested",
-      width: "100%",
-      height: "100%",
-    })
-
-    scrollBox.add(outerBox)
-    currentRenderer.root.add(scrollBox)
-
-    await settleCodeRenderables(codeRenderable)
-
-    const frame1 = captureCharFrame()
-    expect(frame1).toMatchSnapshot()
-
-    // Check outer box
-    expect(outerBox.width).toBe(55)
-    expect(outerBox.height).toBe(19)
-
-    // Check inner box (inside outer box padding and borders)
-    expect(innerBox.width).toBe(45)
-    expect(innerBox.height).toBe(15)
-
-    // Check line number renderable (inside inner box padding and borders)
-    // Inner box: 45 - 2 (borders) - 2 (padding) = 41
-    expect(lineNumberRenderable.width).toBe(41)
-    // Inner box: 15 - 2 (borders) - 2 (padding) = 11
-    expect(lineNumberRenderable.height).toBe(11)
-
-    const gutter = lineNumberRenderable["gutter"]!
-    expect(gutter.width).toBeGreaterThan(4) // At least minWidth + padding
-    expect(gutter.height).toBe(11)
-
-    // Scroll and verify dimensions remain stable
-    scrollBox.scrollBy(20)
-    await settleCodeRenderables(codeRenderable)
-
-    const frame2 = captureCharFrame()
-    expect(frame2).toMatchSnapshot()
-
-    expect(lineNumberRenderable.width).toBe(41)
-    expect(lineNumberRenderable.height).toBe(11)
-    expect(gutter.width).toBeGreaterThan(4)
-    expect(gutter.height).toBe(11)
-  })
-
-  test("ScrollBox with horizontal and vertical scrolling - dimensions stable", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    // Create very long lines
-    const longLines: string[] = []
-    for (let i = 1; i <= 50; i++) {
-      longLines.push(
-        `const veryLongVariableName${i} = "This is a very long line that should require horizontal scrolling to view completely";`,
-      )
-    }
-    const code = longLines.join("\n")
-
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-long",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "auto",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-long",
-      target: codeRenderable,
-      minWidth: 3,
-      paddingRight: 1,
-      fg: "#888888",
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-long",
-      border: true,
-      width: 50,
-      height: 15,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-long",
-      width: "100%",
-      height: "100%",
-      scrollX: true,
-      scrollY: true,
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    await settleCodeRenderables(codeRenderable)
-
-    const initialWidth = lineNumberRenderable.width
-    const initialHeight = lineNumberRenderable.height
-    const initialGutterWidth = lineNumberRenderable["gutter"]!.width
-    const initialGutterHeight = lineNumberRenderable["gutter"]!.height
-
-    const frame1 = captureCharFrame()
-    expect(frame1).toMatchSnapshot()
-
-    // Scroll vertically
-    scrollBox.scrollBy({ x: 0, y: 10 })
-    await settleCodeRenderables(codeRenderable)
-
-    expect(lineNumberRenderable.width).toBe(initialWidth)
-    expect(lineNumberRenderable.height).toBe(initialHeight)
-    expect(lineNumberRenderable["gutter"]!.width).toBe(initialGutterWidth)
-    expect(lineNumberRenderable["gutter"]!.height).toBe(initialGutterHeight)
-
-    const frame2 = captureCharFrame()
-    expect(frame2).toMatchSnapshot()
-
-    // Scroll horizontally (shouldn't affect line numbers much)
-    scrollBox.scrollBy({ x: 20, y: 0 })
-    await renderOnce()
-
-    expect(lineNumberRenderable.width).toBe(initialWidth)
-    expect(lineNumberRenderable.height).toBe(initialHeight)
-    expect(lineNumberRenderable["gutter"]!.width).toBe(initialGutterWidth)
-    expect(lineNumberRenderable["gutter"]!.height).toBe(initialGutterHeight)
-
-    const frame3 = captureCharFrame()
-    expect(frame3).toMatchSnapshot()
-
-    // Scroll both
-    scrollBox.scrollBy({ x: 10, y: 15 })
-    await renderOnce()
-
-    expect(lineNumberRenderable.width).toBe(initialWidth)
-    expect(lineNumberRenderable.height).toBe(initialHeight)
-    expect(lineNumberRenderable["gutter"]!.width).toBe(initialGutterWidth)
-    expect(lineNumberRenderable["gutter"]!.height).toBe(initialGutterHeight)
-
-    const frame4 = captureCharFrame()
-    expect(frame4).toMatchSnapshot()
-  })
-
-  test("gutter width changes with line count - verify remeasure", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    // Start with 9 lines (1 digit line numbers)
-    let code = generateCode(2) // 8 lines
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-growing",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-growing",
-      target: codeRenderable,
-      minWidth: 2,
-      paddingRight: 1,
-      fg: "#888888",
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-growing",
-      border: true,
-      width: 40,
-      height: 12,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-growing",
-      width: "100%",
-      height: "100%",
-      scrollY: false,
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    await renderOnce()
-
-    const widthWith1Digit = lineNumberRenderable["gutter"]!.width
-    const frame1 = captureCharFrame()
-    expect(frame1).toMatchSnapshot()
-    // minWidth is 2, paddingRight is 1, so minimum is 3 (2 + 1)
-    // But also includes +1 for left padding and maxBeforeWidth/maxAfterWidth (0 in this case)
-    // So base minimum is 4 total for 1 digit numbers
-
-    // Now update to have more than 9 lines (2 digit line numbers)
-    code = generateCode(5) // 20 lines
-    codeRenderable.content = code
-    await settleCodeRenderables(codeRenderable)
-
-    const widthWith2Digits = lineNumberRenderable["gutter"]!.width
-    const frame2 = captureCharFrame()
-    expect(frame2).toMatchSnapshot()
-
-    // Width stays the same because minWidth 2 is still enough for 2-digit numbers
-    // The gutter width calculation is: max(minWidth, digits + paddingRight + 1)
-    // For 20 lines: max(2, 2 + 1 + 1) = max(2, 4) = 4
-    // But we started with at least 3 or 4
-    expect(widthWith2Digits).toBeGreaterThanOrEqual(widthWith1Digit)
-
-    // Now update to have more than 99 lines (3 digit line numbers)
-    code = generateCode(30) // 120 lines
-    codeRenderable.content = code
-    await settleCodeRenderables(codeRenderable)
-
-    const widthWith3Digits = lineNumberRenderable["gutter"]!.width
-    const frame3 = captureCharFrame()
-    expect(frame3).toMatchSnapshot()
-
-    // Width should increase for 3-digit numbers
-    // For 120 lines: max(2, 3 + 1 + 1) = max(2, 5) = 5
-    expect(widthWith3Digits).toBeGreaterThan(widthWith2Digits)
-  })
-
-  test("line colors span full width in ScrollBox", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const code = generateCode(15)
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-colors",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineColors = new Map<number, string>()
-    lineColors.set(2, "#2d4a2e") // Green for line 3
-    lineColors.set(5, "#4a2d2d") // Red for line 6
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-colors",
-      target: codeRenderable,
-      minWidth: 3,
-      paddingRight: 1,
-      fg: "#ffffff",
-      bg: "#000000",
-      lineColors,
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-colors",
-      border: true,
-      width: 50,
-      height: 12,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-colors",
-      width: "100%",
-      height: "100%",
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    await settleCodeRenderables(codeRenderable)
-
-    const frame = captureCharFrame()
-    expect(frame).toMatchSnapshot()
-
-    // Scroll to make line 5 visible at top
-    scrollBox.scrollBy(5)
-    await renderOnce()
-
-    const frame2 = captureCharFrame()
-    expect(frame2).toMatchSnapshot()
-  })
-
-  test("viewport culling with line numbers - dimensions stable", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-culling",
-      width: "100%",
-      height: "100%",
-      viewportCulling: true,
-    })
-
-    currentRenderer.root.add(scrollBox)
-
-    const boxes: BoxRenderable[] = []
-    const codeRenderables: CodeRenderable[] = []
-
-    // Add many boxes - only visible ones should be rendered
-    for (let i = 1; i <= 20; i++) {
-      const code = generateCode(3)
-      const codeRenderable = new CodeRenderable(currentRenderer, {
-        id: `code-culling-${i}`,
-        content: code,
-        filetype: "javascript",
-        syntaxStyle,
-        width: "100%",
-        height: "auto",
-      })
-
-      const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-        id: `line-number-culling-${i}`,
-        target: codeRenderable,
-        minWidth: 3,
-        paddingRight: 1,
-        fg: "#888888",
-        width: "100%",
-        height: "100%",
-      })
-
-      const box = new BoxRenderable(currentRenderer, {
-        id: `box-culling-${i}`,
-        border: true,
-        width: 45,
-        height: 6,
-        marginBottom: 1,
-      })
-
-      box.add(lineNumberRenderable)
-      scrollBox.add(box)
-      boxes.push(box)
-      codeRenderables.push(codeRenderable)
-    }
-
-    await settleCodeRenderables(...codeRenderables)
-
-    const frame1 = captureCharFrame()
-    expect(frame1).toMatchSnapshot()
-
-    // Scroll through content
-    for (let scroll = 0; scroll < 100; scroll += 10) {
-      scrollBox.scrollBy(10)
-      await renderOnce()
-
-      // Check that first few boxes have correct dimensions
-      for (let i = 0; i < 5 && i < boxes.length; i++) {
-        const box = boxes[i]
-        expect(box.width).toBe(45)
-        expect(box.height).toBe(6)
-      }
-    }
-
-    const frame2 = captureCharFrame()
-    expect(frame2).toMatchSnapshot()
-  })
-
-  test("EXPECTED FAILURE: Box width changes unexpectedly on first few renders", async () => {
-    // This test documents a known issue where box widths may flicker on initial renders
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const code = generateCode(30)
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-flicker",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-flicker",
-      target: codeRenderable,
-      minWidth: 3,
-      paddingRight: 1,
-      fg: "#888888",
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-flicker",
-      border: true,
-      width: 40,
-      height: 12,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-flicker",
-      width: "100%",
-      height: "100%",
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    // Capture dimensions across multiple renders
-    const widths: number[] = []
-    const heights: number[] = []
-
-    for (let i = 0; i < 5; i++) {
-      await renderOnce()
-      widths.push(box.width)
-      heights.push(box.height)
-    }
-
-    // This assertion SHOULD pass if the bug is fixed
-    // If it fails, it documents the flickering issue
-    const allWidthsSame = widths.every((w) => w === widths[0])
-    const allHeightsSame = heights.every((h) => h === heights[0])
-
-    expect(allWidthsSame).toBe(true)
-    expect(allHeightsSame).toBe(true)
-  })
-
-  test("EXPECTED FAILURE: Gutter height may not match parent height initially", async () => {
-    const syntaxStyle = SyntaxStyle.fromStyles({
-      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    })
-
-    const code = generateCode(50)
-    const codeRenderable = new CodeRenderable(currentRenderer, {
-      id: "code-height",
-      content: code,
-      filetype: "javascript",
-      syntaxStyle,
-      width: "100%",
-      height: "auto",
-    })
-
-    const lineNumberRenderable = new LineNumberRenderable(currentRenderer, {
-      id: "line-number-height",
-      target: codeRenderable,
-      minWidth: 3,
-      paddingRight: 1,
-      fg: "#888888",
-      width: "100%",
-      height: "100%",
-    })
-
-    const box = new BoxRenderable(currentRenderer, {
-      id: "box-height",
-      border: true,
-      width: 40,
-      height: 15,
-    })
-
-    box.add(lineNumberRenderable)
-
-    const scrollBox = new ScrollBoxRenderable(currentRenderer, {
-      id: "scroll-height",
-      width: "100%",
-      height: "100%",
-    })
-
-    scrollBox.add(box)
-    currentRenderer.root.add(scrollBox)
-
-    await renderOnce()
-
-    const gutter = lineNumberRenderable["gutter"]!
-    const expectedHeight = lineNumberRenderable.height
-
-    // Gutter should have same height as its parent LineNumberRenderable
-    // This may fail if there's a layout issue
-    expect(gutter.height).toBe(expectedHeight)
-  })
-})