jaybe
98d33fc0d0
- LayersPanel: 순서 변경/잠금/숨김 토글 - PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집 - exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력 - 테스트 추가 및 전체 그린 유지
33 lines
1.7 KiB
TypeScript
33 lines
1.7 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, fireEvent } from '@testing-library/react'
|
|
import { PropsPanel } from '@/components/wysiwyg/PropsPanel'
|
|
import type { WObject } from '@/lib/wysiwyg/schema'
|
|
|
|
describe('PropsPanel', () => {
|
|
it('edits position/size/rotate numeric fields', () => {
|
|
const obj: WObject = { id: 'o1', type: 'image', x: 10, y: 20, width: 100, height: 80, rotate: 0, zIndex: 0, props: { src: 'a', alt: '' } }
|
|
const calls: WObject[] = []
|
|
const { getByLabelText } = render(<PropsPanel object={obj} onChange={(n: WObject) => calls.push(n)} />)
|
|
fireEvent.change(getByLabelText('X'), { target: { value: '12' } })
|
|
fireEvent.change(getByLabelText('Y'), { target: { value: '30' } })
|
|
fireEvent.change(getByLabelText('Width'), { target: { value: '120' } })
|
|
fireEvent.change(getByLabelText('Height'), { target: { value: '88' } })
|
|
fireEvent.change(getByLabelText('Rotate'), { target: { value: '15' } })
|
|
const last = calls.at(-1)!
|
|
expect(last.x).toBe(12)
|
|
expect(last.y).toBe(30)
|
|
expect(last.width).toBe(120)
|
|
expect(last.height).toBe(88)
|
|
expect(last.rotate).toBe(15)
|
|
})
|
|
|
|
it('edits image src/alt', () => {
|
|
const obj: WObject = { id: 'o2', type: 'image', x: 0, y: 0, width: 10, height: 10, rotate: 0, zIndex: 0, props: { src: 'x', alt: 'a' } }
|
|
const calls: WObject[] = []
|
|
const { getByLabelText } = render(<PropsPanel object={obj} onChange={(n: WObject) => calls.push(n)} />)
|
|
fireEvent.change(getByLabelText('Src'), { target: { value: 'https://example.com/img.jpg' } })
|
|
fireEvent.change(getByLabelText('Alt'), { target: { value: 'Example' } })
|
|
expect(calls.at(-1)?.props).toEqual({ src: 'https://example.com/img.jpg', alt: 'Example' })
|
|
})
|
|
})
|