e69ba75c12
* refactor(ui): extract shared action and navigation primitives * refactor(ui): compose settings and libraries with shared tabs * feat(ui): preserve native activation and toolbar keyboard navigation * refactor(home): share document entries and accessible input controls * fix(layers): share virtualized row geometry and selection styling * refactor(layout): compose spacing and readable dimension controls * refactor(properties): compose advanced strokes and inline effects * refactor(ui): reuse actions in page and property controls * refactor(settings): adopt shared actions without changing workflows * refactor(ui): share collaboration and provider actions * refactor(ui): finish shell and paint action composition * test(ui): restore extracted control and settings coverage * test(ui): complete workflow extraction coverage * fix(ui): address review and trim redundant snapshots * fix(layout): preserve single-step Undo for guides and wrap
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
import { CanvasHelper } from '#tests/helpers/canvas'
|
|
|
|
for (const theme of ['light', 'dark']) {
|
|
test(`auto-layout spacing compositions in ${theme}`, async ({ page }) => {
|
|
await page.goto('/?test')
|
|
await new CanvasHelper(page).waitForInit()
|
|
const id = await page.evaluate(async (colorMode) => {
|
|
const path = '/src/app/shell/theme.ts'
|
|
const module = await import(path)
|
|
module.useAppTheme().setTheme(colorMode)
|
|
const editor = window.openPencil?.getStore?.()
|
|
if (!editor) throw new Error('Editor unavailable')
|
|
const id = editor.createShape('FRAME', 100, 100, 320, 240)
|
|
editor.updateNode(id, {
|
|
layoutMode: 'VERTICAL',
|
|
itemSpacing: 16,
|
|
paddingTop: 24,
|
|
paddingBottom: 24,
|
|
paddingLeft: 24,
|
|
paddingRight: 24
|
|
})
|
|
editor.select([id])
|
|
return id
|
|
}, theme)
|
|
const section = page.getByRole('region', { name: 'Auto layout', exact: true })
|
|
await page.evaluate(
|
|
(id) =>
|
|
window.openPencil?.getStore?.().updateNode(id, {
|
|
primaryAxisAlign: 'SPACE_BETWEEN',
|
|
paddingTop: 12,
|
|
paddingRight: 16,
|
|
paddingBottom: 24,
|
|
paddingLeft: 32
|
|
}),
|
|
id
|
|
)
|
|
await page.evaluate(
|
|
(id) =>
|
|
window.openPencil?.getStore?.().updateNode(id, {
|
|
layoutMode: 'HORIZONTAL',
|
|
layoutWrap: 'WRAP',
|
|
primaryAxisAlign: 'MIN',
|
|
counterAxisSpacing: 8
|
|
}),
|
|
id
|
|
)
|
|
await expect(section).toHaveScreenshot(`auto-layout-wrap-${theme}.png`)
|
|
})
|
|
}
|