37 lines
1.9 KiB
TypeScript
37 lines
1.9 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 - Form Checkbox', () => {
|
|
it('adds a Checkbox group, edits props, and reflects on Canvas', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
|
|
// Add Checkbox
|
|
fireEvent.click(screen.getByRole('button', { name: /Add Checkbox/i }))
|
|
|
|
const obj = await screen.findByTestId(/obj-checkbox-/)
|
|
fireEvent.mouseDown(obj, { clientX: 80, clientY: 80 })
|
|
fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
|
|
|
|
const panel = await screen.findByLabelText('Properties Panel')
|
|
const nameInput = panel.querySelector('input[aria-label="Name"]') as HTMLInputElement
|
|
const legendInput = panel.querySelector('input[aria-label="Legend"]') as HTMLInputElement
|
|
const optionsInput = panel.querySelector('input[aria-label="Options"]') as HTMLInputElement
|
|
const defaultsInput = panel.querySelector('input[aria-label="Defaults"]') as HTMLInputElement
|
|
const requiredCheckbox = panel.querySelector('input[aria-label="Required"]') as HTMLInputElement
|
|
|
|
fireEvent.change(nameInput, { target: { value: 'agree' } })
|
|
fireEvent.change(legendInput, { target: { value: 'Agreements' } })
|
|
fireEvent.change(optionsInput, { target: { value: 'One,Two,Three' } })
|
|
fireEvent.change(defaultsInput, { target: { value: 'Two,Three' } })
|
|
fireEvent.click(requiredCheckbox)
|
|
|
|
const rendered = await screen.findByTestId(/obj-checkbox-/)
|
|
expect(rendered).toHaveTextContent('Agreements')
|
|
const inputs = Array.from(rendered.querySelectorAll('input[type="checkbox"]')) as HTMLInputElement[]
|
|
expect(inputs.map(i => i.value)).toEqual(['One','Two','Three'])
|
|
const checkedValues = inputs.filter(i => i.checked).map(i => i.value)
|
|
expect(checkedValues).toEqual(['Two','Three'])
|
|
})
|
|
})
|