site-builder/craft/src/components/media/ImageBlock.toHtml.test.ts

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

const toHtml = (ImageBlock as any).toHtml;

describe('ImageBlock.toHtml src/alt XSS hardening', () => {
  test('a javascript: src never reaches the output', () => {
    const { html } = toHtml({ src: 'javascript:alert(1)' }, '');
    expect(html).not.toContain('javascript:');
  });

  test('a malicious src cannot break out of the src attribute', () => {
    const malicious = 'https://example.com/x.jpg" onerror="alert(1)';
    const { html } = toHtml({ src: malicious }, '');
    expect(html).not.toContain('onerror="alert(1)"');
  });

  test('a malicious alt cannot break out of the alt attribute', () => {
    const malicious = 'x" onerror="alert(1)';
    const { html } = toHtml({ src: 'https://example.com/x.jpg', alt: malicious }, '');
    expect(html).not.toContain('onerror="alert(1)"');
  });

  test('a placeholder/empty src emits no output', () => {
    const { html } = toHtml({ src: '' }, '');
    expect(html).toBe('');
  });

  test('a normal image still renders correctly', () => {
    const { html } = toHtml({ src: 'https://example.com/photo.jpg', alt: 'A photo' }, '');
    expect(html).toContain('src="https://example.com/photo.jpg"');
    expect(html).toContain('alt="A photo"');
  });
});

describe('ImageBlock.toHtml perf attributes (always emitted)', () => {
  test('loading="lazy" and decoding="async" are always present', () => {
    const { html } = toHtml({ src: 'https://example.com/photo.jpg' }, '');
    expect(html).toContain('loading="lazy"');
    expect(html).toContain('decoding="async"');
  });

  test('width/height attributes are emitted when the style has plain px values', () => {
    const { html } = toHtml({ src: 'https://example.com/photo.jpg', style: { width: '400px', height: '300px' } }, '');
    expect(html).toContain('width="400"');
    expect(html).toContain('height="300"');
  });

  test('width/height attributes are omitted when the style value is not a plain px length', () => {
    const { html } = toHtml({ src: 'https://example.com/photo.jpg', style: { width: '50%', height: 'auto' } }, '');
    expect(html).not.toMatch(/\swidth="/);
    expect(html).not.toMatch(/\sheight="/);
  });
});

describe('pxAttr', () => {
  test('extracts the numeric portion of a plain px length', () => {
    expect(pxAttr('400px')).toBe('400');
    expect(pxAttr('12.5px')).toBe('12.5');
  });

  test('returns undefined for non-px units, non-string, or unset values', () => {
    expect(pxAttr('50%')).toBeUndefined();
    expect(pxAttr('auto')).toBeUndefined();
    expect(pxAttr(undefined)).toBeUndefined();
    expect(pxAttr(400)).toBeUndefined();
  });
});

describe('ImageBlock.toHtml CSS framing crop (aspect-ratio + object-fit + object-position)', () => {
  test('style.aspectRatio, objectFit, objectPosition all flow into the emitted style attribute', () => {
    const { html } = toHtml(
      { src: 'https://example.com/photo.jpg', style: { aspectRatio: '16 / 9', objectFit: 'cover', objectPosition: 'center top' } },
      ''
    );
    expect(html).toContain('aspect-ratio:16 / 9');
    expect(html).toContain('object-fit:cover');
    expect(html).toContain('object-position:center top');
  });
});

describe('ImageBlock.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(
      {
        src: 'https://example.com/photo.jpg',
        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',
        },
      },
      ''
    );
    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('ImageBlock.craft.props exposes the box-model/animation/visibility rollout', () => {
  test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
    const props = (ImageBlock 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 box-model and crop keys', () => {
    const style = (ImageBlock as any).craft.props.style;
    expect(style).toHaveProperty('aspectRatio');
    expect(style).toHaveProperty('objectFit');
    expect(style).toHaveProperty('objectPosition');
    expect(style).toHaveProperty('marginTop');
    expect(style).toHaveProperty('paddingTop');
    expect(style.border).toBe('none');
    expect(style.boxShadow).toBe('none');
    expect(style.opacity).toBe('1');
  });
});