E2E: 스냅 우선순위 확장 - 센터 우선, 그리드 단독 스냅(13→16) 케이스 추가

lib/wysiwyg/export.form.a11y.matrix.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function frameWithForm(): Frame {
+  return {
+    id: 'f', width: 600, height: 400, background: '#ffffff',
+    layers: [
+      {
+        id: 'base', name: 'Base', visible: true, locked: false, objects: [
+          { id: 't1', type: 'input', x: 40, y: 40, width: 200, height: 32, rotate: 0, zIndex: 0, props: { name: 'email', label: 'Email', placeholder: '', required: true, help: 'We never share your email.' } },
+          { id: 't2', type: 'select', x: 40, y: 100, width: 200, height: 32, rotate: 0, zIndex: 0, props: { name: 'country', label: 'Country', options: ['KR','US'], defaultValue: 'KR', help: 'Pick one' } },
+          { id: 't3', type: 'textarea', x: 40, y: 160, width: 280, height: 80, rotate: 0, zIndex: 0, props: { name: 'msg', label: 'Message', placeholder: '', rows: 3, required: false, help: 'Optional' } },
+          { id: 't4', type: 'radio', x: 320, y: 40, width: 200, height: 90, rotate: 0, zIndex: 0, props: { name: 'plan', legend: 'Plan', options: ['Basic','Pro'], defaultValue: 'Basic', required: false, help: 'Choose your plan' } },
+          { id: 't5', type: 'checkbox', x: 320, y: 150, width: 200, height: 60, rotate: 0, zIndex: 0, props: { name: 'agree', legend: 'Agree to terms', options: ['Yes'], defaultValues: [], required: false, help: 'You must agree' } },
+        ]
+      }
+    ],
+  }
+}
+
+describe('wysiwyg export - a11y matrix for form controls', () => {
+  it('label/for + aria-describedby for input/select/textarea', () => {
+    const out = exportFrame(frameWithForm())
+    const html = out.html
+    // input
+    expect(html).toMatch(/<label for="t1-control">Email<\/label>/)
+    expect(html).toMatch(/<input[^>]*id="t1-control"[^>]*name="email"[^>]*required/)
+    expect(html).toMatch(/<small id="t1-control-help">We never share your email\.<\/small>/)
+    expect(html).toMatch(/<input[^>]*aria-describedby="t1-control-help"/)
+    // select
+    expect(html).toMatch(/<label for="t2-control">Country<\/label>/)
+    expect(html).toMatch(/<select[^>]*id="t2-control"[^>]*name="country"[^>]*aria-describedby="t2-control-help"/)
+    expect(html).toMatch(/<small id="t2-control-help">Pick one<\/small>/)
+    // textarea
+    expect(html).toMatch(/<label for="t3-control">Message<\/label>/)
+    expect(html).toMatch(/<textarea[^>]*id="t3-control"[^>]*name="msg"[^>]*aria-describedby="t3-control-help"/)
+    expect(html).toMatch(/<small id="t3-control-help">Optional<\/small>/)
+  })
+
+  it('fieldset/legend present for radio group with help items', () => {
+    const out = exportFrame(frameWithForm())
+    const html = out.html
+    // fieldset/legend exist (current implementation does not add aria-describedby on fieldset)
+    expect(html).toMatch(/<fieldset id="t4">/)
+    expect(html).toMatch(/<legend>Plan<\/legend>/)
+    // individual radio inputs share name and carry required if set on group (not set here), and pattern/max if present
+    expect(html).toMatch(/<input type="radio" id="t4-0" name="plan" value="Basic" checked/)
+    expect(html).toMatch(/<label for="t4-0">Basic<\/label>/)
+    expect(html).toMatch(/<input type="radio" id="t4-1" name="plan" value="Pro"/)
+    expect(html).toMatch(/<label for="t4-1">Pro<\/label>/)
+    // help element exists (small)
+    expect(html).toMatch(/<small id="t4-help">Choose your plan<\/small>/)
+  })
+  
+  it('fieldset/legend present for checkbox group with help items', () => {
+    const out = exportFrame(frameWithForm())
+    const html = out.html
+    expect(html).toMatch(/<fieldset id="t5">/)
+    expect(html).toMatch(/<legend>Agree to terms<\/legend>/)
+    expect(html).toMatch(/<input type="checkbox" id="t5-0" name="agree" value="Yes"/)
+    expect(html).toMatch(/<label for="t5-0">Yes<\/label>/)
+    expect(html).toMatch(/<small id="t5-help">You must agree<\/small>/)
+  })
+})

