shadowdaoandClaude Opus 4.8
5b19ae97af
- FormStylePanel: ContactForm field editor (add/remove/reorder via ArrayPropEditor + manual move up/down) covering label/name/placeholder/ type (full sanitizeInputType allowlist + textarea/select)/required/ options. - SubscribeForm.toHtml: was a dead `<form method="POST">` with no action at all -- wired through the same relayFormWiring contract as ContactForm/ FormContainer so a recipientEmail makes it actually submit (marker + placeholder action + honeypot), falling back to action="#" otherwise. - SearchBar: was purely decorative (no action/method/input name) -- now a real GET form (configurable target, default "/") with input name="q", safeUrl-guarded against javascript:/vbscript: breakout. - Box-model (margin/padding per-side, border, shadow, opacity), entrance animation, and hide-on-device controls added to FormStylePanel and rolled out (blank/false craft.props defaults) across ContactForm, FormContainer, InputField, TextareaField, FormButton, SubscribeForm, SearchBar. No toHtml changes needed for animation/visibility -- html-export.ts's buildDataAttrs() already emits data-animation/ data-hide-* generically from these prop names. - Extended toHtml tests for all 7 components: field-type rendering (incl. textarea/select), type-attribute XSS sanitization, relay/GET functional wiring, box-model style passthrough, craft.props defaults. npx vitest run: 689/689 passed. npm run build: green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { FormButton } from './FormButton';
|
|
|
|
const toHtml = (FormButton as any).toHtml;
|
|
|
|
describe('FormButton.toHtml', () => {
|
|
test('normal text renders as-is', () => {
|
|
const { html } = toHtml({ text: 'Send it' }, '');
|
|
expect(html).toContain('>Send it<');
|
|
expect(html).toContain('type="submit"');
|
|
});
|
|
|
|
test('type="submit" is a hardcoded literal, not prop-driven', () => {
|
|
const { html } = toHtml({ text: 'Submit' }, '');
|
|
expect(html).toMatch(/<button type="submit"/);
|
|
});
|
|
|
|
test('text content is escaped for <, >, &, and " (consistent with escapeHtml)', () => {
|
|
const { html } = toHtml({ text: '<script>alert(1)</script> & "quoted"' }, '');
|
|
expect(html).not.toContain('<script>');
|
|
expect(html).toContain('<script>alert(1)</script>');
|
|
expect(html).toContain('&');
|
|
expect(html).toContain('"quoted"');
|
|
});
|
|
|
|
test('box-model style (margin/border/box-shadow/opacity) flows through via the style prop', () => {
|
|
const { html } = toHtml({ text: 'Submit', style: { marginTop: '12px', border: '2px solid #000', boxShadow: '0 2px 4px rgba(0,0,0,.2)', opacity: '0.8' } }, '');
|
|
expect(html).toContain('margin-top:12px');
|
|
expect(html).toContain('border:2px solid #000');
|
|
expect(html).toContain('opacity:0.8');
|
|
});
|
|
});
|
|
|
|
describe('FormButton.craft.props includes animation/visibility defaults', () => {
|
|
test('has blank/false defaults', () => {
|
|
expect(FormButton.craft!.props).toMatchObject({
|
|
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
|
});
|
|
});
|
|
});
|