@svgrid/grid 2.2.32 → 2.2.34

package/src/svgrid.footer-pagesize.svelte.test.ts

@@ -0,0 +1,86 @@
+/**
+ * The footer's page-size control used to import SvGridDropdown statically.
+ * That pulled a ~22 KB component into the base bundle to pick one of four
+ * numbers, and worse, it gave the bundler a static path to a module that
+ * SvGrid.svelte deliberately loads with `import()` as a cell editor. The lazy
+ * boundary silently stopped existing: the dropdown shipped in base and the
+ * dynamic import resolved to the already-bundled copy.
+ *
+ * The footer now renders the dropdown's closed trigger as plain markup and
+ * fetches the real component on first open. These tests pin the two things
+ * that regression would break: the trigger must look and read the same before
+ * any load, and clicking it must actually open the list rather than requiring
+ * a second click once the chunk arrives.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, rowPaginationFeature, tableFeatures } from './index'
+import type { ColumnDef } from './index'
+
+type Row = { id: number; name: string }
+const features = tableFeatures({ rowPaginationFeature })
+const rows: Row[] = Array.from({ length: 40 }, (_, i) => ({ id: i + 1, name: `Row ${i + 1}` }))
+const cols: ColumnDef<typeof features, Row>[] = [{ field: 'name', header: 'Name', width: 160 }]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function mountGrid(target: HTMLElement) {
+  return mount(SvGrid<typeof features, Row>, {
+    target,
+    props: {
+      data: rows,
+      columns: cols,
+      features,
+      showPagination: true,
+      pageSize: 10,
+      getCoreRowModel: createCoreRowModel(),
+    } as never,
+  })
+}
+
+const trigger = (host: HTMLElement) =>
+  host.querySelector<HTMLButtonElement>(
+    '.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-trigger',
+  )
+
+describe('footer page-size control', () => {
+  it('renders a dropdown trigger without loading SvGridDropdown', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const app = mountGrid(host)
+    await tick()
+
+    const btn = trigger(host)
+    expect(btn).not.toBeNull()
+    // Same classes and ARIA as the real component's closed state, so swapping
+    // it in causes no visual change and no layout shift.
+    expect(btn!.getAttribute('aria-haspopup')).toBe('listbox')
+    expect(btn!.getAttribute('aria-expanded')).toBe('false')
+    expect(btn!.querySelector('.sv-grid-dropdown-label')?.textContent?.trim()).toBe('10')
+    expect(btn!.querySelector('.sv-grid-dropdown-caret')).not.toBeNull()
+    // Nothing is open until the user asks for it.
+    expect(host.querySelector('[role="listbox"]')).toBeNull()
+
+    unmount(app)
+    host.remove()
+  })
+
+  it('opens on the first click, without needing a second one', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const app = mountGrid(host)
+    await tick()
+
+    trigger(host)!.click()
+    // The component is fetched here; give the dynamic import a turn to settle.
+    for (let i = 0; i < 10 && !document.querySelector('[role="listbox"]'); i++) await tick()
+
+    // autoOpen carries the originating click through to an open panel.
+    expect(document.querySelector('[role="listbox"]')).not.toBeNull()
+    expect(trigger(host)!.getAttribute('aria-expanded')).toBe('true')
+
+    unmount(app)
+    host.remove()
+  })
+})

package/src/tree-row-model.test.ts

@@ -115,7 +115,6 @@ describe('createTreeRowModel', () => {
   })
 
   it('honours a custom idField', () => {
-    type K = { key: number; parent: number | null }
     const keyed = [
       { key: 10, parent: null },
       { key: 11, parent: 10 },