60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, fireEvent, waitFor } 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: 240,
|
|
background: '#ffffff',
|
|
layers: [
|
|
{
|
|
id: 'l1',
|
|
name: 'L1',
|
|
visible: true,
|
|
locked: false,
|
|
objects: [
|
|
{ id: 'o1', type: 'image', x: 16, y: 16, width: 32, height: 32, rotate: 0, zIndex: 0, props: { src: 'a', alt: '' } },
|
|
{ id: 'o2', type: 'image', x: 80, y: 16, width: 32, height: 32, rotate: 0, zIndex: 1, props: { src: 'b', alt: '' } },
|
|
],
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
describe('WYSIWYG Canvas a11y live region', () => {
|
|
it('announces selection count and guideline position changes', async () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<Canvas frame={frame} />)
|
|
|
|
const live = getByTestId('aria-live')
|
|
|
|
// initial selection exists (first object)
|
|
await waitFor(() => {
|
|
expect(live.textContent).toMatch(/선택\s*1개/)
|
|
})
|
|
|
|
// add second selection via Shift+click
|
|
fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 80, clientY: 16, shiftKey: true })
|
|
await waitFor(() => {
|
|
expect(live.textContent).toMatch(/선택\s*2개/)
|
|
})
|
|
|
|
// start dragging o2 to trigger guide updates
|
|
const canvas = getByTestId('wysiwyg-canvas')
|
|
fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 80, clientY: 16 })
|
|
fireEvent.mouseMove(canvas, { clientX: 96, clientY: 24 })
|
|
|
|
await waitFor(() => {
|
|
// guide should be visible and aria-live includes guide coordinates
|
|
const t = live.textContent || ''
|
|
expect(t).toMatch(/가이드\s*x=\d+/)
|
|
expect(t).toMatch(/y=\d+/)
|
|
})
|
|
|
|
fireEvent.mouseUp(canvas)
|
|
})
|
|
})
|