84 lines
3 KiB
TypeScript
84 lines
3 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test'
|
|
|
|
import { CanvasHelper } from '#tests/helpers/canvas'
|
|
|
|
async function layerOrder(page: Page, parentId?: string) {
|
|
return page.evaluate((id) => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
return store.graph.getNode(id ?? store.state.currentPageId)?.childIds ?? []
|
|
}, parentId)
|
|
}
|
|
|
|
test('dragging layers reorders scene nodes', async ({ page }) => {
|
|
await page.goto('/')
|
|
const canvas = new CanvasHelper(page)
|
|
await canvas.waitForInit()
|
|
canvas.errors.length = 0
|
|
await canvas.clearCanvas()
|
|
|
|
const ids = await page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const pageId = store.state.currentPageId
|
|
const first = store.graph.createNode('RECTANGLE', pageId, { name: 'Layer A', x: 0, y: 0 })
|
|
const second = store.graph.createNode('RECTANGLE', pageId, { name: 'Layer B', x: 120, y: 0 })
|
|
const third = store.graph.createNode('RECTANGLE', pageId, { name: 'Layer C', x: 240, y: 0 })
|
|
store.requestRender()
|
|
return { first: first.id, second: second.id, third: third.id }
|
|
})
|
|
await canvas.waitForRender()
|
|
|
|
const source = page.locator(`[data-node-id="${ids.third}"]`).getByTestId('layers-item')
|
|
const target = page.locator(`[data-node-id="${ids.first}"]`).getByTestId('layers-item')
|
|
await source.dragTo(target, { targetPosition: { x: 20, y: 2 } })
|
|
await canvas.waitForRender()
|
|
|
|
const order = await layerOrder(page)
|
|
|
|
expect(order).toEqual([ids.third, ids.first, ids.second])
|
|
canvas.assertNoErrors()
|
|
})
|
|
|
|
test('dragging a layer into a container expands it and shows the child', async ({ page }) => {
|
|
await page.goto('/')
|
|
const canvas = new CanvasHelper(page)
|
|
await canvas.waitForInit()
|
|
canvas.errors.length = 0
|
|
await canvas.clearCanvas()
|
|
|
|
const ids = await page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const pageId = store.state.currentPageId
|
|
const frame = store.graph.createNode('FRAME', pageId, {
|
|
name: 'Drop Frame',
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 120
|
|
})
|
|
const rect = store.graph.createNode('RECTANGLE', pageId, {
|
|
name: 'Child Candidate',
|
|
x: 240,
|
|
y: 0,
|
|
width: 80,
|
|
height: 80
|
|
})
|
|
store.requestRender()
|
|
return { frame: frame.id, rect: rect.id }
|
|
})
|
|
await canvas.waitForRender()
|
|
|
|
const source = page.locator(`[data-node-id="${ids.rect}"]`).getByTestId('layers-item')
|
|
const target = page.locator(`[data-node-id="${ids.frame}"]`).getByTestId('layers-item')
|
|
await source.dragTo(target, { targetPosition: { x: 70, y: 12 } })
|
|
await canvas.waitForRender()
|
|
|
|
await expect(
|
|
page.locator(`[data-node-id="${ids.rect}"]`).getByTestId('layers-item')
|
|
).toBeVisible()
|
|
expect(await layerOrder(page, ids.frame)).toEqual([ids.rect])
|
|
canvas.assertNoErrors()
|
|
})
|