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\)/);
  });
});

describe('ColumnLayout.toHtml vertical alignment (align-items on the flex row)', () => {
  test('style.alignItems flows into the emitted style attribute (aligns uneven columns)', () => {
    const { html } = toHtml({ columns: 2, split: '50-50', gap: '16px', style: { alignItems: 'center' } }, '<div>A</div><div>B</div>');
    expect(html).toContain('align-items:center');
  });
});

describe('ColumnLayout.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
  test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
    const { html } = toHtml(
      {
        columns: 2,
        split: '50-50',
        gap: '16px',
        style: {
          marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
          paddingTop: '5px',
          border: '2px solid #ff0000',
          boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
          opacity: '0.8',
        },
      },
      '<div>A</div><div>B</div>',
    );
    expect(html).toContain('margin-top:10px');
    expect(html).toContain('padding-top:5px');
    expect(html).toContain('border:2px solid #ff0000');
    expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
    expect(html).toContain('opacity:0.8');
  });
});

describe('ColumnLayout.craft.props exposes the vertical-alignment/box-model/animation/visibility rollout', () => {
  test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
    const props = (ColumnLayout as any).craft.props;
    expect(props.animation).toBe('');
    expect(props.animationDelay).toBe('0');
    expect(props.hideOnDesktop).toBe(false);
    expect(props.hideOnTablet).toBe(false);
    expect(props.hideOnMobile).toBe(false);
  });

  test('style carries blank/default alignItems and box-model keys', () => {
    const style = (ColumnLayout as any).craft.props.style;
    expect(style).toHaveProperty('alignItems');
    expect(style).toHaveProperty('marginTop');
    expect(style).toHaveProperty('paddingTop');
    expect(style.border).toBe('none');
    expect(style.boxShadow).toBe('none');
    expect(style.opacity).toBe('1');
  });
});