From e602b162543e1d5782eb40f667e7a05a44b10b5c Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Mon, 17 Nov 2025 19:03:16 +0900
Subject: [PATCH] =?UTF-8?q?E2E=20=EC=8A=A4=EB=AA=A8=ED=81=AC:=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A3=B9=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=8A=A4=EB=83=85=20?=
 =?UTF-8?q?=EB=8D=B8=ED=83=80=20=EB=8F=99=EC=9D=BC=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?=EA=B2=80=EC=A6=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/e2e/wysiwyg-group-drag.e2e.ts | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 tests/e2e/wysiwyg-group-drag.e2e.ts

diff --git a/tests/e2e/wysiwyg-group-drag.e2e.ts b/tests/e2e/wysiwyg-group-drag.e2e.ts
new file mode 100644
index 0000000..06943a6
--- /dev/null
+++ b/tests/e2e/wysiwyg-group-drag.e2e.ts
@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+function snap8(v: number) { return Math.round(v / 8) * 8 }
+
+async function getLefts(page: import('@playwright/test').Page) {
+  const els = page.locator('[data-testid^="obj-text-"]')
+  const count = await els.count()
+  const results: number[] = []
+  for (let i = 0; i < count; i++) {
+    const style = await els.nth(i).evaluate((n) => (n as HTMLElement).style.left || '0')
+    results.push(parseInt(style || '0', 10))
+  }
+  return results
+}
+
+test.describe('WYSIWYG - Group drag', () => {
+  test('marquee select two items and drag group by 16px on X (snaps to 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()
+
+    // Marquee select both
+    const box = await canvas.boundingBox()
+    if (!box) throw new Error('canvas not found')
+    await page.mouse.move(box.x + 40, box.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(box.x + 240, box.y + 160)
+    await page.mouse.up()
+
+    const live = page.getByTestId('aria-live')
+    await expect(live).toContainText(/선택\s*2개/)
+
+    const before = await getLefts(page)
+
+    // Drag one of selected (the second) by +16 on X
+    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const tbox = await target.boundingBox()
+    if (!tbox) throw new Error('target not found')
+    await page.mouse.move(tbox.x + 5, tbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(tbox.x + 21, tbox.y + 5) // ~+16 on X
+    await page.mouse.up()
+
+    const after = await getLefts(page)
+    // Expect both moved by same snapped delta
+    const expectedDx = snap8(before[1] + 16) - before[1]
+    expect(after.length).toBeGreaterThanOrEqual(2)
+    expect(after[0]).toBe(before[0] + expectedDx)
+    expect(after[1]).toBe(before[1] + expectedDx)
+  })
+})