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

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

const toHtml = (ColumnLayout as any).toHtml;

describe('ColumnLayout.toHtml width export from split', () => {
  test('non-default split (70-30) exports per-column width CSS matching each column', () => {
    const { html } = toHtml({ columns: 2, split: '70-30', gap: '16px' }, '<div>A</div><div>B</div>');
    // First column gets 70%, second gets 30% (same mapping as getWidths()).
    expect(html).toMatch(/nth-child\(1\)[^}]*calc\(70% - 16px\)/);
    expect(html).toMatch(/nth-child\(2\)[^}]*calc\(30% - 16px\)/);
  });

  test('default 50-50 split still exports equal widths', () => {
    const { html } = toHtml({ columns: 2, split: '50-50', gap: '16px' }, '<div>A</div><div>B</div>');
    expect(html).toMatch(/nth-child\(1\)[^}]*calc\(50% - 16px\)/);
    expect(html).toMatch(/nth-child\(2\)[^}]*calc\(50% - 16px\)/);
  });

  test('3-column 33-33-33 split exports three width rules', () => {
    const { html } = toHtml({ columns: 3, split: '33-33-33', gap: '16px' }, '<div>A</div><div>B</div><div>C</div>');
    expect(html).toMatch(/nth-child\(1\)[^}]*calc\(33\.333% - 16px\)/);
    expect(html).toMatch(/nth-child\(2\)[^}]*calc\(33\.333% - 16px\)/);
    expect(html).toMatch(/nth-child\(3\)[^}]*calc\(33\.333% - 16px\)/);
  });

  test('childrenHtml is preserved in the output', () => {
    const { html } = toHtml({ columns: 2, split: '70-30', gap: '16px' }, '<div>A</div><div>B</div>');
    expect(html).toContain('<div>A</div><div>B</div>');
  });
});

describe('ColumnLayout.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
  const props = { columns: 2, split: '50-50', gap: '16px' };

  test('same node id -> identical output across calls (deterministic)', () => {
    const { html: html1 } = toHtml(props, '', 'node-col1');
    const { html: html2 } = toHtml(props, '', 'node-col1');
    expect(html1).toBe(html2);
  });

  test('different node ids -> different, non-colliding scope classes (identical columns/split/gap, no collision)', () => {
    const { html: html1 } = toHtml(props, '', 'node-col1');
    const { html: html2 } = toHtml(props, '', 'node-col2');
    const cls1 = html1.match(/class="([^"]+)"/)![1];
    const cls2 = html2.match(/class="([^"]+)"/)![1];
    expect(cls1).not.toBe(cls2);
  });

  test('the <style> nth-child rule and the div class= use the SAME scope', () => {
    const { html } = toHtml(props, '', 'node-col1');
    const cls = html.match(/class="([^"]+)"/)![1];
    expect(html).toContain(`.${cls} > :nth-child(1)`);
  });

  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
    const { html: html1 } = toHtml(props, '<div>A</div><div>B</div>');
    const { html: html2 } = toHtml(props, '<div>A</div><div>B</div>');
    expect(html1).toBe(html2);
  });
});

describe('ColumnLayout.toHtml XSS hardening (gap into <style>)', () => {
  test('a gap value containing </style><script> is neutralized in the <style>-context nth-child rule', () => {
    const malicious = '0px)}</style><script>alert(1)</script><style>{';
    const { html } = toHtml({ columns: 2, split: '50-50', gap: malicious }, '<div>A</div><div>B</div>', 'node-xss');
    expect(html).not.toContain('</style><script');
    expect(html).not.toContain('<script>alert(1)</script>');
  });

  test('a gap value containing a quote/semicolon breakout is neutralized in the style attribute', () => {
    const malicious = '16px" onmouseover="alert(1)';
    const { html } = toHtml({ columns: 2, split: '50-50', gap: malicious }, '', 'node-xss2');
    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
  });

  test('a normal gap value still renders correctly', () => {
    const { html } = toHtml({ columns: 2, split: '50-50', gap: '24px' }, '<div>A</div>', 'node-normal');
    expect(html).toContain('gap:24px');
    expect(html).toMatch(/calc\(50% - 24px\)/);
  });
});