site-builder/craft/src/components/layout/Container.toHtml.test.ts

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

const toHtml = (Container as any).toHtml;

describe('Container.toHtml cssId/cssClass', () => {
  test('emits id and class when both set', () => {
    const { html } = toHtml({ cssId: 'my-id', cssClass: 'my-class' }, 'child');
    expect(html).toContain('id="my-id"');
    expect(html).toContain('class="my-class"');
  });

  test('emits neither id nor class when empty/unset', () => {
    const { html } = toHtml({}, 'child');
    expect(html).not.toContain(' id="');
    expect(html).not.toContain(' class="');
  });

  test('escapes cssId/cssClass values', () => {
    const { html } = toHtml({ cssId: 'x" onerror="alert(1)', cssClass: 'y" onerror="alert(1)' }, 'child');
    expect(html).not.toContain('onerror="alert(1)"');
  });

  test('cssId takes precedence over anchorId when both set (no duplicate id attrs)', () => {
    const { html } = toHtml({ cssId: 'explicit-id', anchorId: 'anchor-id' }, 'child');
    const idMatches = html.match(/ id="/g) || [];
    expect(idMatches.length).toBe(1);
    expect(html).toContain('id="explicit-id"');
  });

  test('falls back to anchorId when cssId is not set', () => {
    const { html } = toHtml({ anchorId: 'anchor-id' }, 'child');
    expect(html).toContain('id="anchor-id"');
  });
});

describe('Container.toHtml tag allowlist (adversarial re-review, same class as C1)', () => {
  test('a malicious tag value falls back to div -- no injected <img>, no broken-out attrs', () => {
    const { html } = toHtml({ tag: 'div><img src=x onerror=alert(1)' }, 'child');
    expect(html).not.toContain('<img');
    expect(html).not.toContain('onerror');
    expect(html.startsWith('<div')).toBe(true);
    expect(html.endsWith('</div>')).toBe(true);
  });

  test('a tag value outside the known-safe set falls back to div', () => {
    const { html } = toHtml({ tag: 'script' }, 'child');
    expect(html.startsWith('<div')).toBe(true);
    expect(html).not.toContain('<script');
  });

  test('a valid tag (section) still emits <section', () => {
    const { html } = toHtml({ tag: 'section' }, 'child');
    expect(html).toContain('<section');
    expect(html).toContain('</section>');
  });

  test('all other allowlisted tags still work', () => {
    for (const tag of ['div', 'article', 'header', 'footer', 'main']) {
      const { html } = toHtml({ tag }, 'child');
      expect(html.startsWith(`<${tag}`)).toBe(true);
      expect(html.endsWith(`</${tag}>`)).toBe(true);
    }
  });
});