930cf39216
- Move top-level engine and e2e prefixed test files under domain folders - Update fixture path helpers after moving render and pen tests - Add lint coverage to prevent new top-level prefixed test files - Refresh testing docs for the new fig and layout paths
407 lines
11 KiB
TypeScript
407 lines
11 KiB
TypeScript
import { describe, expect, test } from 'bun:test'
|
||
|
||
import { SceneGraph, sceneNodeToJSX, selectionToJSX } from '@open-pencil/core'
|
||
|
||
function makeGraph() {
|
||
const graph = new SceneGraph()
|
||
graph.createNode('CANVAS', graph.rootId, { name: 'Page 1' })
|
||
return graph
|
||
}
|
||
|
||
function pageId(graph: SceneGraph) {
|
||
return graph.getPages()[0].id
|
||
}
|
||
|
||
describe('sceneNodeToJSX', () => {
|
||
test('basic rectangle', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
name: 'Box',
|
||
width: 100,
|
||
height: 50
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toBe('<Rectangle name="Box" w={100} h={50} />')
|
||
})
|
||
|
||
test('rectangle with fill and rounded corners', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
name: 'Card',
|
||
width: 320,
|
||
height: 200,
|
||
fills: [{ type: 'SOLID', color: { r: 1, g: 1, b: 1, a: 1 }, opacity: 1, visible: true }],
|
||
cornerRadius: 16
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('w={320}')
|
||
expect(jsx).toContain('h={200}')
|
||
expect(jsx).toContain('bg="#FFFFFF"')
|
||
expect(jsx).toContain('rounded={16}')
|
||
expect(jsx).toContain('<Rectangle')
|
||
expect(jsx).toContain('/>')
|
||
})
|
||
|
||
test('text node', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('TEXT', pageId(graph), {
|
||
name: 'Title',
|
||
width: 200,
|
||
height: 24,
|
||
text: 'Hello World',
|
||
fontSize: 18,
|
||
fontWeight: 700,
|
||
fills: [{ type: 'SOLID', color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1, visible: true }]
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('<Text')
|
||
expect(jsx).toContain('size={18}')
|
||
expect(jsx).toContain('weight="bold"')
|
||
expect(jsx).toContain('color="#000000"')
|
||
expect(jsx).toContain('>Hello World</Text>')
|
||
})
|
||
|
||
test('rtl text node', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('TEXT', pageId(graph), {
|
||
name: 'Arabic Title',
|
||
width: 200,
|
||
height: 24,
|
||
text: 'مرحبا',
|
||
textDirection: 'RTL'
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('dir="rtl"')
|
||
})
|
||
|
||
test('frame with auto-layout', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
name: 'Row',
|
||
width: 400,
|
||
height: 100,
|
||
layoutMode: 'HORIZONTAL',
|
||
itemSpacing: 16,
|
||
paddingTop: 12,
|
||
paddingRight: 12,
|
||
paddingBottom: 12,
|
||
paddingLeft: 12,
|
||
primaryAxisSizing: 'FIXED',
|
||
counterAxisSizing: 'HUG'
|
||
})
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('flex="row"')
|
||
expect(jsx).toContain('gap={16}')
|
||
expect(jsx).toContain('p={12}')
|
||
expect(jsx).toContain('w={400}')
|
||
})
|
||
|
||
test('frame with rtl auto-layout', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
name: 'Row RTL',
|
||
width: 400,
|
||
height: 100,
|
||
layoutMode: 'HORIZONTAL',
|
||
layoutDirection: 'RTL'
|
||
})
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('dir="rtl"')
|
||
})
|
||
|
||
test('frame with children', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
name: 'Card',
|
||
width: 320,
|
||
height: 200,
|
||
layoutMode: 'VERTICAL',
|
||
itemSpacing: 8,
|
||
primaryAxisSizing: 'HUG',
|
||
counterAxisSizing: 'FIXED'
|
||
})
|
||
graph.createNode('RECTANGLE', frame.id, {
|
||
name: 'Image',
|
||
width: 320,
|
||
height: 120
|
||
})
|
||
graph.createNode('TEXT', frame.id, {
|
||
name: 'Title',
|
||
width: 200,
|
||
height: 20,
|
||
text: 'Card Title',
|
||
fontSize: 16,
|
||
fontWeight: 700,
|
||
fills: [{ type: 'SOLID', color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1, visible: true }]
|
||
})
|
||
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('<Frame')
|
||
expect(jsx).toContain('flex="col"')
|
||
expect(jsx).toContain('gap={8}')
|
||
expect(jsx).toContain(' <Rectangle')
|
||
expect(jsx).toContain(' <Text')
|
||
expect(jsx).toContain('>Card Title</Text>')
|
||
expect(jsx).toContain('</Frame>')
|
||
})
|
||
|
||
test('asymmetric padding', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
name: 'Box',
|
||
width: 100,
|
||
height: 100,
|
||
layoutMode: 'HORIZONTAL',
|
||
paddingTop: 8,
|
||
paddingRight: 16,
|
||
paddingBottom: 8,
|
||
paddingLeft: 16,
|
||
primaryAxisSizing: 'FIXED',
|
||
counterAxisSizing: 'FIXED'
|
||
})
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('py={8}')
|
||
expect(jsx).toContain('px={16}')
|
||
expect(jsx).not.toContain('pt=')
|
||
expect(jsx).not.toContain('pb=')
|
||
})
|
||
|
||
test('independent corners', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
name: 'Pill',
|
||
width: 100,
|
||
height: 40,
|
||
cornerRadius: 20,
|
||
independentCorners: true,
|
||
topLeftRadius: 20,
|
||
topRightRadius: 0,
|
||
bottomRightRadius: 0,
|
||
bottomLeftRadius: 20
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('roundedTL={20}')
|
||
expect(jsx).toContain('roundedBL={20}')
|
||
expect(jsx).not.toContain('roundedTR=')
|
||
expect(jsx).not.toContain('roundedBR=')
|
||
})
|
||
|
||
test('opacity and rotation', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
width: 50,
|
||
height: 50,
|
||
opacity: 0.5,
|
||
rotation: 45
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('opacity={0.5}')
|
||
expect(jsx).toContain('rotate={45}')
|
||
})
|
||
|
||
test('stroke', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
width: 100,
|
||
height: 100,
|
||
strokes: [
|
||
{
|
||
color: { r: 1, g: 0, b: 0, a: 1 },
|
||
weight: 2,
|
||
opacity: 1,
|
||
visible: true,
|
||
align: 'INSIDE' as const
|
||
}
|
||
]
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('stroke="#FF0000"')
|
||
expect(jsx).toContain('strokeWidth={2}')
|
||
})
|
||
|
||
test('hidden children are excluded', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
name: 'Parent',
|
||
width: 100,
|
||
height: 100
|
||
})
|
||
graph.createNode('RECTANGLE', frame.id, {
|
||
name: 'Visible',
|
||
width: 50,
|
||
height: 50
|
||
})
|
||
graph.createNode('RECTANGLE', frame.id, {
|
||
name: 'Hidden',
|
||
width: 50,
|
||
height: 50,
|
||
visible: false
|
||
})
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('Visible')
|
||
expect(jsx).not.toContain('Hidden')
|
||
})
|
||
|
||
test('empty text node renders self-closing', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('TEXT', pageId(graph), {
|
||
name: 'Empty',
|
||
width: 100,
|
||
height: 20,
|
||
text: ''
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('/>')
|
||
expect(jsx).not.toContain('</Text>')
|
||
})
|
||
|
||
test('omits default values', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
width: 100,
|
||
height: 100,
|
||
opacity: 1,
|
||
rotation: 0,
|
||
cornerRadius: 0
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).not.toContain('opacity')
|
||
expect(jsx).not.toContain('rotate')
|
||
expect(jsx).not.toContain('rounded')
|
||
})
|
||
|
||
test('effects: shadow and blur', () => {
|
||
const graph = makeGraph()
|
||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||
width: 100,
|
||
height: 100,
|
||
effects: [
|
||
{
|
||
type: 'DROP_SHADOW',
|
||
color: { r: 0, g: 0, b: 0, a: 0.25 },
|
||
offset: { x: 0, y: 4 },
|
||
radius: 8,
|
||
spread: 0,
|
||
visible: true
|
||
},
|
||
{
|
||
type: 'LAYER_BLUR',
|
||
color: { r: 0, g: 0, b: 0, a: 0 },
|
||
offset: { x: 0, y: 0 },
|
||
radius: 4,
|
||
spread: 0,
|
||
visible: true
|
||
}
|
||
]
|
||
})
|
||
const jsx = sceneNodeToJSX(node.id, graph)
|
||
expect(jsx).toContain('shadow="0 4 8')
|
||
expect(jsx).toContain('blur={4}')
|
||
})
|
||
|
||
test('grid layout frame', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
name: 'Grid',
|
||
width: 400,
|
||
height: 300,
|
||
layoutMode: 'GRID',
|
||
gridTemplateColumns: [
|
||
{ sizing: 'FR', value: 1 },
|
||
{ sizing: 'FR', value: 1 },
|
||
{ sizing: 'FR', value: 1 }
|
||
],
|
||
gridTemplateRows: [
|
||
{ sizing: 'FR', value: 1 },
|
||
{ sizing: 'FR', value: 1 }
|
||
],
|
||
gridColumnGap: 16,
|
||
gridRowGap: 8,
|
||
paddingTop: 12,
|
||
paddingRight: 12,
|
||
paddingBottom: 12,
|
||
paddingLeft: 12
|
||
})
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('grid')
|
||
expect(jsx).toContain('columns="1fr 1fr 1fr"')
|
||
expect(jsx).toContain('rows="1fr 1fr"')
|
||
expect(jsx).toContain('columnGap={16}')
|
||
expect(jsx).toContain('rowGap={8}')
|
||
expect(jsx).toContain('p={12}')
|
||
expect(jsx).toContain('w={400}')
|
||
expect(jsx).not.toContain('flex')
|
||
})
|
||
|
||
test('grid with mixed track sizes', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
width: 600,
|
||
height: 400,
|
||
layoutMode: 'GRID',
|
||
gridTemplateColumns: [
|
||
{ sizing: 'FIXED', value: 200 },
|
||
{ sizing: 'FR', value: 1 },
|
||
{ sizing: 'AUTO', value: 0 }
|
||
],
|
||
gridTemplateRows: [],
|
||
gridColumnGap: 0,
|
||
gridRowGap: 0
|
||
})
|
||
const jsx = sceneNodeToJSX(frame.id, graph)
|
||
expect(jsx).toContain('columns="200px 1fr auto"')
|
||
expect(jsx).not.toContain('rows=')
|
||
expect(jsx).not.toContain('columnGap')
|
||
})
|
||
|
||
test('child grid position', () => {
|
||
const graph = makeGraph()
|
||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||
width: 400,
|
||
height: 300,
|
||
layoutMode: 'GRID',
|
||
gridTemplateColumns: [
|
||
{ sizing: 'FR', value: 1 },
|
||
{ sizing: 'FR', value: 1 }
|
||
],
|
||
gridTemplateRows: [
|
||
{ sizing: 'FR', value: 1 },
|
||
{ sizing: 'FR', value: 1 }
|
||
],
|
||
gridColumnGap: 0,
|
||
gridRowGap: 0
|
||
})
|
||
const child = graph.createNode('RECTANGLE', frame.id, {
|
||
name: 'Span',
|
||
width: 100,
|
||
height: 50,
|
||
gridPosition: { column: 1, row: 2, columnSpan: 2, rowSpan: 1 }
|
||
})
|
||
const jsx = sceneNodeToJSX(child.id, graph)
|
||
expect(jsx).toContain('colStart={1}')
|
||
expect(jsx).toContain('rowStart={2}')
|
||
expect(jsx).toContain('colSpan={2}')
|
||
expect(jsx).not.toContain('rowSpan')
|
||
})
|
||
})
|
||
|
||
describe('selectionToJSX', () => {
|
||
test('multiple nodes separated by blank lines', () => {
|
||
const graph = makeGraph()
|
||
const a = graph.createNode('RECTANGLE', pageId(graph), {
|
||
name: 'A',
|
||
width: 10,
|
||
height: 10
|
||
})
|
||
const b = graph.createNode('ELLIPSE', pageId(graph), {
|
||
name: 'B',
|
||
width: 20,
|
||
height: 20
|
||
})
|
||
const jsx = selectionToJSX([a.id, b.id], graph)
|
||
expect(jsx).toContain('<Rectangle')
|
||
expect(jsx).toContain('<Ellipse')
|
||
expect(jsx).toContain('\n\n')
|
||
})
|
||
})
|