@operato/form 10.29.40 → 10.29.43

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/form",
   "description": "WebApplication form supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "10.29.40",
+  "version": "10.29.43",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -59,12 +59,12 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^10.29.39",
-    "@operato/input": "^10.29.40",
-    "@operato/p13n": "^10.29.40",
+    "@operato/graphql": "^10.29.43",
+    "@operato/input": "^10.29.43",
+    "@operato/p13n": "^10.29.43",
     "@operato/styles": "^10.29.30",
     "@operato/time-calculator": "^10.29.1",
-    "@operato/utils": "^10.29.39",
+    "@operato/utils": "^10.29.43",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "54a5aa4812524b56cd5a1b67e76d9fad28abffc8"
+  "gitHead": "ccc06fed313fcc20a076a1cf7bc586fdacaba594"
 }

package/test/filters-form-address.test.ts

@@ -0,0 +1,48 @@
+import { expect, fixture, waitUntil } from '@open-wc/testing'
+import { html } from 'lit'
+import { decodeListQuery } from '@operato/utils/list-query.js'
+import '../src/filters/ox-filters-form-base.js'
+import type { OxFiltersFormBase } from '../src/filters/ox-filters-form-base.js'
+
+describe('the shape of what a filters form sends', () => {
+  it('a list operator with one choice sends a one-element list, like the grid form', async () => {
+    const form = await fixture<OxFiltersFormBase>(html`
+      <ox-filters-form-base .filters=${[{ name: 'kind', type: 'text', operator: 'in', label: 'kind' }]}></ox-filters-form-base>
+    `)
+    await form.updateComplete
+    const input = form.renderRoot.querySelector('input[name=kind]') as HTMLInputElement
+    input.value = 'a'
+    expect(await form.getQueryFilters()).to.deep.equal([{ name: 'kind', operator: 'in', value: ['a'] }])
+  })
+})
+
+describe('an address-bound filters form', () => {
+  afterEach(() => history.replaceState(history.state, '', location.pathname))
+
+  it('writes the conditions its fields hold and tells the page once they are committed', async () => {
+    const told: { filters: unknown; from: string }[] = []
+    const holder = await fixture<HTMLElement>(html`
+      <div @filters-change=${(e: CustomEvent) => told.push(e.detail)}>
+        <ox-filters-form-base
+          url-params-sensitive
+          .filters=${[{ name: 'code', type: 'text', operator: 'eq', label: 'code' }]}
+        ></ox-filters-form-base>
+      </div>
+    `)
+    const form = holder.querySelector('ox-filters-form-base') as OxFiltersFormBase
+    await form.updateComplete
+    const input = form.renderRoot.querySelector('input[name=code]') as HTMLInputElement
+    input.value = 'A-1'
+    input.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
+
+    await waitUntil(() => new URLSearchParams(location.search).get('filters') !== null, 'address not written')
+    expect(decodeListQuery(location.search).filters).to.deep.equal([
+      { name: 'code', operator: 'eq', value: 'A-1' }
+    ])
+    await waitUntil(() => told.length > 0, 'page never told')
+    expect(told[told.length - 1]).to.deep.equal({
+      filters: [{ name: 'code', operator: 'eq', value: 'A-1' }],
+      from: 'url-parameter'
+    })
+  })
+})