2348b1c972
- Isolate the Copy/Paste submenu scenario from prior context-menu state - Close shared fixture pages safely when a project-level skip bypasses setup - Refresh the reviewed typography panel snapshot
247 lines
8 KiB
TypeScript
247 lines
8 KiB
TypeScript
import { expect, test, useEditorSetup } from '#tests/e2e/fixtures'
|
|
import { expectDefined } from '#tests/helpers/assert'
|
|
|
|
const editor = useEditorSetup()
|
|
|
|
function getPageChildren() {
|
|
return editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
return store.graph.getChildren(store.state.currentPageId).map((n) => ({
|
|
id: n.id,
|
|
type: n.type,
|
|
name: n.name,
|
|
visible: n.visible,
|
|
locked: n.locked
|
|
}))
|
|
})
|
|
}
|
|
|
|
function getSelectedCount() {
|
|
return editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
return store.state.selectedIds.size
|
|
})
|
|
}
|
|
|
|
async function rightClickShape(x: number, y: number) {
|
|
const box = expectDefined(await editor.canvas.canvas.boundingBox(), 'canvas bounds')
|
|
await editor.page.mouse.click(box.x + x, box.y + y, { button: 'right' })
|
|
}
|
|
|
|
function contextMenu() {
|
|
return editor.page.locator('[role="menu"]')
|
|
}
|
|
|
|
function contextItem(testId: string) {
|
|
return editor.page.getByTestId(testId)
|
|
}
|
|
|
|
test('right-click on empty canvas shows context menu without selection items disabled', async () => {
|
|
await rightClickShape(500, 400)
|
|
|
|
await expect(contextMenu()).toBeVisible()
|
|
|
|
const copyItem = contextItem('context-copy')
|
|
await expect(copyItem).toBeVisible()
|
|
|
|
await editor.page.keyboard.press('Escape')
|
|
})
|
|
|
|
test('draw shape and right-click selects it', async () => {
|
|
await editor.canvas.drawRect(200, 200, 120, 80)
|
|
await editor.canvas.waitForRender()
|
|
|
|
// Deselect first
|
|
await editor.page.keyboard.press('Escape')
|
|
await editor.canvas.waitForRender()
|
|
|
|
// Right-click the shape
|
|
await rightClickShape(250, 230)
|
|
|
|
expect(await getSelectedCount()).toBe(1)
|
|
await expect(contextMenu()).toBeVisible()
|
|
await editor.page.keyboard.press('Escape')
|
|
})
|
|
|
|
test('context menu shows expected items', async () => {
|
|
await editor.canvas.drawRect(200, 200, 120, 80)
|
|
await editor.canvas.waitForRender()
|
|
await rightClickShape(250, 230)
|
|
|
|
await expect(contextItem('context-copy')).toBeVisible()
|
|
await expect(contextItem('context-cut')).toBeVisible()
|
|
await expect(contextItem('context-duplicate')).toBeVisible()
|
|
await expect(contextItem('context-delete')).toBeVisible()
|
|
await expect(contextItem('context-group')).toBeVisible()
|
|
await expect(contextItem('context-bring-to-front')).toBeVisible()
|
|
await expect(contextItem('context-send-to-back')).toBeVisible()
|
|
await expect(contextItem('context-toggle-visibility')).toBeVisible()
|
|
await expect(contextItem('context-toggle-lock')).toBeVisible()
|
|
await expect(contextItem('context-flatten')).toBeVisible()
|
|
await expect(contextItem('context-outline-text')).toBeVisible()
|
|
await expect(contextItem('context-outline-stroke')).toBeVisible()
|
|
await expect(contextItem('context-boolean-union')).toHaveCount(0)
|
|
|
|
await editor.page.keyboard.press('Escape')
|
|
})
|
|
|
|
test('duplicate via context menu works', async () => {
|
|
const countBefore = (await getPageChildren()).length
|
|
|
|
await rightClickShape(250, 230)
|
|
await contextItem('context-duplicate').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const countAfter = (await getPageChildren()).length
|
|
expect(countAfter).toBe(countBefore + 1)
|
|
})
|
|
|
|
test('toggle visibility via context menu', async () => {
|
|
await editor.canvas.click(250, 230)
|
|
await editor.canvas.waitForRender()
|
|
|
|
const nodeId = await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
return [...store.state.selectedIds][0]
|
|
})
|
|
|
|
await rightClickShape(250, 230)
|
|
await contextItem('context-toggle-visibility').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const hidden = await editor.page.evaluate((id) => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const n = store.graph.getNode(id)
|
|
return n ? { visible: n.visible } : null
|
|
}, nodeId)
|
|
expect(hidden?.visible).toBe(false)
|
|
|
|
// Toggle back: select via store since invisible nodes can't be hit-tested
|
|
await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
store.toggleVisibility()
|
|
})
|
|
await editor.canvas.waitForRender()
|
|
|
|
const restored = await editor.page.evaluate((id) => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const n = store.graph.getNode(id)
|
|
return n ? { visible: n.visible } : null
|
|
}, nodeId)
|
|
expect(restored?.visible).toBe(true)
|
|
})
|
|
|
|
test('toggle lock via context menu', async () => {
|
|
await rightClickShape(250, 230)
|
|
await contextItem('context-toggle-lock').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const children = await getPageChildren()
|
|
const locked = children.find((c) => c.locked)
|
|
expect(locked).toBeTruthy()
|
|
|
|
// Unlock
|
|
await rightClickShape(250, 230)
|
|
await contextItem('context-toggle-lock').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const after = await getPageChildren()
|
|
expect(after.every((c) => !c.locked)).toBe(true)
|
|
})
|
|
|
|
test('delete via context menu removes node', async () => {
|
|
const countBefore = (await getPageChildren()).length
|
|
|
|
await rightClickShape(250, 230)
|
|
await contextItem('context-delete').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const countAfter = (await getPageChildren()).length
|
|
expect(countAfter).toBe(countBefore - 1)
|
|
})
|
|
|
|
test('group via context menu', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(100, 100, 60, 60)
|
|
await editor.canvas.drawRect(200, 100, 60, 60)
|
|
await editor.canvas.selectAll()
|
|
await editor.canvas.waitForRender()
|
|
|
|
await rightClickShape(130, 130)
|
|
await contextItem('context-group').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const children = await getPageChildren()
|
|
const group = children.find((c) => c.type === 'GROUP')
|
|
expect(group).toBeTruthy()
|
|
})
|
|
|
|
test('ungroup via store after context-menu group', async () => {
|
|
// Groups are click-through, so ungroup via store instead
|
|
await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const group = store.graph.getChildren(store.state.currentPageId).find((n) => n.type === 'GROUP')
|
|
if (group) store.select([group.id])
|
|
store.ungroupSelected()
|
|
})
|
|
await editor.canvas.waitForRender()
|
|
|
|
const children = await getPageChildren()
|
|
expect(children.every((c) => c.type !== 'GROUP')).toBe(true)
|
|
expect(children.length).toBe(2)
|
|
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('create component via context menu', async () => {
|
|
await editor.canvas.click(130, 130)
|
|
await editor.canvas.waitForRender()
|
|
|
|
await rightClickShape(130, 130)
|
|
await contextItem('context-create-component').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const children = await getPageChildren()
|
|
const comp = children.find((c) => c.type === 'COMPONENT')
|
|
expect(comp).toBeTruthy()
|
|
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('outline stroke is disabled for fill-only shapes', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 120, 80)
|
|
await editor.canvas.waitForRender()
|
|
|
|
await rightClickShape(250, 230)
|
|
|
|
const item = contextItem('context-outline-stroke')
|
|
await expect(item).toBeVisible()
|
|
await expect(item).toHaveAttribute('data-disabled', '')
|
|
await editor.page.keyboard.press('Escape')
|
|
})
|
|
|
|
test('Copy/Paste as submenu exists', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 120, 80)
|
|
await editor.canvas.waitForRender()
|
|
await rightClickShape(250, 230)
|
|
|
|
const submenuTrigger = contextItem('context-copy-paste-as')
|
|
await expect(submenuTrigger).toBeVisible()
|
|
|
|
await submenuTrigger.click({ force: true })
|
|
|
|
await expect(contextItem('context-copy-as-svg')).toBeVisible()
|
|
await expect(contextItem('context-copy-as-jsx')).toBeVisible()
|
|
|
|
await editor.page.keyboard.press('Escape')
|
|
})
|