jaybe
98d33fc0d0
- LayersPanel: 순서 변경/잠금/숨김 토글 - PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집 - exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력 - 테스트 추가 및 전체 그린 유지
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, fireEvent } from '@testing-library/react'
|
|
import { LayersPanel } from '@/components/wysiwyg/LayersPanel'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function makeFrame(): Frame {
|
|
return {
|
|
id: 'f1', width: 400, height: 300, background: '#ffffff',
|
|
layers: [
|
|
{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] },
|
|
{ id: 'l2', name: 'Text', visible: true, locked: false, objects: [] },
|
|
],
|
|
}
|
|
}
|
|
|
|
describe('LayersPanel', () => {
|
|
it('reorders layers with up/down buttons', () => {
|
|
const frame = makeFrame()
|
|
const onChange = vi.fn()
|
|
const { getByTestId, getAllByTestId } = render(<LayersPanel frame={frame} onChange={onChange} />)
|
|
const items = getAllByTestId('layer-item')
|
|
expect(items[0]).toHaveTextContent('Base')
|
|
expect(items[1]).toHaveTextContent('Text')
|
|
|
|
fireEvent.click(getByTestId('layer-down-l1'))
|
|
expect(onChange).toHaveBeenCalled()
|
|
const next = (onChange.mock.lastCall?.[0]) as Frame
|
|
expect(next.layers[0].id).toBe('l2')
|
|
expect(next.layers[1].id).toBe('l1')
|
|
})
|
|
|
|
it('toggles lock and visibility', () => {
|
|
const frame = makeFrame()
|
|
const { getByTestId } = render(<LayersPanel frame={frame} onChange={() => {}} />)
|
|
fireEvent.click(getByTestId('layer-lock-l2'))
|
|
fireEvent.click(getByTestId('layer-hide-l2'))
|
|
// no crash; states toggled reflected in aria-pressed
|
|
expect(getByTestId('layer-lock-l2')).toHaveAttribute('aria-pressed', 'true')
|
|
expect(getByTestId('layer-hide-l2')).toHaveAttribute('aria-pressed', 'true')
|
|
})
|
|
})
|