78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
|
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
|
import { Canvas } from '@/components/wysiwyg/Canvas'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
const capture = vi.fn()
|
|
|
|
type MProps = {
|
|
onDragStart?: () => void
|
|
onDrag?: (e: { left?: number; top?: number }) => void
|
|
onDragEnd?: () => void
|
|
}
|
|
|
|
vi.mock('react-moveable', () => {
|
|
const Mock = (props: Record<string, unknown>) => {
|
|
capture(props)
|
|
return <div data-testid="moveable" />
|
|
}
|
|
return { default: Mock }
|
|
})
|
|
|
|
const frame: Frame = {
|
|
id: 'f-multi',
|
|
width: 500,
|
|
height: 400,
|
|
background: '#fff',
|
|
layers: [
|
|
{ id: 'l1', name: 'L1', visible: true, locked: false, objects: [
|
|
{ id: 'o1', type: 'text', x: 10, y: 10, width: 40, height: 30, rotate: 0, zIndex: 3, props: { text: 'A', fontSize: 16, color: '#000' } },
|
|
{ id: 'o2', type: 'text', x: 80, y: 10, width: 40, height: 30, rotate: 0, zIndex: 2, props: { text: 'B', fontSize: 16, color: '#000' } },
|
|
{ id: 'o3', type: 'text', x: 200, y: 100, width: 40, height: 30, rotate: 0, zIndex: 1, props: { text: 'C', fontSize: 16, color: '#000' } },
|
|
]}
|
|
]
|
|
}
|
|
|
|
describe('Canvas multi-select and group drag', () => {
|
|
beforeEach(() => capture.mockReset())
|
|
|
|
it('allows Shift+click to select multiple objects and outlines them', async () => {
|
|
render(<Canvas frame={frame} />)
|
|
// 첫 번째 클릭으로 o1 선택
|
|
fireEvent.mouseDown(screen.getByTestId('obj-o1'))
|
|
// Shift+클릭으로 o2 추가 선택
|
|
fireEvent.mouseDown(screen.getByTestId('obj-o2'), { shiftKey: true })
|
|
|
|
const o1 = screen.getByTestId('obj-o1')
|
|
const o2 = screen.getByTestId('obj-o2')
|
|
|
|
// 두 객체 모두 선택 아웃라인(파란 outline)을 가져야 함
|
|
expect(o1).toHaveStyle({ outline: '2px solid #0ea5e9' })
|
|
expect(o2).toHaveStyle({ outline: '2px solid #0ea5e9' })
|
|
})
|
|
|
|
it('drags group via Moveable and moves both objects by same delta (grid/guide behavior separate)', async () => {
|
|
render(<Canvas frame={frame} />)
|
|
// 멀티선택 생성
|
|
fireEvent.mouseDown(screen.getByTestId('obj-o1'))
|
|
fireEvent.mouseDown(screen.getByTestId('obj-o2'), { shiftKey: true })
|
|
|
|
const last = capture.mock.calls.at(-1)?.[0] as MProps
|
|
expect(last).toBeTruthy()
|
|
|
|
// 드래그 시작/이동(왼쪽 +16, 위 +8 가정)
|
|
last.onDragStart?.()
|
|
last.onDrag?.({ left: 26, top: 18 }) // 기준 계산은 구현에 따름; 테스트는 두 객체가 동일 delta 이동했는지만 확인
|
|
|
|
const o1 = screen.getByTestId('obj-o1')
|
|
const o2 = screen.getByTestId('obj-o2')
|
|
|
|
await waitFor(() => {
|
|
// 두 객체가 같은 delta로 이동했다고 가정(정확 좌표는 스냅 규칙에 의해 결정되므로 상대 비교는 이후 강화 예정)
|
|
expect(o1.style.left).not.toBe('10px')
|
|
expect(o2.style.left).not.toBe('80px')
|
|
})
|
|
})
|
|
})
|