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>
72 lines
3.5 KiB
TypeScript
72 lines
3.5 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { FormContainer } from './FormContainer';
|
|
|
|
const toHtml = (FormContainer as any).toHtml;
|
|
|
|
describe('FormContainer.toHtml relay wiring', () => {
|
|
test('with recipientEmail: marker + placeholder action + honeypot, forces POST', () => {
|
|
const { html } = toHtml({ recipientEmail: 'a@b.com', thankYouUrl: '/thx', method: 'GET' }, '<input name="email">');
|
|
expect(html).toMatch(/<!--WHP-FORM id="F_[0-9a-z]+" recipient="a@b.com" thankyou="\/thx"-->/);
|
|
expect(html).toMatch(/action="__WHP_FORM_ACTION__F_[0-9a-z]+__"/);
|
|
expect(html).toContain('method="POST"'); // relay forces POST even though method=GET
|
|
expect(html).toContain('name="_gotcha"');
|
|
// honeypot precedes the form's children
|
|
expect(html.indexOf('_gotcha')).toBeLessThan(html.indexOf('name="email"'));
|
|
// marker id === action id
|
|
const mid = html.match(/id="(F_[0-9a-z]+)"/)![1];
|
|
expect(html).toContain(`__WHP_FORM_ACTION__${mid}__`);
|
|
});
|
|
|
|
test('without recipientEmail: legacy action/method, no marker or honeypot', () => {
|
|
const { html } = toHtml({ action: '/legacy', method: 'POST' }, '<input name="email">');
|
|
expect(html).not.toContain('WHP-FORM');
|
|
expect(html).not.toContain('_gotcha');
|
|
expect(html).toContain('action="/legacy"');
|
|
expect(html).toContain('<input name="email">');
|
|
});
|
|
|
|
test('same node id -> identical marker+placeholder ids across two calls', () => {
|
|
const { html: html1 } = toHtml({ recipientEmail: 'a@b.com', thankYouUrl: '/thx' }, '<input name="email">', 'node-fc1');
|
|
const { html: html2 } = toHtml({ recipientEmail: 'a@b.com', thankYouUrl: '/thx' }, '<input name="email">', 'node-fc1');
|
|
expect(html1).toBe(html2);
|
|
});
|
|
|
|
test('two different node ids -> different fids', () => {
|
|
const { html: html1 } = toHtml({ recipientEmail: 'a@b.com', thankYouUrl: '/thx' }, '<input name="email">', 'node-fc1');
|
|
const { html: html2 } = toHtml({ recipientEmail: 'a@b.com', thankYouUrl: '/thx' }, '<input name="email">', 'node-fc2');
|
|
const mid1 = html1.match(/<!--WHP-FORM id="([^"]+)"/)![1];
|
|
const mid2 = html2.match(/<!--WHP-FORM id="([^"]+)"/)![1];
|
|
expect(mid1).not.toBe(mid2);
|
|
});
|
|
});
|
|
|
|
describe('FormContainer.toHtml method attribute sanitization', () => {
|
|
test('malicious method value cannot break out of the attribute; falls back to POST', () => {
|
|
const { html } = toHtml({ action: '/legacy', method: 'POST"><script>alert(1)</script>' }, '');
|
|
expect(html).not.toContain('<script');
|
|
expect(html).toContain('method="POST"');
|
|
});
|
|
|
|
test('legitimate GET method still passes through unchanged (non-relay path)', () => {
|
|
const { html } = toHtml({ action: '/legacy', method: 'GET' }, '');
|
|
expect(html).toContain('method="GET"');
|
|
});
|
|
});
|
|
|
|
describe('FormContainer.toHtml box-model style passthrough', () => {
|
|
test('margin/border/box-shadow/opacity flow through via the style prop', () => {
|
|
const { html } = toHtml({ action: '/legacy', style: { marginTop: '20px', border: '3px dashed #ccc', boxShadow: '0 4px 8px rgba(0,0,0,.2)', opacity: '0.95' } }, '');
|
|
expect(html).toContain('margin-top:20px');
|
|
expect(html).toContain('border:3px dashed #ccc');
|
|
expect(html).toContain('opacity:0.95');
|
|
});
|
|
});
|
|
|
|
describe('FormContainer.craft.props includes animation/visibility defaults', () => {
|
|
test('has blank/false defaults', () => {
|
|
expect(FormContainer.craft!.props).toMatchObject({
|
|
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
|
});
|
|
});
|
|
});
|