auto: PR for feat/export-css-tokens-deep (#83)

Automated PR created on push to feat/export-css-tokens-deep

Reviewed-on: #83
Co-authored-by: Jaybe <master@jaybe.dev>
Co-committed-by: Jaybe <master@jaybe.dev>

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

tests/e2e/wysiwyg-group-resize-rotate.e2e.ts

@@ -0,0 +1,89 @@
+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\)/)
+  })
+})

tests/e2e/wysiwyg-guides-multiselect.e2e.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+test.describe('WYSIWYG - Guides toggle and multiselect live region', () => {
+  test('toggles guides and announces multiselect in aria-live', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+
+    // Canvas and live region present
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+    const live = page.getByTestId('aria-live')
+    await expect(live).toContainText(/선택\s*0개/)
+
+    // Add two text objects
+    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 + 300, box.y + 200)
+    await page.mouse.up()
+
+    await expect(live).toContainText(/선택\s*2개/)
+
+    // Guides toggle
+    const guidesBtn = page.getByRole('button', { name: /Guides/i })
+    await expect(guidesBtn).toHaveAttribute('aria-pressed', 'true')
+    await guidesBtn.click()
+    await expect(guidesBtn).toHaveAttribute('aria-pressed', 'false')
+    await guidesBtn.click()
+    await expect(guidesBtn).toHaveAttribute('aria-pressed', 'true')
+  })
+})