187 lines
5.0 KiB
JavaScript
187 lines
5.0 KiB
JavaScript
import test from "node:test";
|
|
import assert from "node:assert/strict";
|
|
|
|
import { graphicPage, 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("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;--embed-height:480px/);
|
|
});
|
|
|
|
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\) =>/);
|
|
});
|