banner_studio/packages/render-worker/test/build-runtime-html.test.ts

import { describe, it, expect } from 'vitest';
import baseline from '../../../apps/web/lib/parity/baseline.json' assert { type: 'json' };
import type { BannerSpec, ArtboardSpec } from '@banner-studio/types';
import { buildRuntimeHtml } from '../src/build-runtime-html.js';

// Wrap the parity baseline into the full BannerSpec envelope. The baseline
// JSON is intentionally partial (no campaign_id/version_id/etc.) — those
// envelope fields are slice-only and not relevant to layout parity. The
// build-runtime-html test owns the responsibility of providing them.
function makeSpec(): BannerSpec {
  // Deep-clone via JSON so per-test mutations (e.g. content edits) don't
  // bleed into other tests through the shared imported JSON module.
  const artboard = JSON.parse(
    JSON.stringify(baseline.artboards[0])
  ) as ArtboardSpec;
  return {
    template_id: 'demo-300x250',
    template_version: 1,
    campaign_id: 'demo-campaign',
    version_id: 'v1',
    copy_variant: 'A',
    generated_at: '2026-05-15T00:00:00.000Z',
    ai_reasoning: {
      asset_selection: 'hero crop chosen for visual punch',
      copy_rationale: 'concise headline',
      variant_selection: 'A',
      animation_rationale: 'staggered fade-in keeps focus'
    },
    artboards: [artboard],
    ad_server_profile: 'iab_standard',
    click_destinations: [{ id: 'cta', url: 'https://example.com/buy' }]
  };
}

const FAKE_GSAP = '/* fake gsap.min.js */ var gsap = { timeline: function(){ return { to: function(){return this;} }; } };';

describe('buildRuntimeHtml', () => {
  it('inlines the spec JSON in a typed script tag', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    expect(html).toContain('<script id="banner-spec" type="application/json">');
    // Spec JSON contains campaign_id from the envelope.
    expect(html).toContain('"campaign_id":"demo-campaign"');
  });

  it('exposes the click URL from click_destinations[0]', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    expect(html).toContain('var clickTag = "https://example.com/buy"');
    expect(html).toContain('href="https://example.com/buy"');
  });

  it('emits a div for each non-group resolved layer', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    expect(html).toContain('id="layer-hero"');
    expect(html).toContain('id="layer-headline"');
    expect(html).toContain('id="layer-subheadline"');
    expect(html).toContain('id="layer-cta"');
    // The group wrapper should NOT be in the DOM — children are flat in the
    // resolved spec, the group only ever existed in the template.
    expect(html).not.toContain('id="layer-main-group"');
  });

  it('references the locally hosted Inter fonts', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    expect(html).toContain("url('./fonts/Inter-Regular.ttf')");
    expect(html).toContain("url('./fonts/Inter-Bold.ttf')");
  });

  it('forces opacity:0 on layers with a fade_in event', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    // All four layers in the baseline have fade_in events.
    const heroMatch = html.match(/id="layer-hero"[^>]*style="([^"]+)"/);
    expect(heroMatch?.[1]).toContain('opacity:0');
    const headlineMatch = html.match(/id="layer-headline"[^>]*style="([^"]+)"/);
    expect(headlineMatch?.[1]).toContain('opacity:0');
  });

  it('inlines the GSAP source and calls gsap.timeline()', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    expect(html).toContain('fake gsap.min.js');
    expect(html).toContain('gsap.timeline(');
  });

  it('escapes potentially unsafe content', () => {
    const spec = makeSpec();
    spec.artboards[0]!.layers.find((l) => l.layer_id === 'headline')!.content =
      '<script>alert(1)</script>Hello & "world"';
    const html = buildRuntimeHtml({ spec, gsapSource: FAKE_GSAP });
    // The visible headline must be rendered as escaped text, not as a real script.
    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;Hello &amp;');
    // It must NOT contain a literal <script>alert(1)</script> outside the inline
    // JSON (the JSON also escapes <\/script>).
    const stripped = html.replace(/<script id="banner-spec"[\s\S]*?<\/script>/g, '');
    expect(stripped).not.toMatch(/<script>alert\(1\)<\/script>/);
  });

  it('includes the headline content text', () => {
    const html = buildRuntimeHtml({ spec: makeSpec(), gsapSource: FAKE_GSAP });
    expect(html).toContain('Hello world');
    expect(html).toContain('Shop now');
  });
});