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

import { describe, test, expect } from 'vitest';
import { InputField } from './InputField';

const toHtml = (InputField as any).toHtml;

describe('InputField.toHtml accessibility (F2.1)', () => {
  test('label for= matches input id=', () => {
    const { html } = toHtml({ label: 'Your Name', name: 'name' }, '');
    const forMatch = html.match(/<label for="([^"]+)"/);
    const idMatch = html.match(/<input id="([^"]+)"/);
    expect(forMatch).toBeTruthy();
    expect(idMatch).toBeTruthy();
    expect(forMatch![1]).toBe(idMatch![1]);
  });

  test('id is deterministic (derived from name, not random) -- stable across calls', () => {
    const { html: html1 } = toHtml({ label: 'Email', name: 'email' }, '');
    const { html: html2 } = toHtml({ label: 'Email', name: 'email' }, '');
    const id1 = html1.match(/<input id="([^"]+)"/)![1];
    const id2 = html2.match(/<input id="([^"]+)"/)![1];
    expect(id1).toBe(id2);
  });

  test('no visible label: input gets aria-label from placeholder', () => {
    const { html } = toHtml({ label: '', name: 'phone', placeholder: 'Phone number' }, '');
    expect(html).not.toContain('<label');
    expect(html).toContain('aria-label="Phone number"');
  });
});

describe('InputField.toHtml deterministic + unique ids (thread node id, resolves id-collision finding)', () => {
  test('label for= still matches input id= after threading the node id', () => {
    const { html } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in1');
    const forMatch = html.match(/<label for="([^"]+)"/);
    const idMatch = html.match(/<input id="([^"]+)"/);
    expect(forMatch![1]).toBe(idMatch![1]);
  });

  test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
    const { html: html1 } = toHtml({ label: 'Name', name: 'name' }, '', 'node-in1');
    const { html: html2 } = toHtml({ label: 'Name', name: 'name' }, '', 'node-in1');
    expect(html1).toBe(html2);
  });

  test('two instances with the SAME default name but different node ids do not collide', () => {
    const { html: html1 } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in1');
    const { html: html2 } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in2');
    const id1 = html1.match(/<input id="([^"]+)"/)![1];
    const id2 = html2.match(/<input id="([^"]+)"/)![1];
    expect(id1).not.toBe(id2);
  });

  test('no nodeId (legacy 2-arg call): id derivation stays deterministic, not random', () => {
    const { html: html1 } = toHtml({ label: 'Email', name: 'email' }, '');
    const { html: html2 } = toHtml({ label: 'Email', name: 'email' }, '');
    const id1 = html1.match(/<input id="([^"]+)"/)![1];
    const id2 = html2.match(/<input id="([^"]+)"/)![1];
    expect(id1).toBe(id2);
  });
});

describe('InputField.toHtml type attribute sanitization', () => {
  test('malicious type value cannot break out of the attribute; falls back to type="text"', () => {
    const { html } = toHtml({ label: 'Name', name: 'name', type: 'text" autofocus onfocus="alert(1)' as any }, '');
    expect(html).not.toContain('onfocus=');
    expect(html).not.toContain('autofocus');
    expect(html).toContain('type="text"');
  });

  test('legitimate number type still passes through unchanged', () => {
    const { html } = toHtml({ label: 'Age', name: 'age', type: 'number' as const }, '');
    expect(html).toContain('type="number"');
  });
});

describe('InputField.toHtml box-model style passthrough', () => {
  test('margin/border/box-shadow/opacity flow through via the style prop', () => {
    const { html } = toHtml({ label: 'Name', name: 'name', style: { marginBottom: '8px', border: '1px solid #333', boxShadow: '0 1px 2px rgba(0,0,0,.1)', opacity: '0.9' } }, '');
    expect(html).toContain('margin-bottom:8px');
    expect(html).toContain('border:1px solid #333');
    expect(html).toContain('opacity:0.9');
  });
});

describe('InputField.craft.props includes animation/visibility defaults', () => {
  test('has blank/false defaults', () => {
    expect(InputField.craft!.props).toMatchObject({
      animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
    });
  });
});