@svgrid/grid 2.6.3 → 2.6.5

package/src/svgrid.advanced-filter.test.ts

@@ -0,0 +1,481 @@
+/**
+ * Component tests for the advanced filter, exercised through a real mounted
+ * grid rather than the pipeline in isolation.
+ *
+ * The behaviour that matters here is not "does the predicate work" - that is
+ * settled by the compiler's differential tests in @svgrid/enterprise. It is:
+ *
+ *   - the grid FAILS OPEN when no engine is registered, so the free package
+ *     shows every row rather than none
+ *   - a compile failure or a throw also fails open, never half-filters
+ *   - it composes with AND against the global, column and facet filters
+ *   - it runs LAST, so an engine sees only the rows those stages left
+ *   - clearAllFilters() clears it, and view state round-trips it
+ */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  registerAdvancedFilterEngine,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type {
+  AdvancedFilterEngine,
+  ColumnDef,
+  GridPredicateExpr,
+  SvGridApi,
+} from './index'
+
+type Order = { id: string; region: string; status: string; amount: number }
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
+
+const rows: Order[] = [
+  { id: 'O-1', region: 'EMEA', status: 'open', amount: 100 },
+  { id: 'O-2', region: 'EMEA', status: 'paid', amount: 200 },
+  { id: 'O-3', region: 'APAC', status: 'open', amount: 300 },
+  { id: 'O-4', region: 'APAC', status: 'paid', amount: 400 },
+]
+
+const cols: ColumnDef<typeof features, Order>[] = [
+  { field: 'id', header: 'ID', width: 90 },
+  { field: 'region', header: 'Region', width: 110 },
+  { field: 'status', header: 'Status', width: 110 },
+  { field: 'amount', header: 'Amount', width: 100 },
+]
+
+function mountGrid(props: Record<string, unknown> = {}) {
+  return new Promise<{
+    api: SvGridApi<typeof features, Order>
+    target: HTMLElement
+    destroy: () => void
+  }>(
+    (res, rej) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      let api: SvGridApi<typeof features, Order> | null = null
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: {
+            coreRowModel: createCoreRowModel(),
+            filteredRowModel: createFilteredRowModel(),
+            sortedRowModel: createSortedRowModel(sortFns),
+          },
+          containerHeight: 360,
+          virtualization: false,
+          columnVirtualization: false,
+          showPagination: false,
+          ...props,
+          onApiReady(received: SvGridApi<typeof features, Order>) {
+            api = received
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+        } as never,
+      })
+      queueMicrotask(() => { if (!api) rej(new Error('onApiReady never fired')) })
+    },
+  )
+}
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+const ids = (api: SvGridApi<typeof features, Order>) =>
+  api.getDisplayedRows().map((r) => (r as unknown as Order).id)
+
+/** An engine that honours only a flat `cmp` on `region` with `equals`. */
+const regionEqualsEngine: AdvancedFilterEngine = (expr, ctx) => {
+  if (expr.kind !== 'cmp' || expr.op !== 'equals') return null
+  const want = String(expr.value ?? '')
+  return (row) => String(ctx.getValue(row, expr.column) ?? '') === want
+}
+
+const EMEA: GridPredicateExpr = { kind: 'cmp', column: 'region', op: 'equals', value: 'EMEA' }
+
+afterEach(() => registerAdvancedFilterEngine(null))
+
+describe('advanced filter without an engine (free grid)', () => {
+  it('shows every row - fails OPEN rather than filtering nothing through', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(ids(api)).toEqual(['O-1', 'O-2', 'O-3', 'O-4'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('still records the expression, and reports itself inactive', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(api.getAdvancedFilter()).toEqual(EMEA)
+      expect(api.isAdvancedFilterActive()).toBe(false)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('advanced filter with an engine', () => {
+  it('narrows the rows', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(ids(api)).toEqual(['O-1', 'O-2'])
+      expect(api.isAdvancedFilterActive()).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('clearing restores every row', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      api.clearAdvancedFilter()
+      await tick()
+      expect(ids(api)).toHaveLength(4)
+      expect(api.getAdvancedFilter()).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('fails open when the engine cannot compile the expression', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      // `contains` is outside what this engine handles, so it returns null.
+      api.setAdvancedFilter({ kind: 'cmp', column: 'region', op: 'contains', value: 'EM' })
+      await tick()
+      expect(ids(api)).toHaveLength(4)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('fails open when the engine throws', async () => {
+    registerAdvancedFilterEngine(() => {
+      throw new Error('boom')
+    })
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(ids(api)).toHaveLength(4)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('fails open when the compiled predicate itself throws', async () => {
+    registerAdvancedFilterEngine(() => () => {
+      throw new Error('boom per row')
+    })
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(ids(api)).toHaveLength(4)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('composition with the other filter stages', () => {
+  it('ANDs with a column filter', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      api.setFilter('status', { operator: 'equals', value: 'paid' })
+      await tick()
+      expect(ids(api)).toEqual(['O-2'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('ANDs with a facet filter', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      api.setFacetFilter('status', ['open'])
+      await tick()
+      expect(ids(api)).toEqual(['O-1'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('runs LAST - the engine only sees rows the earlier stages kept', async () => {
+    let seen: number | null = null
+    registerAdvancedFilterEngine((_expr, ctx) => {
+      seen = ctx.rows.length
+      return () => true
+    })
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setFilter('region', { operator: 'equals', value: 'EMEA' })
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      // 2 EMEA rows, not the full 4: aggregates fold over the narrowed set.
+      expect(seen).toBe(2)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('is cleared by clearAllFilters(), which promises every filter surface', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      api.setFilter('status', { operator: 'equals', value: 'paid' })
+      await tick()
+      api.clearAllFilters()
+      await tick()
+      expect(api.getAdvancedFilter()).toBeNull()
+      expect(ids(api)).toHaveLength(4)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('seeding and view state', () => {
+  it('seeds from initialAdvancedFilter at mount', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid({ initialAdvancedFilter: EMEA })
+    try {
+      await tick()
+      expect(api.getAdvancedFilter()).toEqual(EMEA)
+      expect(ids(api)).toEqual(['O-1', 'O-2'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('omits the key from getState() when no advanced filter is set', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      // Existing saved views must round-trip byte-identical, so the key is
+      // absent rather than present-and-null.
+      expect('advancedFilter' in api.getState()).toBe(false)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('round-trips through getState / setState', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      const saved = JSON.parse(JSON.stringify(api.getState()))
+      api.clearAdvancedFilter()
+      await tick()
+      expect(ids(api)).toHaveLength(4)
+
+      api.setState(saved)
+      await tick()
+      expect(api.getAdvancedFilter()).toEqual(EMEA)
+      expect(ids(api)).toEqual(['O-1', 'O-2'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves the filter alone when setState omits the key', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      api.setState({ globalFilter: '' })
+      await tick()
+      expect(api.getAdvancedFilter()).toEqual(EMEA)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('clears when setState passes an explicit null', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      api.setState({ advancedFilter: null })
+      await tick()
+      expect(api.getAdvancedFilter()).toBeNull()
+      expect(ids(api)).toHaveLength(4)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('toolbar indicator', () => {
+  // A filter set from a consumer-mounted panel hides rows with nothing in the
+  // grid to explain it. The chip is the grid's own account of that state.
+  const chip = (t: HTMLElement) => t.querySelector('.sv-grid-advf-chip')
+
+  it('is absent until an advanced filter is set', async () => {
+    const { target, destroy } = await mountGrid()
+    try {
+      await tick()
+      expect(chip(target)).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('appears when a filter is set, even with no engine registered', async () => {
+    // Deliberate: the expression IS set, so the state is real and worth
+    // showing. Whether an engine acts on it is a separate concern, and the
+    // panel reports that separately.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(chip(target)).not.toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('clears the filter and restores the rows', async () => {
+    registerAdvancedFilterEngine(regionEqualsEngine)
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(ids(api)).toEqual(['O-1', 'O-2'])
+
+      ;(chip(target)!.querySelector('.sv-grid-advf-clear') as HTMLButtonElement).click()
+      await tick()
+
+      expect(api.getAdvancedFilter()).toBeNull()
+      expect(ids(api)).toEqual(['O-1', 'O-2', 'O-3', 'O-4'])
+      expect(chip(target)).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('labels the clear control for assistive tech and translates it', async () => {
+    const { api, target, destroy } = await mountGrid({
+      localization: { text: { advancedFilterActive: 'Geavanceerd filter' } },
+    })
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      expect(chip(target)!.textContent).toContain('Geavanceerd filter')
+      expect(
+        chip(target)!.querySelector('.sv-grid-advf-clear')!.getAttribute('aria-label'),
+      ).toBe('Clear advanced filter')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('onAdvancedFilterChange', () => {
+  // The authoring panel lives outside the grid, so a change the grid makes on
+  // its own has to be announced or the two drift apart.
+  it('does not fire on mount', async () => {
+    const seen: Array<GridPredicateExpr | null> = []
+    const { destroy } = await mountGrid({
+      onAdvancedFilterChange: (e: GridPredicateExpr | null) => seen.push(e),
+    })
+    try {
+      await tick()
+      expect(seen).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('fires when the filter is set and when it is cleared', async () => {
+    const seen: Array<GridPredicateExpr | null> = []
+    const { api, destroy } = await mountGrid({
+      onAdvancedFilterChange: (e: GridPredicateExpr | null) => seen.push(e),
+    })
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      api.clearAdvancedFilter()
+      await tick()
+      expect(seen).toEqual([EMEA, null])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('fires when the toolbar chip clears it', async () => {
+    const seen: Array<GridPredicateExpr | null> = []
+    const { api, target, destroy } = await mountGrid({
+      onAdvancedFilterChange: (e: GridPredicateExpr | null) => seen.push(e),
+    })
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      ;(target.querySelector('.sv-grid-advf-clear') as HTMLButtonElement).click()
+      await tick()
+      expect(seen.at(-1)).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('fires when clearAllFilters sweeps it away', async () => {
+    const seen: Array<GridPredicateExpr | null> = []
+    const { api, destroy } = await mountGrid({
+      onAdvancedFilterChange: (e: GridPredicateExpr | null) => seen.push(e),
+    })
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      api.clearAllFilters()
+      await tick()
+      expect(seen.at(-1)).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('does not fire again when the same expression is re-applied', async () => {
+    const seen: Array<GridPredicateExpr | null> = []
+    const { api, destroy } = await mountGrid({
+      onAdvancedFilterChange: (e: GridPredicateExpr | null) => seen.push(e),
+    })
+    try {
+      api.setAdvancedFilter(EMEA)
+      await tick()
+      api.setAdvancedFilter({ ...EMEA })
+      await tick()
+      expect(seen).toHaveLength(1)
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/svgrid.displayed-rows.test.ts

@@ -0,0 +1,144 @@
+/**
+ * `api.getDisplayedRows()` returns the TData rows the body is rendering.
+ *
+ * The subtle case is what counts as "not a data row". Grouping banners are
+ * synthetic - they wrap an aggregate and must be skipped. Tree parents also
+ * have `subRows`, but they are real data rows that render their own cells, so
+ * they must be INCLUDED. A `subRows.length` test cannot tell the two apart and
+ * silently dropped every tree parent (and, through it, every tree parent in an
+ * enterprise export, whose default row source is this method).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnGroupingFeature,
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { SvGridApi } from './index'
+
+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(rows: unknown[], cols: unknown, extra: Record<string, unknown> = {}) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: SvGridApi<never, never> | 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, never>) => (api = next),
+      ...extra,
+    } as never,
+  })
+  mounted.push(() => unmount(app))
+  return { target, get api() { return api! } }
+}
+
+const flat = [
+  { id: 1, name: 'Ada', department: 'Engineering' },
+  { id: 2, name: 'Grace', department: 'Engineering' },
+  { id: 3, name: 'Linus', department: 'Operations' },
+]
+const flatCols = [
+  { field: 'name', header: 'Name', width: 150 },
+  { field: 'department', header: 'Department', width: 180 },
+]
+
+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 }]
+const treeData = { parentField: 'managerId', column: 'name' }
+const names = (api: SvGridApi<never, never>) =>
+  api.getDisplayedRows().map((r: { name: string }) => r.name)
+
+describe('flat grid', () => {
+  it('returns every row', async () => {
+    const g = mountGrid(flat, flatCols)
+    await tick()
+    expect(names(g.api)).toEqual(['Ada', 'Grace', 'Linus'])
+  })
+})
+
+describe('tree data', () => {
+  it('includes parent rows once expanded - they are real data rows', async () => {
+    const g = mountGrid(tree, treeCols, { treeData })
+    await tick()
+    g.api.expandAllGroups()
+    await tick()
+    // Every row the body paints, parents included.
+    expect(names(g.api)).toEqual(['Ada', 'Grace', 'Alan', 'Linus'])
+    expect(g.target.querySelectorAll('tbody tr').length).toBe(4)
+  })
+
+  it('tracks collapse - a hidden branch is not "displayed"', async () => {
+    const g = mountGrid(tree, treeCols, { treeData, getRowId: (r: { id: number }) => String(r.id) })
+    await tick()
+    // Open Ada only; Grace's own child stays hidden.
+    g.api.setRowExpanded('1', true)
+    await tick()
+    expect(names(g.api)).toEqual(['Ada', 'Grace', 'Linus'])
+    expect(g.target.querySelectorAll('tbody tr').length).toBe(3)
+  })
+
+  it('matches the rendered row count at every expansion level', async () => {
+    const g = mountGrid(tree, treeCols, { treeData })
+    await tick()
+    expect(g.api.getDisplayedRows()).toHaveLength(g.target.querySelectorAll('tbody tr').length)
+    g.api.expandAllGroups()
+    await tick()
+    expect(g.api.getDisplayedRows()).toHaveLength(g.target.querySelectorAll('tbody tr').length)
+  })
+})
+
+describe('grouping', () => {
+  it('still excludes synthetic group banners', async () => {
+    const g = mountGrid(flat, flatCols, { groupBy: ['department'] })
+    await tick()
+    g.api.expandAllGroups()
+    await tick()
+    // 2 banners + 3 leaves rendered, but only the 3 leaves are data rows.
+    expect(g.target.querySelectorAll('tbody tr').length).toBe(5)
+    expect(names(g.api)).toEqual(['Ada', 'Grace', 'Linus'])
+  })
+
+  it('returns nothing while every group is collapsed', async () => {
+    const g = mountGrid(flat, flatCols, { groupBy: ['department'] })
+    await tick()
+    expect(g.api.getDisplayedRows()).toEqual([])
+    expect(g.target.querySelectorAll('tbody tr').length).toBe(2)
+  })
+})