38 lines
1.8 KiB
TypeScript
38 lines
1.8 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 Input(Text)', () => {
|
|
it('adds an Input, edits props in Properties, and reflects on Canvas', async () => {
|
|
render(<WysiwygBuilderPage />)
|
|
|
|
// Add Input
|
|
fireEvent.click(screen.getByRole('button', { name: /Add Input/i }))
|
|
|
|
const obj = await screen.findByTestId(/obj-input-/)
|
|
// select to expose props
|
|
fireEvent.mouseDown(obj, { clientX: 80, clientY: 80 })
|
|
fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
|
|
|
|
// edit props in Properties panel
|
|
const panel = await screen.findByLabelText('Properties Panel')
|
|
const nameInput = panel.querySelector('input[aria-label="Name"]') as HTMLInputElement
|
|
const labelInput = panel.querySelector('input[aria-label="Label"]') as HTMLInputElement
|
|
const placeholderInput = panel.querySelector('input[aria-label="Placeholder"]') as HTMLInputElement
|
|
const requiredCheckbox = panel.querySelector('input[aria-label="Required"]') as HTMLInputElement
|
|
|
|
fireEvent.change(nameInput, { target: { value: 'email' } })
|
|
fireEvent.change(labelInput, { target: { value: 'Email Address' } })
|
|
fireEvent.change(placeholderInput, { target: { value: 'you@example.com' } })
|
|
fireEvent.click(requiredCheckbox)
|
|
|
|
// Canvas should reflect label and placeholder
|
|
const rendered = await screen.findByTestId(/obj-input-/)
|
|
expect(rendered).toHaveTextContent('Email Address')
|
|
const inputEl = rendered.querySelector('input') as HTMLInputElement
|
|
expect(inputEl).toBeTruthy()
|
|
expect(inputEl.placeholder).toBe('you@example.com')
|
|
expect(inputEl.required).toBe(true)
|
|
})
|
|
})
|