83 lines
3.3 KiB
TypeScript
83 lines
3.3 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\"/)
|
|
})
|
|
|
|
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')
|
|
})
|
|
})
|