@alumbwe/anvil 1.0.42 → 1.0.50

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

@@ -1,1051 +0,0 @@
-import { describe, test, expect } from 'bun:test'
-import React from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-
-import { GridLayout } from '../grid-layout'
-
-interface TestItem {
-  id: string
-  name: string
-}
-
-const createTestItem = (id: string, name: string): TestItem => ({ id, name })
-
-const defaultGetItemKey = (item: TestItem): string => item.id
-
-const defaultRenderItem = (
-  item: TestItem,
-  _idx: number,
-  _columnWidth: number,
-): React.ReactNode => <text key={item.id}>{item.name}</text>
-
-describe('GridLayout', () => {
-  describe('empty state', () => {
-    test('returns null for empty items array', () => {
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={[]}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toBe('')
-    })
-  })
-
-  describe('single item rendering', () => {
-    test('renders a single item', () => {
-      const items = [createTestItem('item-1', 'First Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('First Item')
-    })
-
-    test('uses single column layout for one item', () => {
-      const items = [createTestItem('item-1', 'Only Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={200}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Only Item')
-    })
-  })
-
-  describe('multiple items rendering', () => {
-    test('renders all items', () => {
-      const items = [
-        createTestItem('item-1', 'Item One'),
-        createTestItem('item-2', 'Item Two'),
-        createTestItem('item-3', 'Item Three'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={180}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Item One')
-      expect(markup).toContain('Item Two')
-      expect(markup).toContain('Item Three')
-    })
-
-    test('renders items in correct order', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={50}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const alphaPos = markup.indexOf('Alpha')
-      const betaPos = markup.indexOf('Beta')
-      const gammaPos = markup.indexOf('Gamma')
-
-      expect(alphaPos).toBeLessThan(betaPos)
-      expect(betaPos).toBeLessThan(gammaPos)
-    })
-  })
-
-  describe('getItemKey function', () => {
-    test('uses getItemKey for React keys', () => {
-      const items = [
-        createTestItem('unique-key-1', 'Item 1'),
-        createTestItem('unique-key-2', 'Item 2'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={(item) => `custom-${item.id}`}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Item 1')
-      expect(markup).toContain('Item 2')
-    })
-
-    test('handles numeric keys', () => {
-      interface NumericItem {
-        index: number
-        label: string
-      }
-
-      const items: NumericItem[] = [
-        { index: 0, label: 'Zero' },
-        { index: 1, label: 'One' },
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={(item) => String(item.index)}
-          renderItem={(item) => <text>{item.label}</text>}
-        />,
-      )
-
-      expect(markup).toContain('Zero')
-      expect(markup).toContain('One')
-    })
-  })
-
-  describe('renderItem function', () => {
-    test('passes correct item to renderItem', () => {
-      const items = [createTestItem('test-id', 'Test Name')]
-      const renderedItems: TestItem[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, _width) => {
-            renderedItems.push(item)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      expect(renderedItems).toHaveLength(1)
-      expect(renderedItems[0]).toEqual({ id: 'test-id', name: 'Test Name' })
-    })
-
-    test('passes correct index to renderItem', () => {
-      const items = [
-        createTestItem('a', 'A'),
-        createTestItem('b', 'B'),
-        createTestItem('c', 'C'),
-      ]
-      const indices: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={50}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, idx, _width) => {
-            indices.push(idx)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      expect(indices).toEqual([0, 1, 2])
-    })
-
-    test('passes columnWidth to renderItem for single column', () => {
-      const items = [createTestItem('a', 'A')]
-      const widths: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            widths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      expect(widths[0]).toBe(120)
-    })
-
-    test('passes calculated columnWidth to renderItem for multi-column', () => {
-      const items = [
-        createTestItem('a', 'A'),
-        createTestItem('b', 'B'),
-      ]
-      const widths: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={121}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            widths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      // 2 columns: (121 - 1 gap) / 2 = 60
-      expect(widths[0]).toBe(60)
-      expect(widths[1]).toBe(60)
-    })
-  })
-
-  describe('footer prop', () => {
-    test('renders footer when provided', () => {
-      const items = [createTestItem('item-1', 'Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-          footer={<text>Footer Content</text>}
-        />,
-      )
-
-      expect(markup).toContain('Footer Content')
-    })
-
-    test('renders footer after items in single column', () => {
-      const items = [createTestItem('item-1', 'Main Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={50}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-          footer={<text>The Footer</text>}
-        />,
-      )
-
-      const itemPos = markup.indexOf('Main Item')
-      const footerPos = markup.indexOf('The Footer')
-
-      expect(itemPos).toBeLessThan(footerPos)
-    })
-
-    test('renders footer after items in multi-column', () => {
-      const items = [
-        createTestItem('a', 'Item A'),
-        createTestItem('b', 'Item B'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-          footer={<text>Multi-col Footer</text>}
-        />,
-      )
-
-      expect(markup).toContain('Item A')
-      expect(markup).toContain('Item B')
-      expect(markup).toContain('Multi-col Footer')
-    })
-
-    test('does not render footer when not provided', () => {
-      const items = [createTestItem('item-1', 'Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).not.toContain('Footer')
-    })
-
-    test('renders complex footer elements', () => {
-      const items = [createTestItem('item-1', 'Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-          footer={
-            <box>
-              <text>Status:</text>
-              <text>Complete</text>
-            </box>
-          }
-        />,
-      )
-
-      expect(markup).toContain('Status:')
-      expect(markup).toContain('Complete')
-    })
-  })
-
-  describe('marginTop prop', () => {
-    test('applies default marginTop of 0', () => {
-      const items = [createTestItem('item-1', 'Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toBeDefined()
-    })
-
-    test('applies custom marginTop', () => {
-      const items = [createTestItem('item-1', 'Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-          marginTop={2}
-        />,
-      )
-
-      expect(markup).toContain('Item')
-    })
-  })
-
-  describe('column layout based on width', () => {
-    test('narrow width (< 100) uses single column', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Alpha')
-      expect(markup).toContain('Beta')
-      expect(markup).toContain('Gamma')
-    })
-
-    test('medium width (100-149) uses up to 2 columns', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Alpha')
-      expect(markup).toContain('Beta')
-    })
-
-    test('large width (150-199) uses up to 3 columns', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={180}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Alpha')
-      expect(markup).toContain('Beta')
-      expect(markup).toContain('Gamma')
-    })
-
-    test('extra large width (>= 200) uses up to 4 columns', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-        createTestItem('d', 'Delta'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={250}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Alpha')
-      expect(markup).toContain('Beta')
-      expect(markup).toContain('Gamma')
-      expect(markup).toContain('Delta')
-    })
-  })
-
-  describe('generic type support', () => {
-    test('works with string items', () => {
-      const items = ['one', 'two', 'three']
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={180}
-          getItemKey={(item) => item}
-          renderItem={(item) => <text>{item.toUpperCase()}</text>}
-        />,
-      )
-
-      expect(markup).toContain('ONE')
-      expect(markup).toContain('TWO')
-      expect(markup).toContain('THREE')
-    })
-
-    test('works with number items', () => {
-      const items = [1, 2, 3]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={180}
-          getItemKey={(item) => String(item)}
-          renderItem={(item) => <text>Number: {item}</text>}
-        />,
-      )
-
-      expect(markup).toContain('Number: 1')
-      expect(markup).toContain('Number: 2')
-      expect(markup).toContain('Number: 3')
-    })
-
-    test('works with complex object items', () => {
-      interface ComplexItem {
-        id: string
-        data: {
-          title: string
-          count: number
-        }
-      }
-
-      const items: ComplexItem[] = [
-        { id: 'c1', data: { title: 'First', count: 10 } },
-        { id: 'c2', data: { title: 'Second', count: 20 } },
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={(item) => item.id}
-          renderItem={(item) => (
-            <text>
-              {item.data.title}: {item.data.count}
-            </text>
-          )}
-        />,
-      )
-
-      expect(markup).toContain('First: 10')
-      expect(markup).toContain('Second: 20')
-    })
-  })
-
-  describe('narrow terminal rendering', () => {
-    test('renders all items with very narrow width (15 chars)', () => {
-      const items = [
-        createTestItem('a', 'Item A'),
-        createTestItem('b', 'Item B'),
-        createTestItem('c', 'Item C'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={15}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Item A')
-      expect(markup).toContain('Item B')
-      expect(markup).toContain('Item C')
-    })
-
-    test('renders all items with narrow width (20 chars)', () => {
-      const items = [
-        createTestItem('a', 'First'),
-        createTestItem('b', 'Second'),
-        createTestItem('c', 'Third'),
-        createTestItem('d', 'Fourth'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={20}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('First')
-      expect(markup).toContain('Second')
-      expect(markup).toContain('Third')
-      expect(markup).toContain('Fourth')
-    })
-
-    test('uses single column for narrow width with multiple items', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-      ]
-      const widths: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={18}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            widths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      // All items should receive the full availableWidth (single column)
-      expect(widths).toEqual([18, 18, 18])
-    })
-
-    test('renders items in correct order with narrow width', () => {
-      const items = [
-        createTestItem('a', 'One'),
-        createTestItem('b', 'Two'),
-        createTestItem('c', 'Three'),
-        createTestItem('d', 'Four'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={15}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const onePos = markup.indexOf('One')
-      const twoPos = markup.indexOf('Two')
-      const threePos = markup.indexOf('Three')
-      const fourPos = markup.indexOf('Four')
-
-      expect(onePos).toBeLessThan(twoPos)
-      expect(twoPos).toBeLessThan(threePos)
-      expect(threePos).toBeLessThan(fourPos)
-    })
-
-    test('handles boundary width (21 chars) - still single column due to threshold', () => {
-      const items = [
-        createTestItem('a', 'A'),
-        createTestItem('b', 'B'),
-      ]
-      const widths: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={21}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            widths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      // 21 passes the minWidthForTwoColumns check (21 >= 21), but
-      // maxColumns is still 1 because 21 < WIDTH_MD_THRESHOLD (100)
-      // So it uses single column with full availableWidth
-      expect(widths[0]).toBe(21)
-      expect(widths[1]).toBe(21)
-    })
-
-    test('forces single column when width is just below threshold (20 chars)', () => {
-      const items = [
-        createTestItem('a', 'A'),
-        createTestItem('b', 'B'),
-      ]
-      const widths: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={20}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            widths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      // 20 is below minWidthForTwoColumns (21), so single column
-      // columnWidth = availableWidth = 20
-      expect(widths[0]).toBe(20)
-      expect(widths[1]).toBe(20)
-    })
-  })
-
-  describe('column transition (2→1)', () => {
-    // These tests verify the fix for the resize bug where content would disappear
-    // when transitioning from 2 columns to 1 column during terminal resize.
-    // The fix uses a unified DOM structure for all column counts.
-
-    test('all items render when transitioning from 2-column to 1-column width', () => {
-      const items = [
-        createTestItem('a', 'Alpha'),
-        createTestItem('b', 'Beta'),
-        createTestItem('c', 'Gamma'),
-      ]
-
-      // First render at 2-column width (120 is in the 100-149 range = 2 columns max)
-      const twoColumnMarkup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      // Then render at 1-column width (80 is below 100 = 1 column)
-      const oneColumnMarkup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      // All items should be present in both renders
-      expect(twoColumnMarkup).toContain('Alpha')
-      expect(twoColumnMarkup).toContain('Beta')
-      expect(twoColumnMarkup).toContain('Gamma')
-
-      expect(oneColumnMarkup).toContain('Alpha')
-      expect(oneColumnMarkup).toContain('Beta')
-      expect(oneColumnMarkup).toContain('Gamma')
-    })
-
-    test('items maintain correct order during 2→1 transition', () => {
-      const items = [
-        createTestItem('a', 'First'),
-        createTestItem('b', 'Second'),
-        createTestItem('c', 'Third'),
-        createTestItem('d', 'Fourth'),
-      ]
-
-      // Render at 1-column width (simulating post-transition state)
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const firstPos = markup.indexOf('First')
-      const secondPos = markup.indexOf('Second')
-      const thirdPos = markup.indexOf('Third')
-      const fourthPos = markup.indexOf('Fourth')
-
-      // Items should be in order in single-column mode
-      expect(firstPos).toBeLessThan(secondPos)
-      expect(secondPos).toBeLessThan(thirdPos)
-      expect(thirdPos).toBeLessThan(fourthPos)
-    })
-
-    test('same items rendered in both 2-column and 1-column layouts', () => {
-      const items = [
-        createTestItem('item-1', 'Apple'),
-        createTestItem('item-2', 'Banana'),
-        createTestItem('item-3', 'Cherry'),
-      ]
-
-      const twoColumnMarkup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const oneColumnMarkup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      // Extract item names from both renders - they should be identical sets
-      const itemNames = ['Apple', 'Banana', 'Cherry']
-      for (const name of itemNames) {
-        expect(twoColumnMarkup).toContain(name)
-        expect(oneColumnMarkup).toContain(name)
-      }
-    })
-
-    test('transition works with 2 items', () => {
-      const items = [
-        createTestItem('a', 'One'),
-        createTestItem('b', 'Two'),
-      ]
-
-      // 2-column layout
-      const twoCol = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      // 1-column layout
-      const oneCol = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(twoCol).toContain('One')
-      expect(twoCol).toContain('Two')
-      expect(oneCol).toContain('One')
-      expect(oneCol).toContain('Two')
-    })
-
-    test('transition works with 3 items', () => {
-      const items = [
-        createTestItem('a', 'Red'),
-        createTestItem('b', 'Green'),
-        createTestItem('c', 'Blue'),
-      ]
-
-      const twoCol = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const oneCol = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(twoCol).toContain('Red')
-      expect(twoCol).toContain('Green')
-      expect(twoCol).toContain('Blue')
-      expect(oneCol).toContain('Red')
-      expect(oneCol).toContain('Green')
-      expect(oneCol).toContain('Blue')
-    })
-
-    test('transition works with 4 items', () => {
-      const items = [
-        createTestItem('a', 'North'),
-        createTestItem('b', 'South'),
-        createTestItem('c', 'East'),
-        createTestItem('d', 'West'),
-      ]
-
-      const twoCol = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const oneCol = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(twoCol).toContain('North')
-      expect(twoCol).toContain('South')
-      expect(twoCol).toContain('East')
-      expect(twoCol).toContain('West')
-      expect(oneCol).toContain('North')
-      expect(oneCol).toContain('South')
-      expect(oneCol).toContain('East')
-      expect(oneCol).toContain('West')
-    })
-
-    test('columnWidth is passed correctly in both layouts', () => {
-      const items = [
-        createTestItem('a', 'A'),
-        createTestItem('b', 'B'),
-      ]
-
-      const twoColWidths: number[] = []
-      const oneColWidths: number[] = []
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            twoColWidths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={80}
-          getItemKey={defaultGetItemKey}
-          renderItem={(item, _idx, width) => {
-            oneColWidths.push(width)
-            return <text>{item.name}</text>
-          }}
-        />,
-      )
-
-      // 2-column: (120 - 1 gap) / 2 = 59.5 -> 59
-      expect(twoColWidths[0]).toBe(59)
-      expect(twoColWidths[1]).toBe(59)
-
-      // 1-column: full width
-      expect(oneColWidths[0]).toBe(80)
-      expect(oneColWidths[1]).toBe(80)
-    })
-
-    test('unified structure handles rapid width changes', () => {
-      const items = [
-        createTestItem('a', 'Item1'),
-        createTestItem('b', 'Item2'),
-        createTestItem('c', 'Item3'),
-      ]
-
-      // Simulate rapid resize: 2-col -> 1-col -> 2-col -> 1-col
-      const widths = [120, 80, 120, 80]
-      
-      for (const width of widths) {
-        const markup = renderToStaticMarkup(
-          <GridLayout
-            items={items}
-            availableWidth={width}
-            getItemKey={defaultGetItemKey}
-            renderItem={defaultRenderItem}
-          />,
-        )
-
-        // All items should always be present regardless of width
-        expect(markup).toContain('Item1')
-        expect(markup).toContain('Item2')
-        expect(markup).toContain('Item3')
-      }
-    })
-  })
-
-  describe('edge cases', () => {
-    test('handles very narrow width', () => {
-      const items = [createTestItem('item-1', 'Narrow')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={10}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Narrow')
-    })
-
-    test('handles many items', () => {
-      const items = Array.from({ length: 50 }, (_, i) =>
-        createTestItem(`item-${i}`, `Item ${i}`),
-      )
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={200}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup).toContain('Item 0')
-      expect(markup).toContain('Item 49')
-    })
-
-    test('handles items with special characters in names', () => {
-      const items = [
-        createTestItem('special-1', '<script>alert("xss")</script>'),
-        createTestItem('special-2', 'Item & More'),
-      ]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      // React escapes HTML entities
-      expect(markup).toContain('&lt;script&gt;')
-      expect(markup).toContain('&amp;')
-    })
-
-    test('handles undefined footer gracefully', () => {
-      const items = [createTestItem('item-1', 'Item')]
-
-      const markup = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-          footer={undefined}
-        />,
-      )
-
-      expect(markup).toContain('Item')
-    })
-  })
-
-  describe('memoization', () => {
-    test('component is memoized', () => {
-      // MasonryGrid is wrapped in memo(), verify it renders consistently
-      const items = [createTestItem('memo-test', 'Memoized')]
-
-      const markup1 = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      const markup2 = renderToStaticMarkup(
-        <GridLayout
-          items={items}
-          availableWidth={120}
-          getItemKey={defaultGetItemKey}
-          renderItem={defaultRenderItem}
-        />,
-      )
-
-      expect(markup1).toBe(markup2)
-    })
-  })
-})