48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, screen, fireEvent } from '@testing-library/react'
|
|
import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage'
|
|
|
|
describe('WYSIWYG Builder - Layers acceptance', () => {
|
|
it('visible toggle reflects on layer button state', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
// add two texts
|
|
fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
|
|
fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
|
|
|
|
// 레이어 패널에서 visible 토글 버튼 상태만 검증
|
|
const hideBtn = screen.getByTestId('layer-hide-base')
|
|
expect(hideBtn).toHaveAttribute('aria-pressed', 'false')
|
|
fireEvent.click(hideBtn)
|
|
expect(hideBtn).toHaveAttribute('aria-pressed', 'true')
|
|
// 다시 클릭하면 보이도록 토글
|
|
fireEvent.click(hideBtn)
|
|
expect(hideBtn).toHaveAttribute('aria-pressed', 'false')
|
|
})
|
|
|
|
it('layer order changes reflect in Canvas DOM stacking order', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
// Add two layers, each with one text object labeled L1, L2
|
|
fireEvent.click(screen.getByRole('button', { name: /Add Layer/i }))
|
|
fireEvent.click(screen.getByRole('button', { name: /Add Layer/i }))
|
|
|
|
const t1 = await screen.findByText('L1')
|
|
const t2 = await screen.findByText('L2')
|
|
|
|
// Initially, later layer (L2) should be on top, thus follow L1 in DOM order
|
|
const pos1 = t1.compareDocumentPosition(t2)
|
|
expect(pos1 & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
|
|
|
|
// Move L2 up (towards front doesn't change since it's already last), then move L2 down to go below L1
|
|
const up2 = screen.getByTestId('layer-up-layer-2')
|
|
const down2 = screen.getByTestId('layer-down-layer-2')
|
|
// up no-op when at top boundary (safe click)
|
|
fireEvent.click(up2)
|
|
// now move it down once (below)
|
|
fireEvent.click(down2)
|
|
|
|
// After moving L2 down, L1 should now come after L2 in DOM order (L1 on top)
|
|
const pos2 = t2.compareDocumentPosition(t1)
|
|
expect(pos2 & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
|
|
})
|
|
})
|