90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
const wysiwygUrl = '/en/wysiwyg'
|
|
|
|
function snap8(v: number) { return Math.round(v / 8) * 8 }
|
|
|
|
async function getBoxStyles(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))
|
|
const height = await el.evaluate((n) => parseInt((n as HTMLElement).style.height || '0', 10))
|
|
const transform = await el.evaluate((n) => (n as HTMLElement).style.transform || '')
|
|
return { left, top, width, height, transform }
|
|
}
|
|
|
|
test.describe('WYSIWYG - Group resize/rotate and guide live region', () => {
|
|
test('group E handle resizes both by snapped delta without shifting x', 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 + 260, box.y + 160)
|
|
await page.mouse.up()
|
|
|
|
const live = page.getByTestId('aria-live')
|
|
await expect(live).toContainText(/선택\s*2개/)
|
|
|
|
const b0 = await getBoxStyles(page, 0)
|
|
const b1 = await getBoxStyles(page, 1)
|
|
|
|
// Drag east handle of second by +16px
|
|
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 + tbox.width - 5, tbox.y + 5)
|
|
await page.mouse.down()
|
|
await page.mouse.move(tbox.x + tbox.width + 16, tbox.y + 5)
|
|
await page.mouse.up()
|
|
|
|
const a0 = await getBoxStyles(page, 0)
|
|
const a1 = await getBoxStyles(page, 1)
|
|
|
|
const dw = snap8(b1.width + 16) - b1.width
|
|
expect(a0.left).toBe(b0.left)
|
|
expect(a1.left).toBe(b1.left)
|
|
expect(a0.width).toBe(b0.width + dw)
|
|
expect(a1.width).toBe(b1.width + dw)
|
|
})
|
|
|
|
test('rotate handle snaps to 15deg and live region includes guide coords while dragging', 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()
|
|
|
|
const target = page.locator('[data-testid^="obj-text-"]').first()
|
|
const tbox = await target.boundingBox()
|
|
if (!tbox) throw new Error('target not found')
|
|
|
|
// Select
|
|
await target.click()
|
|
|
|
// Drag rotate handle horizontally to cause rotation ~15deg (snapped)
|
|
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)
|
|
const live = page.getByTestId('aria-live')
|
|
await expect(live).toContainText(/가이드\s*x=|y=/)
|
|
await page.mouse.up()
|
|
|
|
const a = await getBoxStyles(page, 0)
|
|
expect(a.transform).toMatch(/rotate\(15deg\)|rotate\(30deg\)/)
|
|
})
|
|
})
|