mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
dd71eb381e
Reusable pk-* building blocks (motion/kit/) that recreate the control panel's look for HyperFrames compositions: frame chrome, task card, status pills with swap crossfade, chips, toast, typing reveal, cursor sprite. Tokens lifted from the panel's dark theme and badge components. Reference composition motion/compositions/panel-demo/ (12s, both cuts): a task title types into intake, the card materializes, the cursor clicks, the status pill flips to completed, a toast slides in. Verified: motion vitest gate green (7/7); both cuts visually checked in-browser at native resolution. Co-authored-by: Renn F <rennf93@users.noreply.github.com>
89 lines
3.4 KiB
JavaScript
89 lines
3.4 KiB
JavaScript
import { readFileSync, existsSync } from "node:fs";
|
|
import { dirname, join } from "node:path";
|
|
import { fileURLToPath } from "node:url";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
// HTML-structure smoke test for the panel-demo composition — mirrors
|
|
// release-announcement.test.js. We parse the HTML as text and assert
|
|
// structural invariants: dimensions, props.js wiring, the kit stylesheet
|
|
// link, timed clips, the kit's pill/toast/typing/cursor pieces actually
|
|
// being used, and the offline-render constraint (no CDN, no network URLs).
|
|
|
|
const here = dirname(fileURLToPath(import.meta.url));
|
|
const dir = here;
|
|
const read = (name) => readFileSync(join(dir, name), "utf8");
|
|
|
|
const orientations = [
|
|
{ file: "vertical.html", height: "1920" },
|
|
{ file: "square.html", height: "1080" },
|
|
];
|
|
|
|
describe("panel-demo composition", () => {
|
|
it("ships props.js (default preview values, sidecar overwrites at render)", () => {
|
|
expect(existsSync(join(dir, "props.js"))).toBe(true);
|
|
const src = read("props.js");
|
|
expect(src).toContain("window.__PROPS__");
|
|
expect(src).toContain("window.__ORIENTATION__");
|
|
expect(src).toContain("taskTitle");
|
|
expect(src).toContain("toastTitle");
|
|
expect(src).toContain("toastBody");
|
|
});
|
|
|
|
it.each(orientations)("$file parses with correct dimensions and wiring", ({ file, height }) => {
|
|
const html = read(file);
|
|
|
|
// HyperFrames render params.
|
|
expect(html).toContain('data-width="1080"');
|
|
expect(html).toContain(`data-height="${height}"`);
|
|
expect(html).toMatch(/data-duration="12"/);
|
|
expect(html).toMatch(/data-fps="30"/);
|
|
|
|
// props.js loaded before the kit helper and before any inline script
|
|
// reads window.__PROPS__ / window.PanelKit.
|
|
const propsIdx = html.indexOf('<script src="props.js"></script>');
|
|
const kitJsIdx = html.indexOf('<script src="../../kit/kit.js"></script>');
|
|
const inlineIdx = html.indexOf("window.__timelines");
|
|
expect(propsIdx).toBeGreaterThan(-1);
|
|
expect(kitJsIdx).toBeGreaterThan(propsIdx);
|
|
expect(inlineIdx).toBeGreaterThan(kitJsIdx);
|
|
|
|
// Kit stylesheet linked (this composition has no theme.css of its own).
|
|
expect(html).toContain('href="../../kit/kit.css"');
|
|
|
|
// At least one timed clip element.
|
|
expect(html).toMatch(/class="[^"]*clip[^"]*"/);
|
|
|
|
// Panel frame chrome.
|
|
expect(html).toContain("pk-frame");
|
|
expect(html).toContain("pk-frame__sidebar");
|
|
expect(html).toContain("pk-frame__topbar");
|
|
|
|
// Typing reveal: container + caret present, wired to the kit helper.
|
|
expect(html).toContain('id="typeTitle"');
|
|
expect(html).toContain("pk-caret");
|
|
expect(html).toContain("PanelKit.typeText");
|
|
|
|
// Task card + the progress -> completed pill swap.
|
|
expect(html).toContain("pk-card");
|
|
expect(html).toContain("pk-pill--progress");
|
|
expect(html).toContain("pk-pill--completed");
|
|
|
|
// Cursor glide + click.
|
|
expect(html).toContain("pk-cursor");
|
|
expect(html).toContain("pk-cursor__ring");
|
|
|
|
// Toast.
|
|
expect(html).toContain("pk-toast");
|
|
expect(html).toContain('id="toastTitle"');
|
|
expect(html).toContain('id="toastBody"');
|
|
|
|
// Outro headline moment.
|
|
expect(html).toContain("pk-outro");
|
|
expect(html).toContain("roboco.tech");
|
|
|
|
// No CDN / network fetch of any kind — the render is offline.
|
|
expect(html).not.toMatch(/<script[^>]+src="https?:\/\//);
|
|
expect(html).not.toMatch(/href="https?:\/\//);
|
|
});
|
|
});
|