site-builder/craft/src/components/forms/FormButton.toHtml.test.ts

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('&lt;script&gt;alert(1)&lt;/script&gt;');
    expect(html).toContain('&amp;');
    expect(html).toContain('&quot;quoted&quot;');
  });

  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,
    });
  });
});