287 lines
8.1 KiB
JavaScript
287 lines
8.1 KiB
JavaScript
import test from "node:test";
|
|
import assert from "node:assert/strict";
|
|
|
|
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>');
|
|
|
|
assert.match(html, /allow="autoplay; fullscreen; picture-in-picture"/);
|
|
assert.match(html, /autoplay=1/);
|
|
assert.match(html, /playsinline=1/);
|
|
assert.match(html, /mute=1/);
|
|
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>');
|
|
|
|
assert.match(html, /<video\b[^>]*playsinline/);
|
|
assert.match(html, /<video\b[^>]*autoplay/);
|
|
assert.match(html, /<video\b[^>]*muted/);
|
|
});
|
|
|
|
test("marks transparent graphic documents at the html and body level", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
type: "video",
|
|
html: '<iframe src="https://player.example.com/video"></iframe>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
});
|
|
|
|
assert.match(page, /<html lang="en" class="graphic-document transparent">/);
|
|
assert.match(page, /<body class="graphic transparent is-loading"/);
|
|
});
|
|
|
|
test("includes readiness script when wait mode is enabled", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
type: "video",
|
|
html: '<iframe src="https://player.example.com/video"></iframe>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
wait: true,
|
|
});
|
|
|
|
assert.match(page, /new MutationObserver/);
|
|
assert.match(page, /node\.querySelectorAll\("iframe, img, video"\)/);
|
|
assert.match(page, /body\.classList\.add\("is-ready"\)/);
|
|
});
|
|
|
|
test("includes configurable reveal delay values", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
type: "video",
|
|
html: '<iframe src="https://player.example.com/video"></iframe>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
wait: true,
|
|
readyDelay: 2500,
|
|
maxWait: 15000,
|
|
});
|
|
|
|
assert.match(page, /const readyDelay = 2500;/);
|
|
assert.match(page, /const maxWait = 15000;/);
|
|
});
|
|
|
|
test("can render immediately when wait mode is disabled", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
type: "video",
|
|
html: '<iframe src="https://player.example.com/video"></iframe>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
wait: false,
|
|
});
|
|
|
|
assert.match(page, /<body class="graphic transparent is-ready"/);
|
|
assert.doesNotMatch(page, /document\.querySelectorAll/);
|
|
});
|
|
|
|
test("includes autoplay assist when autoplay is enabled", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
type: "video",
|
|
html: '<blockquote class="twitter-tweet"></blockquote>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
autoplay: true,
|
|
});
|
|
|
|
assert.match(page, /const playVideo = \(video\) =>/);
|
|
assert.match(page, /iframe\.contentDocument\.querySelectorAll\("video"\)/);
|
|
assert.match(page, /Cross-origin provider frames cannot be inspected/);
|
|
});
|
|
|
|
test("adds a provider class for Bluesky embeds", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://bsky.app/profile/example.com/post/abc",
|
|
embed: {
|
|
provider_name: "Bluesky",
|
|
type: "rich",
|
|
width: 600,
|
|
height: 480,
|
|
html: '<blockquote class="bluesky-embed"></blockquote>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
});
|
|
|
|
assert.match(page, /<section class="embed provider-bluesky"/);
|
|
assert.match(page, /--embed-width:500px/);
|
|
assert.doesNotMatch(page, /collage-card provider-example"[^>]*--embed-height/);
|
|
});
|
|
|
|
test("caps rendered embed width at 500px", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
provider_name: "Example",
|
|
type: "rich",
|
|
width: 1200,
|
|
html: '<iframe src="https://player.example.com/video"></iframe>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
});
|
|
|
|
assert.match(page, /--embed-width:500px/);
|
|
});
|
|
|
|
test("omits autoplay assist when autoplay is disabled", () => {
|
|
const page = graphicPage({
|
|
targetUrl: "https://example.com/video",
|
|
embed: {
|
|
type: "video",
|
|
html: '<video src="https://cdn.example.com/video.mp4"></video>',
|
|
},
|
|
width: 1920,
|
|
height: 1080,
|
|
fit: "contain",
|
|
transparent: true,
|
|
scale: 1,
|
|
chroma: "#00ff00",
|
|
autoplay: false,
|
|
});
|
|
|
|
assert.doesNotMatch(page, /const playVideo = \(video\) =>/);
|
|
});
|
|
|
|
test("renders a CasparCG template shell", () => {
|
|
const page = casparTemplatePage();
|
|
|
|
assert.match(page, /<body class="graphic transparent is-loading"/);
|
|
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/);
|
|
});
|