collage

test/templates.test.js

@@ -1,7 +1,7 @@
 import test from "node:test";
 import assert from "node:assert/strict";
 
-import { casparTemplatePage, graphicPage, prepareEmbedHtml } from "../src/templates.js";
+import { casparTemplatePage, collagePage, graphicPage, homePage, prepareEmbedHtml } from "../src/templates.js";
 
 test("adds autoplay parameters and permissions to iframe embeds", () => {
   const html = prepareEmbedHtml('<iframe src="https://player.example.com/video?id=1"></iframe>');
@@ -13,6 +13,19 @@ test("adds autoplay parameters and permissions to iframe embeds", () => {
   assert.match(html, /muted=1/);
 });
 
+test("home page includes single graphic and collage forms", () => {
+  const page = homePage({ providersCount: 12 });
+
+  assert.match(page, /<form action="\/graphic" method="get">/);
+  assert.match(page, /<form class="collage-form" action="\/collage" method="get">/);
+  assert.match(page, /<textarea id="urls" name="urls"/);
+  assert.match(page, /name="spacing" type="number" value="48"/);
+  assert.match(page, /name="fade" type="number" value="0"/);
+  assert.match(page, /name="columns" type="number" value="3"/);
+  assert.match(page, /name="shuffle" value="1" type="checkbox" checked/);
+  assert.match(page, /Open collage/);
+});
+
 test("adds autoplay attributes to video tags", () => {
   const html = prepareEmbedHtml('<video src="https://cdn.example.com/video.mp4"></video>');
 
@@ -143,7 +156,8 @@ test("adds a provider class for Bluesky embeds", () => {
   });
 
   assert.match(page, /<section class="embed provider-bluesky"/);
-  assert.match(page, /--embed-width:500px;--embed-height:480px/);
+  assert.match(page, /--embed-width:500px/);
+  assert.doesNotMatch(page, /collage-card provider-example"[^>]*--embed-height/);
 });
 
 test("caps rendered embed width at 500px", () => {
@@ -192,3 +206,81 @@ test("renders a CasparCG template shell", () => {
   assert.match(page, /<section class="embed provider-empty"/);
   assert.match(page, /<script src="\/caspar\.js"><\/script>/);
 });
+
+test("renders a vertical scrolling collage page with repeated embed cards", () => {
+  const page = collagePage({
+    items: [
+      {
+        targetUrl: "https://example.com/post/1",
+        embed: {
+          provider_name: "Example",
+          type: "rich",
+          width: 700,
+          height: 480,
+          html: '<iframe src="https://player.example.com/1"></iframe>',
+        },
+      },
+      {
+        targetUrl: "https://example.com/post/2",
+        embed: {
+          provider_name: "Example",
+          type: "rich",
+          width: 500,
+          height: 480,
+          html: '<iframe src="https://player.example.com/2"></iframe>',
+        },
+      },
+    ],
+    width: 1920,
+    height: 1080,
+    transparent: true,
+    chroma: "#00ff00",
+    spacing: 48,
+    fade: 0,
+    columns: 3,
+    duration: 360,
+    repeat: 3,
+    shuffle: false,
+  });
+
+  assert.match(page, /class="graphic collage-page transparent is-ready"/);
+  assert.match(page, /--collage-spacing:48px/);
+  assert.match(page, /--collage-fade:0px/);
+  assert.match(page, /--collage-columns:3/);
+  assert.match(page, /--collage-card-width:500px/);
+  assert.match(page, /--collage-duration:360s/);
+  assert.equal((page.match(/class="embed collage-card provider-example"/g) || []).length, 12);
+  assert.equal((page.match(/class="collage-group"/g) || []).length, 2);
+  assert.match(page, /--embed-width:500px/);
+  assert.doesNotMatch(page, /collage-card provider-example"[^>]*--embed-height/);
+});
+
+test("shrinks collage card width to fit the configured screen width", () => {
+  const page = collagePage({
+    items: [
+      {
+        targetUrl: "https://example.com/post/1",
+        embed: {
+          provider_name: "Example",
+          type: "rich",
+          width: 500,
+          height: 480,
+          html: '<iframe src="https://player.example.com/1"></iframe>',
+        },
+      },
+    ],
+    width: 1280,
+    height: 720,
+    transparent: true,
+    chroma: "#00ff00",
+    spacing: 48,
+    columns: 4,
+    duration: 360,
+    repeat: 2,
+    shuffle: false,
+  });
+
+  assert.match(page, /--collage-card-width:260px/);
+  assert.match(page, /--embed-width:260px/);
+  assert.doesNotMatch(page, /collage-card provider-example"[^>]*--embed-height/);
+});