Release 2.19.3

test/slide-preview-renderer.test.js

@@ -0,0 +1,105 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const vm = require('node:vm');
+
+const { render } = require('../src/web/public/js/shared/slide-preview-renderer');
+const { buildThumbnailPreviewPayload } = require('../src/web/lib/media/slide-thumbnails');
+const placeholderUtils = require('../src/web/public/js/shared/placeholder-utils');
+
+function loadEditorTimeDateModule() {
+  const source = fs.readFileSync(require.resolve('../src/web/public/js/regions/type/time-date.js'), 'utf8');
+  const modules = new Map();
+  const sandbox = {
+    window: {
+      pulseRegionTypes: {
+        register(type, definition) {
+          modules.set(type, definition);
+        }
+      },
+      pulseRegionUtils: {
+        escapeHtml(value) {
+          return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        },
+        sanitizePreviewHtml(value) {
+          return String(value);
+        }
+      },
+      placeholderUtils: placeholderUtils
+    }
+  };
+
+  vm.runInNewContext(source, sandbox, { filename: 'time-date.js' });
+  return modules.get('time-date');
+}
+
+test('thumbnail payload passes saved region geometry and content to the popup renderer', () => {
+  const payload = buildThumbnailPreviewPayload({
+    template: {
+      canvas_size_width: 1280,
+      canvas_size_height: 720,
+      regions: [{ id: 14, region_key: 'clock', region_type: 'time-date', x: 20, y: 30, width: 400, height: 90, z_index: 3 }]
+    },
+    content: { clock: { value: '{{hh}}:{{mm}}', timezone: 'Europe/London' } }
+  });
+
+  assert.equal(payload.regions[0].x, 20);
+  assert.equal(payload.regions[0].width, 400);
+  assert.equal(payload.regions[0].content.value, '{{hh}}:{{mm}}');
+  assert.equal(payload.existingContent.clock.timezone, 'Europe/London');
+});
+
+test('thumbnail regions use shared region renderers and their source context', () => {
+  const calls = [];
+  const registry = {
+    get(type) {
+      return {
+        renderPreview(...args) {
+          calls.push({ type, args });
+          return '<span>' + type + '</span>';
+        }
+      };
+    }
+  };
+  const apiSources = [{ id: 8, responseJson: [{ name: 'Ada' }] }];
+  const payload = {
+    regions: [
+      { id: 1, region_key: 'clock', region_type: 'time-date', x: 20, y: 12, width: 200, height: 80, z_index: 4, content: { value: '{{hh}}:{{mm}}', timezone: 'UTC' } },
+      { id: 2, region_key: 'donations', region_type: 'api', x: 220, y: 12, width: 300, height: 80, z_index: 2, content: { source_id: 8, value: '{{name}}' } }
+    ],
+    apiSources: apiSources,
+    rssFeeds: [],
+    weatherLocations: [],
+    timetableGroups: []
+  };
+
+  const html = render(payload, registry);
+
+  assert.match(html, /data-region-key="clock"[^>]*><span>time-date<\/span>/);
+  assert.match(html, /data-region-key="donations"[^>]*><span>api<\/span>/);
+  assert.equal(calls[0].args[3], 1);
+  assert.equal(calls[1].args[2].sources, apiSources);
+});
+
+test('thumbnail time/date uses the editor renderer to expand current-time tokens', () => {
+  const registry = {
+    get(type) {
+      return type === 'time-date' ? loadEditorTimeDateModule() : null;
+    }
+  };
+  const html = render({
+    regions: [{
+      id: 4,
+      region_key: 'clock',
+      region_type: 'time-date',
+      x: 0,
+      y: 0,
+      width: 320,
+      height: 80,
+      content: { value: '{{hh}}:{{mm}}', timezone: 'UTC' }
+    }]
+  }, registry);
+
+  assert.match(html, /<div class="template-region time-date"/);
+  assert.match(html, /class="template-region-text-scale"[^>]*>\d{2}:\d{2}<\/div>/);
+});