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

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

const toHtml = (VideoBlock as any).toHtml;

function embedSrc(videoUrl: string): string {
  const { html } = toHtml({ videoUrl }, '');
  const m = html.match(/<iframe src="([^"]+)"/) || html.match(/<video src="([^"]+)"/);
  return m ? m[1].replace(/&amp;/g, '&') : '';
}

describe('VideoBlock URL parsing (D4)', () => {
  test('youtube.com/watch?v=ID (existing case) resolves to embed URL', () => {
    expect(embedSrc('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
  });

  test('youtu.be/ID resolves to embed URL', () => {
    expect(embedSrc('https://youtu.be/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
  });

  test('youtube.com/embed/ID (existing case) resolves to embed URL', () => {
    expect(embedSrc('https://www.youtube.com/embed/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
  });

  test('youtube.com/shorts/ID resolves to embed URL', () => {
    expect(embedSrc('https://www.youtube.com/shorts/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
  });

  test('youtube.com/live/ID resolves to embed URL', () => {
    expect(embedSrc('https://www.youtube.com/live/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
  });

  test('youtube.com/watch?...&v=ID (v not first param) resolves to embed URL', () => {
    expect(embedSrc('https://www.youtube.com/watch?list=PLxyz&v=dQw4w9WgXcQ&index=3')).toContain('youtube.com/embed/dQw4w9WgXcQ');
  });

  test('vimeo.com/ID (existing case) resolves to player URL', () => {
    expect(embedSrc('https://vimeo.com/123456789')).toContain('https://player.vimeo.com/video/123456789');
  });

  test('vimeo.com/ID/HASH (private video) resolves to player URL with hash param', () => {
    const src = embedSrc('https://vimeo.com/123456789/abcdef1234');
    expect(src).toContain('https://player.vimeo.com/video/123456789');
    expect(src).toContain('h=abcdef1234');
  });

  test('direct .mp4 file still works', () => {
    const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4' }, '');
    expect(html).toContain('<video src="https://example.com/clip.mp4"');
  });

  test('unrecognized URL yields no output (type "none")', () => {
    const { html } = toHtml({ videoUrl: 'not-a-real-video-url' }, '');
    expect(html).toBe('');
  });

  test('emitted src is safeUrl-wrapped: javascript: scheme never reaches output', () => {
    const { html } = toHtml({ videoUrl: 'javascript:alert(1)' }, '');
    expect(html).not.toContain('javascript:');
  });
});

describe('VideoBlock.toHtml iframe accessibility (F2.4)', () => {
  test('normal-mode YouTube/Vimeo iframe has a title attribute', () => {
    const { html } = toHtml({ videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' }, '');
    expect(html).toMatch(/<iframe[^>]*title="[^"]+"/);
  });

  test('background-mode YouTube/Vimeo iframe has a title attribute', () => {
    const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', isBackground: true }, '');
    expect(html).toMatch(/<iframe[^>]*title="[^"]+"/);
  });
});