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

describe('Container.toHtml vertical alignment (justify-content + min-height)', () => {
  test('is always a column flex container (display:flex;flex-direction:column)', () => {
    const { html } = toHtml({}, 'child');
    expect(html).toContain('display:flex');
    expect(html).toContain('flex-direction:column');
  });

  test('style.justifyContent flows into the emitted style attribute', () => {
    const { html } = toHtml({ style: { justifyContent: 'center' } }, 'child');
    expect(html).toContain('justify-content:center');
  });

  test('style.minHeight flows into the emitted style attribute', () => {
    const { html } = toHtml({ style: { minHeight: '400px' } }, 'child');
    expect(html).toContain('min-height:400px');
  });

  test('justify-content and min-height still flow through in boxed (contentWidth) mode', () => {
    const { html } = toHtml({ contentWidth: 'boxed', style: { justifyContent: 'flex-end', minHeight: '500px' } }, 'child');
    expect(html).toContain('justify-content:flex-end');
    expect(html).toContain('min-height:500px');
  });
});

describe('Container.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(
      {
        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',
        },
      },
      'child',
    );
    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('Container.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 = (Container 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 vertical-alignment and box-model keys', () => {
    const style = (Container as any).craft.props.style;
    expect(style).toHaveProperty('justifyContent');
    expect(style).toHaveProperty('minHeight');
    expect(style).toHaveProperty('marginTop');
    expect(style).toHaveProperty('paddingTop');
    expect(style.border).toBe('none');
    expect(style.boxShadow).toBe('none');
    expect(style.opacity).toBe('1');
  });
});