@svgrid/grid 2.6.5 → 2.6.7

package/src/svgrid.async-editor-options.test.ts

@@ -1,271 +1,273 @@
-/**
- * Async `editorOptions` (#18): an option list that arrives from the server.
- *
- * Render paths call the option resolver synchronously and often, so an async
- * source cannot block. The first call starts the fetch and returns an empty
- * list; the resolved value lands in reactive state and re-renders the open
- * editor. In-flight keys are tracked so repeated renders do not refire the
- * request, and so the dropdown can say "Loading…" rather than "No options",
- * which would read as "nothing to pick".
- */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  createCoreRowModel,
-  createFilteredRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-} from './index'
-
-type Row = { id: number; country: string; city: string }
-
-const data: Row[] = [
-  { id: 1, country: 'FR', city: 'Paris' },
-  { id: 2, country: 'JP', city: 'Osaka' },
-]
-
-const tick = () => new Promise<void>((r) => queueMicrotask(r))
-// The list editors lazy-load `SvGridDropdown` with a dynamic import, so
-// microtasks alone never get it mounted - the settle has to yield the macrotask
-// queue too, and then again for the resolved options to re-render.
-const settle = async () => {
-  for (let i = 0; i < 4; i += 1) {
-    await new Promise((r) => setTimeout(r, 0))
-    await tick()
-  }
-}
-
-function mountGrid(columns: unknown[]) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  let api: never = null as never
-  const app = mount(SvGrid, {
-    target,
-    props: {
-      data,
-      columns,
-      features: tableFeatures({ rowSortingFeature }),
-      editable: true,
-      onApiReady: (a: never) => { api = a },
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        filteredRowModel: createFilteredRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-        paginatedRowModel: createPaginatedRowModel(),
-      },
-      containerHeight: 400,
-      virtualization: false,
-    } as never,
-  })
-  return { target, getApi: () => api, destroy: () => { unmount(app); target.remove() } }
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-/** Open the editor for row 0 of `columnId` through the public api. */
-async function openEditor(api: never, columnId: string) {
-  ;(api as never as { startEditing: (r: number, c: string) => boolean }).startEditing(0, columnId)
-  await settle()
-}
-
-describe('async editorOptions (#18)', () => {
-  it('resolves a promised option list and renders it', async () => {
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: Promise.resolve(['Paris', 'Lyon', 'Osaka']),
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    await openEditor(g.getApi(), 'city')
-    expect(document.body.textContent).toContain('Lyon')
-  })
-
-  it('fetches once no matter how many times render asks', async () => {
-    const source = vi.fn(async () => ['a', 'b'])
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: source(),
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    await openEditor(g.getApi(), 'city')
-    await settle()
-    // The promise was created once; the resolver must not re-await per render.
-    expect(source).toHaveBeenCalledTimes(1)
-  })
-
-  it('calls a per-row async source ONCE per row, not once per render', async () => {
-    // The resolver runs inside the template, so calling an async source on
-    // every render fires a real request per render - and any state the source
-    // touches gets mutated mid-render, which Svelte rejects outright. Reported
-    // from the demo as `state_unsafe_mutation`.
-    const calls: number[] = []
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: (row: Row) => {
-          calls.push(row.id)
-          return Promise.resolve(['Paris', 'Lyon'])
-        },
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    await openEditor(g.getApi(), 'city')
-    await settle()
-    const afterOpen = calls.length
-    expect(afterOpen).toBeGreaterThan(0)
-    // Force real re-render passes while the editor is open. Each one used to
-    // re-invoke the source and start another request, which in a browser
-    // becomes an endless fetch loop as every resolution re-renders.
-    const api = g.getApi() as never as {
-      setOption: (k: string, v: unknown) => void
-    }
-    for (const zebra of [true, false, true]) {
-      api.setOption('zebraRows', zebra)
-      await settle()
-    }
-    expect(calls.length).toBe(afterOpen)
-  })
-
-  it('refetches a cascade when the row it depends on changes', async () => {
-    // A cascade is a function of the row's OTHER cells. Keying the cache by row
-    // id alone made the first result permanent - changing Country left the old
-    // city list in place forever.
-    const asked: string[] = []
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: (row: Row) => {
-          asked.push(row.country)
-          return Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto'])
-        },
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    const api = g.getApi() as never as {
-      startEditing: (r: number, c: string) => boolean
-      stopEditing: (cancel?: boolean) => boolean
-      setCellValue: (r: number, c: string, v: unknown) => void
-    }
-
-    await openEditor(api as never, 'city')
-    expect(document.body.textContent).toContain('Lyon')
-    api.stopEditing(true)
-    await settle()
-
-    // Row 0 moves from FR to JP.
-    api.setCellValue(0, 'country', 'JP')
-    await settle()
-
-    await openEditor(api as never, 'city')
-    expect(asked).toContain('JP')
-    expect(document.body.textContent).toContain('Kyoto')
-    expect(document.body.textContent).not.toContain('Lyon')
-  })
-
-  it('resolves a per-row (cascading) async source', async () => {
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: (row: Row) =>
-          Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto']),
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    await openEditor(g.getApi(), 'city')
-    // Row 1 is FR - it must not be offered the JP list.
-    expect(document.body.textContent).toContain('Lyon')
-    expect(document.body.textContent).not.toContain('Kyoto')
-  })
-
-  it('falls back to an empty list when the source rejects', async () => {
-    const rejected = Promise.reject(new Error('offline'))
-    rejected.catch(() => {}) // keep the reporter clean; the grid attaches its own handler
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: rejected,
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    await openEditor(g.getApi(), 'city')
-    await settle()
-    // The editor must settle on "No options", never spin forever.
-    expect(document.body.textContent).toContain('No options')
-  })
-
-  it('exposes refreshEditorOptions on the api', async () => {
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      { field: 'city', header: 'City', width: 160 },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    const api = g.getApi() as never as { refreshEditorOptions: (c?: string) => void }
-    expect(typeof api.refreshEditorOptions).toBe('function')
-    expect(() => api.refreshEditorOptions('city')).not.toThrow()
-    expect(() => api.refreshEditorOptions()).not.toThrow()
-  })
-
-  it('leaves a plain array source synchronous', async () => {
-    const columns = [
-      { field: 'country', header: 'Country', width: 120 },
-      {
-        field: 'city',
-        header: 'City',
-        width: 160,
-        editorType: 'select',
-        editorOptions: ['Paris', 'Lyon'],
-      },
-    ]
-    const g = mountGrid(columns)
-    cleanup = g.destroy
-    await settle()
-    await openEditor(g.getApi(), 'city')
-    expect(document.body.textContent).toContain('Lyon')
-  })
-})
+/**
+ * Async `editorOptions` (#18): an option list that arrives from the server.
+ *
+ * Render paths call the option resolver synchronously and often, so an async
+ * source cannot block. The first call starts the fetch and returns an empty
+ * list; the resolved value lands in reactive state and re-renders the open
+ * editor. In-flight keys are tracked so repeated renders do not refire the
+ * request, and so the dropdown can say "Loading…" rather than "No options",
+ * which would read as "nothing to pick".
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; country: string; city: string }
+
+const data: Row[] = [
+  { id: 1, country: 'FR', city: 'Paris' },
+  { id: 2, country: 'JP', city: 'Osaka' },
+]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+// The list editors lazy-load `SvGridDropdown` with a dynamic import, so
+// microtasks alone never get it mounted - the settle has to yield the macrotask
+// queue too, and then again for the resolved options to re-render.
+const settle = async () => {
+  for (let i = 0; i < 4; i += 1) {
+    await new Promise((r) => setTimeout(r, 0))
+    await tick()
+  }
+}
+
+function mountGrid(columns: unknown[]) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: never = null as never
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features: tableFeatures({ rowSortingFeature }),
+      editable: true,
+      onApiReady: (a: never) => { api = a },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 400,
+      virtualization: false,
+    } as never,
+  })
+  return { target, getApi: () => api, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+/** Open the editor for row 0 of `columnId` through the public api. */
+async function openEditor(api: never, columnId: string) {
+  ;(api as never as { startEditing: (r: number, c: string) => boolean }).startEditing(0, columnId)
+  await settle()
+}
+
+describe('async editorOptions (#18)', () => {
+  it('resolves a promised option list and renders it', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: Promise.resolve(['Paris', 'Lyon', 'Osaka']),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    // Two lazy hops now: SvGridCellEditor, then SvGridDropdown inside it. Poll
+    // the same assertion rather than guessing how many settles that takes.
+    await vi.waitFor(() => expect(document.body.textContent).toContain('Lyon'))
+  })
+
+  it('fetches once no matter how many times render asks', async () => {
+    const source = vi.fn(async () => ['a', 'b'])
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: source(),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    // The promise was created once; the resolver must not re-await per render.
+    expect(source).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls a per-row async source ONCE per row, not once per render', async () => {
+    // The resolver runs inside the template, so calling an async source on
+    // every render fires a real request per render - and any state the source
+    // touches gets mutated mid-render, which Svelte rejects outright. Reported
+    // from the demo as `state_unsafe_mutation`.
+    const calls: number[] = []
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) => {
+          calls.push(row.id)
+          return Promise.resolve(['Paris', 'Lyon'])
+        },
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    const afterOpen = calls.length
+    expect(afterOpen).toBeGreaterThan(0)
+    // Force real re-render passes while the editor is open. Each one used to
+    // re-invoke the source and start another request, which in a browser
+    // becomes an endless fetch loop as every resolution re-renders.
+    const api = g.getApi() as never as {
+      setOption: (k: string, v: unknown) => void
+    }
+    for (const zebra of [true, false, true]) {
+      api.setOption('zebraRows', zebra)
+      await settle()
+    }
+    expect(calls.length).toBe(afterOpen)
+  })
+
+  it('refetches a cascade when the row it depends on changes', async () => {
+    // A cascade is a function of the row's OTHER cells. Keying the cache by row
+    // id alone made the first result permanent - changing Country left the old
+    // city list in place forever.
+    const asked: string[] = []
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) => {
+          asked.push(row.country)
+          return Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto'])
+        },
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    const api = g.getApi() as never as {
+      startEditing: (r: number, c: string) => boolean
+      stopEditing: (cancel?: boolean) => boolean
+      setCellValue: (r: number, c: string, v: unknown) => void
+    }
+
+    await openEditor(api as never, 'city')
+    expect(document.body.textContent).toContain('Lyon')
+    api.stopEditing(true)
+    await settle()
+
+    // Row 0 moves from FR to JP.
+    api.setCellValue(0, 'country', 'JP')
+    await settle()
+
+    await openEditor(api as never, 'city')
+    expect(asked).toContain('JP')
+    expect(document.body.textContent).toContain('Kyoto')
+    expect(document.body.textContent).not.toContain('Lyon')
+  })
+
+  it('resolves a per-row (cascading) async source', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) =>
+          Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto']),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    // Row 1 is FR - it must not be offered the JP list.
+    expect(document.body.textContent).toContain('Lyon')
+    expect(document.body.textContent).not.toContain('Kyoto')
+  })
+
+  it('falls back to an empty list when the source rejects', async () => {
+    const rejected = Promise.reject(new Error('offline'))
+    rejected.catch(() => {}) // keep the reporter clean; the grid attaches its own handler
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: rejected,
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    // The editor must settle on "No options", never spin forever.
+    expect(document.body.textContent).toContain('No options')
+  })
+
+  it('exposes refreshEditorOptions on the api', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      { field: 'city', header: 'City', width: 160 },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    const api = g.getApi() as never as { refreshEditorOptions: (c?: string) => void }
+    expect(typeof api.refreshEditorOptions).toBe('function')
+    expect(() => api.refreshEditorOptions('city')).not.toThrow()
+    expect(() => api.refreshEditorOptions()).not.toThrow()
+  })
+
+  it('leaves a plain array source synchronous', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: ['Paris', 'Lyon'],
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    expect(document.body.textContent).toContain('Lyon')
+  })
+})