92 lines
3 KiB
TypeScript
92 lines
3 KiB
TypeScript
import { test, expect, type Page } from '@playwright/test'
|
|
|
|
import { CanvasHelper } from '#tests/helpers/canvas'
|
|
|
|
let page: Page
|
|
let canvas: CanvasHelper
|
|
|
|
test.describe.configure({ mode: 'serial' })
|
|
|
|
test.beforeAll(async ({ browser }) => {
|
|
page = await browser.newPage()
|
|
await page.goto('/')
|
|
canvas = new CanvasHelper(page)
|
|
await canvas.waitForInit()
|
|
await canvas.clearCanvas()
|
|
})
|
|
|
|
test.afterAll(async () => {
|
|
await page.close()
|
|
})
|
|
|
|
async function createRects() {
|
|
await canvas.clearCanvas()
|
|
await page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
store.createShape('RECTANGLE', 100, 100, 80, 80)
|
|
const b = store.createShape('RECTANGLE', 300, 100, 80, 80)
|
|
store.select([b])
|
|
})
|
|
await canvas.waitForRender()
|
|
}
|
|
|
|
// Snap guide visual tests compare the canvas at a snap position vs a non-snap position
|
|
// during the same drag. The snap position produces a guide line overlay; non-snap does not.
|
|
// Skipped on Linux CI due to X11 Alt+drag interference and rendering differences.
|
|
|
|
test('edge snap guide: canvas differs at snap vs non-snap position', async () => {
|
|
test.skip(process.platform === 'linux', 'Snap guide visual tests skipped on Linux CI')
|
|
|
|
await createRects()
|
|
|
|
const box = await page.getByTestId('canvas-element').boundingBox()
|
|
if (!box) throw new Error('No canvas')
|
|
|
|
// drag to a non-snap position first, capture screenshot
|
|
await page.mouse.move(box.x + 340, box.y + 140)
|
|
await page.mouse.down()
|
|
await page.mouse.move(box.x + 250, box.y + 140, { steps: 15 })
|
|
const nonSnapShot = await canvas.screenshotCanvas()
|
|
|
|
// continue drag to edge-snap position (right edge of rect B aligns with left edge of rect A at x=180)
|
|
await page.mouse.move(box.x + 182, box.y + 140, { steps: 15 })
|
|
const snapShot = await canvas.screenshotCanvas()
|
|
|
|
await page.mouse.up()
|
|
|
|
// At snap position the guide line overlay should make the canvas visually different
|
|
expect(
|
|
Buffer.compare(nonSnapShot, snapShot),
|
|
'Canvas should differ at snap position due to guide line overlay'
|
|
).not.toBe(0)
|
|
canvas.assertNoErrors()
|
|
})
|
|
|
|
test('center snap guide: canvas differs at snap vs non-snap position', async () => {
|
|
test.skip(process.platform === 'linux', 'Snap guide visual tests skipped on Linux CI')
|
|
|
|
await createRects()
|
|
|
|
const box = await page.getByTestId('canvas-element').boundingBox()
|
|
if (!box) throw new Error('No canvas')
|
|
|
|
// drag to a non-snap position first
|
|
await page.mouse.move(box.x + 340, box.y + 140)
|
|
await page.mouse.down()
|
|
await page.mouse.move(box.x + 260, box.y + 140, { steps: 15 })
|
|
const nonSnapShot = await canvas.screenshotCanvas()
|
|
|
|
// continue drag to center-snap position (center of rect B aligns with center of rect A)
|
|
await page.mouse.move(box.x + 220, box.y + 140, { steps: 15 })
|
|
const snapShot = await canvas.screenshotCanvas()
|
|
|
|
await page.mouse.up()
|
|
|
|
expect(
|
|
Buffer.compare(nonSnapShot, snapShot),
|
|
'Canvas should differ at snap position due to center guide line overlay'
|
|
).not.toBe(0)
|
|
canvas.assertNoErrors()
|
|
})
|