@operato/input 10.0.0 → 10.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.0.0",
+  "version": "10.2.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -245,8 +245,8 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.0.0",
     "@operato/pickr": "^10.0.0",
-    "@operato/popup": "^10.0.0",
-    "@operato/styles": "^10.0.0",
+    "@operato/popup": "^10.2.0",
+    "@operato/styles": "^10.2.0",
     "@operato/utils": "^10.0.0",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
@@ -288,5 +288,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6731331f3b751ac2d60218645a2b488c56f7d37d"
+  "gitHead": "76b17317691c6dbc0e2804812c108241bf11b1c0"
 }

package/test/ox-form-field.test.ts

@@ -0,0 +1,159 @@
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { fixture, expect } from '@open-wc/testing'
+
+import { OxFormField } from '../src/ox-form-field.js'
+
+/**
+ * OxFormField 계약 테스트.
+ *
+ * 이 기반 클래스는 51개 입력 컴포넌트가 상속하므로, 계약이 깨지면 전 패키지에 파급된다.
+ * 검증 대상:
+ *   - 상태 속성의 attribute reflect (InputStyles 의 :host([...]) 선택자가 동작하기 위한 전제)
+ *   - required 기반 검증(checkValidity / invalid / invalid 이벤트)
+ *   - isEmpty 의 경계값(0·false 는 유효한 값)
+ *   - 폼 데이터 수집(formdata) 과 disabled 제외 규칙
+ */
+
+/** 테스트용 최소 구현체 — 기반 계약만 노출한다. */
+@customElement('test-form-field')
+class TestFormField extends OxFormField<any> {
+  render() {
+    return html`<span>field</span>`
+  }
+
+  /* 테스트에서 보호된 멤버를 확인하기 위한 창구 */
+  public callIsEmpty(): boolean {
+    return this.isEmpty()
+  }
+}
+
+async function makeField(template = html`<test-form-field></test-form-field>`) {
+  return (await fixture(template)) as TestFormField
+}
+
+describe('OxFormField — 상태 계약', () => {
+  it('상태 속성이 attribute 로 reflect 된다 (프로퍼티로 설정해도 :host([...]) 가 동작)', async () => {
+    const el = await makeField()
+
+    el.disabled = true
+    el.readonly = true
+    el.required = true
+    el.invalid = true
+    await el.updateComplete
+
+    expect(el.hasAttribute('disabled')).to.be.true
+    expect(el.hasAttribute('readonly')).to.be.true
+    expect(el.hasAttribute('required')).to.be.true
+    expect(el.hasAttribute('invalid')).to.be.true
+  })
+
+  it('상태를 해제하면 attribute 도 제거된다', async () => {
+    const el = await makeField(html`<test-form-field disabled readonly></test-form-field>`)
+
+    expect(el.disabled).to.be.true
+    expect(el.readonly).to.be.true
+
+    el.disabled = false
+    el.readonly = false
+    await el.updateComplete
+
+    expect(el.hasAttribute('disabled')).to.be.false
+    expect(el.hasAttribute('readonly')).to.be.false
+  })
+})
+
+describe('OxFormField — isEmpty 경계값', () => {
+  it('nullish / 빈 문자열 / 공백 / 빈 배열은 비어 있다', async () => {
+    const el = await makeField()
+
+    for (const v of [undefined, null, '', '   ', [] as any[]]) {
+      el.value = v
+      expect(el.callIsEmpty(), `value=${JSON.stringify(v)}`).to.be.true
+    }
+  })
+
+  it('숫자 0 과 false 는 유효한 값이므로 비어 있지 않다', async () => {
+    const el = await makeField()
+
+    el.value = 0
+    expect(el.callIsEmpty(), 'value=0').to.be.false
+
+    el.value = false
+    expect(el.callIsEmpty(), 'value=false').to.be.false
+  })
+})
+
+describe('OxFormField — 검증', () => {
+  it('required 가 아니면 값이 비어도 유효하다', async () => {
+    const el = await makeField()
+
+    expect(el.checkValidity()).to.be.true
+    expect(el.invalid).to.be.false
+  })
+
+  it('required 인데 값이 비면 invalid 가 되고 invalid 이벤트가 올라온다', async () => {
+    const el = await makeField(html`<test-form-field required name="f"></test-form-field>`)
+
+    let detail: any = null
+    el.addEventListener('invalid', (e: Event) => {
+      detail = (e as CustomEvent).detail
+    })
+
+    expect(el.checkValidity()).to.be.false
+    expect(el.invalid).to.be.true
+    expect(detail).to.deep.equal({ field: 'f' })
+  })
+
+  it('값을 채우면 다시 유효해지고 invalid 가 해제된다', async () => {
+    const el = await makeField(html`<test-form-field required></test-form-field>`)
+
+    expect(el.checkValidity()).to.be.false
+
+    el.value = 'filled'
+    expect(el.checkValidity()).to.be.true
+    expect(el.invalid).to.be.false
+  })
+})
+
+describe('OxFormField — 폼 데이터 수집', () => {
+  async function collect(fieldTemplate: unknown) {
+    const form = (await fixture(html`<form>${fieldTemplate}</form>`)) as HTMLFormElement
+    return new FormData(form)
+  }
+
+  it('name 이 있으면 값이 폼 데이터에 담긴다', async () => {
+    const data = await collect(html`<test-form-field name="a" .value=${'1'}></test-form-field>`)
+
+    expect(data.get('a')).to.equal('1')
+  })
+
+  it('배열 값은 여러 항목으로 담긴다', async () => {
+    const data = await collect(html`<test-form-field name="b" .value=${['x', 'y']}></test-form-field>`)
+
+    expect(data.getAll('b')).to.deep.equal(['x', 'y'])
+  })
+
+  it('disabled 는 폼 데이터에 포함되지 않는다 (HTML 표준 거동)', async () => {
+    const data = await collect(html`<test-form-field name="c" disabled .value=${'skip'}></test-form-field>`)
+
+    expect(data.has('c')).to.be.false
+  })
+
+  it('readonly 는 수정만 막는 상태이므로 폼 데이터에 포함된다', async () => {
+    const data = await collect(html`<test-form-field name="d" readonly .value=${'keep'}></test-form-field>`)
+
+    expect(data.get('d')).to.equal('keep')
+  })
+
+  it('name 이 없으면 수집되지 않는다', async () => {
+    const form = (await fixture(
+      html`<form><test-form-field .value=${'anon'}></test-form-field></form>`
+    )) as HTMLFormElement
+    const data = new FormData(form)
+
+    /* name 이 없으면 어떤 키로도 담기지 않는다 */
+    expect(data.has('')).to.be.false
+    expect(data.get('undefined')).to.be.null
+  })
+})