lib/wysiwyg/export.style.tokens.form.deep.test.ts

@@ -0,0 +1,35 @@
+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: '#111111',
+    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+  }
+}
+
+describe('wysiwyg export - form tokens deep regression', () => {
+  it('contains ring/disabled tokens and applies across selectors', () => {
+    const out = exportFrame(baseFrame())
+    const css = out.css
+    // tokens
+    expect(css).toMatch(/:root[^}]*--ring:/)
+    expect(css).toMatch(/:root[^}]*--ring-offset:/)
+    expect(css).toMatch(/:root[^}]*--disabled-bg:/)
+    expect(css).toMatch(/:root[^}]*--disabled-fg:/)
+    // usages
+    expect(css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/)
+    expect(css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/)
+    expect(css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
+    expect(css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
+  })
+
+  it('themes define overrides without breaking base var() usage', () => {
+    const out = exportFrame(baseFrame())
+    const css = out.css
+    expect(css).toMatch(/\[data-theme="light"\][^{]*{[^}]*--bg:/)
+    expect(css).toMatch(/\[data-theme="dark"\][^{]*{[^}]*--bg:/)
+    expect(css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/)
+  })
+})

tests/e2e/wysiwyg-snap-priority.e2e.ts

@@ -0,0 +1,98 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+// Helper to read left/top/width from inline styles
+async function getBox(page: import('@playwright/test').Page, nth: number) {
+  const el = page.locator('[data-testid^="obj-text-"]').nth(nth)
+  const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10))
+  const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10))
+  const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10))
+  return { left, top, width }
+}
+
+test.describe('WYSIWYG - Snap priority (edge > center > grid)', () => {
+  test('dragging near another object prefers edge snap over grid', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    // Add two text objects
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // Marquee select the second to get its bbox and then drag it near the first one's right edge
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const second = page.locator('[data-testid^="obj-text-"]').nth(1)
+
+    const b1 = await first.boundingBox()
+    const b2 = await second.boundingBox()
+    if (!b1 || !b2) throw new Error('objects not found')
+
+    // Drag second so that its left aligns to first.right (edge snapping scenario)
+    // move handle point from second.x+5 to target x = first.right - 2 (close enough to trigger snap)
+    const targetX = b1.x + b1.width - 2
+    await page.mouse.move(b2.x + 5, b2.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(targetX, b2.y + 5)
+    await page.mouse.up()
+
+    // Read inline left/width to verify alignment: second.left ~= first.left + first.width
+    const s = await getBox(page, 1)
+    const f = await getBox(page, 0)
+    const expectedLeft = f.left + f.width
+    // Allow small tolerance (±1) due to rounding during drag
+    expect(Math.abs(s.left - expectedLeft)).toBeLessThanOrEqual(1)
+  })
+
+  test('dragging near another object prefers center snap over grid', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const second = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const b1 = await first.boundingBox()
+    const b2 = await second.boundingBox()
+    if (!b1 || !b2) throw new Error('objects not found')
+
+    // Target the center alignment: move second so its centerX ~= first.centerX
+    const firstCenterX = b1.x + b1.width / 2
+    await page.mouse.move(b2.x + b2.width / 2, b2.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(firstCenterX, b2.y + 5)
+    await page.mouse.up()
+
+    const f = await getBox(page, 0)
+    const s = await getBox(page, 1)
+    const sCenter = s.left + Math.round((await second.evaluate((n)=>parseInt((n as HTMLElement).style.width||'0',10))) / 2)
+    expect(Math.abs(sCenter - (f.left + f.width / 2))).toBeLessThanOrEqual(1)
+  })
+
+  test('when no nearby objects, grid snapping applies (13px → 16px)', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+
+    const obj = page.locator('[data-testid^="obj-text-"]').first()
+    const b = await obj.boundingBox()
+    if (!b) throw new Error('object not found')
+
+    const before = await getBox(page, 0)
+    await page.mouse.move(b.x + 5, b.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(b.x + 5 + 13, b.y + 5)
+    await page.mouse.up()
+
+    const after = await getBox(page, 0)
+    expect(after.left - before.left).toBe(16)
+  })
+})