import { expect, test } from "bun:test";
import { predictLayout } from "../adapters/prediction.ts";
test("prediction measures desktop and mobile geometry and restores closed disclosure", async () => {
const html =
'Menu
Content
{
const html = `
`;
const result = await predictLayout(html, {
selectors: [".target"],
strict: true,
});
const target = result.predictions.filter(
(prediction) =>
prediction.selector === '[data-muddle-predicted="predict-0"]',
);
expect(target.map((prediction) => prediction.width)).toEqual([240, 160]);
expect(target.map((prediction) => prediction.x)).toEqual([100, 24]);
expect(result.html).toContain("--muddle-predicted-desktop-width: 240px");
expect(result.html).toContain("--muddle-predicted-mobile-width: 160px");
});
test("prediction settles chained relations before writing the static page", async () => {
const html = `
`;
const result = await predictLayout(html, {
selectors: [".target"],
strict: true,
});
const target = result.predictions.filter(
(prediction) =>
prediction.selector === '[data-muddle-predicted="predict-0"]',
);
expect(target.map((prediction) => prediction.width)).toEqual([216, 216]);
expect(target.map((prediction) => prediction.x)).toEqual([72, 72]);
});
test("prediction follows the page's widest mobile breakpoint", async () => {
const html =
'';
const result = await predictLayout(html, {
selectors: [".panel"],
strict: true,
});
expect(result.predictions.map((prediction) => prediction.width)).toEqual([
500, 280,
]);
expect(result.html).toContain("@media (max-width: 40rem)");
});
test("prediction emits each selected breakpointAcc relation layer", async () => {
const html =
'';
const result = await predictLayout(html, {
selectors: [".panel"],
breakpointAcc: ["LG", "MD"],
strict: true,
});
expect(result.html).toContain("--muddle-relate-panel-lg-width: 420px");
expect(result.html).toContain("--muddle-relate-panel-md-width: 300px");
expect(result.html).toContain("@media (max-width: 64rem)");
expect(result.html).toContain("@media (max-width: 48rem)");
});
test("prediction discovers dotted anchor groups and emits reflective metadata", async () => {
const html =
'';
const result = await predictLayout(html, { strict: true });
expect(result.groups).toEqual([
{ name: "docs", anchors: ["docs.intro", "docs.api"] },
]);
expect(result.html).toContain('data-muddle-group="docs"');
expect(result.html).toContain("--muddle-reflect-docs-count: 2");
});