@svgrid/grid 1.0.0 → 1.1.0

package/src/columns.test.ts

@@ -0,0 +1,702 @@
+/**
+ * Unit tests for the column handlers produced by createColumns(ctx).
+ *
+ * createColumns is a factory: it closes over a mutable `ctx` handle (the
+ * controller's reactive state in production) and returns imperative event
+ * handlers. We drive it here with a plain fake ctx object so we can assert on
+ * pinning / ordering / sizing / visibility logic without mounting the grid.
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createColumns } from './columns'
+
+type AnyCtx = Record<string, any>
+
+/** A minimally-populated ctx covering every field the handlers read/write. */
+function makeCtx(overrides: Partial<AnyCtx> = {}): AnyCtx {
+  const allColumns = [
+    { id: 'a', columnDef: { width: 120 } },
+    { id: 'b', columnDef: {} },
+    { id: 'c', columnDef: { width: 200 } },
+    { id: 'd', columnDef: {} },
+  ]
+  const ctx: AnyCtx = {
+    allColumns,
+    toolPanelColumns: allColumns.map((c) => ({ id: c.id })),
+    props: {},
+    userColumnOrder: undefined,
+    pinnedOffsets: { left: {}, right: {} },
+    columnPinning: { left: [], right: [] },
+    hiddenColumns: {},
+    columnWidths: {},
+    fittedColumnWidths: {},
+    MIN_COLUMN_WIDTH: 40,
+    closeMenus: vi.fn(),
+    // drag state
+    colDragId: null,
+    colDropOnId: null,
+    colDropSide: null,
+    // resize state
+    resizingColumnId: null,
+    resizeStartX: 0,
+    resizeStartWidth: 0,
+    resizePendingWidth: 0,
+    resizeRaf: null,
+    measureCanvas: null,
+    gridRootEl: null,
+    grid: {
+      getAllColumns: () => allColumns,
+      getState: () => ({ grouping: [] }),
+      setGrouping: vi.fn(),
+    },
+    ...overrides,
+  }
+  return ctx
+}
+
+describe('cellPinStyle', () => {
+  it('returns a left sticky style when the column has a left offset', () => {
+    const ctx = makeCtx({ pinnedOffsets: { left: { a: 0, b: 120 }, right: {} } })
+    const h = createColumns(ctx)
+    expect(h.cellPinStyle('a')).toBe('position: sticky; left: 0px; z-index: 30;')
+    expect(h.cellPinStyle('b')).toBe('position: sticky; left: 120px; z-index: 30;')
+  })
+
+  it('returns a right sticky style when the column has a right offset', () => {
+    const ctx = makeCtx({ pinnedOffsets: { left: {}, right: { d: 0 } } })
+    const h = createColumns(ctx)
+    expect(h.cellPinStyle('d')).toBe('position: sticky; right: 0px; z-index: 30;')
+  })
+
+  it('returns empty string for an unpinned column', () => {
+    const h = createColumns(makeCtx())
+    expect(h.cellPinStyle('a')).toBe('')
+  })
+
+  it('prefers the left offset when a column appears in both maps', () => {
+    const ctx = makeCtx({ pinnedOffsets: { left: { a: 5 }, right: { a: 9 } } })
+    const h = createColumns(ctx)
+    expect(h.cellPinStyle('a')).toBe('position: sticky; left: 5px; z-index: 30;')
+  })
+})
+
+describe('isColumnPinned', () => {
+  it('reports left / right / null', () => {
+    const ctx = makeCtx({ columnPinning: { left: ['a'], right: ['d'] } })
+    const h = createColumns(ctx)
+    expect(h.isColumnPinned('a')).toBe('left')
+    expect(h.isColumnPinned('d')).toBe('right')
+    expect(h.isColumnPinned('b')).toBeNull()
+  })
+})
+
+describe('getCurrentColumnOrder / emitColumnOrder / setColumnOrderInternal', () => {
+  it('reads the order from allColumns ids', () => {
+    const h = createColumns(makeCtx())
+    expect(h.getCurrentColumnOrder()).toEqual(['a', 'b', 'c', 'd'])
+  })
+
+  it('emitColumnOrder invokes the callback with the current order', () => {
+    const onColumnOrderChange = vi.fn()
+    const h = createColumns(makeCtx({ props: { onColumnOrderChange } }))
+    h.emitColumnOrder()
+    expect(onColumnOrderChange).toHaveBeenCalledWith(['a', 'b', 'c', 'd'])
+  })
+
+  it('emitColumnOrder is a no-op when no callback is provided', () => {
+    const h = createColumns(makeCtx())
+    expect(() => h.emitColumnOrder()).not.toThrow()
+  })
+
+  it('setColumnOrderInternal writes userColumnOrder and emits', () => {
+    const onColumnOrderChange = vi.fn()
+    const ctx = makeCtx({ props: { onColumnOrderChange } })
+    const h = createColumns(ctx)
+    h.setColumnOrderInternal(['d', 'c', 'b', 'a'])
+    expect(ctx.userColumnOrder).toEqual(['d', 'c', 'b', 'a'])
+    expect(onColumnOrderChange).toHaveBeenCalledWith(['a', 'b', 'c', 'd'])
+  })
+})
+
+describe('applyColumnDrop', () => {
+  let ctx: AnyCtx
+  let h: ReturnType<typeof createColumns>
+  beforeEach(() => {
+    ctx = makeCtx()
+    h = createColumns(ctx)
+  })
+
+  it('does nothing when dragId === targetId', () => {
+    h.applyColumnDrop('a', 'a', 'before')
+    expect(ctx.userColumnOrder).toBeUndefined()
+  })
+
+  it('drops before the target', () => {
+    h.applyColumnDrop('a', 'c', 'before')
+    expect(ctx.userColumnOrder).toEqual(['b', 'a', 'c', 'd'])
+  })
+
+  it('drops after the target', () => {
+    h.applyColumnDrop('a', 'c', 'after')
+    expect(ctx.userColumnOrder).toEqual(['b', 'c', 'a', 'd'])
+  })
+
+  it('moving the last column to the front', () => {
+    h.applyColumnDrop('d', 'a', 'before')
+    expect(ctx.userColumnOrder).toEqual(['d', 'a', 'b', 'c'])
+  })
+
+  it('does nothing when the target id is unknown', () => {
+    h.applyColumnDrop('a', 'zzz', 'before')
+    expect(ctx.userColumnOrder).toBeUndefined()
+  })
+})
+
+describe('column header drag handlers', () => {
+  function dragEvent(): any {
+    return {
+      preventDefault: vi.fn(),
+      dataTransfer: { setData: vi.fn(), effectAllowed: '', dropEffect: '' },
+      clientX: 0,
+      currentTarget: {
+        getBoundingClientRect: () => ({ left: 0, width: 100 }),
+      },
+    }
+  }
+
+  it('dragStart is gated off unless enableColumnReorder', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    h.onColumnHeaderDragStart(e, 'a')
+    expect(ctx.colDragId).toBeNull()
+    expect(e.dataTransfer.setData).not.toHaveBeenCalled()
+  })
+
+  it('dragStart records the drag id when reorder is enabled', () => {
+    const ctx = makeCtx({ props: { enableColumnReorder: true } })
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    h.onColumnHeaderDragStart(e, 'a')
+    expect(ctx.colDragId).toBe('a')
+    expect(e.dataTransfer.setData).toHaveBeenCalledWith('text/plain', 'a')
+    expect(e.dataTransfer.effectAllowed).toBe('move')
+  })
+
+  it('dragOver does nothing when no drag is active or over self', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    h.onColumnHeaderDragOver(e, 'b')
+    expect(e.preventDefault).not.toHaveBeenCalled()
+
+    ctx.colDragId = 'b'
+    h.onColumnHeaderDragOver(e, 'b') // over the dragged column itself
+    expect(e.preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('dragOver sets side=before on the left half', () => {
+    const ctx = makeCtx({ colDragId: 'a' })
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    e.clientX = 10 // < left + width/2 (50)
+    h.onColumnHeaderDragOver(e, 'b')
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(ctx.colDropSide).toBe('before')
+    expect(ctx.colDropOnId).toBe('b')
+  })
+
+  it('dragOver sets side=after on the right half', () => {
+    const ctx = makeCtx({ colDragId: 'a' })
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    e.clientX = 80 // > 50
+    h.onColumnHeaderDragOver(e, 'b')
+    expect(ctx.colDropSide).toBe('after')
+  })
+
+  it('dragLeave clears state only for the matching column', () => {
+    const ctx = makeCtx({ colDropOnId: 'b', colDropSide: 'after' })
+    const h = createColumns(ctx)
+    h.onColumnHeaderDragLeave('a') // different column - no change
+    expect(ctx.colDropOnId).toBe('b')
+    h.onColumnHeaderDragLeave('b')
+    expect(ctx.colDropOnId).toBeNull()
+    expect(ctx.colDropSide).toBeNull()
+  })
+
+  it('drop applies the pending reorder then clears drag state', () => {
+    const ctx = makeCtx({ colDragId: 'a', colDropSide: 'after' })
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    h.onColumnHeaderDrop(e, 'c')
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(ctx.userColumnOrder).toEqual(['b', 'c', 'a', 'd'])
+    expect(ctx.colDragId).toBeNull()
+    expect(ctx.colDropOnId).toBeNull()
+    expect(ctx.colDropSide).toBeNull()
+  })
+
+  it('drop without an active drag just clears state', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    const e = dragEvent()
+    h.onColumnHeaderDrop(e, 'c')
+    expect(ctx.userColumnOrder).toBeUndefined()
+    expect(ctx.colDragId).toBeNull()
+  })
+
+  it('dragEnd clears all drag state', () => {
+    const ctx = makeCtx({ colDragId: 'a', colDropOnId: 'b', colDropSide: 'after' })
+    const h = createColumns(ctx)
+    h.onColumnHeaderDragEnd()
+    expect(ctx.colDragId).toBeNull()
+    expect(ctx.colDropOnId).toBeNull()
+    expect(ctx.colDropSide).toBeNull()
+  })
+})
+
+describe('pinning handlers', () => {
+  it('pinColumnLeft appends to left, removes from right, closes menus', () => {
+    const ctx = makeCtx({ columnPinning: { left: ['a'], right: ['b'] } })
+    const h = createColumns(ctx)
+    h.pinColumnLeft('b')
+    expect(ctx.columnPinning).toEqual({ left: ['a', 'b'], right: [] })
+    expect(ctx.closeMenus).toHaveBeenCalled()
+  })
+
+  it('pinColumnLeft de-duplicates a column already pinned left', () => {
+    const ctx = makeCtx({ columnPinning: { left: ['a', 'b'], right: [] } })
+    const h = createColumns(ctx)
+    h.pinColumnLeft('a')
+    expect(ctx.columnPinning).toEqual({ left: ['b', 'a'], right: [] })
+  })
+
+  it('pinColumnRight prepends to right, removes from left', () => {
+    const ctx = makeCtx({ columnPinning: { left: ['a'], right: ['c'] } })
+    const h = createColumns(ctx)
+    h.pinColumnRight('a')
+    expect(ctx.columnPinning).toEqual({ left: [], right: ['a', 'c'] })
+    expect(ctx.closeMenus).toHaveBeenCalled()
+  })
+
+  it('unpinColumn removes from both sides', () => {
+    const ctx = makeCtx({ columnPinning: { left: ['a'], right: ['a'] } })
+    const h = createColumns(ctx)
+    h.unpinColumn('a')
+    expect(ctx.columnPinning).toEqual({ left: [], right: [] })
+    expect(ctx.closeMenus).toHaveBeenCalled()
+  })
+})
+
+describe('toggleColumnVisibleInPanel', () => {
+  it('hides a visible column', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    h.toggleColumnVisibleInPanel('a')
+    expect(ctx.hiddenColumns).toEqual({ a: true })
+  })
+
+  it('shows a hidden column (removes the key)', () => {
+    const ctx = makeCtx({ hiddenColumns: { a: true, b: true } })
+    const h = createColumns(ctx)
+    h.toggleColumnVisibleInPanel('a')
+    expect(ctx.hiddenColumns).toEqual({ b: true })
+  })
+})
+
+describe('moveColumnInPanel', () => {
+  it('moves a column down (dir +1)', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    h.moveColumnInPanel('a', 1)
+    expect(ctx.userColumnOrder).toEqual(['b', 'a', 'c', 'd'])
+  })
+
+  it('moves a column up (dir -1)', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    h.moveColumnInPanel('c', -1)
+    expect(ctx.userColumnOrder).toEqual(['a', 'c', 'b', 'd'])
+  })
+
+  it('refuses to move the first column up (out of bounds)', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    h.moveColumnInPanel('a', -1)
+    expect(ctx.userColumnOrder).toBeUndefined()
+  })
+
+  it('refuses to move the last column down (out of bounds)', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    h.moveColumnInPanel('d', 1)
+    expect(ctx.userColumnOrder).toBeUndefined()
+  })
+
+  it('does nothing for an unknown column id', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    h.moveColumnInPanel('zzz', 1)
+    expect(ctx.userColumnOrder).toBeUndefined()
+  })
+})
+
+describe('toggleGroupInPanel', () => {
+  it('adds a column to grouping when absent', () => {
+    const setGrouping = vi.fn()
+    const ctx = makeCtx()
+    ctx.grid.getState = () => ({ grouping: ['x'] })
+    ctx.grid.setGrouping = setGrouping
+    const h = createColumns(ctx)
+    h.toggleGroupInPanel('a')
+    expect(setGrouping).toHaveBeenCalledWith(['x', 'a'])
+  })
+
+  it('removes a column from grouping when present', () => {
+    const setGrouping = vi.fn()
+    const ctx = makeCtx()
+    ctx.grid.getState = () => ({ grouping: ['x', 'a'] })
+    ctx.grid.setGrouping = setGrouping
+    const h = createColumns(ctx)
+    h.toggleGroupInPanel('a')
+    expect(setGrouping).toHaveBeenCalledWith(['x'])
+  })
+
+  it('handles a missing grouping array (defaults to empty)', () => {
+    const setGrouping = vi.fn()
+    const ctx = makeCtx()
+    ctx.grid.getState = () => ({})
+    ctx.grid.setGrouping = setGrouping
+    const h = createColumns(ctx)
+    h.toggleGroupInPanel('a')
+    expect(setGrouping).toHaveBeenCalledWith(['a'])
+  })
+})
+
+describe('getColumnBaseWidth', () => {
+  it('returns an explicit override from columnWidths', () => {
+    const ctx = makeCtx({ columnWidths: { a: 333 } })
+    const h = createColumns(ctx)
+    expect(h.getColumnBaseWidth('a')).toBe(333)
+  })
+
+  it('falls back to the columnDef width', () => {
+    const h = createColumns(makeCtx())
+    expect(h.getColumnBaseWidth('c')).toBe(200)
+  })
+
+  it('falls back to props.columnWidth when neither override nor def width set', () => {
+    const ctx = makeCtx({ props: { columnWidth: 99 } })
+    const h = createColumns(ctx)
+    expect(h.getColumnBaseWidth('b')).toBe(99)
+  })
+
+  it('falls back to the hard default 140 with no config', () => {
+    const h = createColumns(makeCtx())
+    expect(h.getColumnBaseWidth('b')).toBe(140)
+  })
+
+  it('returns the default for an unknown column id', () => {
+    const h = createColumns(makeCtx())
+    expect(h.getColumnBaseWidth('zzz')).toBe(140)
+  })
+})
+
+describe('getColumnWidth', () => {
+  it('uses the fitted width when no explicit override exists', () => {
+    const ctx = makeCtx({ fittedColumnWidths: { a: 77 } })
+    const h = createColumns(ctx)
+    expect(h.getColumnWidth('a')).toBe(77)
+  })
+
+  it('prefers an explicit override over the fitted width', () => {
+    const ctx = makeCtx({
+      fittedColumnWidths: { a: 77 },
+      columnWidths: { a: 300 },
+    })
+    const h = createColumns(ctx)
+    expect(h.getColumnWidth('a')).toBe(300)
+  })
+
+  it('falls through to base width when there is no fitted width', () => {
+    const h = createColumns(makeCtx())
+    expect(h.getColumnWidth('c')).toBe(200)
+  })
+})
+
+describe('column resize lifecycle', () => {
+  let rafCb: FrameRequestCallback | null
+  beforeEach(() => {
+    rafCb = null
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      rafCb = cb
+      return 1
+    })
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
+  })
+
+  it('startColumnResize seeds the resize state and registers listeners', () => {
+    const ctx = makeCtx({ columnWidths: { a: 150 } })
+    const h = createColumns(ctx)
+    const addSpy = vi.spyOn(document, 'addEventListener')
+    const e: any = {
+      stopPropagation: vi.fn(),
+      preventDefault: vi.fn(),
+      clientX: 500,
+    }
+    h.startColumnResize(e, 'a')
+    expect(ctx.resizingColumnId).toBe('a')
+    expect(ctx.resizeStartX).toBe(500)
+    expect(ctx.resizeStartWidth).toBe(150)
+    expect(addSpy).toHaveBeenCalledWith('pointermove', expect.any(Function))
+    addSpy.mockRestore()
+  })
+
+  it('onColumnResizeMove bails when no column is resizing', () => {
+    const ctx = makeCtx({ resizingColumnId: null })
+    const h = createColumns(ctx)
+    h.onColumnResizeMove({ clientX: 100 } as any)
+    expect(ctx.resizePendingWidth).toBe(0)
+  })
+
+  it('onColumnResizeMove clamps to MIN_COLUMN_WIDTH and commits on the frame', () => {
+    const ctx = makeCtx({
+      resizingColumnId: 'a',
+      resizeStartX: 100,
+      resizeStartWidth: 120,
+    })
+    const h = createColumns(ctx)
+    // moving far left should clamp at MIN_COLUMN_WIDTH (40)
+    h.onColumnResizeMove({ clientX: -1000 } as any)
+    expect(ctx.resizePendingWidth).toBe(40)
+    expect(rafCb).not.toBeNull()
+    rafCb!(0)
+    expect(ctx.columnWidths.a).toBe(40)
+  })
+
+  it('onColumnResizeMove grows the column and coalesces multiple moves into one frame', () => {
+    const ctx = makeCtx({
+      resizingColumnId: 'a',
+      resizeStartX: 100,
+      resizeStartWidth: 120,
+    })
+    const h = createColumns(ctx)
+    h.onColumnResizeMove({ clientX: 150 } as any) // +50 -> 170, schedules raf
+    const firstCb = rafCb
+    h.onColumnResizeMove({ clientX: 200 } as any) // +100 -> 220, raf already pending
+    expect(ctx.resizePendingWidth).toBe(220)
+    expect(rafCb).toBe(firstCb) // not rescheduled
+    rafCb!(0)
+    expect(ctx.columnWidths.a).toBe(220)
+  })
+
+  it('onColumnResizeMove skips the commit if the column stopped resizing mid-frame', () => {
+    const ctx = makeCtx({
+      resizingColumnId: 'a',
+      resizeStartX: 100,
+      resizeStartWidth: 120,
+    })
+    const h = createColumns(ctx)
+    h.onColumnResizeMove({ clientX: 150 } as any)
+    ctx.resizingColumnId = null // resize ended before the frame ran
+    rafCb!(0)
+    expect(ctx.columnWidths.a).toBeUndefined()
+  })
+
+  it('endColumnResize commits the final pending width and tears down listeners', () => {
+    const ctx = makeCtx({
+      resizingColumnId: 'a',
+      resizePendingWidth: 222,
+      resizeRaf: 9,
+    })
+    const h = createColumns(ctx)
+    const removeSpy = vi.spyOn(document, 'removeEventListener')
+    h.endColumnResize()
+    expect(ctx.columnWidths.a).toBe(222)
+    expect(ctx.resizingColumnId).toBeNull()
+    expect(ctx.resizeRaf).toBeNull()
+    expect(removeSpy).toHaveBeenCalledWith('pointermove', expect.any(Function))
+    removeSpy.mockRestore()
+  })
+
+  it('endColumnResize is safe when nothing was resizing', () => {
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    expect(() => h.endColumnResize()).not.toThrow()
+    expect(ctx.columnWidths).toEqual({})
+  })
+})
+
+describe('measureText', () => {
+  it('returns 0 for empty text', () => {
+    const h = createColumns(makeCtx())
+    expect(h.measureText('', '16px sans-serif')).toBe(0)
+  })
+
+  it('measures via a lazily-created canvas and caches it', () => {
+    const fakeCtx2d = { font: '', measureText: vi.fn(() => ({ width: 42 })) }
+    const fakeCanvas = { getContext: vi.fn(() => fakeCtx2d) }
+    const createElement = vi
+      .spyOn(document, 'createElement')
+      .mockReturnValue(fakeCanvas as any)
+    const ctx = makeCtx()
+    const h = createColumns(ctx)
+    expect(h.measureText('hello', '16px sans-serif')).toBe(42)
+    expect(ctx.measureCanvas).toBe(fakeCanvas)
+    // second call reuses the cached canvas
+    h.measureText('again', '16px sans-serif')
+    expect(createElement).toHaveBeenCalledTimes(1)
+    createElement.mockRestore()
+  })
+
+  it('returns 0 when the 2d context is unavailable', () => {
+    const fakeCanvas = { getContext: vi.fn(() => null) }
+    const createElement = vi
+      .spyOn(document, 'createElement')
+      .mockReturnValue(fakeCanvas as any)
+    const h = createColumns(makeCtx())
+    expect(h.measureText('hello', '16px sans-serif')).toBe(0)
+    createElement.mockRestore()
+  })
+})
+
+describe('autosizeColumn / autosizeAllColumns', () => {
+  // jsdom doesn't provide the global CSS object; autosizeColumn uses
+  // CSS.escape to build attribute selectors. Provide a minimal stub.
+  beforeEach(() => {
+    if (typeof (globalThis as any).CSS === 'undefined') {
+      ;(globalThis as any).CSS = { escape: (s: string) => s }
+    } else if (typeof (globalThis as any).CSS.escape !== 'function') {
+      ;(globalThis as any).CSS.escape = (s: string) => s
+    }
+  })
+
+  function fakeRoot(opts: {
+    sampleCell?: any
+    header?: any
+    cells?: any[]
+  }): any {
+    const { sampleCell, header, cells = [] } = opts
+    return {
+      querySelector: (sel: string) => {
+        if (sel.startsWith('[data-col-id=')) return sampleCell ?? null
+        if (sel.startsWith('[data-svgrid-header-col=')) return header ?? null
+        return null
+      },
+      querySelectorAll: () => cells,
+    }
+  }
+
+  it('bails when there is no grid root element', () => {
+    const ctx = makeCtx({ gridRootEl: null })
+    const h = createColumns(ctx)
+    expect(() => h.autosizeColumn('a')).not.toThrow()
+    expect(ctx.columnWidths).toEqual({})
+  })
+
+  it('bails when no sample cell is found', () => {
+    const ctx = makeCtx({ gridRootEl: fakeRoot({ sampleCell: null }) })
+    const h = createColumns(ctx)
+    h.autosizeColumn('a')
+    expect(ctx.columnWidths).toEqual({})
+  })
+
+  it('snaps the width to the widest measured content', () => {
+    // header label is 100px wide, one body cell is 200px wide.
+    const labelEl = { textContent: 'Header' }
+    const header = {
+      querySelector: () => labelEl,
+    }
+    const sampleCell = { textContent: 'cell' }
+    const bodyCell = { textContent: 'a very wide cell value' }
+    const ctx = makeCtx({
+      gridRootEl: fakeRoot({ sampleCell, header, cells: [bodyCell] }),
+    })
+    const h = createColumns(ctx)
+
+    // stub getComputedStyle so .font is defined for measureText calls
+    const gcs = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockReturnValue({ font: '16px sans-serif' } as any)
+
+    // Make measureText deterministic: header label -> 100, body cell -> 200.
+    const fakeCtx2d = {
+      font: '',
+      measureText: (t: string) => ({ width: t === 'Header' ? 100 : 200 }),
+    }
+    const createElement = vi
+      .spyOn(document, 'createElement')
+      .mockReturnValue({ getContext: () => fakeCtx2d } as any)
+
+    h.autosizeColumn('a')
+    // widest is the 200px body cell -> 200 + 24 padding
+    expect(ctx.columnWidths.a).toBe(224)
+
+    gcs.mockRestore()
+    createElement.mockRestore()
+  })
+
+  it('floors at MIN_COLUMN_WIDTH (+24 padding) when content measures zero', () => {
+    // No label element -> the header itself is used as the measure target
+    // (covering the `labelEl ?? header` fallback branch). Every measureText
+    // returns 0, so max stays at MIN_COLUMN_WIDTH and the +24 padding is added.
+    const header = { querySelector: () => null }
+    const sampleCell = { textContent: '' }
+    const ctx = makeCtx({
+      MIN_COLUMN_WIDTH: 80,
+      gridRootEl: fakeRoot({ sampleCell, header, cells: [] }),
+    })
+    const h = createColumns(ctx)
+    const gcs = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockReturnValue({ font: '16px sans-serif' } as any)
+    const createElement = vi.spyOn(document, 'createElement').mockReturnValue({
+      getContext: () => ({ font: '', measureText: () => ({ width: 0 }) }),
+    } as any)
+
+    h.autosizeColumn('a')
+    // max = MIN(80); width = max(80, ceil(80) + 24) = 104
+    expect(ctx.columnWidths.a).toBe(104)
+
+    gcs.mockRestore()
+    createElement.mockRestore()
+  })
+
+  it('autosizeAllColumns iterates every column and writes each width', () => {
+    // Every querySelector returns a cell, every measured width is 50.
+    const cell = { textContent: 'cell' }
+    const header = { querySelector: () => ({ textContent: 'H' }) }
+    const ctx = makeCtx({
+      gridRootEl: fakeRoot({ sampleCell: cell, header, cells: [cell] }),
+    })
+    const h = createColumns(ctx)
+    const gcs = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockReturnValue({ font: '16px sans-serif' } as any)
+    const createElement = vi.spyOn(document, 'createElement').mockReturnValue({
+      getContext: () => ({ font: '', measureText: () => ({ width: 50 }) }),
+    } as any)
+
+    h.autosizeAllColumns()
+    // a width was computed and stored for every column id
+    expect(Object.keys(ctx.columnWidths).sort()).toEqual(['a', 'b', 'c', 'd'])
+
+    gcs.mockRestore()
+    createElement.mockRestore()
+  })
+})
+
+describe('resetColumns', () => {
+  it('clears widths, hidden columns and pinning', () => {
+    const ctx = makeCtx({
+      columnWidths: { a: 10 },
+      hiddenColumns: { b: true },
+      columnPinning: { left: ['a'], right: ['d'] },
+    })
+    const h = createColumns(ctx)
+    h.resetColumns()
+    expect(ctx.columnWidths).toEqual({})
+    expect(ctx.hiddenColumns).toEqual({})
+    expect(ctx.columnPinning).toEqual({ left: [], right: [] })
+  })
+})