openpencil/tests/e2e/canvas/boolean-visual.spec.ts

66 lines
1.9 KiB
TypeScript

import { expect, test, useEditorSetupWithClear } from '#tests/e2e/fixtures'
const editor = useEditorSetupWithClear('/?test&no-chrome&no-rulers')
async function expectCanvas(name: string) {
editor.canvas.assertNoErrors()
const buffer = await editor.canvas.screenshotCanvasRegion()
expect(buffer).toMatchSnapshot(`${name}.png`)
}
test('boolean operations', async () => {
await editor.page.evaluate(() => {
const store = window.openPencil?.getStore?.()
if (!store) throw new Error('OpenPencil store not initialized')
const pageId = store.state.currentPageId
const operations = ['UNION', 'SUBTRACT', 'INTERSECT', 'EXCLUDE'] as const
const colors = [
{ r: 0.23, g: 0.51, b: 0.96, a: 1 },
{ r: 0.96, g: 0.35, b: 0.35, a: 1 },
{ r: 0.08, g: 0.73, b: 0.73, a: 1 },
{ r: 0.58, g: 0.27, b: 0.95, a: 1 }
]
for (const [index, operation] of operations.entries()) {
const group = store.graph.createNode('BOOLEAN_OPERATION', pageId, {
name: `${operation} visual`,
x: 72 + index * 152,
y: 92,
width: 124,
height: 104,
booleanOperation: operation,
fills: [{ type: 'SOLID', color: colors[index], visible: true, opacity: 1 }],
strokes: [
{
color: { r: 0.08, g: 0.1, b: 0.18, a: 0.32 },
weight: 2,
visible: true,
opacity: 1,
align: 'CENTER'
}
]
})
store.graph.createNode('RECTANGLE', group.id, {
name: `${operation} rectangle`,
x: 0,
y: 18,
width: 82,
height: 70,
cornerRadius: 14
})
store.graph.createNode('ELLIPSE', group.id, {
name: `${operation} ellipse`,
x: 42,
y: 0,
width: 82,
height: 104
})
}
store.clearSelection()
store.requestRender()
})
await editor.canvas.waitForRender()
await expectCanvas('boolean-operations')
})