pulse-signage/test/player-render-helpers.test.js

const test = require('node:test');
const assert = require('node:assert/strict');
const fs = require('node:fs');
const vm = require('node:vm');

require('../src/common');

const timetableRegionSource = fs.readFileSync(require.resolve('../src/player/regions/timetable.js'), 'utf8');

const {
  mediaKind,
  normalizeSlide,
  renderEditorJsContent,
  renderHtmlRegionContent,
  sanitizeRichText,
  getAnnouncementIconsDataScript
} = require('../src/player/render-helpers');

test('mediaKind classifies player media by extension', () => {
  assert.equal(mediaKind('poster.PNG'), 'image');
  assert.equal(mediaKind('intro.mp4'), 'video');
  assert.equal(mediaKind('manual.pdf'), 'pdf');
  assert.equal(mediaKind('notes.txt'), 'file');
});

test('sanitizeRichText strips unsafe content but preserves allowed markup', () => {
  const html = '<div class="wrap"><a href="https://example.com" target="_blank">Link</a><script>alert(1)</script><span style="color:red">Text</span><table class="grid"><colgroup><col span="1" style="width:50%"><col span="1" style="width:50%"></colgroup><thead><tr><th scope="col">Name</th><th scope="col">Value</th></tr></thead><tbody><tr><td>Alpha</td><td>Beta</td></tr></tbody></table><img src="/media/uploads/photo.png" alt="Photo" loading="lazy" onerror="alert(1)"></div>';

  assert.equal(
    sanitizeRichText(html),
    '<div class="wrap"><a href="https://example.com" target="_blank" rel="noreferrer noopener">Link</a><span style="color:red">Text</span><table class="grid"><colgroup><col span="1" style="width:50%"><col span="1" style="width:50%"></colgroup><thead><tr><th scope="col">Name</th><th scope="col">Value</th></tr></thead><tbody><tr><td>Alpha</td><td>Beta</td></tr></tbody></table><img src="/media/uploads/photo.png" alt="Photo" loading="lazy"></div>'
  );
});

test('normalizeSlide normalizes nested content without mutating the source', () => {
  const slide = {
    id: 12,
    content: {
      hero: {
        value: '{"headline":"Hello"}',
        font_family: '  Open Sans! ',
        font_size: '42',
        font_color: 'not-a-color',
        type: 'text'
      },
      footer: 'plain text'
    }
  };

  const normalized = normalizeSlide(slide);

  assert.notEqual(normalized.content, slide.content);
  assert.deepEqual(normalized.content.hero, {
    value: { headline: 'Hello' },
    font_family: '  Open Sans! ',
    font_size: '42',
    font_color: 'not-a-color',
    type: 'text'
  });
  assert.deepEqual(normalized.content.footer, {
    type: 'text',
    value: 'plain text'
  });
  assert.deepEqual(slide.content.hero, {
    value: '{"headline":"Hello"}',
    font_family: '  Open Sans! ',
    font_size: '42',
    font_color: 'not-a-color',
    type: 'text'
  });
});

test('renderEditorJsContent sanitizes editor blocks and wraps legacy text', () => {
  const editorJson = {
    blocks: [
      { type: 'header', data: { level: 2, text: '<strong>Title</strong><script>bad()</script>' } },
      { type: 'paragraph', data: { text: '<a href="javascript:alert(1)">bad</a><em>ok</em>' } },
      { type: 'list', data: { style: 'ordered', items: ['One', { text: '<span>Two</span>' }] } }
    ]
  };

  assert.equal(
    renderEditorJsContent(editorJson),
    '<h2><strong>Title</strong></h2><p><a>bad</a><em>ok</em></p><ol style="list-style-type:decimal;padding-left:1.4em;"><li>One</li><li><span>Two</span></li></ol>'
  );
  assert.equal(renderEditorJsContent('plain text'), '<p>plain text</p>');
});

