72 lines
2.5 KiB
TypeScript
72 lines
2.5 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: 400,
|
|
height: 300,
|
|
background: '#ffffff',
|
|
layers: [
|
|
{
|
|
id: 'l1',
|
|
name: 'L1',
|
|
visible: true,
|
|
locked: false,
|
|
objects: [
|
|
{ id: 'o1', type: 'image', x: 101, y: 100, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
|
|
],
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
describe('WYSIWYG Canvas keyboard nudge with 8px snap', () => {
|
|
it('ArrowRight nudges and snaps x to nearest 8px grid', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<Canvas frame={frame} />)
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
fireEvent.keyDown(canvas, { key: 'ArrowRight' })
|
|
const obj = getByTestId('obj-o1')
|
|
expect(obj).toHaveStyle({ left: '104px' }) // 101 + 1 => 102 -> snap8 => 104
|
|
})
|
|
|
|
it('ArrowUp nudges and snaps y to nearest 8px grid', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<Canvas frame={frame} />)
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
fireEvent.keyDown(canvas, { key: 'ArrowUp' })
|
|
const obj = getByTestId('obj-o1')
|
|
expect(obj).toHaveStyle({ top: '96px' }) // 100 - 1 => 99 -> snap8 => 96
|
|
})
|
|
|
|
it('Shift+ArrowRight nudges by 1px without grid snap', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<Canvas frame={frame} />)
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
fireEvent.keyDown(canvas, { key: 'ArrowRight', shiftKey: true })
|
|
const obj = getByTestId('obj-o1')
|
|
expect(obj).toHaveStyle({ left: '102px' }) // 101 + 1 => 102 (no snap)
|
|
})
|
|
|
|
it('Shift+ArrowUp nudges by 1px without grid snap', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<Canvas frame={frame} />)
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
fireEvent.keyDown(canvas, { key: 'ArrowUp', shiftKey: true })
|
|
const obj = getByTestId('obj-o1')
|
|
expect(obj).toHaveStyle({ top: '99px' }) // 100 - 1 => 99 (no snap)
|
|
})
|
|
|
|
it('Alt+ArrowRight nudges by 16px and snaps to grid', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<Canvas frame={frame} />)
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
fireEvent.keyDown(canvas, { key: 'ArrowRight', altKey: true })
|
|
const obj = getByTestId('obj-o1')
|
|
expect(obj).toHaveStyle({ left: '120px' }) // 101 + 16 = 117 -> snap8 => 120
|
|
})
|
|
})
|