jaybe
98d33fc0d0
- LayersPanel: 순서 변경/잠금/숨김 토글 - PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집 - exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력 - 테스트 추가 및 전체 그린 유지
43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { exportFrame } from '@/lib/wysiwyg/export'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function makeFrame(): Frame {
|
|
return {
|
|
id: 'f1', width: 320, height: 200, background: '#ffffff',
|
|
layers: [
|
|
{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [
|
|
{ id: 'o1', type: 'image', x: 16, y: 24, width: 80, height: 60, rotate: 15, zIndex: 0, props: { src: 'https://example.com/a.jpg', alt: 'A' } },
|
|
]},
|
|
{ id: 'l2', name: 'Text', visible: true, locked: false, objects: [
|
|
{ id: 't1', type: 'text', x: 24, y: 120, width: 200, height: 32, rotate: 0, zIndex: 1, props: { text: 'Hello', fontSize: 18, color: '#111111' } },
|
|
]},
|
|
],
|
|
}
|
|
}
|
|
|
|
describe('wysiwyg export (absolute positioned HTML/CSS + scale wrapper)', () => {
|
|
it('renders wrapper with fixed width/height and absolutely positioned children', () => {
|
|
const frame = makeFrame()
|
|
const out = exportFrame(frame)
|
|
expect(out.html).toMatch(/<div class=\"frame\"/)
|
|
expect(out.css).toMatch(/\.frame\s*{[^}]*position:relative/)
|
|
expect(out.css).toMatch(/width:320px/)
|
|
expect(out.css).toMatch(/height:200px/)
|
|
// image object
|
|
expect(out.html).toMatch(/<img[^>]*src=\"https:\/\/example.com\/a.jpg\"/)
|
|
expect(out.css).toMatch(/#o1\s*{[^}]*left:16px;[^}]*top:24px;[^}]*width:80px;[^}]*height:60px;[^}]*transform:rotate\(15deg\)/)
|
|
// text object
|
|
expect(out.html).toMatch(/<p id=\"t1\"/)
|
|
expect(out.html).toMatch(/Hello/)
|
|
expect(out.css).toMatch(/#t1\s*{[^}]*left:24px;[^}]*top:120px;[^}]*width:200px;[^}]*height:32px/)
|
|
})
|
|
|
|
it('includes scale wrapper token for responsive fit', () => {
|
|
const frame = makeFrame()
|
|
const out = exportFrame(frame)
|
|
expect(out.css).toMatch(/\.frame-scale\s*{[^}]*transform-origin:0 0/)
|
|
expect(out.html).toMatch(/class=\"frame-scale\"/)
|
|
})
|
|
})
|