@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/__tests__/freebuff-takeover-prompt.test.tsx

@@ -1,212 +0,0 @@
-import { afterEach, beforeAll, describe, expect, test } from 'bun:test'
-import { createTestRenderer } from '@opentui/core/testing'
-import { createRoot, flushSync } from '@opentui/react'
-import React from 'react'
-
-import { TakeoverPrompt } from '../freebuff-landing-screen'
-import { initializeThemeStore } from '../../hooks/use-theme'
-
-let cleanupRenderer: (() => void) | undefined
-const originalDateNow = Date.now
-
-beforeAll(() => {
-  initializeThemeStore()
-})
-
-afterEach(() => {
-  Date.now = originalDateNow
-  cleanupRenderer?.()
-  cleanupRenderer = undefined
-})
-
-const mountPrompt = async ({
-  failure = null,
-  onTakeOver = async () => {},
-}: Partial<React.ComponentProps<typeof TakeoverPrompt>> = {}) => {
-  const setup = await createTestRenderer({ width: 90, height: 12 })
-  const root = createRoot(setup.renderer)
-  cleanupRenderer = () => {
-    flushSync(() => root.unmount())
-    setup.renderer.destroy()
-  }
-  flushSync(() =>
-    root.render(<TakeoverPrompt failure={failure} onTakeOver={onTakeOver} />),
-  )
-  await setup.renderOnce()
-  return Object.assign(setup, {
-    rerenderPrompt: async (
-      next: React.ComponentProps<typeof TakeoverPrompt>,
-    ) => {
-      flushSync(() => root.render(<TakeoverPrompt {...next} />))
-      await setup.renderOnce()
-    },
-  })
-}
-
-describe('TakeoverPrompt', () => {
-  test('shows retry status for a retryable timeout', async () => {
-    const setup = await mountPrompt({
-      failure: {
-        type: 'timeout',
-        message: 'runtime-specific abort message',
-        retry: { attempt: 2, retryAtMs: Date.now() + 60_000 },
-        outcomeUnknown: false,
-      },
-    })
-    const frame = setup.captureCharFrame()
-
-    expect(frame).toContain(
-      'The takeover request timed out while Freebuff was busy.',
-    )
-    expect(frame).toContain('Retrying automatically in')
-    expect(frame).toContain('(attempt 2).')
-    expect(frame).toContain('Retry now')
-  })
-
-  test('allows an explicit retry after a takeover timeout with an unknown outcome', async () => {
-    let calls = 0
-    const setup = await mountPrompt({
-      failure: {
-        type: 'timeout',
-        message: 'The operation timed out',
-        retry: null,
-        outcomeUnknown: true,
-      },
-      onTakeOver: async () => {
-        calls++
-      },
-    })
-
-    setup.mockInput.pressEnter()
-    await Promise.resolve()
-
-    const frame = setup.captureCharFrame()
-    const normalizedFrame = frame.replace(/\s+/g, ' ')
-    expect(calls).toBe(1)
-    expect(normalizedFrame).toContain('may have succeeded')
-    expect(frame).toContain('Try takeover again')
-    expect(frame).not.toContain('Retrying automatically')
-  })
-
-  test('turns a 503 response into actionable copy', async () => {
-    const setup = await mountPrompt({
-      failure: {
-        type: 'http',
-        statusCode: 503,
-        message: 'runtime-specific service error',
-        retry: null,
-        outcomeUnknown: false,
-      },
-    })
-    const frame = setup.captureCharFrame()
-
-    expect(frame).toContain(
-      "Freebuff is busy and couldn't complete the takeover yet.",
-    )
-    expect(frame).not.toContain('runtime-specific service error')
-  })
-
-  test('does not render a blank message for an empty unexpected error', async () => {
-    const setup = await mountPrompt({
-      failure: {
-        type: 'other',
-        message: '',
-        retry: null,
-        outcomeUnknown: false,
-      },
-    })
-
-    expect(setup.captureCharFrame()).toContain(
-      'The takeover failed unexpectedly.',
-    )
-  })
-
-  test('submits only once when Enter repeats before React rerenders', async () => {
-    let calls = 0
-    let finishTakeover: (() => void) | undefined
-    const pendingTakeover = new Promise<void>((resolve) => {
-      finishTakeover = resolve
-    })
-    const setup = await mountPrompt({
-      onTakeOver: () => {
-        calls++
-        return pendingTakeover
-      },
-    })
-
-    flushSync(() => {
-      setup.mockInput.pressEnter()
-      setup.mockInput.pressEnter()
-    })
-    await setup.renderOnce()
-
-    expect(calls).toBe(1)
-    expect(setup.captureCharFrame()).toContain('Taking over...')
-
-    finishTakeover!()
-    await pendingTakeover
-  })
-
-  test('lets the user retry immediately during automatic backoff', async () => {
-    let calls = 0
-    const setup = await mountPrompt({
-      failure: {
-        type: 'http',
-        statusCode: 503,
-        message: 'freebuff session POST failed: 503',
-        retry: { attempt: 3, retryAtMs: Date.now() + 30_000 },
-        outcomeUnknown: false,
-      },
-      onTakeOver: async () => {
-        calls++
-      },
-    })
-
-    setup.mockInput.pressEnter()
-    await Promise.resolve()
-
-    expect(calls).toBe(1)
-    expect(setup.captureCharFrame()).toContain('Retry now')
-  })
-
-  test('starts a newly appearing retry countdown from the current time', async () => {
-    let now = 1_000
-    Date.now = () => now
-    const setup = await mountPrompt()
-
-    now += 60 * 60 * 1_000
-    await setup.rerenderPrompt({
-      failure: {
-        type: 'timeout',
-        message: 'request timed out',
-        retry: { attempt: 2, retryAtMs: now + 30_000 },
-        outcomeUnknown: false,
-      },
-    })
-
-    expect(setup.captureCharFrame()).toContain('Retrying automatically in 30s')
-  })
-
-  test('allows an explicit retry when a non-timeout POST result is unknown', async () => {
-    let calls = 0
-    const setup = await mountPrompt({
-      failure: {
-        type: 'other',
-        message: 'fetch failed',
-        retry: null,
-        outcomeUnknown: true,
-      },
-      onTakeOver: async () => {
-        calls++
-      },
-    })
-
-    setup.mockInput.pressEnter()
-    await Promise.resolve()
-
-    const frame = setup.captureCharFrame().replace(/\s+/g, ' ')
-    expect(calls).toBe(1)
-    expect(frame).toContain("couldn't confirm whether the takeover succeeded")
-    expect(frame).toContain('Try takeover again')
-  })
-})

