v10/site/scripts/tests/replace-demo-placeholders.test.ts

import { globSync, readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import { describe, expect, it } from 'vitest';
import {
  DEMO_PLACEHOLDERS,
  demoPlaceholderPlugin,
  replaceDemoPlaceholders,
  transformDemoPlaceholders,
} from '../replace-demo-placeholders.ts';

const DEMOS_DIRECTORY = resolve('src/components/docs/demos');

describe('replaceDemoPlaceholders', () => {
  it('resolves known placeholders', () => {
    const source = Object.keys(DEMO_PLACEHOLDERS)
      .map((name) => `{{${name}}}`)
      .join(' ');

    expect(replaceDemoPlaceholders(source)).toBe(Object.values(DEMO_PLACEHOLDERS).join(' '));
  });

  it('throws for unknown placeholders', () => {
    expect(() => replaceDemoPlaceholders('{{UNKNOWN_DEMO_VIDEO}}')).toThrow(
      'Unknown demo placeholder: {{UNKNOWN_DEMO_VIDEO}}'
    );
  });
});

describe('demoPlaceholderPlugin', () => {
  it('registers the demo transform as a pre-transform', () => {
    expect(demoPlaceholderPlugin()).toMatchObject({
      enforce: 'pre',
      transform: transformDemoPlaceholders,
    });
  });
});

describe('transformDemoPlaceholders', () => {
  it('resolves placeholders in raw HTML demo imports', () => {
    expect(
      transformDemoPlaceholders('{{VJS10_DEMO_VIDEO_MP4}}', '/site/src/components/docs/demos/play-button.html?raw')
    ).toBe(DEMO_PLACEHOLDERS.VJS10_DEMO_VIDEO_MP4);
  });

  it.each([
    '/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx',
    '/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw',
  ])('resolves placeholders in React demo import %s', (id) => {
    expect(transformDemoPlaceholders('{{VJS10_DEMO_VIDEO_MP4}}', id)).toBe(DEMO_PLACEHOLDERS.VJS10_DEMO_VIDEO_MP4);
  });

  it.each([
    '/site/src/components/docs/demos/play-button.html?draw=true',
    '/site/src/components/docs/demos/play-button.ts?raw',
    '/site/src/components/play-button.html?raw',
    '/site/src/components/play-button.tsx',
  ])('ignores unsupported demo import %s', (id) => {
    expect(transformDemoPlaceholders('{{VJS10_DEMO_VIDEO_MP4}}', id)).toBeNull();
  });
});

describe('demo placeholders', () => {
  it('does not hardcode shared demo media URLs', () => {
    const demoFiles = [
      ...globSync('**/*.html', { cwd: DEMOS_DIRECTORY }),
      ...globSync('**/*.tsx', { cwd: DEMOS_DIRECTORY }),
    ];
    const hardcodedSources = demoFiles.filter((file) => {
      const source = readFileSync(resolve(DEMOS_DIRECTORY, file), 'utf8');
      return /https:\/\/(?:(?:stream|image)\.mux\.com|dash\.akamaized\.net|vimeo\.com)\//.test(source);
    });

    expect(hardcodedSources).toEqual([]);
  });
});