99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, screen, fireEvent } from '@testing-library/react'
|
|
import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage'
|
|
|
|
function getBoxes(ids: string[]) {
|
|
return ids.map((id) => {
|
|
const el = screen.getByTestId(`obj-${id}`) as HTMLElement
|
|
const s = el.style as CSSStyleDeclaration
|
|
return {
|
|
id,
|
|
left: parseInt(s.left || '0', 10),
|
|
top: parseInt(s.top || '0', 10),
|
|
width: parseInt(s.width || '0', 10),
|
|
height: parseInt(s.height || '0', 10),
|
|
}
|
|
})
|
|
}
|
|
|
|
function snap8(v: number) { return Math.round(v / 8) * 8 }
|
|
|
|
async function addTextAt(x: number, y: number) {
|
|
fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
|
|
const all = await screen.findAllByTestId(/obj-text-/)
|
|
const obj = all[all.length - 1] as HTMLElement
|
|
// select the newly added object
|
|
fireEvent.mouseDown(obj, { clientX: x, clientY: y })
|
|
fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
|
|
// move via props inputs (X/Y) for the selected object
|
|
const xInput = screen.getByLabelText('X') as HTMLInputElement
|
|
const yInput = screen.getByLabelText('Y') as HTMLInputElement
|
|
fireEvent.change(xInput, { target: { value: String(x) } })
|
|
fireEvent.change(yInput, { target: { value: String(y) } })
|
|
return obj.getAttribute('data-testid')!.replace('obj-', '')
|
|
}
|
|
|
|
describe('Canvas multiselect keyboard nudge', () => {
|
|
it('ArrowRight applies 1px then grid snap to both (no modifier)', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
const id1 = await addTextAt(60, 60)
|
|
const id2 = await addTextAt(140, 60)
|
|
|
|
const canvas = screen.getByTestId('wysiwyg-canvas')
|
|
// marquee select both
|
|
fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
|
|
fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
|
|
fireEvent.mouseUp(canvas)
|
|
|
|
const before = getBoxes([id1, id2])
|
|
fireEvent.keyDown(canvas, { key: 'ArrowRight' })
|
|
const after = getBoxes([id1, id2])
|
|
const expLeft0 = snap8(before[0].left + 1)
|
|
const dx = expLeft0 - before[0].left
|
|
after.forEach((b, i) => {
|
|
expect(b.left).toBe(before[i].left + dx)
|
|
expect(b.top).toBe(before[i].top)
|
|
})
|
|
})
|
|
|
|
it('Shift+ArrowUp moves exactly -1px on Y for both (no snap)', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
const id1 = await addTextAt(60, 60)
|
|
const id2 = await addTextAt(140, 60)
|
|
|
|
const canvas = screen.getByTestId('wysiwyg-canvas')
|
|
fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
|
|
fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
|
|
fireEvent.mouseUp(canvas)
|
|
|
|
const before = getBoxes([id1, id2])
|
|
fireEvent.keyDown(canvas, { key: 'ArrowUp', shiftKey: true })
|
|
const after = getBoxes([id1, id2])
|
|
after.forEach((b, i) => {
|
|
expect(b.top).toBe(before[i].top - 1)
|
|
expect(b.left).toBe(before[i].left)
|
|
})
|
|
})
|
|
|
|
it('Alt+ArrowRight moves +16px then snaps to grid for both', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
const id1 = await addTextAt(60, 60)
|
|
const id2 = await addTextAt(140, 60)
|
|
|
|
const canvas = screen.getByTestId('wysiwyg-canvas')
|
|
fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
|
|
fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
|
|
fireEvent.mouseUp(canvas)
|
|
|
|
const before = getBoxes([id1, id2])
|
|
fireEvent.keyDown(canvas, { key: 'ArrowRight', altKey: true })
|
|
const after = getBoxes([id1, id2])
|
|
const expLeft0 = snap8(before[0].left + 16)
|
|
const dx = expLeft0 - before[0].left
|
|
after.forEach((b, i) => {
|
|
expect(b.left).toBe(before[i].left + dx)
|
|
expect(b.top).toBe(before[i].top)
|
|
})
|
|
})
|
|
})
|