96 lines
4.0 KiB
TypeScript
96 lines
4.0 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
|
|
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 directional resize', () => {
|
|
it('east handle increases width of all selected without shifting their x', 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)
|
|
|
|
// wait until aria-live announces 2 selections
|
|
const live1 = await screen.findByTestId('aria-live')
|
|
expect(live1.textContent || '').toMatch(/선택\s*2개/)
|
|
const before = getBoxes([id1, id2])
|
|
const hRight = await screen.findByTestId(`resize-handle-e-${id2}`)
|
|
fireEvent.mouseDown(hRight, { clientX: before[1].left + before[1].width, clientY: before[1].top + 5 })
|
|
fireEvent.mouseMove(screen.getByTestId('wysiwyg-canvas'), { clientX: before[1].left + before[1].width + 16, clientY: before[1].top + 5 })
|
|
fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
|
|
|
|
const after = getBoxes([id1, id2])
|
|
const dw = snap8(before[1].width + 16) - before[1].width
|
|
after.forEach((b, i) => {
|
|
expect(b.left).toBe(before[i].left)
|
|
expect(b.width).toBe(before[i].width + dw)
|
|
expect(b.top).toBe(before[i].top)
|
|
expect(b.height).toBe(before[i].height)
|
|
})
|
|
})
|
|
|
|
it('west handle moves x of all selected left and increases their width equally', 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])
|
|
const hLeft = await screen.findByTestId(`resize-handle-w-${id1}`)
|
|
fireEvent.mouseDown(hLeft, { clientX: before[0].left, clientY: before[0].top + 5 })
|
|
fireEvent.mouseMove(screen.getByTestId('wysiwyg-canvas'), { clientX: before[0].left - 16, clientY: before[0].top + 5 })
|
|
fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
|
|
|
|
const after = getBoxes([id1, id2])
|
|
const right0 = before[0].left + before[0].width
|
|
const expLeft0 = Math.min(snap8(before[0].left - 16), right0 - 8)
|
|
const dx = expLeft0 - before[0].left
|
|
const dw = (right0 - expLeft0) - before[0].width
|
|
|
|
after.forEach((b, i) => {
|
|
expect(b.left).toBe(before[i].left + dx)
|
|
expect(b.width).toBe(before[i].width + dw)
|
|
expect(b.top).toBe(before[i].top)
|
|
expect(b.height).toBe(before[i].height)
|
|
})
|
|
})
|
|
})
|