40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
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'
|
|
|
|
const frame: Frame = {
|
|
id: 'f-marquee',
|
|
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: 12, 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 marquee multi-select', () => {
|
|
it('selects objects intersecting the marquee rectangle', () => {
|
|
render(<Canvas frame={frame} />)
|
|
const canvas = screen.getByTestId('wysiwyg-canvas')
|
|
|
|
// 캔버스 빈 공간에서 드래그 박스(마퀴) 생성: (5,5)→(130,50)
|
|
fireEvent.mouseDown(canvas, { clientX: 5, clientY: 5 })
|
|
fireEvent.mouseMove(canvas, { clientX: 130, clientY: 50 })
|
|
fireEvent.mouseUp(canvas)
|
|
|
|
const o1 = screen.getByTestId('obj-o1')
|
|
const o2 = screen.getByTestId('obj-o2')
|
|
const o3 = screen.getByTestId('obj-o3')
|
|
|
|
expect(o1).toHaveStyle({ outline: '2px solid #0ea5e9' })
|
|
expect(o2).toHaveStyle({ outline: '2px solid #0ea5e9' })
|
|
expect(o3).toHaveStyle({ outline: 'none' })
|
|
})
|
|
})
|