@operato/data-grist 10.29.13 → 10.29.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.13",
+  "version": "10.29.17",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -70,12 +70,12 @@
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.29.1",
     "@operato/i18n": "^10.29.1",
-    "@operato/input": "^10.29.13",
+    "@operato/input": "^10.29.17",
     "@operato/list-state": "^10.29.1",
-    "@operato/p13n": "^10.29.13",
-    "@operato/popup": "^10.29.13",
+    "@operato/p13n": "^10.29.17",
+    "@operato/popup": "^10.29.17",
     "@operato/pull-to-refresh": "^10.29.1",
-    "@operato/styles": "^10.29.12",
+    "@operato/styles": "^10.29.17",
     "@operato/time-calculator": "^10.29.1",
     "@operato/utils": "^10.29.1",
     "i18next": "^24.2.1",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5840c9f4ddc262b4389236e725ec143e8a562ca9"
+  "gitHead": "ace66019af9afb5ba5dc50da8ade3a962f2c8cbb"
 }

package/test/filter-labels.test.ts

@@ -0,0 +1,68 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+import '../src/filters/filters-form.js'
+
+/*
+ * Every filter in the form says what it filters, beside its chooser. A select once carried its name only as a
+ * placeholder, which a chosen value replaces - the bar then showed 「진행 중」 with nothing saying it was the status.
+ */
+
+const columns = [
+  { type: 'string', name: 'name', header: 'name', filter: 'i_like' },
+  { type: 'select', name: 'status', header: 'status', record: { options: ['', 'OPEN', 'CLOSED'] }, filter: 'in' },
+  { type: 'select', name: 'kind', header: 'kind', record: { options: ['', 'A', 'B'] }, filter: true },
+  { type: 'date', name: 'day', header: 'day', filter: 'between' }
+]
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+describe('필터 라벨', () => {
+  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
+  })
+
+  it('every filter, a select too, sits in a label that names it', async () => {
+    const el = (await fixture(html`
+      <ox-grist
+        style="height: 300px"
+        mode="GRID"
+        .config=${{ columns, 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 named = (name: string) => root.querySelector(`[name="${name}"]`)
+    for (const name of ['name', 'status', 'kind', 'day']) {
+      const chooser = named(name)
+      expect(!!chooser, `${name} is rendered`).to.equal(true)
+      const label = chooser!.closest('label[filter-title]')
+      expect(!!label, `${name} sits in a label`).to.equal(true)
+      expect(label!.querySelector('span')?.textContent?.trim()).to.equal(name)
+    }
+  })
+})