@svgrid/grid 2.6.21 → 2.7.0

package/src/svgrid.selection-bar-seam.test.ts

@@ -0,0 +1,185 @@
+/**
+ * The FREE half of the selection bar: the prop, the normalisation of its three
+ * shapes, and what shows when no Enterprise renderer is registered.
+ *
+ * The bar itself is Pro and lives behind `registerSelectionBarView`, so this
+ * suite deliberately never registers one - it asserts the upsell path and the
+ * config the renderer would receive. The rendered bar is covered by
+ * `selection-bar.dom.test.ts` in @svgrid/enterprise.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  hasSelectionBarView,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string }
+const features = tableFeatures({ rowSortingFeature, rowSelectionFeature })
+const rows: Row[] = [
+  { id: 1, name: 'Ada' },
+  { id: 2, name: 'Grace' },
+]
+const cols: ColumnDef<typeof features, Row>[] = [{ field: 'name', header: 'Name', width: 160 }]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+const UPSELL = '.sv-grid-selection-bar-upsell'
+
+function mountGrid(selectionBar: unknown) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res, rej) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: { coreRowModel: createCoreRowModel() },
+          getRowId: (r: Row) => String(r.id),
+          containerHeight: 200,
+          virtualization: false,
+          showRowSelection: true,
+          selectionBar,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+        } as any,
+      })
+      queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+    },
+  )
+}
+
+describe('selectionBar - without the Enterprise renderer', () => {
+  it('reports that no renderer is registered', () => {
+    // If this is ever true here, the suite is testing the Pro path by accident
+    // and every assertion below is meaningless.
+    expect(hasSelectionBarView()).toBe(false)
+  })
+
+  it('shows nothing at all until a row is selected', async () => {
+    const { target, destroy } = await mountGrid(true)
+    await tick()
+    expect(target.querySelector(UPSELL)).toBeNull()
+    destroy()
+  })
+
+  it('shows the upsell in the bar position once rows are selected', async () => {
+    const { api, target, destroy } = await mountGrid(true)
+    await tick()
+    api.selectRows(['1'])
+    await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+
+    const note = target.querySelector(UPSELL)!
+    expect(note.getAttribute('role')).toBe('note')
+    expect(note.textContent).toContain('@svgrid/enterprise')
+    expect(note.textContent).toContain('enableSelectionBar()')
+    destroy()
+  })
+
+  it('says a license is needed, and links to it', async () => {
+    // Naming the package is what unblocks a developer trying it; saying a key
+    // is needed is what they have to know before shipping. Enterprise is
+    // SOFT-gated, so the wording must not imply the feature is inert without
+    // one - it says "watermark", which is what actually happens.
+    const { api, target, destroy } = await mountGrid(true)
+    await tick()
+    api.selectRows(['1'])
+    await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+
+    const license = target.querySelector('.sv-grid-upsell-license')!
+    expect(license).not.toBeNull()
+    expect(license.textContent).toContain('license key')
+    expect(license.textContent).toContain('watermark')
+
+    const link = license.querySelector('a')!
+    expect(link.getAttribute('href')).toBe('https://svgrid.com/pricing/')
+    // Opening a pricing page must not navigate the host app away.
+    expect(link.getAttribute('target')).toBe('_blank')
+    expect(link.getAttribute('rel')).toContain('noopener')
+
+    destroy()
+  })
+
+  it('is localizable, like the rest of the grid chrome', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let api: SvGridApi<typeof features, Row>
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows,
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => String(r.id),
+        containerHeight: 200,
+        virtualization: false,
+        showRowSelection: true,
+        selectionBar: true,
+        localization: { text: { upsellLicense: 'Lizenz erforderlich.' } },
+        onApiReady: (a: SvGridApi<typeof features, Row>) => (api = a),
+      } as any,
+    })
+    await tick()
+    api!.selectRows(['1'])
+    await vi.waitFor(() => {
+      expect(target.querySelector('.sv-grid-upsell-license')?.textContent).toContain(
+        'Lizenz erforderlich.',
+      )
+    })
+    unmount(app)
+    target.remove()
+  })
+
+  it('places the upsell on the edge the real bar would use', async () => {
+    // So installing enterprise does not move the thing the user was looking at.
+    const { api, target, destroy } = await mountGrid({ position: 'top', actions: [] })
+    await tick()
+    api.selectRows(['1'])
+    await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+    expect(target.querySelector(UPSELL)!.getAttribute('data-position')).toBe('top')
+    destroy()
+  })
+
+  it('stays out of the way entirely when the prop is unset or false', async () => {
+    for (const prop of [undefined, false]) {
+      const { api, target, destroy } = await mountGrid(prop)
+      await tick()
+      api.selectRows(['1'])
+      await tick()
+      await tick()
+      expect(target.querySelector(UPSELL), `selectionBar={${String(prop)}}`).toBeNull()
+      destroy()
+    }
+  })
+})
+
+describe('selectionBar - the three prop shapes all reach the renderer', () => {
+  // Each shape has to produce a bar. What lands ON it is asserted against the
+  // real renderer in the enterprise suite; here the question is only whether
+  // the prop was understood at all.
+  const shapes: Array<[string, unknown]> = [
+    ['true', true],
+    ['an action array', [{ key: 'k', label: 'K', action: () => {} }]],
+    ['a config object', { position: 'bottom', actions: [], maxVisible: 2 }],
+    ['a config object with no actions', { position: 'top' }],
+  ]
+
+  for (const [name, prop] of shapes) {
+    it(`understands ${name}`, async () => {
+      const { api, target, destroy } = await mountGrid(prop)
+      await tick()
+      api.selectRows(['1'])
+      await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+      destroy()
+    })
+  }
+})

package/src/svgrid.tree-data.test.ts

@@ -1,186 +1,186 @@
-/**
- * DOM: `treeData` renders a client-side hierarchy (#26).
- *
- * The point of the design is that tree rows stay REAL data rows: they render
- * their own cells, so editing/formatting/selection all keep working, and only
- * gain an expander plus indentation in the tree column. Grouping's banners are
- * synthetic full-width rows - a tree row must never be rendered like one.
- */
-import { afterEach, describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  createCoreRowModel,
-  createFilteredRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  flattenTreeData,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-} from './index'
-
-type Node = { id: number; managerId: number | null; name: string; team: string }
-
-const data: Node[] = [
-  { id: 1, managerId: null, name: 'Ada', team: 'Exec' },
-  { id: 2, managerId: 1, name: 'Grace', team: 'Eng' },
-  { id: 3, managerId: 2, name: 'Alan', team: 'Eng' },
-  { id: 4, managerId: 1, name: 'Linus', team: 'Ops' },
-]
-
-const columns = [
-  { field: 'name', header: 'Name', width: 200 },
-  { field: 'team', header: 'Team', width: 120 },
-]
-
-const features = tableFeatures({ rowSortingFeature })
-const tick = () => new Promise<void>((r) => queueMicrotask(r))
-
-function mountGrid(extra: Record<string, unknown> = {}) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(SvGrid, {
-    target,
-    props: {
-      data,
-      columns,
-      features,
-      treeData: { parentField: 'managerId', column: 'name' },
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        filteredRowModel: createFilteredRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-        paginatedRowModel: createPaginatedRowModel(),
-      },
-      containerHeight: 600,
-      virtualization: false,
-      ...extra,
-    } as never,
-  })
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-const bodyRows = (t: HTMLElement) =>
-  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
-    (r) => !r.classList.contains('sv-grid-row-spacer'),
-  )
-const toggles = (t: HTMLElement) =>
-  [...t.querySelectorAll<HTMLButtonElement>('.sv-grid-tree-toggle')]
-
-describe('treeData', () => {
-  it('shows only roots until expanded', async () => {
-    const { target, destroy } = mountGrid()
-    cleanup = destroy
-    await tick()
-    expect(bodyRows(target)).toHaveLength(1)
-    expect(target.textContent).toContain('Ada')
-    expect(target.textContent).not.toContain('Grace')
-  })
-
-  it('expands to reveal children', async () => {
-    const { target, destroy } = mountGrid()
-    cleanup = destroy
-    await tick()
-    toggles(target)[0]!.click()
-    await tick()
-    expect(target.textContent).toContain('Grace')
-    expect(target.textContent).toContain('Linus')
-    // Alan is a grandchild - still hidden.
-    expect(target.textContent).not.toContain('Alan')
-  })
-
-  it('renders tree rows as normal cell rows, not full-width banners', async () => {
-    const { target, destroy } = mountGrid()
-    cleanup = destroy
-    await tick()
-    expect(target.querySelectorAll('tr.sv-grid-group-row')).toHaveLength(0)
-    // The root has its own cells - both columns render.
-    const cells = bodyRows(target)[0]!.querySelectorAll('.sv-grid-cell')
-    expect(cells.length).toBeGreaterThanOrEqual(2)
-    expect(bodyRows(target)[0]!.textContent).toContain('Exec')
-  })
-
-  it('uses the treegrid role with aria-level and aria-expanded', async () => {
-    const { target, destroy } = mountGrid()
-    cleanup = destroy
-    await tick()
-    expect(target.querySelector('[role="treegrid"]')).not.toBeNull()
-    const root = bodyRows(target)[0]!
-    expect(root.getAttribute('aria-level')).toBe('1')
-    expect(root.getAttribute('aria-expanded')).toBe('false')
-
-    toggles(target)[0]!.click()
-    await tick()
-    expect(bodyRows(target)[0]!.getAttribute('aria-expanded')).toBe('true')
-    // A child sits one level deeper.
-    expect(bodyRows(target)[1]!.getAttribute('aria-level')).toBe('2')
-  })
-
-  it('indents from ONE source only', async () => {
-    // `sv-grid-group-child-indent` exists for rows nested under a group banner
-    // and keys off `row.depth`, which tree rows also have. It used to stack on
-    // top of the tree indent, putting a 20px gap between a row's chevron and
-    // its text - the tree affordance owns indentation here.
-    const { target, destroy } = mountGrid()
-    cleanup = destroy
-    await tick()
-    toggles(target)[0]!.click()
-    await tick()
-
-    expect(target.querySelectorAll('.sv-grid-group-child-indent')).toHaveLength(0)
-    // Every name cell still carries exactly one tree indent.
-    const nameCells = [...target.querySelectorAll('[data-col-id="name"]')]
-    for (const cell of nameCells) {
-      expect(cell.querySelectorAll('.sv-grid-tree-indent')).toHaveLength(1)
-    }
-  })
-
-  it('indents by depth x indentPx, honouring the override', async () => {
-    const { target, destroy } = mountGrid({
-      treeData: { parentField: 'managerId', column: 'name', indentPx: 30 },
-    })
-    cleanup = destroy
-    await tick()
-    toggles(target)[0]!.click()
-    await tick()
-    const widths = [...target.querySelectorAll<HTMLElement>('[data-col-id="name"] .sv-grid-tree-indent')]
-      .map((e) => e.style.width)
-    // Root at 0, its children one level in.
-    expect(widths[0]).toBe('0px')
-    expect(widths[1]).toBe('30px')
-  })
-
-  it('gives a leaf no expander but keeps it indented', async () => {
-    const { target, destroy } = mountGrid()
-    cleanup = destroy
-    await tick()
-    toggles(target)[0]!.click()
-    await tick()
-    // Linus is a leaf: spacer, no toggle button.
-    const linus = bodyRows(target).find((r) => r.textContent?.includes('Linus'))!
-    expect(linus.querySelector('.sv-grid-tree-toggle')).toBeNull()
-    expect(linus.querySelector('.sv-grid-tree-spacer')).not.toBeNull()
-    expect(linus.querySelector('.sv-grid-tree-indent')).not.toBeNull()
-  })
-
-  it('accepts nested data once flattened', async () => {
-    const nested = [
-      { id: 1, name: 'Ada', team: 'Exec', reports: [{ id: 2, name: 'Grace', team: 'Eng' }] },
-    ]
-    const flat = flattenTreeData(nested as never, { childrenField: 'reports' })
-    const { target, destroy } = mountGrid({
-      data: flat,
-      treeData: { parentField: '__parentId', column: 'name' },
-    })
-    cleanup = destroy
-    await tick()
-    expect(bodyRows(target)).toHaveLength(1)
-    toggles(target)[0]!.click()
-    await tick()
-    expect(target.textContent).toContain('Grace')
-  })
-})
+/**
+ * DOM: `treeData` renders a client-side hierarchy (#26).
+ *
+ * The point of the design is that tree rows stay REAL data rows: they render
+ * their own cells, so editing/formatting/selection all keep working, and only
+ * gain an expander plus indentation in the tree column. Grouping's banners are
+ * synthetic full-width rows - a tree row must never be rendered like one.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  flattenTreeData,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Node = { id: number; managerId: number | null; name: string; team: string }
+
+const data: Node[] = [
+  { id: 1, managerId: null, name: 'Ada', team: 'Exec' },
+  { id: 2, managerId: 1, name: 'Grace', team: 'Eng' },
+  { id: 3, managerId: 2, name: 'Alan', team: 'Eng' },
+  { id: 4, managerId: 1, name: 'Linus', team: 'Ops' },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'team', header: 'Team', width: 120 },
+]
+
+const features = tableFeatures({ rowSortingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(extra: Record<string, unknown> = {}) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      treeData: { parentField: 'managerId', column: 'name' },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+      ...extra,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const bodyRows = (t: HTMLElement) =>
+  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
+    (r) => !r.classList.contains('sv-grid-row-spacer'),
+  )
+const toggles = (t: HTMLElement) =>
+  [...t.querySelectorAll<HTMLButtonElement>('.sv-grid-tree-toggle')]
+
+describe('treeData', () => {
+  it('shows only roots until expanded', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    expect(bodyRows(target)).toHaveLength(1)
+    expect(target.textContent).toContain('Ada')
+    expect(target.textContent).not.toContain('Grace')
+  })
+
+  it('expands to reveal children', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    toggles(target)[0]!.click()
+    await tick()
+    expect(target.textContent).toContain('Grace')
+    expect(target.textContent).toContain('Linus')
+    // Alan is a grandchild - still hidden.
+    expect(target.textContent).not.toContain('Alan')
+  })
+
+  it('renders tree rows as normal cell rows, not full-width banners', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    expect(target.querySelectorAll('tr.sv-grid-group-row')).toHaveLength(0)
+    // The root has its own cells - both columns render.
+    const cells = bodyRows(target)[0]!.querySelectorAll('.sv-grid-cell')
+    expect(cells.length).toBeGreaterThanOrEqual(2)
+    expect(bodyRows(target)[0]!.textContent).toContain('Exec')
+  })
+
+  it('uses the treegrid role with aria-level and aria-expanded', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    expect(target.querySelector('[role="treegrid"]')).not.toBeNull()
+    const root = bodyRows(target)[0]!
+    expect(root.getAttribute('aria-level')).toBe('1')
+    expect(root.getAttribute('aria-expanded')).toBe('false')
+
+    toggles(target)[0]!.click()
+    await tick()
+    expect(bodyRows(target)[0]!.getAttribute('aria-expanded')).toBe('true')
+    // A child sits one level deeper.
+    expect(bodyRows(target)[1]!.getAttribute('aria-level')).toBe('2')
+  })
+
+  it('indents from ONE source only', async () => {
+    // `sv-grid-group-child-indent` exists for rows nested under a group banner
+    // and keys off `row.depth`, which tree rows also have. It used to stack on
+    // top of the tree indent, putting a 20px gap between a row's chevron and
+    // its text - the tree affordance owns indentation here.
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    toggles(target)[0]!.click()
+    await tick()
+
+    expect(target.querySelectorAll('.sv-grid-group-child-indent')).toHaveLength(0)
+    // Every name cell still carries exactly one tree indent.
+    const nameCells = [...target.querySelectorAll('[data-col-id="name"]')]
+    for (const cell of nameCells) {
+      expect(cell.querySelectorAll('.sv-grid-tree-indent')).toHaveLength(1)
+    }
+  })
+
+  it('indents by depth x indentPx, honouring the override', async () => {
+    const { target, destroy } = mountGrid({
+      treeData: { parentField: 'managerId', column: 'name', indentPx: 30 },
+    })
+    cleanup = destroy
+    await tick()
+    toggles(target)[0]!.click()
+    await tick()
+    const widths = [...target.querySelectorAll<HTMLElement>('[data-col-id="name"] .sv-grid-tree-indent')]
+      .map((e) => e.style.width)
+    // Root at 0, its children one level in.
+    expect(widths[0]).toBe('0px')
+    expect(widths[1]).toBe('30px')
+  })
+
+  it('gives a leaf no expander but keeps it indented', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    toggles(target)[0]!.click()
+    await tick()
+    // Linus is a leaf: spacer, no toggle button.
+    const linus = bodyRows(target).find((r) => r.textContent?.includes('Linus'))!
+    expect(linus.querySelector('.sv-grid-tree-toggle')).toBeNull()
+    expect(linus.querySelector('.sv-grid-tree-spacer')).not.toBeNull()
+    expect(linus.querySelector('.sv-grid-tree-indent')).not.toBeNull()
+  })
+
+  it('accepts nested data once flattened', async () => {
+    const nested = [
+      { id: 1, name: 'Ada', team: 'Exec', reports: [{ id: 2, name: 'Grace', team: 'Eng' }] },
+    ]
+    const flat = flattenTreeData(nested as never, { childrenField: 'reports' })
+    const { target, destroy } = mountGrid({
+      data: flat,
+      treeData: { parentField: '__parentId', column: 'name' },
+    })
+    cleanup = destroy
+    await tick()
+    expect(bodyRows(target)).toHaveLength(1)
+    toggles(target)[0]!.click()
+    await tick()
+    expect(target.textContent).toContain('Grace')
+  })
+})

package/src/svgrid.upsell-license.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Every Enterprise gate carries the same licensing line.
+ *
+ * There are four of them - Kanban board, scheduler, pivot mode and the
+ * selection bar - and they used to be four hand-written paragraphs. Four gates
+ * worded four ways is how a product ends up explaining its own licensing
+ * inconsistently, so they now share one snippet. This is the test that keeps
+ * them sharing it: a fifth Enterprise feature that hand-rolls its own note
+ * will show up here as a missing licensing line.
+ *
+ * None of the renderers are registered in this file, which is the point - it
+ * asserts what a FREE grid shows.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  hasBoardView,
+  hasSchedulerView,
+  hasSelectionBarView,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; team: string; score: number }
+const features = tableFeatures({})
+const rows: Row[] = [
+  { id: 1, name: 'Ada', team: 'A', score: 3 },
+  { id: 2, name: 'Grace', team: 'B', score: 5 },
+]
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 140 },
+  { field: 'team', header: 'Team', width: 120 },
+  { field: 'score', header: 'Score', width: 100 },
+]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+const LICENSE = '.sv-grid-upsell-license'
+
+function mountGrid(extra: Record<string, unknown>) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res, rej) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: { coreRowModel: createCoreRowModel() },
+          getRowId: (r: Row) => String(r.id),
+          containerHeight: 260,
+          virtualization: false,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+          ...extra,
+        } as any,
+      })
+      queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+    },
+  )
+}
+
+describe('Enterprise upsell notes', () => {
+  it('starts from a grid with no Pro renderer registered', () => {
+    // Otherwise every assertion below is checking the wrong branch.
+    expect(hasBoardView()).toBe(false)
+    expect(hasSchedulerView()).toBe(false)
+    expect(hasSelectionBarView()).toBe(false)
+  })
+
+  const gates: Array<[string, Record<string, unknown>, ((api: SvGridApi<typeof features, Row>) => void)?]> = [
+    ['Kanban board', { board: { groupBy: 'team' } }],
+    ['scheduler', { scheduler: { startField: 'name' } }],
+    ['selection bar', { showRowSelection: true, selectionBar: true }, (api) => api.selectRows(['1'])],
+    // pivotViewOn = a pivot config AND pivot mode on; without the Pro engine
+    // `pivotResult` stays null and the upsell renders in its place.
+    ['pivot mode', { pivot: { rows: ['team'], values: [{ field: 'score', agg: 'sum' }] }, pivotMode: true }],
+  ]
+
+  for (const [name, props, activate] of gates) {
+    it(`the ${name} gate explains the licensing`, async () => {
+      const { api, target, destroy } = await mountGrid(props)
+      try {
+        await tick()
+        activate?.(api)
+        await vi.waitFor(() => {
+          expect(target.querySelector(LICENSE), `${name} upsell`).not.toBeNull()
+        })
+
+        const note = target.querySelector(LICENSE)!
+        // Soft-gated: the feature runs without a key and the grid watermarks.
+        // The wording must not imply it is inert, because it is not.
+        expect(note.textContent, name).toContain('license key')
+        expect(note.textContent, name).toContain('watermark')
+        expect(note.querySelector('a')?.getAttribute('href'), name).toBe(
+          'https://svgrid.com/pricing/',
+        )
+      } finally {
+        destroy()
+      }
+    })
+  }
+
+  it('says nothing about licensing on a grid using no Pro feature', async () => {
+    const { target, destroy } = await mountGrid({})
+    try {
+      await tick()
+      expect(target.querySelector(LICENSE)).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+})