feat: WYSIWYG 빌더 1차 기능 완성 및 테스트 추가

2025-11-17 10:04:01 +09:00
parent 9ced249015
commit 1c607f6331
13 changed files with 660 additions and 28 deletions
@@ -39,4 +39,44 @@ describe('wysiwyg export (absolute positioned HTML/CSS + scale wrapper)', () =>
    expect(out.css).toMatch(/\.frame-scale\s*{[^}]*transform-origin:0 0/)
    expect(out.html).toMatch(/class=\"frame-scale\"/)
  })
+
+  it('wraps exported markup with full HTML document and references stylesheet/script', () => {
+    const frame = makeFrame()
+    const out = exportFrame(frame)
+    expect(out.html.startsWith('<!doctype html>')).toBe(true)
+    expect(out.html).toMatch(/<link rel=\"stylesheet\" href=\"styles\.css\"/)
+    expect(out.html).toMatch(/<script src=\"app\.js\"><\/script>/)
+  })
+
+  it('exports button objects as anchors with href/label semantics', () => {
+    const frame: Frame = {
+      ...makeFrame(),
+      layers: [
+        {
+          id: 'buttons',
+          name: 'Buttons',
+          visible: true,
+          locked: false,
+          objects: [
+            { id: 'cta', type: 'button', x: 10, y: 20, width: 120, height: 36, rotate: 0, zIndex: 0, props: { label: 'Start', href: 'https://acme.dev', color: '#fff', background: '#111' } },
+          ],
+        },
+      ],
+    }
+    const out = exportFrame(frame)
+    expect(out.html).toMatch(/<a id=\"cta\" href=\"https:\/\/acme\.dev\">Start<\/a>/)
+    expect(out.css).toMatch(/#cta\s*{[^}]*width:120px;[^}]*height:36px/)
+  })
+
+  it('skips invisible layers when exporting html/css', () => {
+    const frame: Frame = {
+      ...makeFrame(),
+      layers: [
+        { id: 'hidden', name: 'Hidden', visible: false, locked: false, objects: [makeFrame().layers[0].objects[0]] },
+      ],
+    }
+    const out = exportFrame(frame)
+    expect(out.html).not.toContain('id="o1"')
+    expect(out.css).not.toContain('#o1')
+  })
 })