86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { describe, expect, test } from 'bun:test'
|
|
|
|
import { computeAllLayouts } from '@open-pencil/core'
|
|
|
|
import { createAPI } from '../helpers'
|
|
|
|
describe('createComponentFromNode', () => {
|
|
test('converts frame to component', () => {
|
|
const api = createAPI()
|
|
const frame = api.createFrame()
|
|
frame.name = 'MyButton'
|
|
frame.resize(200, 50)
|
|
const child = api.createRectangle()
|
|
child.name = 'Background'
|
|
frame.appendChild(child)
|
|
const frameId = frame.id
|
|
|
|
const comp = api.createComponentFromNode(frame)
|
|
expect(comp.type).toBe('COMPONENT')
|
|
expect(comp.name).toBe('MyButton')
|
|
expect(comp.width).toBe(200)
|
|
expect(comp.height).toBe(50)
|
|
expect(comp.children.length).toBe(1)
|
|
expect(comp.children[0].name).toBe('Background')
|
|
expect(api.getNodeById(frameId)).toBeNull()
|
|
})
|
|
|
|
test('preserves root variable bindings and explicit modes', () => {
|
|
const api = createAPI()
|
|
const collection = api.createVariableCollection('Radii')
|
|
const variable = api.createVariable('radius/md', 'FLOAT', collection.id, 8)
|
|
|
|
const frame = api.createFrame()
|
|
frame.name = 'Card'
|
|
frame.resize(200, 50)
|
|
frame.cornerRadius = 8
|
|
api.bindVariable(frame.id, 'cornerRadius', variable.id)
|
|
api.graph.updateNode(frame.id, {
|
|
variableModes: { [collection.id]: collection.defaultModeId }
|
|
})
|
|
|
|
const comp = api.createComponentFromNode(frame)
|
|
const raw = api.graph.getNode(comp.id)
|
|
|
|
expect(raw?.boundVariables.cornerRadius).toBe(variable.id)
|
|
expect(raw?.variableModes).toEqual({ [collection.id]: collection.defaultModeId })
|
|
})
|
|
|
|
test('preserves auto-layout HUG sizing when padding changes after conversion', () => {
|
|
const api = createAPI()
|
|
const frame = api.createFrame()
|
|
frame.layoutMode = 'HORIZONTAL'
|
|
frame.primaryAxisSizingMode = 'AUTO'
|
|
frame.counterAxisSizingMode = 'AUTO'
|
|
const child = api.createRectangle()
|
|
child.resize(40, 20)
|
|
frame.appendChild(child)
|
|
computeAllLayouts(api.graph, frame.id)
|
|
|
|
const comp = api.createComponentFromNode(frame)
|
|
const initialWidth = comp.width
|
|
const initialHeight = comp.height
|
|
comp.paddingLeft = 20
|
|
comp.paddingRight = 20
|
|
comp.paddingTop = 10
|
|
comp.paddingBottom = 10
|
|
computeAllLayouts(api.graph, comp.id)
|
|
|
|
expect(comp.width).toBe(initialWidth + 40)
|
|
expect(comp.height).toBe(initialHeight + 20)
|
|
})
|
|
test('preserves auto-layout HUG sizing mode', () => {
|
|
const api = createAPI()
|
|
const frame = api.createFrame()
|
|
frame.layoutMode = 'HORIZONTAL'
|
|
frame.primaryAxisSizingMode = 'AUTO'
|
|
frame.counterAxisSizingMode = 'AUTO'
|
|
|
|
const comp = api.createComponentFromNode(frame)
|
|
const raw = api.graph.getNode(comp.id)
|
|
|
|
expect(raw?.primaryAxisSizing).toBe('HUG')
|
|
expect(raw?.counterAxisSizing).toBe('HUG')
|
|
})
|
|
})
|