51 lines
2.9 KiB
TypeScript
51 lines
2.9 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { exportFrame } from '@/lib/wysiwyg/export'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function baseFrame(): Frame {
|
|
return {
|
|
id: 'f', width: 400, height: 300, background: '#ffffff',
|
|
layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
|
|
}
|
|
}
|
|
|
|
describe('wysiwyg export - forms aria-describedby(help)', () => {
|
|
it('input: adds help element and aria-describedby linkage', () => {
|
|
const f = baseFrame()
|
|
f.layers[0].objects.push({ id: 'in1', type: 'input', x: 10, y: 20, width: 260, height: 48, rotate: 0, zIndex: 0, props: { name: 'email', label: 'Email', placeholder: '', required: false, help: 'We will not spam you.' } })
|
|
const out = exportFrame(f)
|
|
expect(out.html).toMatch(/<div id="in1">[\s\S]*<input id="in1-control" name="email" aria-describedby="in1-control-help"\/>[\s\S]*<small id="in1-control-help"/)
|
|
expect(out.html).toMatch(/We will not spam you\./)
|
|
})
|
|
|
|
it('select: adds help and aria-describedby', () => {
|
|
const f = baseFrame()
|
|
f.layers[0].objects.push({ id: 'sel1', type: 'select', x: 0, y: 0, width: 100, height: 30, rotate: 0, zIndex: 0, props: { name: 'size', label: 'Size', options: ['S'], defaultValue: 'S', help: 'Choose wisely.' } })
|
|
const out = exportFrame(f)
|
|
expect(out.html).toMatch(/<select id="sel1-control" name="size" aria-describedby="sel1-control-help">/)
|
|
expect(out.html).toMatch(/<small id="sel1-control-help"/)
|
|
})
|
|
|
|
it('textarea: adds help and aria-describedby', () => {
|
|
const f = baseFrame()
|
|
f.layers[0].objects.push({ id: 'ta1', type: 'textarea', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'msg', label: 'Msg', placeholder: '', rows: 3, required: false, help: 'Say hello.' } })
|
|
const out = exportFrame(f)
|
|
expect(out.html).toMatch(/<textarea id="ta1-control" name="msg" rows="3" aria-describedby="ta1-control-help"><\/textarea>/)
|
|
expect(out.html).toMatch(/<small id="ta1-control-help"/)
|
|
})
|
|
|
|
it('radio: adds group help (fieldset) and does not use aria-describedby per item by default', () => {
|
|
const f = baseFrame()
|
|
f.layers[0].objects.push({ id: 'rg1', type: 'radio', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'color', legend: 'Color', options: ['Red'], defaultValue: 'Red', required: false, help: 'Pick one.' } })
|
|
const out = exportFrame(f)
|
|
expect(out.html).toMatch(/<fieldset id="rg1">[\s\S]*<legend>Color<\/legend>[\s\S]*<small id="rg1-help"/)
|
|
})
|
|
|
|
it('checkbox: adds group help (fieldset)', () => {
|
|
const f = baseFrame()
|
|
f.layers[0].objects.push({ id: 'cb1', type: 'checkbox', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'pick', legend: 'Pick', options: ['One'], defaultValues: [], required: false, help: 'You can pick many.' } })
|
|
const out = exportFrame(f)
|
|
expect(out.html).toMatch(/<fieldset id="cb1">[\s\S]*<legend>Pick<\/legend>[\s\S]*<small id="cb1-help"/)
|
|
})
|
|
})
|