74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { describe, expect, it } from 'bun:test'
|
|
|
|
import {
|
|
createHeadlessCSSRuntime,
|
|
jsx,
|
|
jsxToDesignDocument,
|
|
jsxToSceneGraph,
|
|
tailwindJSXToSceneGraph
|
|
} from '@open-pencil/dom-css'
|
|
|
|
import { tailwindCardClasses } from '#tests/helpers/dom-css'
|
|
|
|
describe('@open-pencil/dom-css JSX authoring', () => {
|
|
it('converts JSX runtime output into DesignDOM', async () => {
|
|
const document = await jsxToDesignDocument(
|
|
jsx('article', {
|
|
class: 'card',
|
|
style: { width: '320px', backgroundColor: 'white' },
|
|
children: jsx('h1', { children: 'OpenPencil' })
|
|
})
|
|
)
|
|
const card = document.children[0]
|
|
|
|
expect(card?.type).toBe('element')
|
|
if (card?.type !== 'element') return
|
|
expect(card.tagName).toBe('article')
|
|
expect(card.attrs.class).toBe('card')
|
|
expect(card.inlineStyle?.width).toBe('320px')
|
|
expect(card.inlineStyle?.['background-color']).toBe('white')
|
|
})
|
|
|
|
it('converts JSX through CSS runtime into scene graph', async () => {
|
|
const graph = await jsxToSceneGraph(
|
|
jsx('article', {
|
|
class: 'card',
|
|
children: jsx('h1', { class: 'title', children: 'OpenPencil' })
|
|
}),
|
|
{
|
|
runtime: createHeadlessCSSRuntime(),
|
|
cssText: `
|
|
.card { display: flex; flex-direction: column; width: 320px; height: 160px; padding: 24px; }
|
|
.title { font-size: 24px; font-weight: 700; line-height: 32px; }
|
|
`
|
|
}
|
|
)
|
|
const page = graph.getPages()[0]
|
|
const card = page ? graph.getChildren(page.id)[0] : undefined
|
|
|
|
expect(card?.type).toBe('FRAME')
|
|
expect(card?.width).toBe(320)
|
|
expect(card?.height).toBe(160)
|
|
expect(card?.paddingLeft).toBe(24)
|
|
})
|
|
|
|
it('keeps Tailwind JSX flowing through generated CSS', async () => {
|
|
const classes = [...tailwindCardClasses]
|
|
const graph = await tailwindJSXToSceneGraph(
|
|
jsx('article', {
|
|
class: classes.join(' '),
|
|
children: jsx('h1', { children: 'OpenPencil' })
|
|
}),
|
|
classes,
|
|
{ runtime: createHeadlessCSSRuntime() }
|
|
)
|
|
const page = graph.getPages()[0]
|
|
const card = page ? graph.getChildren(page.id)[0] : undefined
|
|
|
|
expect(card?.type).toBe('FRAME')
|
|
expect(card?.width).toBe(320)
|
|
expect(card?.height).toBe(176)
|
|
expect(card?.itemSpacing).toBe(12)
|
|
})
|
|
})
|