@pep/term-deck 1.0.10

package/src/renderer/__tests__/screen-extended.test.ts

@@ -0,0 +1,801 @@
+import { describe, it, expect, mock } from 'bun:test'
+import {
+  getWindowColor,
+  createWindow,
+  clearWindows,
+  renderMatrixRain,
+  initMatrixRain,
+  applyTransition,
+  renderSlide,
+  createRenderer,
+  destroyRenderer,
+} from '../screen'
+import { DEFAULT_THEME } from '../../schemas/theme'
+import type { Slide } from '../../schemas/slide'
+
+describe('getWindowColor', () => {
+  const mockTheme = {
+    ...DEFAULT_THEME,
+    colors: {
+      ...DEFAULT_THEME.colors,
+      primary: '#00cc66',
+      accent: '#ff6600',
+      secondary: '#0066ff',
+    },
+  }
+
+  it('returns primary color for index 0', () => {
+    const color = getWindowColor(0, mockTheme)
+    expect(color).toBe('#00cc66')
+  })
+
+  it('returns accent color for index 1', () => {
+    const color = getWindowColor(1, mockTheme)
+    expect(color).toBe('#ff6600')
+  })
+
+  it('returns secondary color for index 2', () => {
+    const color = getWindowColor(2, mockTheme)
+    expect(color).toBe('#0066ff')
+  })
+
+  it('cycles through extended color palette', () => {
+    const color3 = getWindowColor(3, mockTheme)
+    const color4 = getWindowColor(4, mockTheme)
+    const color5 = getWindowColor(5, mockTheme)
+
+    expect(color3).toBe('#ff0066') // pink
+    expect(color4).toBe('#9966ff') // purple
+    expect(color5).toBe('#ffcc00') // yellow
+  })
+
+  it('wraps around after all colors used', () => {
+    // Index 6 should wrap back to index 0
+    const color = getWindowColor(6, mockTheme)
+    expect(color).toBe('#00cc66')
+  })
+
+  it('handles large indices correctly', () => {
+    const color = getWindowColor(12, mockTheme) // 12 % 6 = 0
+    expect(color).toBe('#00cc66')
+  })
+
+  it('uses primary color as fallback when secondary is undefined', () => {
+    const themeNoSecondary = {
+      ...mockTheme,
+      colors: {
+        ...mockTheme.colors,
+        secondary: undefined,
+      },
+    }
+
+    const color = getWindowColor(2, themeNoSecondary as any)
+    expect(color).toBe('#00cc66') // falls back to primary
+  })
+})
+
+describe('createWindow', () => {
+  it('creates a window with title', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const window = createWindow(renderer, { title: 'Test Window' })
+
+    expect(window).toBeDefined()
+    expect(renderer.windowStack.length).toBe(1)
+    expect(renderer.windowStack[0]).toBe(window)
+
+    destroyRenderer(renderer)
+  })
+
+  it('adds window to stack', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    expect(renderer.windowStack.length).toBe(0)
+
+    const window1 = createWindow(renderer, { title: 'Window 1' })
+    expect(renderer.windowStack.length).toBe(1)
+
+    const window2 = createWindow(renderer, { title: 'Window 2' })
+    expect(renderer.windowStack.length).toBe(2)
+
+    expect(renderer.windowStack[0]).toBe(window1)
+    expect(renderer.windowStack[1]).toBe(window2)
+
+    destroyRenderer(renderer)
+  })
+
+  it('attaches window to screen', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const window = createWindow(renderer, { title: 'Attached Window' })
+
+    expect(window.parent).toBe(renderer.screen)
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses custom color when provided', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const customColor = '#ff00ff'
+
+    const window = createWindow(renderer, {
+      title: 'Custom Color',
+      color: customColor,
+    })
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses theme-based color cycling when color not provided', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    // Create multiple windows without specifying color
+    createWindow(renderer, { title: 'Window 1' })
+    createWindow(renderer, { title: 'Window 2' })
+    createWindow(renderer, { title: 'Window 3' })
+
+    expect(renderer.windowStack.length).toBe(3)
+
+    destroyRenderer(renderer)
+  })
+
+  it('accepts custom dimensions', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const window = createWindow(renderer, {
+      title: 'Custom Size',
+      width: 50,
+      height: 20,
+    })
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('accepts custom position', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const window = createWindow(renderer, {
+      title: 'Custom Position',
+      top: 5,
+      left: 10,
+    })
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses default dimensions when not provided', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const window = createWindow(renderer, {
+      title: 'Default Dimensions',
+    })
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('creates multiple stacked windows', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    for (let i = 0; i < 5; i++) {
+      createWindow(renderer, { title: `Window ${i}` })
+    }
+
+    expect(renderer.windowStack.length).toBe(5)
+
+    destroyRenderer(renderer)
+  })
+})
+
+describe('clearWindows', () => {
+  it('destroys all windows in stack', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const mockWindow1 = { destroy: mock(() => {}) }
+    const mockWindow2 = { destroy: mock(() => {}) }
+    const mockWindow3 = { destroy: mock(() => {}) }
+
+    renderer.windowStack = [mockWindow1 as any, mockWindow2 as any, mockWindow3 as any]
+
+    clearWindows(renderer)
+
+    expect(mockWindow1.destroy).toHaveBeenCalledTimes(1)
+    expect(mockWindow2.destroy).toHaveBeenCalledTimes(1)
+    expect(mockWindow3.destroy).toHaveBeenCalledTimes(1)
+
+    destroyRenderer(renderer)
+  })
+
+  it('empties the window stack', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    createWindow(renderer, { title: 'Window 1' })
+    createWindow(renderer, { title: 'Window 2' })
+    createWindow(renderer, { title: 'Window 3' })
+
+    expect(renderer.windowStack.length).toBe(3)
+
+    clearWindows(renderer)
+
+    expect(renderer.windowStack.length).toBe(0)
+
+    destroyRenderer(renderer)
+  })
+
+  it('handles empty window stack', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    expect(renderer.windowStack.length).toBe(0)
+
+    // Should not throw
+    expect(() => clearWindows(renderer)).not.toThrow()
+
+    destroyRenderer(renderer)
+  })
+
+  it('can be called multiple times safely', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    createWindow(renderer, { title: 'Window' })
+    clearWindows(renderer)
+
+    expect(renderer.windowStack.length).toBe(0)
+
+    // Second call should not throw
+    expect(() => clearWindows(renderer)).not.toThrow()
+
+    destroyRenderer(renderer)
+  })
+})
+
+describe('renderMatrixRain', () => {
+  it('updates matrix box content', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const initialContent = renderer.matrixBox.getContent()
+
+    renderMatrixRain(renderer)
+
+    const updatedContent = renderer.matrixBox.getContent()
+
+    // Content should be updated (may be empty or filled depending on drops)
+    expect(typeof updatedContent).toBe('string')
+
+    destroyRenderer(renderer)
+  })
+
+  it('updates drop positions', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    // Get initial positions
+    const initialPositions = renderer.matrixDrops.map((d) => ({ x: d.x, y: d.y }))
+
+    // Render several frames
+    for (let i = 0; i < 5; i++) {
+      renderMatrixRain(renderer)
+    }
+
+    // At least some drops should have moved
+    const movedDrops = renderer.matrixDrops.filter(
+      (d, i) => d.y !== initialPositions[i].y
+    )
+
+    expect(movedDrops.length).toBeGreaterThan(0)
+
+    destroyRenderer(renderer)
+  })
+
+  it('resets drops when they go off screen', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const height = (renderer.screen.height as number) || 24
+
+    // Manually set a drop to be well off screen (beyond trail length)
+    const trailLength = renderer.matrixDrops[0].trail.length
+    renderer.matrixDrops[0].y = height + trailLength + 10
+
+    renderMatrixRain(renderer)
+
+    // Drop should be reset to top (negative y value)
+    expect(renderer.matrixDrops[0].y).toBeLessThan(0)
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses theme colors', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    renderMatrixRain(renderer)
+
+    const content = renderer.matrixBox.getContent()
+
+    // If there are drops, content should contain color tags
+    if (renderer.matrixDrops.length > 0 && content.trim() !== '') {
+      // Content may contain blessed color tags like {#00cc66-fg}
+      expect(typeof content).toBe('string')
+    }
+
+    destroyRenderer(renderer)
+  })
+
+  it('handles screen resize gracefully', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    // Should not throw even with different screen dimensions
+    expect(() => renderMatrixRain(renderer)).not.toThrow()
+
+    destroyRenderer(renderer)
+  })
+})
+
+describe('initMatrixRain', () => {
+  it('initializes matrix drops based on density', () => {
+    const customTheme = {
+      ...DEFAULT_THEME,
+      animations: {
+        ...DEFAULT_THEME.animations,
+        matrixDensity: 10,
+      },
+    }
+
+    const renderer = createRenderer(customTheme)
+
+    expect(renderer.matrixDrops.length).toBe(10)
+
+    destroyRenderer(renderer)
+  })
+
+  it('starts animation interval', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    expect(renderer.matrixInterval).not.toBeNull()
+
+    destroyRenderer(renderer)
+  })
+
+  it('creates drops with random positions', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const xPositions = renderer.matrixDrops.map((d) => d.x)
+    const yPositions = renderer.matrixDrops.map((d) => d.y)
+
+    // With default density, positions should vary (not all the same)
+    // Note: With small screen dimensions, it's possible (but unlikely) for some
+    // coordinates to overlap, so we just check that drops are created
+    const uniqueX = new Set(xPositions)
+    const uniqueY = new Set(yPositions)
+
+    // Should have at least one position defined
+    expect(xPositions.length).toBeGreaterThan(0)
+    expect(yPositions.length).toBeGreaterThan(0)
+
+    // With default density > 1, we expect some variation
+    // (though with very small terminals, x positions might coincide)
+    if (renderer.matrixDrops.length > 1) {
+      // At least the y positions should vary since they're random over screen height
+      expect(uniqueY.size).toBeGreaterThanOrEqual(1)
+    }
+
+    destroyRenderer(renderer)
+  })
+
+  it('creates drops with random speeds', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const speeds = renderer.matrixDrops.map((d) => d.speed)
+
+    // All speeds should be within range [0.3, 1.0]
+    for (const speed of speeds) {
+      expect(speed).toBeGreaterThanOrEqual(0.3)
+      expect(speed).toBeLessThanOrEqual(1.0)
+    }
+
+    destroyRenderer(renderer)
+  })
+
+  it('creates drops with trails', () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    for (const drop of renderer.matrixDrops) {
+      expect(Array.isArray(drop.trail)).toBe(true)
+      expect(drop.trail.length).toBeGreaterThanOrEqual(5)
+      expect(drop.trail.length).toBeLessThanOrEqual(15)
+    }
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses theme glyphs for trails', () => {
+    const customTheme = {
+      ...DEFAULT_THEME,
+      glyphs: 'ABC123',
+    }
+
+    const renderer = createRenderer(customTheme)
+
+    for (const drop of renderer.matrixDrops) {
+      for (const char of drop.trail) {
+        expect(customTheme.glyphs).toContain(char)
+      }
+    }
+
+    destroyRenderer(renderer)
+  })
+
+  it('respects theme matrix interval', () => {
+    const customTheme = {
+      ...DEFAULT_THEME,
+      animations: {
+        ...DEFAULT_THEME.animations,
+        matrixInterval: 50,
+      },
+    }
+
+    const renderer = createRenderer(customTheme)
+
+    expect(renderer.matrixInterval).not.toBeNull()
+
+    destroyRenderer(renderer)
+  })
+})
+
+describe('applyTransition', () => {
+  it('applies instant transition', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+    const content = 'Test content'
+
+    await applyTransition(box, screen, content, 'instant', DEFAULT_THEME)
+
+    expect(box.setContent).toHaveBeenCalledWith(content)
+
+    destroyRenderer(renderer)
+  })
+
+  it('applies glitch transition', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+    const content = 'Test glitch'
+
+    await applyTransition(box, screen, content, 'glitch', DEFAULT_THEME)
+
+    // Should have called setContent multiple times during animation
+    expect(box.setContent).toHaveBeenCalled()
+
+    destroyRenderer(renderer)
+  })
+
+  it('applies fade transition', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+    const content = 'Test fade'
+
+    await applyTransition(box, screen, content, 'fade', DEFAULT_THEME)
+
+    // Should have called setContent multiple times
+    expect(box.setContent).toHaveBeenCalled()
+
+    destroyRenderer(renderer)
+  })
+
+  it('applies typewriter transition', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+    const content = 'Test typewriter'
+
+    await applyTransition(box, screen, content, 'typewriter', DEFAULT_THEME)
+
+    // Should have called setContent multiple times
+    expect(box.setContent).toHaveBeenCalled()
+
+    destroyRenderer(renderer)
+  })
+
+  it('defaults to instant for unknown transition type', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+    const content = 'Test default'
+
+    await applyTransition(box, screen, content, 'unknown' as any, DEFAULT_THEME)
+
+    expect(box.setContent).toHaveBeenCalledWith(content)
+
+    destroyRenderer(renderer)
+  })
+
+  it('handles empty content', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+
+    await applyTransition(box, screen, '', 'instant', DEFAULT_THEME)
+
+    expect(box.setContent).toHaveBeenCalledWith('')
+
+    destroyRenderer(renderer)
+  })
+
+  it('handles multi-line content', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+    const box = {
+      setContent: mock(() => {}),
+    } as any
+    const screen = renderer.screen
+    const content = 'Line 1\nLine 2\nLine 3'
+
+    await applyTransition(box, screen, content, 'instant', DEFAULT_THEME)
+
+    expect(box.setContent).toHaveBeenCalledWith(content)
+
+    destroyRenderer(renderer)
+  })
+})
+
+describe('renderSlide', () => {
+  it('creates a window for the slide', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Test Slide',
+      },
+      body: 'Test content',
+      notes: '',
+      sourcePath: 'test.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+    expect(renderer.windowStack.length).toBe(1)
+
+    destroyRenderer(renderer)
+  })
+
+  it('renders slide with title', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'My Slide Title',
+      },
+      body: 'Slide body content',
+      notes: '',
+      sourcePath: 'slide.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('renders slide with body content', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Content Slide',
+      },
+      body: 'This is the slide content',
+      notes: '',
+      sourcePath: 'content.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('renders slide with bigText', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Big Text Slide',
+        bigText: 'HELLO',
+      },
+      body: 'Additional content',
+      notes: '',
+      sourcePath: 'big.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('renders slide with multi-line bigText', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Multi-line Big Text',
+        bigText: ['SPEC', 'MACHINE'],
+      },
+      body: 'Body text',
+      notes: '',
+      sourcePath: 'multi.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses gradient from frontmatter', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Gradient Slide',
+        bigText: 'TEST',
+        gradient: 'matrix',
+      },
+      body: '',
+      notes: '',
+      sourcePath: 'gradient.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses default gradient when not specified', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Default Gradient',
+        bigText: 'TEST',
+      },
+      body: '',
+      notes: '',
+      sourcePath: 'default.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('applies transition from frontmatter', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Transition Slide',
+        transition: 'instant',
+      },
+      body: 'Content with instant transition',
+      notes: '',
+      sourcePath: 'transition.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('uses default glitch transition when not specified', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Default Transition',
+      },
+      body: 'Content',
+      notes: '',
+      sourcePath: 'default-trans.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('handles slide with notes (notes not rendered)', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Slide with Notes',
+      },
+      body: 'Visible content',
+      notes: 'These are presenter notes',
+      sourcePath: 'notes.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('handles slide with color tokens in body', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Color Token Slide',
+      },
+      body: 'Text with {GREEN} color',
+      notes: '',
+      sourcePath: 'token.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+
+  it('processes slide content through processSlideContent', async () => {
+    const renderer = createRenderer(DEFAULT_THEME)
+
+    const slide: Slide = {
+      frontmatter: {
+        title: 'Processed Slide',
+      },
+      body: 'Content with {PRIMARY} token',
+      notes: '',
+      sourcePath: 'processed.md',
+      index: 0,
+    }
+
+    const window = await renderSlide(renderer, slide)
+
+    expect(window).toBeDefined()
+
+    destroyRenderer(renderer)
+  })
+})