package/src/components/__tests__/grid-layout.integration.test.tsx

@@ -1,304 +0,0 @@
-/**
- * Integration tests for GridLayout React reconciliation during resize.
- * 
- * These tests verify that the unified DOM structure fix properly handles
- * column transitions (2→1) without losing content during React reconciliation.
- * 
- * Unlike the static rendering tests in grid-layout.test.tsx, these tests
- * simulate actual re-renders with changing props to catch reconciliation bugs.
- */
-import { describe, test, expect } from 'bun:test'
-import React, { useCallback } from 'react'
-import { renderToString } from 'react-dom/server'
-
-import { GridLayout } from '../grid-layout'
-
-interface TestItem {
-  id: string
-  name: string
-}
-
-const createTestItem = (id: string, name: string): TestItem => ({ id, name })
-
-/**
- * Test wrapper that simulates resize by rendering at multiple widths
- * and tracking which items were rendered at each width.
- */
-interface RenderTracker {
-  renderedItems: Map<number, string[]>  // width -> item names rendered
-  renderCounts: Map<string, number>     // item id -> render count
-}
-
-function createRenderTracker(): RenderTracker {
-  return {
-    renderedItems: new Map(),
-    renderCounts: new Map(),
-  }
-}
-
-/**
- * Component that renders GridLayout and tracks rendered items.
- * This simulates what happens during actual React reconciliation.
- */
-function TrackedGridLayout({
-  items,
-  availableWidth,
-  tracker,
-}: {
-  items: TestItem[]
-  availableWidth: number
-  tracker: RenderTracker
-}) {
-  const renderItem = useCallback(
-    (item: TestItem, _idx: number, _columnWidth: number) => {
-      // Track this item was rendered
-      const currentCount = tracker.renderCounts.get(item.id) || 0
-      tracker.renderCounts.set(item.id, currentCount + 1)
-      
-      // Track items rendered at this width
-      const widthItems = tracker.renderedItems.get(availableWidth) || []
-      if (!widthItems.includes(item.name)) {
-        widthItems.push(item.name)
-        tracker.renderedItems.set(availableWidth, widthItems)
-      }
-      
-      return <text key={item.id}>{item.name}</text>
-    },
-    [availableWidth, tracker],
-  )
-
-  const getItemKey = useCallback((item: TestItem) => item.id, [])
-
-  return (
-    <GridLayout
-      items={items}
-      availableWidth={availableWidth}
-      getItemKey={getItemKey}
-      renderItem={renderItem}
-    />
-  )
-}
-
-describe('GridLayout React Reconciliation', () => {
-  describe('column transition (2→1) reconciliation', () => {
-    test('all items survive rerender when width changes from 120 to 80', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-      ]
-      const tracker = createRenderTracker()
-
-      // First render at 2-column width (120)
-      const markup1 = renderToString(
-        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
-      )
-
-      // Verify all items rendered at width 120 (order may vary due to round-robin distribution)
-      expect(tracker.renderedItems.get(120)?.sort()).toEqual(['Alpha', 'Beta', 'Gamma'])
-      expect(markup1).toContain('Alpha')
-      expect(markup1).toContain('Beta')
-      expect(markup1).toContain('Gamma')
-
-      // Second render at 1-column width (80) - simulates resize
-      const markup2 = renderToString(
-        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
-      )
-
-      // Verify all items rendered at width 80
-      expect(tracker.renderedItems.get(80)?.sort()).toEqual(['Alpha', 'Beta', 'Gamma'])
-      expect(markup2).toContain('Alpha')
-      expect(markup2).toContain('Beta')
-      expect(markup2).toContain('Gamma')
-
-      // Verify each item was rendered exactly twice (once per width)
-      expect(tracker.renderCounts.get('a')).toBe(2)
-      expect(tracker.renderCounts.get('b')).toBe(2)
-      expect(tracker.renderCounts.get('c')).toBe(2)
-    })
-
-    test('item order is preserved after 2→1 transition', () => {
-      const items = [
-        createTestItem('1', 'First'),
-        createTestItem('2', 'Second'),
-        createTestItem('3', 'Third'),
-        createTestItem('4', 'Fourth'),
-      ]
-      const tracker = createRenderTracker()
-
-      // Render at 2-column width first
-      renderToString(
-        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
-      )
-
-      // Then render at 1-column width
-      const markup = renderToString(
-        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
-      )
-
-      // Check order in final markup
-      const firstPos = markup.indexOf('First')
-      const secondPos = markup.indexOf('Second')
-      const thirdPos = markup.indexOf('Third')
-      const fourthPos = markup.indexOf('Fourth')
-
-      expect(firstPos).toBeLessThan(secondPos)
-      expect(secondPos).toBeLessThan(thirdPos)
-      expect(thirdPos).toBeLessThan(fourthPos)
-    })
-
-    test('multiple rapid width changes preserve all items', () => {
-      const items = [
-        createTestItem('a', 'Apple'),
-        createTestItem('b', 'Banana'),
-        createTestItem('c', 'Cherry'),
-      ]
-      const tracker = createRenderTracker()
-
-      // Simulate rapid resize: 2-col → 1-col → 2-col → 1-col → 2-col
-      const widthSequence = [120, 80, 120, 80, 120]
-
-      for (const width of widthSequence) {
-        const markup = renderToString(
-          <TrackedGridLayout items={items} availableWidth={width} tracker={tracker} />,
-        )
-
-        // Every render should contain all items
-        expect(markup).toContain('Apple')
-        expect(markup).toContain('Banana')
-        expect(markup).toContain('Cherry')
-      }
-
-      // Verify items were rendered correct number of times
-      // 5 renders total, each item should be rendered 5 times
-      expect(tracker.renderCounts.get('a')).toBe(5)
-      expect(tracker.renderCounts.get('b')).toBe(5)
-      expect(tracker.renderCounts.get('c')).toBe(5)
-    })
-
-    test('3→2→1 column transition preserves all items', () => {
-      const items = [
-        createTestItem('a', 'One'),
-        createTestItem('b', 'Two'),
-        createTestItem('c', 'Three'),
-        createTestItem('d', 'Four'),
-        createTestItem('e', 'Five'),
-        createTestItem('f', 'Six'),
-      ]
-      const tracker = createRenderTracker()
-
-      // Start at 3-column width (150+)
-      renderToString(
-        <TrackedGridLayout items={items} availableWidth={180} tracker={tracker} />,
-      )
-      expect(tracker.renderedItems.get(180)?.length).toBe(6)
-
-      // Transition to 2-column width (100-149)
-      renderToString(
-        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
-      )
-      expect(tracker.renderedItems.get(120)?.length).toBe(6)
-
-      // Transition to 1-column width (<100)
-      const finalMarkup = renderToString(
-        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
-      )
-      expect(tracker.renderedItems.get(80)?.length).toBe(6)
-
-      // All items present in final render
-      expect(finalMarkup).toContain('One')
-      expect(finalMarkup).toContain('Two')
-      expect(finalMarkup).toContain('Three')
-      expect(finalMarkup).toContain('Four')
-      expect(finalMarkup).toContain('Five')
-      expect(finalMarkup).toContain('Six')
-    })
-
-    test('1→2 column expansion also works correctly', () => {
-      const items = [
-        createTestItem('x', 'Xray'),
-        createTestItem('y', 'Yankee'),
-        createTestItem('z', 'Zulu'),
-      ]
-      const tracker = createRenderTracker()
-
-      // Start at 1-column width
-      renderToString(
-        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
-      )
-      expect(tracker.renderedItems.get(80)?.sort()).toEqual(['Xray', 'Yankee', 'Zulu'])
-
-      // Expand to 2-column width
-      const expandedMarkup = renderToString(
-        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
-      )
-      expect(tracker.renderedItems.get(120)?.sort()).toEqual(['Xray', 'Yankee', 'Zulu'])
-
-      // All items present
-      expect(expandedMarkup).toContain('Xray')
-      expect(expandedMarkup).toContain('Yankee')
-      expect(expandedMarkup).toContain('Zulu')
-    })
-  })
-
-  describe('unified DOM structure verification', () => {
-    test('both column layouts produce valid markup', () => {
-      const items = [
-        createTestItem('a', 'Item1'),
-        createTestItem('b', 'Item2'),
-      ]
-
-      // 2-column layout
-      const twoColMarkup = renderToString(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={(item) => item.id}
-          renderItem={(item) => <text>{item.name}</text>}
-        />,
-      )
-
-      // 1-column layout  
-      const oneColMarkup = renderToString(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={(item) => item.id}
-          renderItem={(item) => <text>{item.name}</text>}
-        />,
-      )
-
-      // Both should produce valid, non-empty markup
-      expect(twoColMarkup.length).toBeGreaterThan(0)
-      expect(oneColMarkup.length).toBeGreaterThan(0)
-
-      // Both should contain the items
-      expect(twoColMarkup).toContain('Item1')
-      expect(twoColMarkup).toContain('Item2')
-      expect(oneColMarkup).toContain('Item1')
-      expect(oneColMarkup).toContain('Item2')
-    })
-
-    test('no items lost even with dramatic width reduction', () => {
-      const items = Array.from({ length: 10 }, (_, i) =>
-        createTestItem(`item-${i}`, `Content${i}`),
-      )
-      const tracker = createRenderTracker()
-
-      // Start at 4-column width (200+)
-      renderToString(
-        <TrackedGridLayout items={items} availableWidth={250} tracker={tracker} />,
-      )
-
-      // Dramatically reduce to 1-column
-      const finalMarkup = renderToString(
-        <TrackedGridLayout items={items} availableWidth={50} tracker={tracker} />,
-      )
-
-      // All 10 items should be present
-      for (let i = 0; i < 10; i++) {
-        expect(finalMarkup).toContain(`Content${i}`)
-      }
-    })
-  })
-})