98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { expect, test } from 'bun:test'
|
|
|
|
import {
|
|
JSX_REFERENCE as BARREL_REFERENCE,
|
|
CODEGEN_PROMPT as BARREL_CODEGEN
|
|
} from '@open-pencil/core'
|
|
import { AUTHORING_EXAMPLES, JSX_REFERENCE, renderJSX } from '@open-pencil/core/design-jsx'
|
|
import { CODEGEN_PROMPT } from '@open-pencil/core/tools'
|
|
|
|
import SYSTEM_PROMPT from '@/app/ai/chat/system-prompt'
|
|
|
|
import { getNodeOrThrow } from '#tests/helpers/assert'
|
|
import { makeSceneGraph } from '#tests/helpers/scene'
|
|
|
|
function exampleGraph() {
|
|
const graph = makeSceneGraph()
|
|
graph.addCollection({
|
|
id: 'tokens',
|
|
name: 'Tokens',
|
|
modes: [
|
|
{ modeId: 'default', name: 'Default' },
|
|
{ modeId: 'compact', name: 'Compact' }
|
|
],
|
|
defaultModeId: 'default',
|
|
variableIds: []
|
|
})
|
|
for (const [name, value, compact] of [
|
|
['Space/small', 8, 4],
|
|
['Space/medium', 16, 12],
|
|
['Type/body', 12, 11],
|
|
['Type/body-leading', 20, 16],
|
|
['Type/body-tracking', 0.2, 0]
|
|
] as const) {
|
|
graph.addVariable({
|
|
id: name,
|
|
name,
|
|
type: 'FLOAT',
|
|
collectionId: 'tokens',
|
|
valuesByMode: { default: value, compact },
|
|
description: '',
|
|
hiddenFromPublishing: false
|
|
})
|
|
}
|
|
return graph
|
|
}
|
|
|
|
for (const example of AUTHORING_EXAMPLES) {
|
|
test(`shared authoring example: ${example.title}`, async () => {
|
|
const graph = exampleGraph()
|
|
const [result] = await renderJSX(graph, example.jsx)
|
|
const frame = getNodeOrThrow(graph, result.id)
|
|
expect(frame.width).toBe(280)
|
|
expect(frame.height).toBeGreaterThan(32)
|
|
expect(frame.layoutMode).toBe('VERTICAL')
|
|
expect(graph.getChildren(frame.id).every((child) => child.type === 'TEXT')).toBe(true)
|
|
expect(JSX_REFERENCE).toContain(example.jsx)
|
|
})
|
|
}
|
|
|
|
test('shared bound example retains bindings and resolves the initial inherited mode', async () => {
|
|
const graph = exampleGraph()
|
|
const parent = graph.createNode('FRAME', graph.getPages()[0].id, {
|
|
variableModes: { tokens: 'compact' }
|
|
})
|
|
for (const example of AUTHORING_EXAMPLES) {
|
|
await renderJSX(graph, example.jsx, { parentId: parent.id })
|
|
}
|
|
const bound = graph.getChildren(parent.id).find((node) => node.boundVariables.itemSpacing)
|
|
if (!bound) throw new Error('Expected a variable-bound authoring example')
|
|
expect(bound.itemSpacing).toBe(4)
|
|
expect(bound.paddingTop).toBe(12)
|
|
expect(bound.boundVariables).toMatchObject({
|
|
itemSpacing: 'Space/small',
|
|
paddingTop: 'Space/medium',
|
|
paddingRight: 'Space/medium',
|
|
paddingBottom: 'Space/medium',
|
|
paddingLeft: 'Space/medium'
|
|
})
|
|
const [text] = graph.getChildren(bound.id)
|
|
expect(text.fontSize).toBe(11)
|
|
expect(text.lineHeight).toBe(16)
|
|
expect(text.letterSpacing).toBe(0)
|
|
expect(text.boundVariables).toMatchObject({
|
|
fontSize: 'Type/body',
|
|
lineHeight: 'Type/body-leading',
|
|
letterSpacing: 'Type/body-tracking'
|
|
})
|
|
})
|
|
|
|
test('public exports and runtime prompts use the same authoring reference', () => {
|
|
expect(BARREL_REFERENCE).toBe(JSX_REFERENCE)
|
|
expect(BARREL_CODEGEN).toBe(CODEGEN_PROMPT)
|
|
expect(CODEGEN_PROMPT).toContain(JSX_REFERENCE)
|
|
expect(SYSTEM_PROMPT).toContain(JSX_REFERENCE)
|
|
expect(CODEGEN_PROMPT.split(JSX_REFERENCE)).toHaveLength(2)
|
|
expect(SYSTEM_PROMPT.split(JSX_REFERENCE)).toHaveLength(2)
|
|
})
|