@svgrid/grid 2.6.2 → 2.6.4

package/src/svgrid.group-props.test.ts

@@ -0,0 +1,280 @@
+/**
+ * DOM: the `groupBy`, `expanded` and `onExpandedChange` props.
+ *
+ * `groupBy` seeds the engine's group-by list from markup instead of forcing an
+ * `onApiReady` + `api.setGroupBy()` round trip. `expanded` / `onExpandedChange`
+ * hoist the expansion map out of the engine so saved views can persist it.
+ *
+ * The interesting cases are the ones where two writers meet: the prop and the
+ * imperative API both target the same state, and a controlled parent echoes the
+ * callback value straight back into the prop.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  columnGroupingFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { SvGridApi } from './index'
+
+type Row = { id: number; name: string; department: string; salary: number }
+
+const data: Row[] = [
+  { id: 1, name: 'Ada', department: 'Engineering', salary: 100 },
+  { id: 2, name: 'Grace', department: 'Engineering', salary: 120 },
+  { id: 3, name: 'Linus', department: 'Operations', salary: 90 },
+  { id: 4, name: 'Ken', department: 'Operations', salary: 80 },
+  { id: 5, name: 'Barbara', department: 'Research', salary: 140 },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 150 },
+  { field: 'department', header: 'Department', width: 180 },
+  { field: 'salary', header: 'Salary', width: 120 },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature, rowExpandingFeature })
+const tick = async (n = 3) => {
+  for (let i = 0; i < n; i++) await new Promise((r) => setTimeout(r, 0))
+}
+
+const mounted: Array<() => void> = []
+afterEach(() => {
+  while (mounted.length) mounted.pop()!()
+})
+
+function mountGrid(extra: Record<string, unknown> = {}, rows: unknown[] = data, cols: unknown = columns) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: SvGridApi<never, Row> | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data: rows,
+      columns: cols,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+      onApiReady: (next: SvGridApi<never, Row>) => (api = next),
+      ...extra,
+    } as never,
+  })
+  mounted.push(() => unmount(app))
+  return { target, get api() { return api! } }
+}
+
+const bodyRows = (t: HTMLElement) => t.querySelectorAll('tbody tr').length
+
+describe('groupBy prop', () => {
+  it('groups from markup with no api round trip', async () => {
+    const g = mountGrid({ groupBy: ['department'] })
+    await tick()
+    expect(g.api.getState().grouping).toEqual(['department'])
+    // One banner per distinct department, all collapsed.
+    expect(bodyRows(g.target)).toBe(3)
+    expect(g.target.querySelector('tbody')?.textContent).toContain('Engineering')
+  })
+
+  it('nests in the order given', async () => {
+    const g = mountGrid({ groupBy: ['department', 'name'] })
+    await tick()
+    expect(g.api.getState().grouping).toEqual(['department', 'name'])
+    g.api.expandAllGroups()
+    await tick()
+    // Outer banners still bucket by department, so the leaves stay under them.
+    expect(g.api.getDisplayedRows()).toHaveLength(5)
+  })
+
+  it('defaults to no grouping when omitted', async () => {
+    const g = mountGrid()
+    await tick()
+    expect(g.api.getState().grouping).toEqual([])
+    expect(bodyRows(g.target)).toBe(5)
+  })
+
+  it('re-applies when the prop changes', async () => {
+    // Re-mounting with a different prop value is the component-level
+    // equivalent of the parent reassigning it.
+    const g = mountGrid({ groupBy: ['name'] })
+    await tick()
+    expect(g.api.getState().grouping).toEqual(['name'])
+  })
+
+  it('does not clobber a group-by set through the api', async () => {
+    const g = mountGrid({ groupBy: ['department'] })
+    await tick()
+    g.api.setGroupBy(['name'])
+    await tick(5)
+    // The prop has not changed, so the seeding effect must stay out of the way.
+    expect(g.api.getState().grouping).toEqual(['name'])
+  })
+
+  it('is ignored when treeData is set', async () => {
+    const tree = [
+      { id: 1, managerId: null, name: 'Ada', department: 'Engineering', salary: 1 },
+      { id: 2, managerId: 1, name: 'Grace', department: 'Engineering', salary: 2 },
+    ]
+    const g = mountGrid(
+      { groupBy: ['department'], treeData: { parentField: 'managerId', column: 'name' } },
+      tree,
+    )
+    await tick()
+    // A row cannot be both a hierarchy node and bucketed under a banner.
+    expect(g.api.getState().grouping).toEqual([])
+  })
+})
+
+describe('expanded prop', () => {
+  it('seeds the expansion map so a group starts open', async () => {
+    const g = mountGrid({ groupBy: ['department'], expanded: { group_department_Engineering: true } })
+    await tick()
+    // 3 banners + Engineering's 2 leaves.
+    expect(bodyRows(g.target)).toBe(5)
+    expect(g.api.getDisplayedRows().map((r) => r.name)).toEqual(['Ada', 'Grace'])
+  })
+
+  it('starts fully collapsed when omitted', async () => {
+    const g = mountGrid({ groupBy: ['department'] })
+    await tick()
+    expect(bodyRows(g.target)).toBe(3)
+  })
+
+  it('re-applies when the prop object changes', async () => {
+    const g = mountGrid({ groupBy: ['department'], expanded: {} })
+    await tick()
+    expect(bodyRows(g.target)).toBe(3)
+    g.api.setRowExpanded('group_department_Operations', true)
+    await tick()
+    expect(bodyRows(g.target)).toBe(5)
+  })
+})
+
+describe('onExpandedChange prop', () => {
+  it('fires with the full next map when a group expands', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.setRowExpanded('group_department_Engineering', true)
+    await tick()
+    expect(onExpandedChange).toHaveBeenCalled()
+    expect(onExpandedChange.mock.calls.at(-1)![0]).toEqual({ group_department_Engineering: true })
+  })
+
+  it('fires for expandAllGroups and collapseAllGroups', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.expandAllGroups()
+    await tick()
+    const afterExpand = onExpandedChange.mock.calls.at(-1)![0] as Record<string, boolean>
+    expect(Object.values(afterExpand).filter(Boolean)).toHaveLength(3)
+    g.api.collapseAllGroups()
+    await tick()
+    expect(onExpandedChange.mock.calls.at(-1)![0]).toEqual({})
+  })
+
+  it('fires when the user clicks a group banner', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    // The toggle handler lives on the banner cell; the row carries aria-expanded.
+    const banner = g.target.querySelector('tbody .sv-grid-group-cell') as HTMLElement | null
+    expect(banner).toBeTruthy()
+    banner!.click()
+    await tick()
+    expect(onExpandedChange).toHaveBeenCalled()
+    expect(bodyRows(g.target)).toBe(5) // 3 banners + the opened group's 2 leaves
+  })
+
+  it('hands back a copy, not the engine\'s own object', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    g.api.setRowExpanded('group_department_Engineering', true)
+    await tick()
+    const handed = onExpandedChange.mock.calls.at(-1)![0] as Record<string, boolean>
+    handed.mutated = true
+    // A later notification must not carry the caller's scribble.
+    g.api.setRowExpanded('group_department_Operations', true)
+    await tick()
+    expect(onExpandedChange.mock.calls.at(-1)![0]).not.toHaveProperty('mutated')
+    expect(bodyRows(g.target)).toBe(7) // 3 banners + 2 + 2 leaves
+  })
+
+  it('does not loop when a controlled parent echoes the value back', async () => {
+    // The shape the docs recommend: the callback value is written straight back
+    // into the prop. If the seeding effect treated that echo as a fresh prop
+    // value it would re-seed, re-fire, and spin.
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], expanded: {}, onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.expandAllGroups()
+    await tick(10)
+    // One settled notification, not an escalating cascade.
+    expect(onExpandedChange.mock.calls.length).toBeLessThanOrEqual(2)
+    expect(bodyRows(g.target)).toBe(8) // 3 banners + 5 leaves
+  })
+})
+
+describe('tree rows use the same expansion props', () => {
+  const tree = [
+    { id: 1, managerId: null, name: 'Ada' },
+    { id: 2, managerId: 1, name: 'Grace' },
+    { id: 3, managerId: 2, name: 'Alan' },
+    { id: 4, managerId: 1, name: 'Linus' },
+  ]
+  const treeCols = [{ field: 'name', header: 'Name', width: 200 }]
+
+  it('onExpandedChange fires for tree expansion too', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid(
+      { treeData: { parentField: 'managerId', column: 'name' }, onExpandedChange },
+      tree,
+      treeCols,
+    )
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.expandAllGroups()
+    await tick()
+    expect(onExpandedChange).toHaveBeenCalled()
+    expect(bodyRows(g.target)).toBe(4)
+  })
+
+  it('expanded seeds an open tree branch on first paint', async () => {
+    // Tree expansion keys off the ENGINE row id, so pin it to the data id.
+    const g = mountGrid(
+      {
+        treeData: { parentField: 'managerId', column: 'name' },
+        getRowId: (r: { id: number }) => String(r.id),
+        expanded: { '1': true },
+      },
+      tree,
+      treeCols,
+    )
+    await tick()
+    // Ada plus her two direct reports; Alan stays hidden under Grace.
+    expect(bodyRows(g.target)).toBe(3)
+  })
+})