@svgrid/grid 2.6.21 → 2.7.0

package/src/svgrid.auto-row-height.test.ts

@@ -1,204 +1,204 @@
-/**
- * DOM: `autoRowHeight` sizes each row to its own content.
- *
- * jsdom does no layout - getBoundingClientRect is 0 and the global
- * ResizeObserver stub never fires - so this file installs a controllable
- * observer and fakes element heights. That is enough to prove the wiring that
- * actually matters: rows are measured, the measurement reaches the virtualizer,
- * and a measured row is sized by its content instead of the fixed rowHeight.
- */
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  createCoreRowModel,
-  createFilteredRowModel,
-  createSortedRowModel,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-} from './index'
-
-type Row = { id: number; name: string; notes: string }
-
-const data: Row[] = [
-  { id: 1, name: 'Ada', notes: 'short' },
-  { id: 2, name: 'Linus', notes: 'a much longer note that would wrap onto several lines in a narrow column' },
-  { id: 3, name: 'Grace', notes: 'medium length note' },
-]
-
-const columns = [
-  { field: 'name', header: 'Name', width: 120 },
-  { field: 'notes', header: 'Notes', width: 160 },
-]
-
-const features = tableFeatures({ rowSortingFeature })
-const tick = () => new Promise<void>((r) => queueMicrotask(r))
-const raf = () => new Promise<void>((r) => requestAnimationFrame(() => r()))
-
-/** A ResizeObserver whose callbacks this test can fire on demand. */
-class ControllableRO {
-  static instances: ControllableRO[] = []
-  cb: () => void
-  targets: Element[] = []
-  constructor(cb: () => void) {
-    this.cb = cb
-    ControllableRO.instances.push(this)
-  }
-  observe(el: Element) { this.targets.push(el) }
-  unobserve() {}
-  disconnect() { this.targets = [] }
-  static fireAll() { for (const i of ControllableRO.instances) i.cb() }
-  static reset() { ControllableRO.instances = [] }
-}
-
-let originalRO: typeof globalThis.ResizeObserver
-beforeEach(() => {
-  originalRO = globalThis.ResizeObserver
-  ControllableRO.reset()
-  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = ControllableRO
-})
-afterEach(() => {
-  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = originalRO
-})
-
-function mountGrid(props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(SvGrid, {
-    target,
-    props: {
-      data,
-      columns,
-      features,
-      rowHeight: 30,
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        filteredRowModel: createFilteredRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-      },
-      containerHeight: 400,
-      virtualization: false,
-      ...props,
-    } as never,
-  })
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-const dataRows = (t: HTMLElement) =>
-  [...t.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')].filter((r) => !r.classList.contains('sv-grid-group-row'))
-
-describe('autoRowHeight', () => {
-  it('is off by default: rows get a fixed height and no wrap class', async () => {
-    const g = mountGrid({})
-    cleanup = g.destroy
-    await tick()
-    const row = dataRows(g.target)[0]!
-    expect(row.classList.contains('sv-grid-row-auto-height')).toBe(false)
-    expect(row.getAttribute('style')).toContain('height: 30px')
-    expect(row.getAttribute('style')).not.toContain('min-height')
-  })
-
-  it('switches rows to min-height + the wrap class when on', async () => {
-    const g = mountGrid({ autoRowHeight: true })
-    cleanup = g.destroy
-    await tick()
-    for (const row of dataRows(g.target)) {
-      expect(row.classList.contains('sv-grid-row-auto-height')).toBe(true)
-      // min-height, so content can grow the row instead of being clipped.
-      expect(row.getAttribute('style')).toContain('min-height: 30px')
-    }
-  })
-
-  it('feeds a measured height back into the row size', async () => {
-    const g = mountGrid({ autoRowHeight: true })
-    cleanup = g.destroy
-    await tick()
-
-    const rows = dataRows(g.target)
-    expect(rows.length).toBe(3)
-    // Fake layout: row 1 (the long note) wraps to 3 lines.
-    const heights = [30, 90, 30]
-    rows.forEach((row, i) => {
-      row.getBoundingClientRect = () => ({ height: heights[i], width: 280, top: 0, left: 0, right: 280, bottom: heights[i]!, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
-    })
-
-    ControllableRO.fireAll()
-    await raf()
-    await tick()
-
-    const after = dataRows(g.target)
-    expect(after[0]?.getAttribute('style')).toContain('min-height: 30px')
-    // The measured tall row is now sized by its content, not by rowHeight.
-    expect(after[1]?.getAttribute('style')).toContain('min-height: 90px')
-    expect(after[2]?.getAttribute('style')).toContain('min-height: 30px')
-  })
-
-  it('ignores autoRowHeight when rowHeight is a function (caller owns heights)', async () => {
-    const g = mountGrid({ autoRowHeight: true, rowHeight: (i: number) => 40 + i * 10 })
-    cleanup = g.destroy
-    await tick()
-    const rows = dataRows(g.target)
-    expect(rows[0]?.classList.contains('sv-grid-row-auto-height')).toBe(false)
-    expect(rows[0]?.getAttribute('style')).toContain('height: 40px')
-    expect(rows[1]?.getAttribute('style')).toContain('height: 50px')
-  })
-
-  it('uses a numeric rowHeight as the pre-measure estimate', async () => {
-    const g = mountGrid({ autoRowHeight: true, rowHeight: 48 })
-    cleanup = g.destroy
-    await tick()
-    // Nothing measured yet, so every row sits at the estimate.
-    for (const row of dataRows(g.target)) {
-      expect(row.getAttribute('style')).toContain('min-height: 48px')
-    }
-  })
-
-  it('works on the virtualized body too (the variable-size path)', async () => {
-    const g = mountGrid({ autoRowHeight: true, virtualization: true })
-    cleanup = g.destroy
-    await tick()
-    const rows = dataRows(g.target)
-    expect(rows.length).toBeGreaterThan(0)
-    expect(rows[0]?.classList.contains('sv-grid-row-auto-height')).toBe(true)
-
-    rows.forEach((row, i) => {
-      const h = i === 1 ? 96 : 30
-      row.getBoundingClientRect = () => ({ height: h, width: 280, top: 0, left: 0, right: 280, bottom: h, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
-    })
-    ControllableRO.fireAll()
-    await raf()
-    await tick()
-
-    const after = dataRows(g.target)
-    // The virtualizer now sizes row 1 from its measurement, so the row element
-    // reflects the measured height rather than the 30px estimate.
-    expect(after[1]?.getAttribute('style')).toContain('96px')
-  })
-
-  it('does not re-report a sub-pixel change (no measure/layout loop)', async () => {
-    const g = mountGrid({ autoRowHeight: true })
-    cleanup = g.destroy
-    await tick()
-    const rows = dataRows(g.target)
-    rows.forEach((row) => {
-      row.getBoundingClientRect = () => ({ height: 70, width: 280, top: 0, left: 0, right: 280, bottom: 70, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
-    })
-    ControllableRO.fireAll()
-    await raf()
-    await tick()
-    expect(dataRows(g.target)[0]?.getAttribute('style')).toContain('min-height: 70px')
-
-    // A 0.4px drift must be ignored - otherwise fractional layout ping-pongs.
-    dataRows(g.target).forEach((row) => {
-      row.getBoundingClientRect = () => ({ height: 70.4, width: 280, top: 0, left: 0, right: 280, bottom: 70.4, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
-    })
-    ControllableRO.fireAll()
-    await raf()
-    await tick()
-    expect(dataRows(g.target)[0]?.getAttribute('style')).toContain('min-height: 70px')
-  })
-})
+/**
+ * DOM: `autoRowHeight` sizes each row to its own content.
+ *
+ * jsdom does no layout - getBoundingClientRect is 0 and the global
+ * ResizeObserver stub never fires - so this file installs a controllable
+ * observer and fakes element heights. That is enough to prove the wiring that
+ * actually matters: rows are measured, the measurement reaches the virtualizer,
+ * and a measured row is sized by its content instead of the fixed rowHeight.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; name: string; notes: string }
+
+const data: Row[] = [
+  { id: 1, name: 'Ada', notes: 'short' },
+  { id: 2, name: 'Linus', notes: 'a much longer note that would wrap onto several lines in a narrow column' },
+  { id: 3, name: 'Grace', notes: 'medium length note' },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 120 },
+  { field: 'notes', header: 'Notes', width: 160 },
+]
+
+const features = tableFeatures({ rowSortingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+const raf = () => new Promise<void>((r) => requestAnimationFrame(() => r()))
+
+/** A ResizeObserver whose callbacks this test can fire on demand. */
+class ControllableRO {
+  static instances: ControllableRO[] = []
+  cb: () => void
+  targets: Element[] = []
+  constructor(cb: () => void) {
+    this.cb = cb
+    ControllableRO.instances.push(this)
+  }
+  observe(el: Element) { this.targets.push(el) }
+  unobserve() {}
+  disconnect() { this.targets = [] }
+  static fireAll() { for (const i of ControllableRO.instances) i.cb() }
+  static reset() { ControllableRO.instances = [] }
+}
+
+let originalRO: typeof globalThis.ResizeObserver
+beforeEach(() => {
+  originalRO = globalThis.ResizeObserver
+  ControllableRO.reset()
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = ControllableRO
+})
+afterEach(() => {
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = originalRO
+})
+
+function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      rowHeight: 30,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+      },
+      containerHeight: 400,
+      virtualization: false,
+      ...props,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const dataRows = (t: HTMLElement) =>
+  [...t.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')].filter((r) => !r.classList.contains('sv-grid-group-row'))
+
+describe('autoRowHeight', () => {
+  it('is off by default: rows get a fixed height and no wrap class', async () => {
+    const g = mountGrid({})
+    cleanup = g.destroy
+    await tick()
+    const row = dataRows(g.target)[0]!
+    expect(row.classList.contains('sv-grid-row-auto-height')).toBe(false)
+    expect(row.getAttribute('style')).toContain('height: 30px')
+    expect(row.getAttribute('style')).not.toContain('min-height')
+  })
+
+  it('switches rows to min-height + the wrap class when on', async () => {
+    const g = mountGrid({ autoRowHeight: true })
+    cleanup = g.destroy
+    await tick()
+    for (const row of dataRows(g.target)) {
+      expect(row.classList.contains('sv-grid-row-auto-height')).toBe(true)
+      // min-height, so content can grow the row instead of being clipped.
+      expect(row.getAttribute('style')).toContain('min-height: 30px')
+    }
+  })
+
+  it('feeds a measured height back into the row size', async () => {
+    const g = mountGrid({ autoRowHeight: true })
+    cleanup = g.destroy
+    await tick()
+
+    const rows = dataRows(g.target)
+    expect(rows.length).toBe(3)
+    // Fake layout: row 1 (the long note) wraps to 3 lines.
+    const heights = [30, 90, 30]
+    rows.forEach((row, i) => {
+      row.getBoundingClientRect = () => ({ height: heights[i], width: 280, top: 0, left: 0, right: 280, bottom: heights[i]!, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+
+    const after = dataRows(g.target)
+    expect(after[0]?.getAttribute('style')).toContain('min-height: 30px')
+    // The measured tall row is now sized by its content, not by rowHeight.
+    expect(after[1]?.getAttribute('style')).toContain('min-height: 90px')
+    expect(after[2]?.getAttribute('style')).toContain('min-height: 30px')
+  })
+
+  it('ignores autoRowHeight when rowHeight is a function (caller owns heights)', async () => {
+    const g = mountGrid({ autoRowHeight: true, rowHeight: (i: number) => 40 + i * 10 })
+    cleanup = g.destroy
+    await tick()
+    const rows = dataRows(g.target)
+    expect(rows[0]?.classList.contains('sv-grid-row-auto-height')).toBe(false)
+    expect(rows[0]?.getAttribute('style')).toContain('height: 40px')
+    expect(rows[1]?.getAttribute('style')).toContain('height: 50px')
+  })
+
+  it('uses a numeric rowHeight as the pre-measure estimate', async () => {
+    const g = mountGrid({ autoRowHeight: true, rowHeight: 48 })
+    cleanup = g.destroy
+    await tick()
+    // Nothing measured yet, so every row sits at the estimate.
+    for (const row of dataRows(g.target)) {
+      expect(row.getAttribute('style')).toContain('min-height: 48px')
+    }
+  })
+
+  it('works on the virtualized body too (the variable-size path)', async () => {
+    const g = mountGrid({ autoRowHeight: true, virtualization: true })
+    cleanup = g.destroy
+    await tick()
+    const rows = dataRows(g.target)
+    expect(rows.length).toBeGreaterThan(0)
+    expect(rows[0]?.classList.contains('sv-grid-row-auto-height')).toBe(true)
+
+    rows.forEach((row, i) => {
+      const h = i === 1 ? 96 : 30
+      row.getBoundingClientRect = () => ({ height: h, width: 280, top: 0, left: 0, right: 280, bottom: h, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+
+    const after = dataRows(g.target)
+    // The virtualizer now sizes row 1 from its measurement, so the row element
+    // reflects the measured height rather than the 30px estimate.
+    expect(after[1]?.getAttribute('style')).toContain('96px')
+  })
+
+  it('does not re-report a sub-pixel change (no measure/layout loop)', async () => {
+    const g = mountGrid({ autoRowHeight: true })
+    cleanup = g.destroy
+    await tick()
+    const rows = dataRows(g.target)
+    rows.forEach((row) => {
+      row.getBoundingClientRect = () => ({ height: 70, width: 280, top: 0, left: 0, right: 280, bottom: 70, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+    expect(dataRows(g.target)[0]?.getAttribute('style')).toContain('min-height: 70px')
+
+    // A 0.4px drift must be ignored - otherwise fractional layout ping-pongs.
+    dataRows(g.target).forEach((row) => {
+      row.getBoundingClientRect = () => ({ height: 70.4, width: 280, top: 0, left: 0, right: 280, bottom: 70.4, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+    expect(dataRows(g.target)[0]?.getAttribute('style')).toContain('min-height: 70px')
+  })
+})