@operato/data-grist 10.29.30 → 10.29.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.30",
+  "version": "10.29.36",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -74,14 +74,14 @@
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.29.1",
     "@operato/i18n": "^10.29.27",
-    "@operato/input": "^10.29.30",
-    "@operato/list-state": "^10.29.27",
-    "@operato/p13n": "^10.29.30",
-    "@operato/popup": "^10.29.30",
+    "@operato/input": "^10.29.36",
+    "@operato/list-state": "^10.29.36",
+    "@operato/p13n": "^10.29.36",
+    "@operato/popup": "^10.29.36",
     "@operato/pull-to-refresh": "^10.29.23",
     "@operato/styles": "^10.29.30",
     "@operato/time-calculator": "^10.29.1",
-    "@operato/utils": "^10.29.23",
+    "@operato/utils": "^10.29.36",
     "i18next": "^24.2.1",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
@@ -120,5 +120,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "44682a97746b11fb380a3a5ce7718f3428e4943c"
+  "gitHead": "90c8bc8593e5d68745aeddd45752fab83c50cc16"
 }

package/test/filter-labels.test.ts

@@ -65,4 +65,35 @@ describe('필터 라벨', () => {
       expect(label!.querySelector('span')?.textContent?.trim()).to.equal(name)
     }
   })
+
+  /*
+   * A header may draw more than its words - a help `?` beside them. The filter is not the header: it names the column
+   * by its words, or a press on that `?` would also tick the checkbox around it.
+   */
+  it('names a filter by the header words when the header draws more', async () => {
+    const drawn = [
+      { type: 'checkbox', name: 'flag', header: { text: 'flag', renderer: () => html`flag <button class="extra">?</button>` }, filter: true },
+      { type: 'select', name: 'kind', header: { text: 'kind', renderer: () => html`kind <button class="extra">?</button>` }, record: { options: ['', 'A'] }, filter: true }
+    ]
+    const el = (await fixture(html`
+      <ox-grist
+        style="height: 300px"
+        mode="GRID"
+        .config=${{ columns: drawn, pagination: { pages: [20] } }}
+        .fetchHandler=${async () => ({ page: 1, limit: 20, total: 0, records: [] })}
+      >
+        <div slot="headroom"><ox-filters-form without-search></ox-filters-form></div>
+      </ox-grist>
+    `)) as any
+    await settle()
+
+    const form = el.querySelector('ox-filters-form') as any
+    await form.updateComplete
+    const root = form.renderRoot as ShadowRoot
+    const deep = (node: ParentNode): boolean =>
+      Array.from(node.querySelectorAll('*')).some(one => one.matches('button.extra') || (!!one.shadowRoot && deep(one.shadowRoot)))
+    expect(deep(root), 'the header drawing is not in the filter form').to.equal(false)
+    expect(root.textContent).to.contain('flag')
+    expect(root.textContent).to.contain('kind')
+  })
 })

package/test/latest-fetch-wins.test.ts

@@ -0,0 +1,114 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+
+/**
+ * The last fetch asked is the one the grid shows.
+ *
+ * A ledger opened from a dashboard card asked twice in a row - once with no conditions as it read its address,
+ * then with the month the card named. The grid kept whichever answer arrived first - the read with no conditions -
+ * and showed every line under a headroom that said October (2026-10-16).
+ */
+
+const config = {
+  columns: [
+    { type: 'string', name: 'id', hidden: true },
+    { type: 'string', name: 'name', header: 'name' }
+  ],
+  pagination: { pages: [20] }
+}
+
+const answer = (total: number) => ({
+  total,
+  records: Array.from({ length: Math.min(total, 20) }, (_, i) => ({ id: `${total}-${i}`, name: `row ${i}` }))
+})
+
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+type Grist = HTMLElement & { fetch(): Promise<void>; data: { total: number }; updateComplete: Promise<unknown> }
+
+describe('ox-grist with two fetches out at once', () => {
+  /* Resizing inside a fixture trips Chrome's benign ResizeObserver loop error; it says nothing about fetching. */
+  const ignoreResizeLoop = (e: ErrorEvent) => {
+    if (String(e.message).includes('ResizeObserver loop')) {
+      e.stopImmediatePropagation()
+      e.preventDefault()
+    }
+  }
+  let previousOnError: OnErrorEventHandler = null
+  before(() => {
+    window.addEventListener('error', ignoreResizeLoop, true)
+    previousOnError = window.onerror
+    window.onerror = (message, ...rest) =>
+      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)
+  })
+  after(() => {
+    window.removeEventListener('error', ignoreResizeLoop, true)
+    window.onerror = previousOnError
+  })
+
+  /*
+   * The answer depends on the conditions, as on the ledger: the read with none, asked first, comes back first; the
+   * month's comes back after it. The grid fetches once by itself when attached; the test starts after that settled.
+   */
+  const MONTH = [{ name: 'month', operator: 'eq', value: 10 }]
+  const byConditions = (failUnfiltered = false) => async ({ filters }: { filters?: unknown[] }) => {
+    if (!filters?.length) {
+      await wait(20)
+      if (failUnfiltered) throw new Error('the unfiltered read failed')
+      return answer(2908)
+    }
+    await wait(300)
+    return answer(4)
+  }
+
+  async function attached(handler: any) {
+    const el = (await fixture(html`<ox-grist style="height: 300px" .config=${config} .fetchHandler=${handler}></ox-grist>`)) as Grist & {
+      filters: unknown[]
+      renderRoot: ShadowRoot
+    }
+    await wait(400)
+    return el
+  }
+
+  it('shows the answer to the later fetch, though the earlier one came back first', async () => {
+    const el = await attached(byConditions())
+
+    el.filters = []
+    const unfiltered = el.fetch()
+    el.filters = MONTH
+    const month = el.fetch()
+    await Promise.all([unfiltered, month])
+    await el.updateComplete
+
+    expect(el.data.total).to.equal(4)
+  })
+
+  it('does not report the failure of a fetch a later one replaced', async () => {
+    const el = await attached(byConditions(true))
+
+    el.filters = []
+    const unfiltered = el.fetch().then(
+      () => 'kept quiet',
+      () => 'reported'
+    )
+    el.filters = MONTH
+    await el.fetch()
+
+    expect(await unfiltered).to.equal('kept quiet')
+    await el.updateComplete
+    expect(el.data.total).to.equal(4)
+    /* The grid draws "could not load" from fetchFailed - a replaced read must not make it say so. */
+    const body = el.renderRoot.querySelector('#grist') as (HTMLElement & { renderRoot: ShadowRoot }) | null
+    expect(!!body?.renderRoot.querySelector('ox-empty-note')).to.equal(false)
+  })
+
+  it('still shows a single fetch as before', async () => {
+    const el = (await fixture(html`<ox-grist style="height: 300px" .config=${config} .fetchHandler=${async () => answer(7)}></ox-grist>`)) as Grist
+    await el.fetch()
+    await el.updateComplete
+
+    expect(el.data.total).to.equal(7)
+  })
+})