site-builder/craft/src/components/sections/Countdown.toHtml.test.ts

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

const toHtml = (Countdown as any).toHtml;

describe('Countdown.toHtml validates targetDate before inline-script injection (A4.2)', () => {
  test('malicious targetDate cannot break out of the new Date(...) call', () => {
    const { html } = toHtml({ targetDate: '2026-01-01");alert(1)//' }, '');
    expect(html).not.toContain('alert(');
    expect(html).not.toContain('");');
  });

  test('valid date is JSON-encoded into the script', () => {
    const { html } = toHtml({ targetDate: '2026-01-01' }, '');
    expect(html).toContain('new Date("2026-01-01")');
  });

  test('valid date+time is preserved', () => {
    const { html } = toHtml({ targetDate: '2026-01-01T12:30:00' }, '');
    expect(html).toContain('new Date("2026-01-01T12:30:00")');
  });

  test('invalid/empty targetDate falls back safely (no injected literal)', () => {
    const { html } = toHtml({ targetDate: 'not-a-date' }, '');
    expect(html).not.toContain('not-a-date');
    expect(html).toMatch(/new Date\(\)\.getTime\(\)|new Date\(Date\.now\(\)\)\.getTime\(\)/);
  });
});

describe('Countdown.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
  const props = { targetDate: '2026-01-01' };

  test('same node id -> identical output across calls (deterministic)', () => {
    const { html: html1 } = toHtml(props, '', 'node-cd1');
    const { html: html2 } = toHtml(props, '', 'node-cd1');
    expect(html1).toBe(html2);
  });

  test('different node ids -> different, non-colliding element ids (identical props, no collision)', () => {
    const { html: html1 } = toHtml(props, '', 'node-cd1');
    const { html: html2 } = toHtml(props, '', 'node-cd2');
    const id1 = html1.match(/id="([^"]+)_d"/)![1];
    const id2 = html2.match(/id="([^"]+)_d"/)![1];
    expect(id1).not.toBe(id2);
  });

  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
    const { html: html1 } = toHtml(props, '');
    const { html: html2 } = toHtml(props, '');
    expect(html1).toBe(html2);
  });
});

describe('Countdown.toHtml script nit: ticking interval stops at zero', () => {
  test('inline script clears its own interval once the countdown reaches zero', () => {
    const { html } = toHtml({ targetDate: '2026-01-01' }, '');
    expect(html).toMatch(/clearInterval\(/);
  });

  test('an already-expired target never schedules a running interval', () => {
    const { html } = toHtml({ targetDate: '2020-01-01' }, '');
    expect(html).toMatch(/if\s*\(\s*target\s*-\s*Date\.now\(\)\s*>\s*0\s*\)\s*\{/);
  });
});

describe('Countdown.craft.props includes the box-model/animation/visibility rollout props', () => {
  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
    const props = (Countdown as any).craft.props;
    expect(props).toHaveProperty('animation', '');
    expect(props).toHaveProperty('animationDelay', '');
    expect(props).toHaveProperty('hideOnDesktop', false);
    expect(props).toHaveProperty('hideOnTablet', false);
    expect(props).toHaveProperty('hideOnMobile', false);
  });
});