66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, screen, fireEvent } from '@testing-library/react'
|
|
import { Canvas } from '@/components/wysiwyg/Canvas'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function makeFrame(): Frame {
|
|
return {
|
|
id: 'f',
|
|
width: 400,
|
|
height: 300,
|
|
background: '#111111',
|
|
layers: [
|
|
{
|
|
id: 'base',
|
|
name: 'Base',
|
|
visible: true,
|
|
locked: false,
|
|
objects: [
|
|
{ id: 'o1', type: 'text', x: 40, y: 40, width: 80, height: 40, rotate: 0, zIndex: 0, props: { text: 'A', fontSize: 16, color: '#fff' } },
|
|
{ id: 'o2', type: 'text', x: 200, y: 40, width: 80, height: 40, rotate: 0, zIndex: 1, props: { text: 'B', fontSize: 16, color: '#fff' } },
|
|
],
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
describe('Canvas resize behavior (단일 선택 UX)', () => {
|
|
it('단일 선택일 때 우하단 핸들 드래그로만 크기가 변하고, 다른 객체는 그대로 유지된다', () => {
|
|
const frame = makeFrame()
|
|
render(<Canvas frame={frame} />)
|
|
const canvas = screen.getByTestId('wysiwyg-canvas')
|
|
const obj1 = screen.getByTestId('obj-o1') as HTMLDivElement
|
|
const obj2 = screen.getByTestId('obj-o2') as HTMLDivElement
|
|
|
|
// o1만 선택
|
|
fireEvent.mouseDown(obj1, { clientX: 50, clientY: 50 })
|
|
|
|
const handle = screen.getByTestId('resize-handle-o1')
|
|
// 우하단 방향으로 드래그 → width/height 증가
|
|
fireEvent.mouseDown(handle, { clientX: 120, clientY: 80 })
|
|
fireEvent.mouseMove(canvas, { clientX: 180, clientY: 140 })
|
|
fireEvent.mouseUp(canvas)
|
|
|
|
const w1 = parseInt(obj1.style.width, 10)
|
|
const h1 = parseInt(obj1.style.height, 10)
|
|
expect(w1).toBeGreaterThan(80)
|
|
expect(h1).toBeGreaterThan(40)
|
|
|
|
// o2는 변하지 않는다
|
|
const w2 = parseInt(obj2.style.width, 10)
|
|
const h2 = parseInt(obj2.style.height, 10)
|
|
expect(w2).toBe(80)
|
|
expect(h2).toBe(40)
|
|
|
|
// 반대 방향으로 드래그하면 줄어든다
|
|
const handle2 = screen.getByTestId('resize-handle-o1')
|
|
fireEvent.mouseDown(handle2, { clientX: 180, clientY: 140 })
|
|
fireEvent.mouseMove(canvas, { clientX: 130, clientY: 100 })
|
|
fireEvent.mouseUp(canvas)
|
|
const w1b = parseInt(obj1.style.width, 10)
|
|
const h1b = parseInt(obj1.style.height, 10)
|
|
expect(w1b).toBeLessThan(w1)
|
|
expect(h1b).toBeLessThan(h1)
|
|
})
|
|
})
|