test('shared API progress placeholder renders a clamped bar from numeric fields', () => {
  const sandbox = { window: {} };
  vm.runInNewContext(fs.readFileSync(require.resolve('../src/web/public/js/shared/placeholder-utils.js'), 'utf8'), sandbox);
  const placeholderUtils = sandbox.window.placeholderUtils;
  const markup = placeholderUtils.renderProgressPlaceholder(
    { fundraising: { current: '$1,250.00', total: '$1,000.00' } },
    'progress(fundraising.current,fundraising.total,success,light,striped,animated)'
  );

  assert.match(markup, /<span class="progress api-progress" style="background-color:#f8f9fa;font-size:inherit;--bs-progress-font-size:inherit;--bs-progress-height:1em;height:1em;border-radius:var\(--bs-border-radius\);"/);
  assert.match(markup, /class="progress-bar bg-success progress-bar-striped progress-bar-animated"/);
  assert.match(markup, /style="width:100%;color:inherit;background-color:#198754;"/);
  assert.match(markup, /aria-valuenow="100"/);
  assert.match(markup, /width:100%/);

  const objectValueMarkup = placeholderUtils.renderProgressPlaceholder(
    { fundraising: { current: { value: 30, currency: 'USD' }, total: { amount: 100, currency: 'USD' } } },
    'progress(fundraising.current,fundraising.total)'
  );
  assert.match(objectValueMarkup, /aria-valuenow="30"/);
  assert.match(objectValueMarkup, /width:30%/);

  const announcementColorMarkup = placeholderUtils.renderProgressPlaceholder(
    { current: 25, total: 100 },
    'progress(current,total,midnight)'
  );
  assert.match(announcementColorMarkup, /background-color:#1e1d2d/);
  assert.doesNotMatch(announcementColorMarkup, /bg-primary/);

  const omittedOptionsMarkup = placeholderUtils.renderProgressPlaceholder(
    { current: 25, total: 100 },
    'progress(current,total)'
  );
  assert.match(omittedOptionsMarkup, /aria-valuenow="25"/);

  const literalMarkup = placeholderUtils.renderProgressPlaceholder(
    {},
    'progress("30","100")'
  );
  assert.match(literalMarkup, /aria-valuenow="30"/);
});

test('shared placeholder transforms support arithmetic', () => {
  const sandbox = { window: {} };
  vm.runInNewContext(fs.readFileSync(require.resolve('../src/web/public/js/shared/placeholder-utils.js'), 'utf8'), sandbox);
  const placeholderUtils = sandbox.window.placeholderUtils;

  assert.equal(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression({ amount: 12 }, 'amount.multiply(10)')), '120');
  assert.equal(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression({ amount: 12 }, 'amount.add(3)')), '15');
  assert.equal(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression({ amount: 12 }, 'amount.subtract(3)')), '9');
  assert.equal(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression({ amount: 12 }, 'amount.divide(3)')), '4');
  assert.equal(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression({ amount: 12 }, 'amount.add(3).multiply(10)')), '150');

  const textlessMarkup = placeholderUtils.renderProgressPlaceholder(
    { current: 30, total: 100 },
    'progress(current,total,textless)'
  );
  assert.match(textlessMarkup, /aria-label="30%"/);
  assert.match(textlessMarkup, /aria-valuenow="30"/);
  assert.match(textlessMarkup, /style="width:30%;color:inherit;"><\/span>/);

  const radiusMarkup = placeholderUtils.renderProgressPlaceholder(
    { current: 30, total: 100 },
    'progress(current,total,radius(12px))'
  );
  assert.match(radiusMarkup, /border-radius:12px;/);

  const now = Date.now();
  const timedMarkup = placeholderUtils.renderProgressPlaceholder(
    { start: new Date(now - 30 * 60 * 1000).toISOString(), end: new Date(now + 30 * 60 * 1000).toISOString() },
    'progress(start,end)'
  );
  assert.match(timedMarkup, /aria-valuenow="50"/);
});

test('timetable region registers the timetable type', () => {
  assert.ok(timetableRegionSource.includes("registry.register('timetable'"));
  assert.ok(timetableRegionSource.includes("sanitizeRichText(substituteTimetableVariables(value"));
});

test('player announcement bootstrap includes catalog-only icons', () => {
  assert.match(getAnnouncementIconsDataScript(), /bank/);
});

test('shared iframe renderers size preview content explicitly', () => {
  const playerHtmlRegionSource = fs.readFileSync(require.resolve('../src/player/regions/html.js'), 'utf8');
  const playerWebpageRegionSource = fs.readFileSync(require.resolve('../src/player/regions/webpage.js'), 'utf8');
  const playerRenderHelpersSource = fs.readFileSync(require.resolve('../src/player/render-helpers.js'), 'utf8');
  const slideThumbnailPreviewSource = fs.readFileSync(require.resolve('../src/web/lib/media/slide-thumbnail-preview.js'), 'utf8');
  const slideThumbnailsSource = fs.readFileSync(require.resolve('../src/web/lib/media/slide-thumbnails.js'), 'utf8');

  assert.ok(playerHtmlRegionSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
  assert.ok(playerWebpageRegionSource.includes('style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"'));
  assert.ok(playerRenderHelpersSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
  assert.ok(slideThumbnailPreviewSource.includes('slide-preview-webpage-region'));
  assert.ok(slideThumbnailPreviewSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
  assert.ok(slideThumbnailsSource.includes('slide-preview-webpage-placeholder'));
  assert.ok(slideThumbnailsSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
});

test('html region helpers unwrap object-shaped values before rendering', () => {
  const rendered = renderHtmlRegionContent({ html: '<div>Hi</div>' });

  assert.match(rendered, /srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;html,body\{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;\}&lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;&lt;div&gt;Hi&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;"/);
  assert.doesNotMatch(rendered, /\[object Object\]/);
});