| 1 | /** |
| 2 | * Media-manifest contracts for the real-session media surface. |
| 3 | * |
| 4 | * Two enforceable states: |
| 5 | * pending — intent only: no asset fields, and no files may exist under |
| 6 | * web/public/media/. The component must render the visible |
| 7 | * "recording pending release candidate" state instead of any |
| 8 | * imagery. This is what keeps the site honest until the v0.9.2 |
| 9 | * dogfood recording (#4906) exists. |
| 10 | * published — complete or nothing: poster, video, per-locale captions, |
| 11 | * transcript, and GIF fallback all present. The suite checks |
| 12 | * file presence/bytes and PNG dimensions; video dimensions and |
| 13 | * duration are declared metadata whose physical verification |
| 14 | * remains in the recording checklist. |
| 15 | * |
| 16 | * The reduced-motion contract is structural: no autoplay anywhere, poster is |
| 17 | * the static default, and the GIF is offered only as a link. The test asserts |
| 18 | * the component source carries that contract. |
| 19 | */ |
| 20 | import { existsSync, readFileSync, readdirSync, statSync } from "node:fs"; |
| 21 | import { createHash } from "node:crypto"; |
| 22 | import { describe, expect, it } from "vitest"; |
| 23 | import { |
| 24 | getMediaAsset, |
| 25 | MEDIA_ASSETS, |
| 26 | MEDIA_BUDGETS, |
| 27 | MEDIA_PUBLIC_DIR, |
| 28 | REDUCED_MOTION_POLICY, |
| 29 | TERMINAL_SCREENSHOT, |
| 30 | type MediaAsset, |
| 31 | } from "./media-manifest"; |
| 32 | import { ALL_LOCALES } from "./i18n/config"; |
| 33 | |
| 34 | // Captions are required for locales that ship a complete pack, not for every |
| 35 | // routed locale: `locales` also includes `partial` locales, which route with an |
| 36 | // English-fallback pack. Promising a caption track per routed locale would be a |
| 37 | // claim the recording cannot meet, and the manifest exists to keep those claims |
| 38 | // honest. |
| 39 | const shippedLocales = ALL_LOCALES.filter((l) => l.status === "shipped").map((l) => l.code); |
| 40 | |
| 41 | const webRoot = new URL("../", import.meta.url); |
| 42 | const repoRoot = new URL("../../", import.meta.url); |
| 43 | |
| 44 | function publicFileBytes(src: string): number { |
| 45 | return statSync(new URL(`public/${src}`, webRoot)).size; |
| 46 | } |
| 47 | |
| 48 | function pngDimensions(src: string): [number, number] { |
| 49 | const image = readFileSync(new URL(`public/${src}`, webRoot)); |
| 50 | expect(image.subarray(1, 4).toString("ascii")).toBe("PNG"); |
| 51 | return [image.readUInt32BE(16), image.readUInt32BE(20)]; |
| 52 | } |
| 53 | |
| 54 | describe("media manifest integrity", () => { |
| 55 | it("keeps the terminal capture tied to its measured file and captured build", () => { |
| 56 | const src = TERMINAL_SCREENSHOT.src.slice(1); |
| 57 | const bytes = readFileSync(new URL(`public/${src}`, webRoot)); |
| 58 | expect(createHash("sha256").update(bytes).digest("hex")).toBe(TERMINAL_SCREENSHOT.sha256); |
| 59 | expect(pngDimensions(src)).toEqual([TERMINAL_SCREENSHOT.width, TERMINAL_SCREENSHOT.height]); |
| 60 | expect(TERMINAL_SCREENSHOT.sourceCommit).toMatch(/^[0-9a-f]{40}$/); |
| 61 | }); |
| 62 | |
| 63 | it("has unique asset ids and complete localized copy", () => { |
| 64 | const ids = MEDIA_ASSETS.map((a) => a.id); |
| 65 | expect(new Set(ids).size).toBe(ids.length); |
| 66 | for (const asset of MEDIA_ASSETS) { |
| 67 | for (const pair of [asset.title, asset.description, asset.pendingLabel]) { |
| 68 | expect(pair.en.trim().length, `${asset.id} en`).toBeGreaterThan(0); |
| 69 | expect(pair.zh.trim().length, `${asset.id} zh`).toBeGreaterThan(0); |
| 70 | } |
| 71 | expect(asset.id).toMatch(/^[a-z0-9-]+$/); |
| 72 | } |
| 73 | }); |
| 74 | |
| 75 | it("keeps pending entries asset-free on disk and in the manifest", () => { |
| 76 | const mediaDir = new URL(`public/${MEDIA_PUBLIC_DIR}/`, webRoot); |
| 77 | const onDisk = existsSync(mediaDir) ? readdirSync(mediaDir) : []; |
| 78 | |
| 79 | for (const asset of MEDIA_ASSETS.filter((a) => a.status === "pending")) { |
| 80 | expect(asset.poster, asset.id).toBeUndefined(); |
| 81 | expect(asset.video, asset.id).toBeUndefined(); |
| 82 | expect(asset.captions, asset.id).toBeUndefined(); |
| 83 | expect(asset.gifFallback, asset.id).toBeUndefined(); |
| 84 | expect(asset.transcript, asset.id).toBeUndefined(); |
| 85 | // No staged or fabricated file may exist for a pending asset. |
| 86 | for (const file of onDisk) { |
| 87 | expect(file.startsWith(asset.id), `${asset.id}: unexpected file ${file}`).toBe(false); |
| 88 | } |
| 89 | // The pending state must say why, in both locales. |
| 90 | expect(asset.pendingLabel.en).toContain("pending release candidate"); |
| 91 | expect(asset.pendingLabel.zh.length).toBeGreaterThan(0); |
| 92 | } |
| 93 | }); |
| 94 | |
| 95 | it("requires published entries to be complete and satisfy enforceable budgets", () => { |
| 96 | for (const asset of MEDIA_ASSETS.filter((a) => a.status === "published")) { |
| 97 | assertPublishedAsset(asset); |
| 98 | } |
| 99 | }); |
| 100 | |
| 101 | it("keeps budgets aligned with the canonical screenshot contract", () => { |
| 102 | // The site screenshot contract pins 1280×720 under 500 KB; session-media |
| 103 | // posters follow the same budget so the two surfaces stay consistent. |
| 104 | expect(MEDIA_BUDGETS.poster).toEqual({ width: 1280, height: 720, maxBytes: 500_000 }); |
| 105 | expect(MEDIA_BUDGETS.video.width).toBe(MEDIA_BUDGETS.poster.width); |
| 106 | expect(MEDIA_BUDGETS.video.height).toBe(MEDIA_BUDGETS.poster.height); |
| 107 | expect(MEDIA_BUDGETS.video.maxDurationSeconds).toBeLessThanOrEqual(120); |
| 108 | expect(MEDIA_BUDGETS.gifFallback.maxBytes).toBeGreaterThan(0); |
| 109 | for (const locale of shippedLocales) { |
| 110 | expect(MEDIA_BUDGETS.captionLocales).toContain(locale); |
| 111 | } |
| 112 | }); |
| 113 | }); |
| 114 | |
| 115 | function assertPublishedAsset(asset: MediaAsset): void { |
| 116 | const { poster, video, captions, gifFallback, transcript } = asset; |
| 117 | expect(poster, `${asset.id}.poster`).toBeTruthy(); |
| 118 | expect(video, `${asset.id}.video`).toBeTruthy(); |
| 119 | expect(captions, `${asset.id}.captions`).toBeTruthy(); |
| 120 | expect(gifFallback, `${asset.id}.gifFallback`).toBeTruthy(); |
| 121 | expect(transcript, `${asset.id}.transcript`).toBeTruthy(); |
| 122 | |
| 123 | expect(pngDimensions(poster!.src)).toEqual([poster!.width, poster!.height]); |
| 124 | expect([poster!.width, poster!.height]).toEqual([ |
| 125 | MEDIA_BUDGETS.poster.width, |
| 126 | MEDIA_BUDGETS.poster.height, |
| 127 | ]); |
| 128 | expect(publicFileBytes(poster!.src)).toBeLessThanOrEqual(MEDIA_BUDGETS.poster.maxBytes); |
| 129 | |
| 130 | expect([video!.width, video!.height]).toEqual([ |
| 131 | MEDIA_BUDGETS.video.width, |
| 132 | MEDIA_BUDGETS.video.height, |
| 133 | ]); |
| 134 | expect(video!.durationSeconds).toBeLessThanOrEqual(MEDIA_BUDGETS.video.maxDurationSeconds); |
| 135 | expect(publicFileBytes(video!.src)).toBeLessThanOrEqual(MEDIA_BUDGETS.video.maxBytes); |
| 136 | |
| 137 | expect(publicFileBytes(gifFallback!.src)).toBeLessThanOrEqual( |
| 138 | MEDIA_BUDGETS.gifFallback.maxBytes, |
| 139 | ); |
| 140 | |
| 141 | const captionLangs = captions!.map((t) => t.srclang); |
| 142 | for (const locale of MEDIA_BUDGETS.captionLocales) { |
| 143 | expect(captionLangs, `${asset.id} missing ${locale} captions`).toContain(locale); |
| 144 | } |
| 145 | for (const track of captions!) { |
| 146 | expect(track.src.endsWith(".vtt"), track.src).toBe(true); |
| 147 | expect(publicFileBytes(track.src), track.src).toBeGreaterThan(0); |
| 148 | expect(track.label.trim().length).toBeGreaterThan(0); |
| 149 | } |
| 150 | |
| 151 | expect(existsSync(new URL(transcript!, repoRoot)), `${asset.id}.transcript`).toBe(true); |
| 152 | } |
| 153 | |
| 154 | describe("session media component contract", () => { |
| 155 | const component = readFileSync( |
| 156 | new URL("../components/session-media.tsx", import.meta.url), |
| 157 | "utf8", |
| 158 | ); |
| 159 | |
| 160 | it("renders the visible pending state instead of any imagery", () => { |
| 161 | expect(component).toContain('asset.status === "pending"'); |
| 162 | expect(component).toContain("session-media-pending"); |
| 163 | expect(component).toContain("asset.pendingLabel"); |
| 164 | // Pending copy states plainly that nothing is recorded yet, both locales. |
| 165 | expect(component).toContain("There is no recording yet"); |
| 166 | expect(component).toContain("还没有录像"); |
| 167 | }); |
| 168 | |
| 169 | it("carries the structural reduced-motion contract: no autoplay, ever", () => { |
| 170 | expect(component).toContain("REDUCED_MOTION_POLICY"); |
| 171 | expect(REDUCED_MOTION_POLICY).toBe("static-poster-no-autoplay"); |
| 172 | // No autoplay as a JSX/DOM attribute (the policy string and prose may |
| 173 | // mention the word; the attribute must never appear). |
| 174 | expect(component).not.toMatch(/autoPlay\s*[={]/); |
| 175 | expect(component).not.toMatch(/\sautoplay\s*[="]/); |
| 176 | expect(component).toContain('preload="none"'); |
| 177 | expect(component).toContain("controls"); |
| 178 | expect(component).toContain("poster={`/${poster.src}`}"); |
| 179 | }); |
| 180 | |
| 181 | it("wires captions, transcript, and the GIF fallback for published assets", () => { |
| 182 | expect(component).toContain('kind="captions"'); |
| 183 | expect(component).toContain("srcLang={track.srclang}"); |
| 184 | expect(component).toContain("asset.gifFallback"); |
| 185 | expect(component).toContain("asset.transcript"); |
| 186 | }); |
| 187 | |
| 188 | it("exposes machine-checkable state hooks", () => { |
| 189 | expect(component).toContain("data-media-id={asset.id}"); |
| 190 | expect(component).toContain("data-media-status={asset.status}"); |
| 191 | expect(component).toContain("data-reduced-motion-policy={REDUCED_MOTION_POLICY}"); |
| 192 | }); |
| 193 | |
| 194 | it("documents the recording plan location from the pending state", () => { |
| 195 | expect(component).toContain("docs/releases/v0.9.2-media-plan.md"); |
| 196 | expect(existsSync(new URL("docs/releases/v0.9.2-media-plan.md", repoRoot))).toBe(true); |
| 197 | }); |
| 198 | |
| 199 | it("keeps the first-fleet-session entry addressable for the guide page", () => { |
| 200 | const asset = getMediaAsset("first-fleet-session"); |
| 201 | expect(asset).toBeTruthy(); |
| 202 | expect(["pending", "published"]).toContain(asset!.status); |
| 203 | const guide = readFileSync( |
| 204 | new URL("../app/[locale]/docs/guide/page.tsx", import.meta.url), |
| 205 | "utf8", |
| 206 | ); |
| 207 | expect(guide).toContain('getMediaAsset("first-fleet-session")'); |
| 208 | expect(guide).toContain("<SessionMedia"); |
| 209 | }); |
| 210 | }); |
| 211 |