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