@svgrid/grid 1.0.0

package/src/svgrid.new-features.wrapper.test.ts

@@ -0,0 +1,164 @@
+/**
+ * Source-level smoke tests for the wrapper additions: `getRowId` prop,
+ * `cellClass` / `rowClass` rendering, the column-layout API surface
+ * (`setColumnWidth` / `getColumnWidths` / `setColumnPinning` /
+ * `getColumnPinning`), the `between` operator UI, and the multi-cell
+ * paste / cut keyboard plumbing.
+ *
+ * These are deliberately source-string assertions, not jsdom mounts -
+ * Svelte 5 mount inside vitest is brittle (the existing
+ * `svgrid.wrapper.test.ts` follows the same pattern). The behaviour
+ * itself is covered by integration probes in the gallery (see the
+ * pivot expansion + paste/cut probes that were run during build) and
+ * the upstream unit tests of the headless engine + Pro pivot.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const sourcePath = resolve(__dirname, './SvGrid.svelte')
+const source = readFileSync(sourcePath, 'utf-8')
+const typesPath = resolve(__dirname, './svgrid-wrapper.types.ts')
+const types = readFileSync(typesPath, 'utf-8')
+
+describe('SvGrid wrapper - getRowId prop', () => {
+  it('declares the getRowId prop on the Props type', () => {
+    expect(source).toMatch(/getRowId\?:\s*\(row:\s*TData,\s*index:\s*number\)\s*=>\s*string/)
+  })
+
+  it('forwards the prop into createSvGrid options', () => {
+    expect(source).toMatch(/get getRowId\(\)[\s\S]*?return props\.getRowId/)
+  })
+})
+
+describe('SvGrid wrapper - cellClass + rowClass', () => {
+  it('declares the rowClass prop on the Props type', () => {
+    expect(source).toMatch(/rowClass\?:\s*\(ctx:\s*\{/)
+  })
+
+  it('exposes a resolveClassList helper that normalises array / record / string forms', () => {
+    expect(source).toMatch(/function resolveClassList\(/)
+    expect(source).toMatch(/Array\.isArray\(value\)/)
+  })
+
+  it('computes the row-level class once per render row and threads it onto the <tr>', () => {
+    expect(source).toMatch(/function computeRowClass/)
+    expect(source).toMatch(/userRowClass = computeRowClass\(row, rowIndex\)/)
+    expect(source).toMatch(/class=\{`sv-grid-row \$\{userRowClass\}`\}/)
+  })
+
+  it('computes the cell-level class per column and threads it onto the <td>', () => {
+    expect(source).toMatch(/function computeCellClass/)
+    expect(source).toMatch(/userCellClass = computeCellClass\(row, rendered\.column\)/)
+    expect(source).toMatch(/class=\{`sv-grid-cell \$\{userCellClass\}`\}/)
+  })
+})
+
+describe('SvGrid wrapper - column-layout API', () => {
+  it('declares setColumnWidth + getColumnWidths in the public type', () => {
+    expect(types).toContain('setColumnWidth(columnId: string, width: number): void')
+    expect(types).toContain('getColumnWidths(): Record<string, number>')
+  })
+
+  it('declares setColumnPinning + getColumnPinning in the public type', () => {
+    expect(types).toMatch(/setColumnPinning\(pinning:\s*\{/)
+    expect(types).toContain('getColumnPinning(): { left: string[]; right: string[] }')
+  })
+
+  it('implements all four methods in the api object', () => {
+    expect(source).toMatch(/setColumnWidth\(columnId: string, width: number\)/)
+    expect(source).toMatch(/getColumnWidths\(\)/)
+    expect(source).toMatch(/setColumnPinning\(pinning\)/)
+    expect(source).toMatch(/getColumnPinning\(\)/)
+  })
+
+  it('clamps setColumnWidth to MIN_COLUMN_WIDTH', () => {
+    // Confirm the clamp is in the code path so a caller can't drop a
+    // column below the minimum by passing 0 or a negative number.
+    expect(source).toMatch(/Math\.max\(MIN_COLUMN_WIDTH/)
+  })
+
+  it('defensive-copies setColumnPinning inputs so callers cannot mutate state', () => {
+    expect(source).toMatch(/Array\.from\(new Set\(pinning\.left/)
+    expect(source).toMatch(/Array\.from\(new Set\(pinning\.right/)
+  })
+})
+
+describe('SvGrid wrapper - between filter operator', () => {
+  it("includes 'between' in the FilterOperator type", () => {
+    expect(source).toMatch(/"between"/)
+  })
+
+  it("includes 'between' in NUMBER_OPERATORS + DATE_OPERATORS but NOT in TEXT_OPERATORS", () => {
+    // The list literals appear in order, so we slice each block out
+    // separately and check membership.
+    const numOps = source.match(/const NUMBER_OPERATORS[^]*?\];/)?.[0] ?? ''
+    expect(numOps).toContain('"between"')
+    const dateOps = source.match(/const DATE_OPERATORS[^]*?\];/)?.[0] ?? ''
+    expect(dateOps).toContain('"between"')
+    const textOps = source.match(/const TEXT_OPERATORS[^]*?\];/)?.[0] ?? ''
+    expect(textOps).not.toContain('"between"')
+  })
+
+  it('renders a second input ("To") when the operator is between', () => {
+    expect(source).toMatch(/menuActiveOperator === "between"/)
+    expect(source).toMatch(/placeholder="To"/)
+  })
+
+  it('treats the filter as inactive until BOTH endpoints are non-empty', () => {
+    // The active-filters filter() should require value AND valueTo.
+    expect(source).toMatch(/if \(f\.operator === "between"\) \{[^}]*f\.value\.trim\(\)\.length > 0[^}]*f\.valueTo[^}]*\.trim\(\)\.length > 0/)
+  })
+
+  it('forwards valueTo through applyExcelFilter', () => {
+    expect(source).toMatch(/valueTo: filter\.operator === "between" \? filter\.valueTo : undefined/)
+  })
+
+  it('publishes valueTo in the onFiltersChange payload only for between clauses', () => {
+    expect(source).toMatch(/f\.operator === "between" && f\.valueTo\s*\?\s*\{ valueTo: f\.valueTo \}/)
+  })
+
+  it('exposes valueTo on the imperative setFilter input + getFilters output', () => {
+    expect(types).toMatch(/setFilter\(\s*columnId: string,[\s\S]*?valueTo\?: string/)
+    expect(types).toMatch(/getFilters\(\)[\s\S]*?valueTo\?: string/)
+  })
+})
+
+describe('SvGrid wrapper - multi-cell paste + cut + delete', () => {
+  it('fills the selection range when the clipboard payload is 1x1', () => {
+    expect(source).toMatch(/clipboardIsSingleCell\s*=\s*\n?\s*lines\.length === 1 && \(lines\[0\]\?\.split\("\\t"\)\.length \?\? 0\) === 1/)
+    expect(source).toMatch(/selectionIsRange = startRow !== endRow \|\| startCol !== endCol/)
+    expect(source).toMatch(/fillRange = clipboardIsSingleCell && selectionIsRange/)
+  })
+
+  it('walks the entire selection rect when filling', () => {
+    expect(source).toMatch(/const rowSpan = fillRange \? endRow - startRow \+ 1 : lines\.length/)
+    expect(source).toMatch(/const colSpan = fillRange/)
+  })
+
+  it('implements clearSelectedCells() that touches every editable cell in the range', () => {
+    expect(source).toMatch(/function clearSelectedCells\(\): boolean/)
+    expect(source).toMatch(/parseEditorValue\(editorType, ""\)/)
+  })
+
+  it('wires Ctrl/Cmd+X to cutSelectionToClipboard', () => {
+    expect(source).toMatch(/lower === "x"/)
+    expect(source).toMatch(/void cutSelectionToClipboard\(\)/)
+    expect(source).toMatch(/async function cutSelectionToClipboard/)
+    // Confirm both calls live inside the cutSelectionToClipboard body
+    // (copy first, then clear). A comment between them is fine.
+    const body = source.match(
+      /async function cutSelectionToClipboard\(\)[^{]*\{([\s\S]*?)^\s\s\}/m,
+    )?.[1] ?? ''
+    expect(body).toContain('copySelectionToClipboard();')
+    expect(body).toContain('clearSelectedCells();')
+    expect(body.indexOf('copySelectionToClipboard()')).toBeLessThan(
+      body.indexOf('clearSelectedCells()'),
+    )
+  })
+
+  it('wires Delete + Backspace to clearSelectedCells (without clipboard interaction)', () => {
+    expect(source).toMatch(/event\.key === "Delete" \|\| event\.key === "Backspace"/)
+    expect(source).toMatch(/if \(clearSelectedCells\(\)\)\s*\{/)
+  })
+})

package/src/svgrid.row-pinning.test.ts

@@ -0,0 +1,266 @@
+/**
+ * Component tests for the engine-level row pinning props
+ * (`pinnedTopRows` / `pinnedBottomRows`). Mount a real <SvGrid>,
+ * pass the props, then assert on the rendered DOM:
+ *
+ *   - pinned-top / pinned-bottom <tbody>s are rendered
+ *   - each pinned row carries the expected class + data attributes
+ *   - column widths + cell values match the schema
+ *   - read-only invariants hold (no editor cell, no checkbox cell)
+ *   - reactive prop changes re-render
+ *   - stacking attributes (data-pinned-index) are present
+ *   - CSS variables for sticky offsets are set on the shell
+ */
+
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: string; account: string; arr: number; seats: number }
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
+
+const rows: Row[] = [
+  { id: 'ACC-1', account: 'Helios',  arr: 120_000, seats: 40 },
+  { id: 'ACC-2', account: 'Vertex',  arr:  85_000, seats: 22 },
+  { id: 'ACC-3', account: 'Atlas',   arr: 250_000, seats: 80 },
+  { id: 'ACC-4', account: 'Quantum', arr:  60_000, seats: 15 },
+]
+
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'id',      header: 'ID',      width: 100, editable: false },
+  { field: 'account', header: 'Account', width: 200, editable: false },
+  { field: 'arr',     header: 'ARR',     width: 130, editable: false, align: 'right',
+    format: { type: 'number', options: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } } },
+  { field: 'seats',   header: 'Seats',   width:  90, editable: false, align: 'right' },
+]
+
+type MountOpts = {
+  pinnedTopRows?: ReadonlyArray<Row>
+  pinnedBottomRows?: ReadonlyArray<Row>
+}
+
+function mountGrid(opts: MountOpts = {}) {
+  return new Promise<{
+    target: HTMLElement
+    api: SvGridApi<typeof features, Row>
+    destroy: () => void
+    setProps: (next: MountOpts) => void
+  }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const propsState: MountOpts = { ...opts }
+    let api: SvGridApi<typeof features, Row> | null = null
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows,
+        columns: cols,
+        features,
+        _rowModels: {
+          coreRowModel:     createCoreRowModel(),
+          filteredRowModel: createFilteredRowModel(),
+          sortedRowModel:   createSortedRowModel(sortFns),
+        },
+        containerHeight: 480,
+        virtualization: false,
+        columnVirtualization: false,
+        enableInlineEditing: false,
+        showPagination: false,
+        showColumnFilters: false,
+        showGlobalFilter: false,
+        showRowSelection: false,
+        pinnedTopRows: propsState.pinnedTopRows,
+        pinnedBottomRows: propsState.pinnedBottomRows,
+        onApiReady(received: SvGridApi<typeof features, Row>) {
+          api = received
+          res({
+            target,
+            api,
+            destroy: () => {
+              unmount(app)
+              target.remove()
+            },
+            setProps(next) {
+              propsState.pinnedTopRows = next.pinnedTopRows
+              propsState.pinnedBottomRows = next.pinnedBottomRows
+              // Svelte 5: re-mount-with-new-props isn't ideal, but here
+              // we use the `$state` props passthrough via the parent
+              // closure. The easiest mechanism is to imperatively
+              // update via Svelte's prop machinery, which $props()
+              // reads from this same object reference.
+              ;(app as unknown as { pinnedTopRows: unknown; pinnedBottomRows: unknown })
+                .pinnedTopRows = next.pinnedTopRows
+              ;(app as unknown as { pinnedTopRows: unknown; pinnedBottomRows: unknown })
+                .pinnedBottomRows = next.pinnedBottomRows
+              flushSync()
+            },
+          })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!api) rej(new Error('onApiReady never fired')) })
+  })
+}
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+const TOTALS: Row = {
+  id: '⌃ TOTALS', account: 'All accounts',
+  arr: rows.reduce((s, r) => s + r.arr, 0),
+  seats: rows.reduce((s, r) => s + r.seats, 0),
+}
+const BENCHMARK: Row = {
+  id: '⌃ BENCH', account: 'Industry benchmark',
+  arr: 180_000, seats: 95,
+}
+const PAGE: Row = {
+  id: '⌄ PAGE', account: 'Visible page',
+  arr: rows.reduce((s, r) => s + r.arr, 0),
+  seats: rows.reduce((s, r) => s + r.seats, 0),
+}
+
+describe('SvGrid - pinnedTopRows render', () => {
+  it('renders a pinned-top tbody when prop is provided', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      const topBody = target.querySelector('tbody.sv-grid-pinned-top-body')
+      expect(topBody, 'pinned-top tbody should exist').not.toBeNull()
+      const trs = topBody!.querySelectorAll('tr.sv-grid-pinned-row-top')
+      expect(trs.length).toBe(1)
+    } finally { destroy() }
+  })
+
+  it('does NOT render the tbody when prop is empty / undefined', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [] })
+    try {
+      await tick()
+      const topBody = target.querySelector('tbody.sv-grid-pinned-top-body')
+      expect(topBody).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('renders the row values using the column schema (format applied)', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      const tds = target
+        .querySelectorAll('tr.sv-grid-pinned-row-top td')
+      expect(tds.length).toBe(cols.length)
+      // ARR cell should be currency-formatted ($515,000) - currency
+      // symbol exact form may vary by ICU build; assert a "$" plus the
+      // raw number with grouping is present.
+      const arrCellText = (tds[2]?.textContent ?? '').trim()
+      expect(arrCellText).toMatch(/\$/)
+      expect(arrCellText).toContain('515')
+    } finally { destroy() }
+  })
+
+  it('stacks multiple pinned-top rows with data-pinned-index', async () => {
+    const { target, destroy } = await mountGrid({
+      pinnedTopRows: [TOTALS, BENCHMARK],
+    })
+    try {
+      await tick()
+      const trs = target.querySelectorAll('tr.sv-grid-pinned-row-top')
+      expect(trs.length).toBe(2)
+      expect(trs[0]!.getAttribute('data-pinned-row')).toBe('top')
+      expect(trs[0]!.getAttribute('data-pinned-index')).toBe('0')
+      expect(trs[1]!.getAttribute('data-pinned-index')).toBe('1')
+    } finally { destroy() }
+  })
+
+  it('marks pinned cells with the data-pinned-row attribute', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      const tr = target.querySelector('tr.sv-grid-pinned-row-top')
+      expect(tr!.getAttribute('data-pinned-row')).toBe('top')
+    } finally { destroy() }
+  })
+})
+
+describe('SvGrid - pinnedBottomRows render', () => {
+  it('renders a pinned-bottom tbody when prop is provided', async () => {
+    const { target, destroy } = await mountGrid({ pinnedBottomRows: [PAGE] })
+    try {
+      await tick()
+      const bottomBody = target.querySelector('tbody.sv-grid-pinned-bottom-body')
+      expect(bottomBody).not.toBeNull()
+      const trs = bottomBody!.querySelectorAll('tr.sv-grid-pinned-row-bottom')
+      expect(trs.length).toBe(1)
+      expect(trs[0]!.getAttribute('data-pinned-row')).toBe('bottom')
+    } finally { destroy() }
+  })
+
+  it('renders bottom rows AFTER the regular tbody', async () => {
+    const { target, destroy } = await mountGrid({ pinnedBottomRows: [PAGE] })
+    try {
+      await tick()
+      const bodies = target.querySelectorAll('tbody')
+      // [regular .sv-grid-body, .sv-grid-pinned-bottom-body]
+      // In the DOM order, the bottom tbody must come after the main body.
+      const classes = Array.from(bodies).map((b) => b.className)
+      const mainIdx = classes.findIndex((c) => c.includes('sv-grid-body') && !c.includes('pinned'))
+      const botIdx  = classes.findIndex((c) => c.includes('sv-grid-pinned-bottom-body'))
+      expect(mainIdx).toBeGreaterThanOrEqual(0)
+      expect(botIdx).toBeGreaterThan(mainIdx)
+    } finally { destroy() }
+  })
+})
+
+describe('SvGrid - pinned rows are read-only', () => {
+  it('pinned-row cells do not carry the editing class even with inline editing enabled', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      const editingCells = target.querySelectorAll(
+        'tr.sv-grid-pinned-row-top td.sv-grid-cell-editing',
+      )
+      expect(editingCells.length).toBe(0)
+    } finally { destroy() }
+  })
+
+  it('pinned rows do not carry the selection checkbox cell', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      // The selection cell class is `.sv-grid-selection-cell`. It may
+      // appear in the regular row when row-selection is on, but never
+      // with a working <button role="checkbox"> inside it on a pinned
+      // row (the snippet renders an empty <td>).
+      const checkboxes = target.querySelectorAll(
+        'tr.sv-grid-pinned-row-top button[role="checkbox"]',
+      )
+      expect(checkboxes.length).toBe(0)
+    } finally { destroy() }
+  })
+})
+
+describe('SvGrid - pinned rows + CSS variables', () => {
+  it('sets --sg-thead-h and --sg-pinned-row-h CSS variables on the shell', async () => {
+    const { target, destroy } = await mountGrid({
+      pinnedTopRows: [TOTALS],
+      pinnedBottomRows: [PAGE],
+    })
+    try {
+      await tick()
+      const shell = target.querySelector('.sv-grid-shell') as HTMLElement | null
+      expect(shell, 'shell should exist').not.toBeNull()
+      const style = shell!.getAttribute('style') ?? ''
+      expect(style).toContain('--sg-thead-h')
+      expect(style).toContain('--sg-pinned-row-h')
+    } finally { destroy() }
+  })
+})