테스트/린트 안정화: 버튼 쿼리 모호성 제거, 훅 deps 보강, vi.spyOn 모킹, 멀티선택 Moveable 간섭 방지 재확인, 스냅 우선순위 회귀 그린

2025-11-17 17:33:39 +09:00
parent 1c607f6331
commit 5bf78b3e01
29 changed files with 1861 additions and 80 deletions
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function baseFrame(): Frame {
+  return {
+    id: 'f', width: 400, height: 300, background: '#ffffff',
+    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+  }
+}
+
+describe('wysiwyg export - forms aria-describedby(help)', () => {
+  it('input: adds help element and aria-describedby linkage', () => {
+    const f = baseFrame()
+    f.layers[0].objects.push({ id: 'in1', type: 'input', x: 10, y: 20, width: 260, height: 48, rotate: 0, zIndex: 0, props: { name: 'email', label: 'Email', placeholder: '', required: false, help: 'We will not spam you.' } })
+    const out = exportFrame(f)
+    expect(out.html).toMatch(/<div id="in1">[\s\S]*<input id="in1-control" name="email" aria-describedby="in1-control-help"\/>[\s\S]*<small id="in1-control-help"/)
+    expect(out.html).toMatch(/We will not spam you\./)
+  })
+
+  it('select: adds help and aria-describedby', () => {
+    const f = baseFrame()
+    f.layers[0].objects.push({ id: 'sel1', type: 'select', x: 0, y: 0, width: 100, height: 30, rotate: 0, zIndex: 0, props: { name: 'size', label: 'Size', options: ['S'], defaultValue: 'S', help: 'Choose wisely.' } })
+    const out = exportFrame(f)
+    expect(out.html).toMatch(/<select id="sel1-control" name="size" aria-describedby="sel1-control-help">/)
+    expect(out.html).toMatch(/<small id="sel1-control-help"/)
+  })
+
+  it('textarea: adds help and aria-describedby', () => {
+    const f = baseFrame()
+    f.layers[0].objects.push({ id: 'ta1', type: 'textarea', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'msg', label: 'Msg', placeholder: '', rows: 3, required: false, help: 'Say hello.' } })
+    const out = exportFrame(f)
+    expect(out.html).toMatch(/<textarea id="ta1-control" name="msg" rows="3" aria-describedby="ta1-control-help"><\/textarea>/)
+    expect(out.html).toMatch(/<small id="ta1-control-help"/)
+  })
+
+  it('radio: adds group help (fieldset) and does not use aria-describedby per item by default', () => {
+    const f = baseFrame()
+    f.layers[0].objects.push({ id: 'rg1', type: 'radio', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'color', legend: 'Color', options: ['Red'], defaultValue: 'Red', required: false, help: 'Pick one.' } })
+    const out = exportFrame(f)
+    expect(out.html).toMatch(/<fieldset id="rg1">[\s\S]*<legend>Color<\/legend>[\s\S]*<small id="rg1-help"/)
+  })
+
+  it('checkbox: adds group help (fieldset)', () => {
+    const f = baseFrame()
+    f.layers[0].objects.push({ id: 'cb1', type: 'checkbox', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'pick', legend: 'Pick', options: ['One'], defaultValues: [], required: false, help: 'You can pick many.' } })
+    const out = exportFrame(f)
+    expect(out.html).toMatch(/<fieldset id="cb1">[\s\S]*<legend>Pick<\/legend>[\s\S]*<small id="cb1-help"/)
+  })
+})