diff --git a/tests/e2e/wysiwyg-snap-priority.e2e.ts b/tests/e2e/wysiwyg-snap-priority.e2e.ts new file mode 100644 index 0000000..e5745e4 --- /dev/null +++ b/tests/e2e/wysiwyg-snap-priority.e2e.ts @@ -0,0 +1,48 @@ +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) + }) +})