diff --git a/tests/e2e/wysiwyg-guides-rotate-group.e2e.ts b/tests/e2e/wysiwyg-guides-rotate-group.e2e.ts new file mode 100644 index 0000000..6a1209e --- /dev/null +++ b/tests/e2e/wysiwyg-guides-rotate-group.e2e.ts @@ -0,0 +1,59 @@ +import { test, expect } from '@playwright/test' + +const wysiwygUrl = '/en/wysiwyg' + +test.describe('WYSIWYG - Guides toggle with group rotate + snap + live region', () => { + test('guides ON: after multiselect and rotate, dragging snaps and aria-live shows guides + selection', 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() + + // Turn on Guides + const guidesBtn = page.getByRole('button', { name: /Guides/i }) + await guidesBtn.click() + + // Marquee select both + const cbox = await canvas.boundingBox() + if (!cbox) throw new Error('canvas not found') + await page.mouse.move(cbox.x + 40, cbox.y + 40) + await page.mouse.down() + await page.mouse.move(cbox.x + 260, cbox.y + 160) + await page.mouse.up() + + const live = page.getByTestId('aria-live') + await expect(live).toContainText(/선택\s*2개/) + + // Rotate ~15deg + const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first() + const hbox = await rotateHandle.boundingBox() + if (!hbox) throw new Error('rotate handle not found') + await page.mouse.move(hbox.x + 5, hbox.y + 5) + await page.mouse.down() + await page.mouse.move(hbox.x + 40, hbox.y + 5) + await expect(live).toContainText(/가이드\s*x=|y=/) + await page.mouse.up() + + // Drag group by ~13px on X to verify grid snap still applies with guides + const target = page.locator('[data-testid^="obj-text-"]').nth(1) + const tbox = await target.boundingBox() + if (!tbox) throw new Error('target not found') + + // Read before + const leftsBefore = await page.locator('[data-testid^="obj-text-"]').evaluateAll((nodes) => nodes.map(n => parseInt((n as HTMLElement).style.left || '0', 10))) + + await page.mouse.move(tbox.x + 5, tbox.y + 5) + await page.mouse.down() + await page.mouse.move(tbox.x + 5 + 13, tbox.y + 5) + await page.mouse.up() + + const leftsAfter = await page.locator('[data-testid^="obj-text-"]').evaluateAll((nodes) => nodes.map(n => parseInt((n as HTMLElement).style.left || '0', 10))) + const dx = leftsAfter[1] - leftsBefore[1] + expect(dx).toBe(16) + expect(leftsAfter[0] - leftsBefore[0]).toBe(16) + }) +})