42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, fireEvent } from '@testing-library/react'
|
|
import { Canvas } from '@/components/wysiwyg/Canvas'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function makeFrame(): Frame {
|
|
return {
|
|
id: 'f1',
|
|
width: 320,
|
|
height: 200,
|
|
background: '#ffffff',
|
|
layers: [
|
|
{ id: 'l1', name: 'L1', visible: true, locked: false, objects: [
|
|
{ id: 'o1', type: 'image', x: 101, y: 99, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
|
|
] },
|
|
],
|
|
}
|
|
}
|
|
|
|
describe('Canvas guidelines during drag with snap', () => {
|
|
it('shows x/y guide lines snapping to 8px grid while dragging', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId, queryByTestId } = render(<Canvas frame={frame} />)
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
const obj = getByTestId('obj-o1')
|
|
|
|
expect(queryByTestId('guide-x')).toBeNull()
|
|
expect(queryByTestId('guide-y')).toBeNull()
|
|
|
|
fireEvent.mouseDown(obj, { clientX: 200, clientY: 150 })
|
|
fireEvent.mouseMove(canvas, { clientX: 203, clientY: 151 })
|
|
|
|
expect(getByTestId('guide-x')).toBeInTheDocument()
|
|
expect(getByTestId('guide-y')).toBeInTheDocument()
|
|
|
|
fireEvent.mouseUp(canvas)
|
|
|
|
expect(queryByTestId('guide-x')).toBeNull()
|
|
expect(queryByTestId('guide-y')).toBeNull()
|
|
})
|
|
})
|