@operato/input 10.29.44 → 10.29.52

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.29.44",
+  "version": "10.29.52",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -251,9 +251,9 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.29.27",
     "@operato/pickr": "^10.29.1",
-    "@operato/popup": "^10.29.44",
+    "@operato/popup": "^10.29.52",
     "@operato/styles": "^10.29.30",
-    "@operato/utils": "^10.29.44",
+    "@operato/utils": "^10.29.49",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
     "codemirror": "^6.0.1",
@@ -294,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "112d3ac6ada895fc45c2010c2555d5fd88a0f8a5"
+  "gitHead": "2e34202735031117c1f096297dee7e48d3595144"
 }

package/test/ox-input-barcode.test.ts

@@ -0,0 +1,59 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+import '../src/ox-input-barcode.js'
+import type { OxInputBarcode } from '../src/ox-input-barcode.js'
+
+/**
+ * One Enter is one `change`. Enter says the value at once; the browser would say the same value again when the
+ * field loses focus, since Enter kept it from saying it then. A host that looks something up on `change` (the band's
+ * ID Lens, ADR-0133) looked it up twice - the second time when another part of the page gave the field its focus back.
+ */
+describe('ox-input-barcode change', () => {
+  async function field() {
+    const element = await fixture<OxInputBarcode>(html`<ox-input-barcode></ox-input-barcode>`)
+    const input = element.shadowRoot!.querySelector('input') as HTMLInputElement
+    const said: string[] = []
+    element.addEventListener('change', e => said.push((e as CustomEvent).detail))
+    return { element, input, said }
+  }
+
+  const type = (input: HTMLInputElement, text: string) => {
+    input.value = text
+    input.dispatchEvent(new Event('input'))
+  }
+  const enter = (input: HTMLInputElement) => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+  /* What the browser does on blur when the value differs from the one at focus. */
+  const leave = (input: HTMLInputElement) => input.dispatchEvent(new Event('change', { bubbles: true }))
+
+  it('Enter says the value once; leaving the field afterwards says nothing more', async () => {
+    const { input, said } = await field()
+    type(input, 'X-1')
+    enter(input)
+    leave(input)
+    expect(said).to.deep.equal(['X-1'])
+  })
+
+  it('Enter again on the same value is asked again - it is a request, not a change', async () => {
+    const { input, said } = await field()
+    type(input, 'X-1')
+    enter(input)
+    enter(input)
+    expect(said).to.deep.equal(['X-1', 'X-1'])
+  })
+
+  it('text changed after Enter and then left is still said on leaving', async () => {
+    const { input, said } = await field()
+    type(input, 'X-1')
+    enter(input)
+    type(input, 'X-2')
+    leave(input)
+    expect(said).to.deep.equal(['X-1', 'X-2'])
+  })
+
+  it('text typed and left without Enter is said on leaving, as before', async () => {
+    const { input, said } = await field()
+    type(input, 'X-3')
+    leave(input)
+    expect(said).to.deep.equal(['X-3'])
+  })
+})