feat: A2UI renderer for filters, tables, cards, forms
This commit is contained in:
Ken
@@ -0,0 +1,252 @@
|
||||
import { useState } from 'react'
|
||||
import { IconFilter, IconTable, IconCards, IconForms } from '@tabler/icons-react'
|
||||
import type { A2UIBlock } from '../lib/types'
|
||||
|
||||
interface A2UIRendererProps {
|
||||
block: A2UIBlock
|
||||
onAction?: (action: string, data: Record<string, unknown>) => void
|
||||
}
|
||||
|
||||
// ─── Filters ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function FiltersRenderer({ block, onAction }: A2UIRendererProps & { block: Extract<A2UIBlock, { type: 'filters' }> }) {
|
||||
const [activeLabels, setActiveLabels] = useState<Set<string>>(new Set())
|
||||
|
||||
function handleToggle(label: string) {
|
||||
const isActive = activeLabels.has(label)
|
||||
setActiveLabels(prev => {
|
||||
const next = new Set(prev)
|
||||
if (isActive) next.delete(label)
|
||||
else next.add(label)
|
||||
return next
|
||||
})
|
||||
onAction?.('filter_toggle', { label, active: !isActive })
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className='tool-call-card'
|
||||
style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', alignItems: 'center' }}
|
||||
>
|
||||
<IconFilter size={16} color='#7aa2f7' style={{ marginRight: 4 }} />
|
||||
{block.filters.map(option => {
|
||||
const active = activeLabels.has(option.label)
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleToggle(option.label)}
|
||||
style={{
|
||||
padding: '0.3rem 0.6rem',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid',
|
||||
borderColor: active ? '#5a7aba' : '#3a3a5a',
|
||||
background: active ? '#2a3a6a' : 'transparent',
|
||||
color: active ? '#ffffff' : '#8888aa',
|
||||
fontSize: '0.8rem',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Table ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function TableRenderer({ block }: { block: Extract<A2UIBlock, { type: 'table' }> }) {
|
||||
return (
|
||||
<div className='tool-call-card' style={{ overflowX: 'auto' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.4rem' }}>
|
||||
<IconTable size={16} color='#7aa2f7' />
|
||||
<span style={{ color: '#8888aa', fontSize: '0.8rem' }}>Data Table</span>
|
||||
</div>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
{block.headers.map((header, i) => (
|
||||
<th
|
||||
key={i}
|
||||
style={{
|
||||
textAlign: 'left',
|
||||
padding: '0.3rem 0.5rem',
|
||||
borderBottom: '1px solid #2a2a4a',
|
||||
color: '#aaaacc',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{block.rows.map((row, ri) => (
|
||||
<tr key={ri}>
|
||||
{row.map((cell, ci) => (
|
||||
<td
|
||||
key={ci}
|
||||
style={{
|
||||
padding: '0.3rem 0.5rem',
|
||||
borderBottom: '1px solid #1a1a2e',
|
||||
color: '#c0c0d0',
|
||||
}}
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Cards ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function CardsRenderer({ block }: { block: Extract<A2UIBlock, { type: 'cards' }> }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
|
||||
gap: '0.5rem',
|
||||
margin: '0.5rem 0',
|
||||
}}
|
||||
>
|
||||
{block.items.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className='tool-call-card'
|
||||
style={{ cursor: item.url ? 'pointer' : undefined }}
|
||||
onClick={item.url ? () => window.open(item.url, '_blank') : undefined}
|
||||
>
|
||||
<div style={{ fontWeight: 600, color: '#e0e0e0' }}>{item.title}</div>
|
||||
{item.price != null && (
|
||||
<div style={{ color: '#7af7a2', fontWeight: 600, fontSize: '0.9rem' }}>{item.price}</div>
|
||||
)}
|
||||
{item.description && (
|
||||
<div style={{ color: '#8888aa', fontSize: '0.75rem', marginTop: 4 }}>{item.description}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Form ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function FormRenderer({
|
||||
block,
|
||||
onAction,
|
||||
}: {
|
||||
block: Extract<A2UIBlock, { type: 'form' }>
|
||||
onAction?: (action: string, data: Record<string, unknown>) => void
|
||||
}) {
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const data: Record<string, unknown> = {}
|
||||
formData.forEach((value, key) => {
|
||||
data[key] = value
|
||||
})
|
||||
onAction?.('form_submit', data)
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '0.3rem',
|
||||
background: '#1e2a4a',
|
||||
border: '1px solid #3a3a5a',
|
||||
borderRadius: '4px',
|
||||
color: '#e0e0e0',
|
||||
fontSize: '0.8rem',
|
||||
boxSizing: 'border-box',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='tool-call-card'>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.4rem' }}>
|
||||
<IconForms size={16} color='#7aa2f7' />
|
||||
<span style={{ color: '#8888aa', fontSize: '0.8rem' }}>Input Form</span>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
|
||||
{block.fields.map(field => (
|
||||
<div key={field.name}>
|
||||
<label style={{ fontSize: '0.75rem', color: '#8888aa', display: 'block' }}>
|
||||
{field.label || field.name}
|
||||
</label>
|
||||
{field.type === 'select' ? (
|
||||
<select name={field.name} style={inputStyle}>
|
||||
{field.options?.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input name={field.name} type={field.type} style={inputStyle} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type='submit'
|
||||
style={{
|
||||
padding: '0.4rem 0.8rem',
|
||||
background: '#3a5aba',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
marginTop: '0.3rem',
|
||||
alignSelf: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{block.submitLabel || 'Submit'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Renderer ───────────────────────────────────────────────────────────
|
||||
|
||||
export function A2UIRenderer({ block, onAction }: A2UIRendererProps) {
|
||||
switch (block.type) {
|
||||
case 'filters':
|
||||
return <FiltersRenderer block={block} onAction={onAction} />
|
||||
case 'table':
|
||||
return <TableRenderer block={block} />
|
||||
case 'cards':
|
||||
return <CardsRenderer block={block} />
|
||||
case 'form':
|
||||
return <FormRenderer block={block} onAction={onAction} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// ─── parseA2UIBlocks ─────────────────────────────────────────────────────────
|
||||
|
||||
export function parseA2UIBlocks(content: string): A2UIBlock[] {
|
||||
const blocks: A2UIBlock[] = []
|
||||
const regex = /```a2ui\s*\n([\s\S]*?)```/g
|
||||
let match: RegExpExecArray | null
|
||||
|
||||
while ((match = regex.exec(content)) !== null) {
|
||||
try {
|
||||
const parsed = JSON.parse(match[1])
|
||||
if (parsed && parsed.type) {
|
||||
blocks.push(parsed as A2UIBlock)
|
||||
}
|
||||
} catch {
|
||||
// Silently skip invalid JSON
|
||||
}
|
||||
}
|
||||
|
||||
return blocks
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { A2UIRenderer, parseA2UIBlocks } from '../components/A2UIRenderer'
|
||||
import type { A2UIBlock } from '../lib/types'
|
||||
|
||||
// Mock @tabler/icons-react so icon SVGs don't cause jsdom issues
|
||||
vi.mock('@tabler/icons-react', () => ({
|
||||
IconFilter: ({ size, color }: { size?: number; color?: string }) => (
|
||||
<span data-testid='icon-filter' data-size={size} data-color={color} />
|
||||
),
|
||||
IconTable: ({ size, color }: { size?: number; color?: string }) => (
|
||||
<span data-testid='icon-table' data-size={size} data-color={color} />
|
||||
),
|
||||
IconCards: ({ size, color }: { size?: number; color?: string }) => (
|
||||
<span data-testid='icon-cards' data-size={size} data-color={color} />
|
||||
),
|
||||
IconForms: ({ size, color }: { size?: number; color?: string }) => (
|
||||
<span data-testid='icon-forms' data-size={size} data-color={color} />
|
||||
),
|
||||
}))
|
||||
|
||||
// ─── parseA2UIBlocks ─────────────────────────────────────────────────────────
|
||||
|
||||
describe('parseA2UIBlocks', () => {
|
||||
it('extracts a single a2ui block from content', () => {
|
||||
const content = '```a2ui\n{"type":"filters","filters":[]}\n```'
|
||||
const blocks = parseA2UIBlocks(content)
|
||||
expect(blocks).toHaveLength(1)
|
||||
expect(blocks[0].type).toBe('filters')
|
||||
})
|
||||
|
||||
it('extracts multiple a2ui blocks from content', () => {
|
||||
const content = [
|
||||
'```a2ui\n{"type":"filters","filters":[]}\n```',
|
||||
' some text ',
|
||||
'```a2ui\n{"type":"table","headers":[],"rows":[]}\n```',
|
||||
].join('')
|
||||
const blocks = parseA2UIBlocks(content)
|
||||
expect(blocks).toHaveLength(2)
|
||||
expect(blocks[0].type).toBe('filters')
|
||||
expect(blocks[1].type).toBe('table')
|
||||
})
|
||||
|
||||
it('silently skips invalid JSON', () => {
|
||||
const content = '```a2ui\nnot valid json\n```'
|
||||
const blocks = parseA2UIBlocks(content)
|
||||
expect(blocks).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('skips blocks without a type field', () => {
|
||||
const content = '```a2ui\n{"data":"no type"}\n```'
|
||||
const blocks = parseA2UIBlocks(content)
|
||||
expect(blocks).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('returns empty array when no a2ui blocks present', () => {
|
||||
const content = 'plain text with ```js\nsome code\n```'
|
||||
const blocks = parseA2UIBlocks(content)
|
||||
expect(blocks).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('returns the parsed block as A2UIBlock with all fields', () => {
|
||||
const json = JSON.stringify({
|
||||
type: 'table',
|
||||
headers: ['Name', 'Price'],
|
||||
rows: [['Apple', '$1']],
|
||||
})
|
||||
const content = `\`\`\`a2ui\n${json}\n\`\`\``
|
||||
const blocks = parseA2UIBlocks(content)
|
||||
const block = blocks[0] as import('../lib/types').A2UITableBlock
|
||||
expect(block.headers).toEqual(['Name', 'Price'])
|
||||
expect(block.rows).toEqual([['Apple', '$1']])
|
||||
})
|
||||
})
|
||||
|
||||
// ─── A2UIRenderer — filters ─────────────────────────────────────────────────
|
||||
|
||||
describe('A2UIRenderer — filters', () => {
|
||||
const filtersBlock: A2UIBlock = {
|
||||
type: 'filters',
|
||||
filters: [
|
||||
{ label: 'In Stock', value: 'in_stock' },
|
||||
{ label: 'On Sale', value: 'on_sale' },
|
||||
],
|
||||
}
|
||||
|
||||
it('renders inside a tool-call-card container', () => {
|
||||
const { container } = render(<A2UIRenderer block={filtersBlock} />)
|
||||
expect(container.querySelector('.tool-call-card')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders the IconFilter icon', () => {
|
||||
render(<A2UIRenderer block={filtersBlock} />)
|
||||
expect(screen.getByTestId('icon-filter')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders a button for each filter option', () => {
|
||||
const { container } = render(<A2UIRenderer block={filtersBlock} />)
|
||||
const buttons = container.querySelectorAll('button')
|
||||
expect(buttons).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('renders filter label text in buttons', () => {
|
||||
render(<A2UIRenderer block={filtersBlock} />)
|
||||
expect(screen.getByText('In Stock')).toBeTruthy()
|
||||
expect(screen.getByText('On Sale')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('calls onAction with filter_toggle and label when button clicked', () => {
|
||||
const onAction = vi.fn()
|
||||
render(<A2UIRenderer block={filtersBlock} onAction={onAction} />)
|
||||
fireEvent.click(screen.getByText('In Stock'))
|
||||
expect(onAction).toHaveBeenCalledWith('filter_toggle', {
|
||||
label: 'In Stock',
|
||||
active: true,
|
||||
})
|
||||
})
|
||||
|
||||
it('toggles active state on second click (active: false)', () => {
|
||||
const onAction = vi.fn()
|
||||
render(<A2UIRenderer block={filtersBlock} onAction={onAction} />)
|
||||
fireEvent.click(screen.getByText('In Stock'))
|
||||
fireEvent.click(screen.getByText('In Stock'))
|
||||
expect(onAction).toHaveBeenLastCalledWith('filter_toggle', {
|
||||
label: 'In Stock',
|
||||
active: false,
|
||||
})
|
||||
})
|
||||
|
||||
it('does not throw when onAction is not provided', () => {
|
||||
render(<A2UIRenderer block={filtersBlock} />)
|
||||
expect(() => fireEvent.click(screen.getByText('In Stock'))).not.toThrow()
|
||||
})
|
||||
})
|
||||
|
||||
// ─── A2UIRenderer — table ───────────────────────────────────────────────────
|
||||
|
||||
describe('A2UIRenderer — table', () => {
|
||||
const tableBlock: A2UIBlock = {
|
||||
type: 'table',
|
||||
headers: ['Name', 'Price', 'Stock'],
|
||||
rows: [
|
||||
['Apple', '$1.00', '50'],
|
||||
['Banana', '$0.50', '100'],
|
||||
],
|
||||
}
|
||||
|
||||
it('renders inside a tool-call-card container', () => {
|
||||
const { container } = render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(container.querySelector('.tool-call-card')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders the IconTable icon', () => {
|
||||
render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(screen.getByTestId('icon-table')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders "Data Table" header label', () => {
|
||||
render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(screen.getByText('Data Table')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders a <table> element', () => {
|
||||
const { container } = render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(container.querySelector('table')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders all column headers', () => {
|
||||
render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(screen.getByText('Name')).toBeTruthy()
|
||||
expect(screen.getByText('Price')).toBeTruthy()
|
||||
expect(screen.getByText('Stock')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders all row data', () => {
|
||||
render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(screen.getByText('Apple')).toBeTruthy()
|
||||
expect(screen.getByText('$1.00')).toBeTruthy()
|
||||
expect(screen.getByText('Banana')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders correct number of th elements', () => {
|
||||
const { container } = render(<A2UIRenderer block={tableBlock} />)
|
||||
expect(container.querySelectorAll('th')).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('renders correct number of td elements', () => {
|
||||
const { container } = render(<A2UIRenderer block={tableBlock} />)
|
||||
// 2 rows × 3 cols = 6 td
|
||||
expect(container.querySelectorAll('td')).toHaveLength(6)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── A2UIRenderer — cards ───────────────────────────────────────────────────
|
||||
|
||||
describe('A2UIRenderer — cards', () => {
|
||||
const cardsBlock: A2UIBlock = {
|
||||
type: 'cards',
|
||||
items: [
|
||||
{
|
||||
title: 'Widget Pro',
|
||||
description: 'Best widget ever',
|
||||
price: '$29.99',
|
||||
url: 'https://example.com/widget',
|
||||
},
|
||||
{ title: 'Gadget Basic', description: 'Simple gadget' },
|
||||
],
|
||||
}
|
||||
|
||||
it('renders a grid container with multiple tool-call-card elements', () => {
|
||||
const { container } = render(<A2UIRenderer block={cardsBlock} />)
|
||||
const cards = container.querySelectorAll('.tool-call-card')
|
||||
expect(cards.length).toBeGreaterThanOrEqual(2)
|
||||
})
|
||||
|
||||
it('renders each card title', () => {
|
||||
render(<A2UIRenderer block={cardsBlock} />)
|
||||
expect(screen.getByText('Widget Pro')).toBeTruthy()
|
||||
expect(screen.getByText('Gadget Basic')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders price when present', () => {
|
||||
render(<A2UIRenderer block={cardsBlock} />)
|
||||
expect(screen.getByText('$29.99')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders description when present', () => {
|
||||
render(<A2UIRenderer block={cardsBlock} />)
|
||||
expect(screen.getByText('Best widget ever')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('opens url in new tab on click when url is present', () => {
|
||||
const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
|
||||
render(<A2UIRenderer block={cardsBlock} />)
|
||||
fireEvent.click(screen.getByText('Widget Pro'))
|
||||
expect(openSpy).toHaveBeenCalledWith('https://example.com/widget', '_blank')
|
||||
openSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('does not set cursor pointer on cards without url', () => {
|
||||
const { container } = render(<A2UIRenderer block={cardsBlock} />)
|
||||
// Find the card for "Gadget Basic" — the second tool-call-card
|
||||
const cards = container.querySelectorAll('.tool-call-card')
|
||||
const gadgetCard = Array.from(cards).find(
|
||||
card => card.textContent?.includes('Gadget Basic')
|
||||
)
|
||||
expect(gadgetCard).toBeTruthy()
|
||||
expect((gadgetCard as HTMLElement).style.cursor).not.toBe('pointer')
|
||||
})
|
||||
})
|
||||
|
||||
// ─── A2UIRenderer — form ────────────────────────────────────────────────────
|
||||
|
||||
describe('A2UIRenderer — form', () => {
|
||||
const formBlock: A2UIBlock = {
|
||||
type: 'form',
|
||||
submitLabel: 'Search',
|
||||
fields: [
|
||||
{ name: 'query', type: 'text', label: 'Search Query' },
|
||||
{ name: 'max_price', type: 'number', label: 'Max Price' },
|
||||
{
|
||||
name: 'category',
|
||||
type: 'select',
|
||||
label: 'Category',
|
||||
options: [
|
||||
{ label: 'Electronics', value: 'electronics' },
|
||||
{ label: 'Books', value: 'books' },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
it('renders inside a tool-call-card container', () => {
|
||||
const { container } = render(<A2UIRenderer block={formBlock} />)
|
||||
expect(container.querySelector('.tool-call-card')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders the IconForms icon', () => {
|
||||
render(<A2UIRenderer block={formBlock} />)
|
||||
expect(screen.getByTestId('icon-forms')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders "Input Form" header label', () => {
|
||||
render(<A2UIRenderer block={formBlock} />)
|
||||
expect(screen.getByText('Input Form')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders a <form> element', () => {
|
||||
const { container } = render(<A2UIRenderer block={formBlock} />)
|
||||
expect(container.querySelector('form')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders labels for each field', () => {
|
||||
render(<A2UIRenderer block={formBlock} />)
|
||||
expect(screen.getByText('Search Query')).toBeTruthy()
|
||||
expect(screen.getByText('Max Price')).toBeTruthy()
|
||||
expect(screen.getByText('Category')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders text input for text field type', () => {
|
||||
const { container } = render(<A2UIRenderer block={formBlock} />)
|
||||
const textInput = container.querySelector('input[type="text"]')
|
||||
expect(textInput).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders number input for number field type', () => {
|
||||
const { container } = render(<A2UIRenderer block={formBlock} />)
|
||||
const numInput = container.querySelector('input[type="number"]')
|
||||
expect(numInput).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders a <select> for select field type', () => {
|
||||
const { container } = render(<A2UIRenderer block={formBlock} />)
|
||||
expect(container.querySelector('select')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders select options', () => {
|
||||
render(<A2UIRenderer block={formBlock} />)
|
||||
expect(screen.getByText('Electronics')).toBeTruthy()
|
||||
expect(screen.getByText('Books')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders submit button with submitLabel text', () => {
|
||||
render(<A2UIRenderer block={formBlock} />)
|
||||
expect(screen.getByText('Search')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('uses "Submit" as default submit label when submitLabel absent', () => {
|
||||
const blockWithoutLabel: A2UIBlock = {
|
||||
type: 'form',
|
||||
fields: [{ name: 'q', type: 'text' }],
|
||||
submitLabel: '',
|
||||
}
|
||||
render(<A2UIRenderer block={blockWithoutLabel} />)
|
||||
expect(screen.getByText('Submit')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('uses field.name as label when field.label is absent', () => {
|
||||
const blockNoLabel: A2UIBlock = {
|
||||
type: 'form',
|
||||
fields: [{ name: 'my_field', type: 'text' }],
|
||||
submitLabel: 'Go',
|
||||
}
|
||||
render(<A2UIRenderer block={blockNoLabel} />)
|
||||
expect(screen.getByText('my_field')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('calls onAction with form_submit and form data on submit', () => {
|
||||
const onAction = vi.fn()
|
||||
const { container } = render(
|
||||
<A2UIRenderer block={formBlock} onAction={onAction} />
|
||||
)
|
||||
const form = container.querySelector('form')!
|
||||
fireEvent.submit(form)
|
||||
expect(onAction).toHaveBeenCalledWith(
|
||||
'form_submit',
|
||||
expect.any(Object)
|
||||
)
|
||||
})
|
||||
|
||||
it('prevents default form submission', () => {
|
||||
const { container } = render(<A2UIRenderer block={formBlock} />)
|
||||
const form = container.querySelector('form')!
|
||||
const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
|
||||
form.dispatchEvent(submitEvent)
|
||||
expect(submitEvent.defaultPrevented).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── A2UIRenderer — default / unknown type ──────────────────────────────────
|
||||
|
||||
describe('A2UIRenderer — default', () => {
|
||||
it('returns null for unknown block type', () => {
|
||||
// Cast to bypass TypeScript — simulates runtime unknown type
|
||||
const unknown = { type: 'unknown' } as unknown as A2UIBlock
|
||||
const { container } = render(<A2UIRenderer block={unknown} />)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user