99 lines
4.0 KiB
TypeScript
99 lines
4.0 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
const wysiwygUrl = '/en/wysiwyg'
|
|
|
|
// Helper to read left/top/width from inline styles
|
|
async function getBox(page: import('@playwright/test').Page, nth: number) {
|
|
const el = page.locator('[data-testid^="obj-text-"]').nth(nth)
|
|
const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10))
|
|
const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10))
|
|
const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10))
|
|
return { left, top, width }
|
|
}
|
|
|
|
test.describe('WYSIWYG - Snap priority (edge > center > grid)', () => {
|
|
test('dragging near another object prefers edge snap over grid', async ({ page }) => {
|
|
await page.goto(wysiwygUrl)
|
|
const canvas = page.getByTestId('wysiwyg-canvas')
|
|
await expect(canvas).toBeVisible()
|
|
|
|
// Add two text objects
|
|
const addText = page.getByRole('button', { name: /^Add Text$/i })
|
|
await addText.click()
|
|
await addText.click()
|
|
|
|
// Marquee select the second to get its bbox and then drag it near the first one's right edge
|
|
const first = page.locator('[data-testid^="obj-text-"]').first()
|
|
const second = page.locator('[data-testid^="obj-text-"]').nth(1)
|
|
|
|
const b1 = await first.boundingBox()
|
|
const b2 = await second.boundingBox()
|
|
if (!b1 || !b2) throw new Error('objects not found')
|
|
|
|
// Drag second so that its left aligns to first.right (edge snapping scenario)
|
|
// move handle point from second.x+5 to target x = first.right - 2 (close enough to trigger snap)
|
|
const targetX = b1.x + b1.width - 2
|
|
await page.mouse.move(b2.x + 5, b2.y + 5)
|
|
await page.mouse.down()
|
|
await page.mouse.move(targetX, b2.y + 5)
|
|
await page.mouse.up()
|
|
|
|
// Read inline left/width to verify alignment: second.left ~= first.left + first.width
|
|
const s = await getBox(page, 1)
|
|
const f = await getBox(page, 0)
|
|
const expectedLeft = f.left + f.width
|
|
// Allow small tolerance (±1) due to rounding during drag
|
|
expect(Math.abs(s.left - expectedLeft)).toBeLessThanOrEqual(1)
|
|
})
|
|
|
|
test('dragging near another object prefers center snap over grid', async ({ page }) => {
|
|
await page.goto(wysiwygUrl)
|
|
const canvas = page.getByTestId('wysiwyg-canvas')
|
|
await expect(canvas).toBeVisible()
|
|
|
|
const addText = page.getByRole('button', { name: /^Add Text$/i })
|
|
await addText.click()
|
|
await addText.click()
|
|
|
|
const first = page.locator('[data-testid^="obj-text-"]').first()
|
|
const second = page.locator('[data-testid^="obj-text-"]').nth(1)
|
|
const b1 = await first.boundingBox()
|
|
const b2 = await second.boundingBox()
|
|
if (!b1 || !b2) throw new Error('objects not found')
|
|
|
|
// Target the center alignment: move second so its centerX ~= first.centerX
|
|
const firstCenterX = b1.x + b1.width / 2
|
|
await page.mouse.move(b2.x + b2.width / 2, b2.y + 5)
|
|
await page.mouse.down()
|
|
await page.mouse.move(firstCenterX, b2.y + 5)
|
|
await page.mouse.up()
|
|
|
|
const f = await getBox(page, 0)
|
|
const s = await getBox(page, 1)
|
|
const sCenter = s.left + Math.round((await second.evaluate((n)=>parseInt((n as HTMLElement).style.width||'0',10))) / 2)
|
|
expect(Math.abs(sCenter - (f.left + f.width / 2))).toBeLessThanOrEqual(1)
|
|
})
|
|
|
|
test('when no nearby objects, grid snapping applies (13px → 16px)', async ({ page }) => {
|
|
await page.goto(wysiwygUrl)
|
|
const canvas = page.getByTestId('wysiwyg-canvas')
|
|
await expect(canvas).toBeVisible()
|
|
|
|
const addText = page.getByRole('button', { name: /^Add Text$/i })
|
|
await addText.click()
|
|
|
|
const obj = page.locator('[data-testid^="obj-text-"]').first()
|
|
const b = await obj.boundingBox()
|
|
if (!b) throw new Error('object not found')
|
|
|
|
const before = await getBox(page, 0)
|
|
await page.mouse.move(b.x + 5, b.y + 5)
|
|
await page.mouse.down()
|
|
await page.mouse.move(b.x + 5 + 13, b.y + 5)
|
|
await page.mouse.up()
|
|
|
|
const after = await getBox(page, 0)
|
|
expect(after.left - before.left).toBe(16)
|
|
})
|
|
})
|