From e3a8cf84a024fce8b923cc3173a74dc833309e85 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Mon, 17 Nov 2025 19:58:52 +0900
Subject: [PATCH] =?UTF-8?q?E2E:=20=EC=8A=A4=EB=83=85=20=EC=9A=B0=EC=84=A0?=
 =?UTF-8?q?=EC=88=9C=EC=9C=84(edge>center>grid)=20=EB=93=9C=EB=9E=98?=
 =?UTF-8?q?=EA=B7=B8=20=EC=A0=95=EB=A0=AC=20=EA=B2=80=EC=A6=9D=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/e2e/wysiwyg-snap-priority.e2e.ts | 48 ++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 tests/e2e/wysiwyg-snap-priority.e2e.ts

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)
+  })
+})