ekklesiaandClaude Opus 5.5
4bcdb578e6
Every browser 'online' event reset the display host to its loading state and mounted the module again: a fresh viewer session, a fresh stage, and every cached object URL released, on each Wi-Fi blip. And a device revoked while its display was open never noticed; it kept playing cached content and polling 403s until someone reloaded the page. The host now re-resolves its descriptor in the background (ADR 0043) and only replaces the frame when the answer actually changed: a new version or principal remounts, a refusal returns the screen to pairing (ADR 0036), and any other failure keeps the running display. A module request refused with 401/403 prompts the same revalidation, throttled, so revocation is noticed within one heartbeat. The offline indicator waits ten seconds before appearing, so a momentary blip shows nothing, and no longer names the platform on a lobby wall. Co-Authored-By: Claude Opus 5.5 <[email protected]>
1165 lines
40 KiB
TypeScript
1165 lines
40 KiB
TypeScript
import { MODULE_UI_ABI_VERSION, type ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
|
|
import { act, Component, type ReactElement, type ReactNode } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { HostApp } from "../src/browser/HostApp.js";
|
|
import { DisplayApp } from "../src/display/DisplayApp.js";
|
|
import type {
|
|
EkklesiaHostConfig,
|
|
HostEventSourceFactory,
|
|
HostEventSourceOptions,
|
|
} from "../src/host-protocol.js";
|
|
import type { DisplayConnectivitySource } from "../src/display/offline-status.js";
|
|
import { deepQuery, isolatedMountTarget, isolatedText } from "./support/isolated-dom.js";
|
|
|
|
declare global {
|
|
// eslint-disable-next-line no-var
|
|
var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
|
|
}
|
|
|
|
const apiBaseUrl = "https://ekklesia.example.test";
|
|
|
|
let container: HTMLDivElement;
|
|
let root: Root;
|
|
let consoleError: ReturnType<typeof vi.spyOn>;
|
|
|
|
beforeEach(() => {
|
|
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
|
|
container = document.createElement("div");
|
|
document.body.append(container);
|
|
root = createRoot(container);
|
|
consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await act(async () => root.unmount());
|
|
container.remove();
|
|
consoleError.mockRestore();
|
|
});
|
|
|
|
function descriptorPayload(
|
|
id = "announcements",
|
|
version = "1.2.0",
|
|
viewer: unknown = {
|
|
kind: "authenticated",
|
|
userId: "user-1",
|
|
},
|
|
) {
|
|
return {
|
|
viewer,
|
|
module: {
|
|
contributions: [],
|
|
api: { baseUrl: `/api/v1/modules/${id}` },
|
|
display: { url: `/api/v1/module-ui/${id}/${version}/display` },
|
|
id,
|
|
page: { url: `/display/${id}` },
|
|
permissions: [`${id}.slideshow.view`],
|
|
realtime: { baseUrl: `/api/v1/module-realtime/${id}` },
|
|
version,
|
|
},
|
|
};
|
|
}
|
|
|
|
function json(body: unknown, status = 200): Response {
|
|
return new Response(JSON.stringify(body), {
|
|
headers: { "content-type": "application/json" },
|
|
status,
|
|
});
|
|
}
|
|
|
|
interface PlatformOptions {
|
|
readonly descriptorStatus?: number;
|
|
readonly principal?: unknown;
|
|
}
|
|
|
|
function platform(options: PlatformOptions = {}) {
|
|
const calls: Array<{ readonly init: RequestInit | undefined; readonly url: string }> = [];
|
|
const fetch = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
|
|
const url = String(input);
|
|
calls.push({ init, url });
|
|
if (url.endsWith("/api/v1/principal")) {
|
|
return json(options.principal ?? { kind: "authenticated", userId: "user-1" });
|
|
}
|
|
if (url.endsWith("/api/v1/module-displays/announcements")) {
|
|
return json(descriptorPayload(), options.descriptorStatus ?? 200);
|
|
}
|
|
if (url.endsWith("/api/v1/device-pairing/requests")) {
|
|
return json(
|
|
{ code: "482731", expiresAt: new Date().toISOString(), pollIntervalMs: 60_000 },
|
|
201,
|
|
);
|
|
}
|
|
if (url.endsWith("/api/v1/device-pairing/claims")) {
|
|
return json({ status: "pending" });
|
|
}
|
|
if (url.endsWith("/api/v1/modules/announcements/slides")) {
|
|
return json([{ id: "slide-1" }]);
|
|
}
|
|
return json({ code: "NOT_FOUND" }, 404);
|
|
}) as unknown as typeof globalThis.fetch;
|
|
return { calls, fetch };
|
|
}
|
|
|
|
class FakeEventSource {
|
|
readonly CLOSED = 2 as const;
|
|
readonly CONNECTING = 0 as const;
|
|
readonly OPEN = 1 as const;
|
|
readonly listeners = new Map<string, Set<EventListener>>();
|
|
closeCalls = 0;
|
|
readyState: number = this.CONNECTING;
|
|
|
|
addEventListener(type: string, listener: EventListener): void {
|
|
const listeners = this.listeners.get(type) ?? new Set<EventListener>();
|
|
listeners.add(listener);
|
|
this.listeners.set(type, listeners);
|
|
}
|
|
|
|
removeEventListener(type: string, listener: EventListener): void {
|
|
this.listeners.get(type)?.delete(listener);
|
|
}
|
|
|
|
close(): void {
|
|
this.closeCalls += 1;
|
|
this.readyState = this.CLOSED;
|
|
}
|
|
|
|
emit(type: string, data?: string): void {
|
|
if (type === "open") {
|
|
this.readyState = this.OPEN;
|
|
}
|
|
const event = Object.freeze({ data, type }) as unknown as Event;
|
|
for (const listener of this.listeners.get(type) ?? []) {
|
|
listener(event);
|
|
}
|
|
}
|
|
}
|
|
|
|
function eventSources() {
|
|
const calls: Array<{
|
|
readonly options: HostEventSourceOptions;
|
|
readonly source: FakeEventSource;
|
|
readonly url: string;
|
|
}> = [];
|
|
const factory = ((url: string, options: HostEventSourceOptions): EventSource => {
|
|
const source = new FakeEventSource();
|
|
calls.push({ options, source, url });
|
|
return source as unknown as EventSource;
|
|
}) as HostEventSourceFactory;
|
|
return { calls, factory };
|
|
}
|
|
|
|
function artifact(
|
|
id = "announcements",
|
|
version = "1.2.0",
|
|
options: {
|
|
readonly cleanup?: () => void;
|
|
readonly mount?: (container: Element, context: ModuleUiHostContext) => undefined | (() => void);
|
|
} = {},
|
|
) {
|
|
return {
|
|
default: {
|
|
abi: MODULE_UI_ABI_VERSION,
|
|
id,
|
|
mount(element: Element, context: ModuleUiHostContext) {
|
|
if (options.mount) {
|
|
return options.mount(element, context);
|
|
}
|
|
element.textContent = `${context.moduleId}:display`;
|
|
return () => {
|
|
options.cleanup?.();
|
|
element.replaceChildren();
|
|
};
|
|
},
|
|
version,
|
|
},
|
|
};
|
|
}
|
|
|
|
async function render(
|
|
config: EkklesiaHostConfig,
|
|
importModule?: (url: string) => Promise<unknown>,
|
|
moduleId = "announcements",
|
|
connectivity?: DisplayConnectivitySource,
|
|
timing: {
|
|
readonly offlineIndicatorDelayMs?: number;
|
|
readonly revalidationIntervalMs?: number;
|
|
} = {
|
|
offlineIndicatorDelayMs: 0,
|
|
},
|
|
): Promise<void> {
|
|
await act(async () => {
|
|
root.render(
|
|
<DisplayApp
|
|
config={config}
|
|
{...(connectivity ? { connectivity } : {})}
|
|
{...(importModule ? { importModule } : {})}
|
|
{...timing}
|
|
moduleId={moduleId}
|
|
/>,
|
|
);
|
|
});
|
|
}
|
|
|
|
function query(testId: string): HTMLElement | null {
|
|
return container.querySelector(`[data-testid="${testId}"]`);
|
|
}
|
|
|
|
function moduleUrl(source: string): string {
|
|
return `data:text/javascript;base64,${Buffer.from(source, "utf8").toString("base64")}`;
|
|
}
|
|
|
|
describe("display host — full-viewport boundary", () => {
|
|
it("mounts only the display artifact with no Dashboard chrome", async () => {
|
|
const server = platform();
|
|
const imported: string[] = [];
|
|
await render({ apiBaseUrl, fetch: server.fetch }, async (url) => {
|
|
imported.push(url);
|
|
return artifact();
|
|
});
|
|
|
|
expect(imported).toEqual([`${apiBaseUrl}/api/v1/module-ui/announcements/1.2.0/display`]);
|
|
expect(isolatedText(query("display-module-container"))).toBe("announcements:display");
|
|
expect(container.querySelector("header")).toBeNull();
|
|
expect(container.querySelector("nav")).toBeNull();
|
|
expect(container.querySelector("aside")).toBeNull();
|
|
expect(container.textContent).not.toContain("Ekklesia");
|
|
expect(query("display-host")?.style.height).toBe("100%");
|
|
expect(query("display-host")?.style.minHeight).toBe("100dvh");
|
|
});
|
|
|
|
it("constructs the same browser-safe API, principal, permission, and realtime context", async () => {
|
|
const server = platform();
|
|
const live = eventSources();
|
|
let seenContext: ModuleUiHostContext | undefined;
|
|
await render({ apiBaseUrl, eventSourceFactory: live.factory, fetch: server.fetch }, async () =>
|
|
artifact("announcements", "1.2.0", {
|
|
mount(element, context) {
|
|
seenContext = context;
|
|
void context.api.request("slides");
|
|
const subscription = context.realtime.subscribe("state", {});
|
|
element.textContent = context.permissions.has("announcements.slideshow.view")
|
|
? "permitted"
|
|
: "denied";
|
|
return () => subscription.close();
|
|
},
|
|
}),
|
|
);
|
|
|
|
expect(Object.keys(seenContext ?? {}).sort()).toEqual([
|
|
"api",
|
|
"contributions",
|
|
"display",
|
|
"moduleId",
|
|
"permissions",
|
|
"principal",
|
|
"realtime",
|
|
]);
|
|
expect(seenContext?.principal).toEqual({ kind: "authenticated", userId: "user-1" });
|
|
expect(isolatedText(query("display-module-container"))).toBe("permitted");
|
|
expect(
|
|
server.calls.some((call) => call.url.endsWith("/api/v1/modules/announcements/slides")),
|
|
).toBe(true);
|
|
expect(live.calls[0]).toMatchObject({
|
|
options: { withCredentials: true },
|
|
url: `${apiBaseUrl}/api/v1/module-realtime/announcements/state`,
|
|
});
|
|
});
|
|
|
|
it("uses a genuine dynamic import and renders an Announcements snapshot with its direct object URL unchanged", async () => {
|
|
const server = platform();
|
|
const live = eventSources();
|
|
const requestedArtifacts: string[] = [];
|
|
const source = `
|
|
export default {
|
|
abi: ${MODULE_UI_ABI_VERSION},
|
|
id: "announcements",
|
|
version: "1.2.0",
|
|
mount(container, context) {
|
|
const image = document.createElement("img");
|
|
image.setAttribute("data-testid", "announcement-slide");
|
|
container.append(image);
|
|
const subscription = context.realtime.subscribe("state", {
|
|
onSnapshot(state) {
|
|
image.src = state.mode === "on" ? state.slides[state.currentSlide].url : "";
|
|
},
|
|
onUpdate(state) {
|
|
image.src = state.mode === "on" ? state.slides[state.currentSlide].url : "";
|
|
},
|
|
});
|
|
return () => { subscription.close(); container.replaceChildren(); };
|
|
},
|
|
};
|
|
`;
|
|
|
|
await render(
|
|
{ apiBaseUrl, eventSourceFactory: live.factory, fetch: server.fetch },
|
|
async (url) => {
|
|
requestedArtifacts.push(url);
|
|
return import(moduleUrl(source));
|
|
},
|
|
);
|
|
|
|
const deliveryUrl =
|
|
"https://objects.example.test/ekklesia-announcements-assets/slides%2Fwelcome.jpg?X-Amz-Signature=opaque";
|
|
await act(async () => {
|
|
live.calls[0]?.source.emit("open");
|
|
live.calls[0]?.source.emit(
|
|
"snapshot",
|
|
JSON.stringify({
|
|
payload: {
|
|
currentSlide: 0,
|
|
mode: "on",
|
|
slideSeconds: 7,
|
|
slides: [{ url: deliveryUrl }],
|
|
},
|
|
sequence: 1,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(requestedArtifacts).toEqual([
|
|
`${apiBaseUrl}/api/v1/module-ui/announcements/1.2.0/display`,
|
|
]);
|
|
expect(deepQuery(container, '[data-testid="announcement-slide"]')?.getAttribute("src")).toBe(
|
|
deliveryUrl,
|
|
);
|
|
expect(container.innerHTML).not.toContain("socket.io");
|
|
expect(container.innerHTML).not.toContain("mqtt");
|
|
});
|
|
|
|
it("keeps one Announcements-shaped module's management and slideshow roots distinct", async () => {
|
|
const live = eventSources();
|
|
const requestedArtifacts: string[] = [];
|
|
const fetch = vi.fn(async (input: RequestInfo | URL) => {
|
|
const url = String(input);
|
|
if (url.endsWith("/api/v1/principal")) {
|
|
return json({ kind: "authenticated", userId: "user-1" });
|
|
}
|
|
if (url.endsWith("/api/v1/dashboard/navigation")) {
|
|
return json({
|
|
groups: [],
|
|
ungrouped: [
|
|
{
|
|
module: {
|
|
contributions: [],
|
|
api: { baseUrl: "/api/v1/modules/announcements" },
|
|
display: { url: "/display/announcements" },
|
|
id: "announcements",
|
|
permissions: ["announcements.slideshow.view"],
|
|
realtime: { baseUrl: "/api/v1/module-realtime/announcements" },
|
|
ui: { url: "/api/v1/module-ui/announcements/1.2.0" },
|
|
version: "1.2.0",
|
|
},
|
|
name: "Announcements",
|
|
},
|
|
],
|
|
});
|
|
}
|
|
if (url.endsWith("/api/v1/module-displays/announcements")) {
|
|
return json(descriptorPayload());
|
|
}
|
|
return json({ code: "NOT_FOUND" }, 404);
|
|
}) as unknown as typeof globalThis.fetch;
|
|
const config = { apiBaseUrl, eventSourceFactory: live.factory, fetch };
|
|
const importer = async (url: string): Promise<unknown> => {
|
|
requestedArtifacts.push(url);
|
|
if (!url.endsWith("/display")) {
|
|
return artifact("announcements", "1.2.0", {
|
|
mount(element) {
|
|
element.textContent = "announcement management";
|
|
return () => element.replaceChildren();
|
|
},
|
|
});
|
|
}
|
|
return artifact("announcements", "1.2.0", {
|
|
mount(element, context) {
|
|
const image = document.createElement("img");
|
|
image.dataset.testid = "both-role-slide";
|
|
element.append(image);
|
|
const subscription = context.realtime.subscribe<{
|
|
readonly currentSlide: number;
|
|
readonly mode: "off" | "on";
|
|
readonly slides: readonly { readonly url: string }[];
|
|
}>("state", {
|
|
onSnapshot(state) {
|
|
image.src = state.mode === "on" ? (state.slides[state.currentSlide]?.url ?? "") : "";
|
|
},
|
|
});
|
|
return () => {
|
|
subscription.close();
|
|
element.replaceChildren();
|
|
};
|
|
},
|
|
});
|
|
};
|
|
|
|
await act(async () => root.render(<HostApp config={config} importModule={importer} />));
|
|
// The management artifact rendered inside its own isolated root, not the shell's own tree.
|
|
expect(isolatedText(container.querySelector('[data-testid="module-container"]'))).toContain(
|
|
"announcement management",
|
|
);
|
|
expect(container.querySelector("nav")).not.toBeNull();
|
|
expect(requestedArtifacts).toEqual([`${apiBaseUrl}/api/v1/module-ui/announcements/1.2.0`]);
|
|
|
|
await act(async () => root.unmount());
|
|
root = createRoot(container);
|
|
await act(async () =>
|
|
root.render(<DisplayApp config={config} importModule={importer} moduleId="announcements" />),
|
|
);
|
|
const deliveryUrl =
|
|
"https://objects.example.test/module-assets/slide.jpg?X-Amz-Signature=opaque";
|
|
await act(async () => {
|
|
live.calls[0]?.source.emit("open");
|
|
live.calls[0]?.source.emit(
|
|
"snapshot",
|
|
JSON.stringify({
|
|
payload: { currentSlide: 0, mode: "on", slides: [{ url: deliveryUrl }] },
|
|
sequence: 1,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(requestedArtifacts).toEqual([
|
|
`${apiBaseUrl}/api/v1/module-ui/announcements/1.2.0`,
|
|
`${apiBaseUrl}/api/v1/module-ui/announcements/1.2.0/display`,
|
|
]);
|
|
expect(deepQuery(container, '[data-testid="both-role-slide"]')?.getAttribute("src")).toBe(
|
|
deliveryUrl,
|
|
);
|
|
expect(container.querySelector("nav")).toBeNull();
|
|
expect(container.querySelector("header")).toBeNull();
|
|
expect(JSON.stringify(requestedArtifacts)).not.toMatch(/socket\.io|mqtt|10\.|localhost/u);
|
|
});
|
|
});
|
|
|
|
describe("display host — authentication and controlled failures", () => {
|
|
it("shows a pairing code instead of a human login when it has no identity", async () => {
|
|
const server = platform({ descriptorStatus: 403 });
|
|
const importer = vi.fn(async () => artifact());
|
|
|
|
await render({ apiBaseUrl, fetch: server.fetch }, importer);
|
|
|
|
// An unattended screen must never be sent to an email/password form: nobody is standing at it.
|
|
expect(query("display-host-signed-out")).toBeNull();
|
|
expect(query("display-pairing")).not.toBeNull();
|
|
expect(query("display-pairing-code")?.textContent).toBe("482731");
|
|
// The protected artifact is still not fetched, which is the invariant that matters.
|
|
expect(importer).not.toHaveBeenCalled();
|
|
// And the display never asks the human principal endpoint at all.
|
|
expect(server.calls.some((call) => call.url.endsWith("/api/v1/principal"))).toBe(false);
|
|
});
|
|
|
|
it("puts no request id, secret, or permission on a screen anyone can read", async () => {
|
|
const server = platform({ descriptorStatus: 403 });
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
vi.fn(async () => artifact()),
|
|
);
|
|
|
|
const rendered = container.textContent ?? "";
|
|
expect(rendered).toContain("482731");
|
|
expect(rendered).not.toMatch(/announcements\.slideshow\.view|device-pairing|claim|token/u);
|
|
});
|
|
|
|
it("does not import protected display code when the display is unavailable", async () => {
|
|
const server = platform({ descriptorStatus: 404 });
|
|
const importer = vi.fn(async () => artifact());
|
|
|
|
await render({ apiBaseUrl, fetch: server.fetch }, importer);
|
|
|
|
// 404 is "there is no such display", which pairing cannot fix — so it stays a plain message.
|
|
expect(query("display-host-unavailable")).not.toBeNull();
|
|
expect(query("display-pairing")).toBeNull();
|
|
expect(importer).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("clears partial mount DOM, renders no caught detail, and retries in a fresh container", async () => {
|
|
const server = platform();
|
|
let attempts = 0;
|
|
const containers: Element[] = [];
|
|
const importer = vi.fn(async () => {
|
|
attempts += 1;
|
|
return artifact("announcements", "1.2.0", {
|
|
mount(element) {
|
|
containers.push(element);
|
|
if (attempts === 1) {
|
|
element.textContent = "secret at /srv/modules/announcements";
|
|
throw new Error("mount exploded with token=secret");
|
|
}
|
|
element.textContent = "recovered";
|
|
return () => element.replaceChildren();
|
|
},
|
|
});
|
|
});
|
|
|
|
await render({ apiBaseUrl, fetch: server.fetch }, importer);
|
|
|
|
expect(query("display-error")).not.toBeNull();
|
|
expect(container.textContent).not.toContain("/srv/");
|
|
expect(container.textContent).not.toContain("secret");
|
|
await act(async () => query("display-retry")?.click());
|
|
|
|
expect(query("display-error")).toBeNull();
|
|
expect(isolatedText(query("display-module-container"))).toBe("recovered");
|
|
expect(containers).toHaveLength(2);
|
|
expect(containers[0]).not.toBe(containers[1]);
|
|
expect(containers[0]?.isConnected).toBe(false);
|
|
expect(consoleError).toHaveBeenCalledWith(
|
|
"[ekklesia] display UI failure module=announcements code=MODULE_UI_MOUNT_FAILED",
|
|
);
|
|
});
|
|
|
|
it.each([
|
|
"error",
|
|
"unhandledrejection",
|
|
] as const)("turns a post-mount page %s into one sanitized failure with manual retry", async (eventType) => {
|
|
const server = platform();
|
|
const cleanups: Element[] = [];
|
|
const mountedInto: Element[] = [];
|
|
const importer = vi.fn(async () =>
|
|
artifact("announcements", "1.2.0", {
|
|
mount(element) {
|
|
mountedInto.push(element);
|
|
element.textContent = "private render at /srv/modules/announcements";
|
|
return () => {
|
|
cleanups.push(element);
|
|
element.replaceChildren();
|
|
};
|
|
},
|
|
}),
|
|
);
|
|
|
|
await render({ apiBaseUrl, fetch: server.fetch }, importer);
|
|
expect(isolatedText(query("display-module-container"))).toContain("/srv/modules");
|
|
consoleError.mockClear();
|
|
|
|
await act(async () => {
|
|
const event =
|
|
eventType === "error"
|
|
? new ErrorEvent("error", {
|
|
error: new Error("token=secret-render-error"),
|
|
message: "token=secret-render-error",
|
|
})
|
|
: new Event("unhandledrejection");
|
|
window.dispatchEvent(event);
|
|
// A second signal from the same failed render must not run cleanup or transition twice.
|
|
window.dispatchEvent(new Event(eventType));
|
|
});
|
|
|
|
expect(query("display-error")).not.toBeNull();
|
|
expect(isolatedText(query("display-module-container"))).toBe("");
|
|
expect(container.textContent).toBe("This display could not be loaded.Retry");
|
|
expect(container.textContent).not.toMatch(/secret|\/srv\//u);
|
|
expect(importer).toHaveBeenCalledTimes(1);
|
|
expect(cleanups).toEqual([mountedInto[0]]);
|
|
expect(consoleError).toHaveBeenCalledTimes(1);
|
|
expect(consoleError).toHaveBeenCalledWith(
|
|
`[ekklesia] display UI failure module=announcements code=${
|
|
eventType === "error" ? "DISPLAY_UI_RUNTIME_ERROR" : "DISPLAY_UI_UNHANDLED_REJECTION"
|
|
}`,
|
|
);
|
|
|
|
await act(async () => query("display-retry")?.click());
|
|
|
|
expect(importer).toHaveBeenCalledTimes(2);
|
|
expect(query("display-error")).toBeNull();
|
|
expect(isolatedText(query("display-module-container"))).toContain("/srv/modules");
|
|
expect(mountedInto[0]?.isConnected).toBe(false);
|
|
expect(mountedInto[1]?.isConnected).toBe(true);
|
|
});
|
|
|
|
it("catches a React render failure reported after the artifact mount has returned", async () => {
|
|
const server = platform();
|
|
const cleanup = vi.fn();
|
|
await render({ apiBaseUrl, fetch: server.fetch }, async () =>
|
|
artifact("announcements", "1.2.0", {
|
|
mount(element) {
|
|
const moduleRoot = createRoot(element);
|
|
class ReportRenderFailure extends Component<{ readonly children: ReactNode }> {
|
|
override componentDidCatch(error: unknown): void {
|
|
// React's browser default reports an uncaught render through the page's global error
|
|
// facility. This test boundary makes that report deterministic under happy-dom,
|
|
// whose test runner otherwise intercepts the global exception first.
|
|
window.dispatchEvent(
|
|
new ErrorEvent("error", {
|
|
cancelable: true,
|
|
error,
|
|
message: error instanceof Error ? error.message : "display render failure",
|
|
}),
|
|
);
|
|
}
|
|
|
|
override render(): ReactNode {
|
|
return this.props.children;
|
|
}
|
|
}
|
|
const BrokenDisplay = (): ReactElement => {
|
|
throw new Error("late component secret at /srv/modules/announcements");
|
|
};
|
|
moduleRoot.render(
|
|
<ReportRenderFailure>
|
|
<BrokenDisplay />
|
|
</ReportRenderFailure>,
|
|
);
|
|
return () => {
|
|
cleanup();
|
|
moduleRoot.unmount();
|
|
};
|
|
},
|
|
}),
|
|
);
|
|
|
|
await act(async () => undefined);
|
|
|
|
expect(query("display-error")).not.toBeNull();
|
|
expect(container.textContent).toBe("This display could not be loaded.Retry");
|
|
expect(container.textContent).not.toMatch(/secret|\/srv\//u);
|
|
expect(cleanup).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("does not treat a module media/resource error as a crashed display runtime", async () => {
|
|
const server = platform();
|
|
const cleanup = vi.fn();
|
|
await render({ apiBaseUrl, fetch: server.fetch }, async () =>
|
|
artifact("announcements", "1.2.0", {
|
|
mount(element) {
|
|
const image = document.createElement("img");
|
|
image.dataset.testid = "display-media";
|
|
element.append(image);
|
|
return () => cleanup();
|
|
},
|
|
}),
|
|
);
|
|
|
|
await act(async () => {
|
|
deepQuery(container, '[data-testid="display-media"]')?.dispatchEvent(
|
|
new ErrorEvent("error", {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
message: "a signed media URL expired",
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(query("display-error")).toBeNull();
|
|
expect(deepQuery(container, '[data-testid="display-media"]')).not.toBeNull();
|
|
expect(cleanup).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("removes the page failure listeners when a display attempt is torn down", async () => {
|
|
const server = platform();
|
|
const cleanup = vi.fn();
|
|
await render({ apiBaseUrl, fetch: server.fetch }, async () =>
|
|
artifact("announcements", "1.2.0", { cleanup }),
|
|
);
|
|
|
|
await act(async () => root.render(null));
|
|
expect(cleanup).toHaveBeenCalledTimes(1);
|
|
consoleError.mockClear();
|
|
|
|
window.dispatchEvent(new ErrorEvent("error", { message: "after teardown" }));
|
|
window.dispatchEvent(new Event("unhandledrejection"));
|
|
|
|
expect(cleanup).toHaveBeenCalledTimes(1);
|
|
expect(consoleError).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("display host — independent instances and stale work", () => {
|
|
it("mounts and unmounts two browser instances independently", async () => {
|
|
const server = platform();
|
|
const cleanups: string[] = [];
|
|
const importer = async () =>
|
|
artifact("announcements", "1.2.0", {
|
|
cleanup: () => cleanups.push("cleanup"),
|
|
});
|
|
const config = { apiBaseUrl, fetch: server.fetch };
|
|
|
|
await act(async () => {
|
|
root.render(
|
|
<>
|
|
<DisplayApp
|
|
config={config}
|
|
importModule={importer}
|
|
key="first"
|
|
moduleId="announcements"
|
|
/>
|
|
<DisplayApp
|
|
config={config}
|
|
importModule={importer}
|
|
key="second"
|
|
moduleId="announcements"
|
|
/>
|
|
</>,
|
|
);
|
|
});
|
|
expect(container.querySelectorAll('[data-testid="display-module-container"]')).toHaveLength(2);
|
|
|
|
await act(async () => {
|
|
root.render(
|
|
<DisplayApp
|
|
config={config}
|
|
importModule={importer}
|
|
key="second"
|
|
moduleId="announcements"
|
|
/>,
|
|
);
|
|
});
|
|
|
|
expect(cleanups).toHaveLength(1);
|
|
expect(container.querySelectorAll('[data-testid="display-module-container"]')).toHaveLength(1);
|
|
expect(isolatedText(query("display-module-container"))).toBe("announcements:display");
|
|
});
|
|
|
|
it("discards a late import into its detached container without disturbing the newer route", async () => {
|
|
let releaseAnnouncements: (() => void) | undefined;
|
|
const pendingAnnouncements = new Promise<void>((resolve) => {
|
|
releaseAnnouncements = resolve;
|
|
});
|
|
const mountedInto: Element[] = [];
|
|
const staleUnmounts: Element[] = [];
|
|
const fetch = vi.fn(async (input: RequestInfo | URL) => {
|
|
const url = String(input);
|
|
if (url.endsWith("/api/v1/principal")) {
|
|
return json({ kind: "authenticated", userId: "user-1" });
|
|
}
|
|
if (url.endsWith("/api/v1/module-displays/calendar")) {
|
|
return json(descriptorPayload("calendar", "2.0.0"));
|
|
}
|
|
return json(descriptorPayload());
|
|
}) as unknown as typeof globalThis.fetch;
|
|
const config = { apiBaseUrl, fetch };
|
|
const importer = async (url: string): Promise<unknown> => {
|
|
const isCalendar = url.includes("/calendar/");
|
|
if (!isCalendar) {
|
|
await pendingAnnouncements;
|
|
}
|
|
return artifact(isCalendar ? "calendar" : "announcements", isCalendar ? "2.0.0" : "1.2.0", {
|
|
mount(element) {
|
|
mountedInto.push(element);
|
|
element.textContent = isCalendar ? "calendar-live" : "announcements-stale";
|
|
return () => {
|
|
if (!isCalendar) {
|
|
staleUnmounts.push(element);
|
|
}
|
|
element.replaceChildren();
|
|
};
|
|
},
|
|
});
|
|
};
|
|
|
|
await render(config, importer);
|
|
await render(config, importer, "calendar");
|
|
expect(isolatedText(query("display-module-container"))).toBe("calendar-live");
|
|
const liveContainer = query("display-module-container");
|
|
|
|
await act(async () => {
|
|
releaseAnnouncements?.();
|
|
await pendingAnnouncements;
|
|
});
|
|
|
|
expect(query("display-module-container")).toBe(liveContainer);
|
|
expect(isolatedText(liveContainer)).toBe("calendar-live");
|
|
const liveMountTarget = isolatedMountTarget(liveContainer);
|
|
const staleContainer = mountedInto.find((element) => element !== liveMountTarget);
|
|
expect(staleContainer?.isConnected).toBe(false);
|
|
expect(staleUnmounts).toEqual([staleContainer]);
|
|
});
|
|
});
|
|
|
|
/**
|
|
* How an unattended screen behaves when its network comes and goes (ADR 0043).
|
|
*
|
|
* The caching itself is proven directly against the worker's logic in `display-offline-cache.test.ts`.
|
|
* What is proven here is the *page's* half: it says so honestly, it recovers without anyone touching
|
|
* it, and it never keeps showing content a revoked device is no longer entitled to.
|
|
*/
|
|
describe("display host — offline behaviour", () => {
|
|
/** A controllable stand-in for the browser's own connectivity events. */
|
|
function connectivitySource(initialOnline: boolean) {
|
|
const listeners = new Map<string, Set<() => void>>();
|
|
const workerListeners = new Set<(event: MessageEvent) => void>();
|
|
return {
|
|
source: {
|
|
addEventListener(type: "online" | "offline", listener: () => void) {
|
|
const existing = listeners.get(type) ?? new Set();
|
|
existing.add(listener);
|
|
listeners.set(type, existing);
|
|
},
|
|
initialOnline,
|
|
removeEventListener(type: "online" | "offline", listener: () => void) {
|
|
listeners.get(type)?.delete(listener);
|
|
},
|
|
serviceWorkerMessages: {
|
|
addEventListener(_type: "message", listener: (event: MessageEvent) => void) {
|
|
workerListeners.add(listener);
|
|
},
|
|
removeEventListener(_type: "message", listener: (event: MessageEvent) => void) {
|
|
workerListeners.delete(listener);
|
|
},
|
|
},
|
|
} satisfies DisplayConnectivitySource,
|
|
async emit(type: "online" | "offline") {
|
|
await act(async () => {
|
|
for (const listener of listeners.get(type) ?? []) {
|
|
listener();
|
|
}
|
|
});
|
|
},
|
|
async emitFallback(kind: "shell" | "artifact") {
|
|
await act(async () => {
|
|
for (const listener of workerListeners) {
|
|
listener({
|
|
data: { ekklesiaDisplayOffline: { kind, usingFallback: true } },
|
|
} as MessageEvent);
|
|
}
|
|
});
|
|
},
|
|
};
|
|
}
|
|
|
|
it("shows no indicator at all while the display is genuinely online", async () => {
|
|
const server = platform();
|
|
const connectivity = connectivitySource(true);
|
|
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
async () => artifact(),
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
|
|
expect(query("display-offline")).toBeNull();
|
|
});
|
|
|
|
it("says so, quietly and honestly, when the browser goes offline", async () => {
|
|
const server = platform();
|
|
const connectivity = connectivitySource(true);
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
async () => artifact(),
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
|
|
await connectivity.emit("offline");
|
|
|
|
// A corner indicator, not a full-page failure: a screen whose switch rebooted must not blank a
|
|
// lobby wall.
|
|
const indicator = query("display-offline");
|
|
expect(indicator?.getAttribute("role")).toBe("status");
|
|
expect(indicator?.textContent).toContain("Offline");
|
|
expect(query("display-module-container")).not.toBeNull();
|
|
});
|
|
|
|
it("reports a cache fallback even while the browser still claims to be online", async () => {
|
|
const server = platform();
|
|
const connectivity = connectivitySource(true);
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
async () => artifact(),
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
|
|
await connectivity.emitFallback("artifact");
|
|
|
|
// A captive portal reports `online: true`. Only the worker knows this application actually
|
|
// served code from its cache.
|
|
expect(query("display-offline")?.textContent).toContain("last downloaded display code");
|
|
});
|
|
|
|
it("resolves again on its own when the network returns — nobody presses Retry on a lobby TV", async () => {
|
|
const server = platform();
|
|
const connectivity = connectivitySource(false);
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
async () => artifact(),
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
const descriptorCalls = () =>
|
|
server.calls.filter((call) => call.url.endsWith("/api/v1/module-displays/announcements"))
|
|
.length;
|
|
const before = descriptorCalls();
|
|
|
|
await connectivity.emit("online");
|
|
|
|
// A fresh descriptor is exactly what stops a screen sitting on cached code after the server
|
|
// returns: it names the current version, and the network-first worker fetches it.
|
|
expect(descriptorCalls()).toBeGreaterThan(before);
|
|
});
|
|
|
|
it("drops a revoked device back to pairing the moment connectivity returns", async () => {
|
|
// The descriptor is never cached, so a device whose access was revoked while it was offline
|
|
// cannot keep showing content: the first successful resolution after reconnecting is the
|
|
// server's refusal.
|
|
let revoked = false;
|
|
const fetch = vi.fn(async (input: RequestInfo | URL) => {
|
|
const url = String(input);
|
|
if (url.endsWith("/api/v1/principal")) {
|
|
return json({ kind: "authenticated", userId: "user-1" });
|
|
}
|
|
if (url.endsWith("/api/v1/module-displays/announcements")) {
|
|
return revoked
|
|
? json({ code: "AUTHORIZATION_DENIED" }, 403)
|
|
: json(descriptorPayload(), 200);
|
|
}
|
|
if (url.endsWith("/api/v1/device-pairing/requests")) {
|
|
return json(
|
|
{ code: "482731", expiresAt: new Date().toISOString(), pollIntervalMs: 60_000 },
|
|
201,
|
|
);
|
|
}
|
|
if (url.endsWith("/api/v1/device-pairing/claims")) {
|
|
return json({ status: "pending" });
|
|
}
|
|
return json({ code: "NOT_FOUND" }, 404);
|
|
}) as unknown as typeof globalThis.fetch;
|
|
const connectivity = connectivitySource(true);
|
|
await render(
|
|
{ apiBaseUrl, fetch },
|
|
async () => artifact(),
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
expect(query("display-module-container")).not.toBeNull();
|
|
|
|
revoked = true;
|
|
await connectivity.emit("offline");
|
|
await connectivity.emit("online");
|
|
|
|
expect(query("display-module-container")).toBeNull();
|
|
expect(query("display-pairing")).not.toBeNull();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Stage 0 regressions: a running display survives its network, and a revoked one returns to pairing.
|
|
*
|
|
* Before these, every browser `online` event tore the module down and mounted it again (a fresh
|
|
* viewer session, a fresh stage, every cached object URL released), and a device revoked while its
|
|
* display was open kept playing until someone reloaded the page.
|
|
*/
|
|
describe("display host — continuity across reconnects and revocation", () => {
|
|
function controllableConnectivity() {
|
|
const listeners = new Map<string, Set<() => void>>();
|
|
return {
|
|
source: {
|
|
addEventListener(type: "online" | "offline", listener: () => void) {
|
|
const existing = listeners.get(type) ?? new Set();
|
|
existing.add(listener);
|
|
listeners.set(type, existing);
|
|
},
|
|
initialOnline: true,
|
|
removeEventListener(type: "online" | "offline", listener: () => void) {
|
|
listeners.get(type)?.delete(listener);
|
|
},
|
|
} satisfies DisplayConnectivitySource,
|
|
async emit(type: "online" | "offline") {
|
|
await act(async () => {
|
|
for (const listener of listeners.get(type) ?? []) {
|
|
listener();
|
|
}
|
|
});
|
|
},
|
|
};
|
|
}
|
|
|
|
async function flush(): Promise<void> {
|
|
await act(async () => {
|
|
for (let index = 0; index < 5; index += 1) {
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
}
|
|
});
|
|
}
|
|
|
|
/** A server whose descriptor answer can be changed mid-test, counting descriptor requests. */
|
|
function changingServer() {
|
|
let descriptor: { status: number; body: unknown } = { body: descriptorPayload(), status: 200 };
|
|
let descriptorCalls = 0;
|
|
const fetch = vi.fn(async (input: RequestInfo | URL) => {
|
|
const url = String(input);
|
|
if (url.endsWith("/api/v1/module-displays/announcements")) {
|
|
descriptorCalls += 1;
|
|
return json(descriptor.body, descriptor.status);
|
|
}
|
|
if (url.endsWith("/api/v1/device-pairing/requests")) {
|
|
return json(
|
|
{ code: "482731", expiresAt: new Date().toISOString(), pollIntervalMs: 60_000 },
|
|
201,
|
|
);
|
|
}
|
|
if (url.endsWith("/api/v1/device-pairing/claims")) {
|
|
return json({ status: "pending" });
|
|
}
|
|
if (url.endsWith("/api/v1/modules/announcements/refused")) {
|
|
return json({ code: "AUTHORIZATION_DENIED" }, 403);
|
|
}
|
|
return json({ code: "NOT_FOUND" }, 404);
|
|
}) as unknown as typeof globalThis.fetch;
|
|
return {
|
|
descriptorCalls: () => descriptorCalls,
|
|
fetch,
|
|
set(status: number, body: unknown) {
|
|
descriptor = { body, status };
|
|
},
|
|
};
|
|
}
|
|
|
|
function countingArtifact(version = "1.2.0") {
|
|
const counts = { mounts: 0, unmounts: 0 };
|
|
let context: ModuleUiHostContext | undefined;
|
|
const importModule = async (url: string) =>
|
|
artifact("announcements", url.includes("/2.0.0/") ? "2.0.0" : version, {
|
|
mount(element, mounted) {
|
|
counts.mounts += 1;
|
|
context = mounted;
|
|
element.textContent = "live";
|
|
return () => {
|
|
counts.unmounts += 1;
|
|
};
|
|
},
|
|
});
|
|
return { context: () => context, counts, importModule };
|
|
}
|
|
|
|
it("does not remount a live display when the network drops and returns", async () => {
|
|
const server = changingServer();
|
|
const connectivity = controllableConnectivity();
|
|
const display = countingArtifact();
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
display.importModule,
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
await flush();
|
|
expect(display.counts.mounts).toBe(1);
|
|
const before = server.descriptorCalls();
|
|
|
|
await connectivity.emit("offline");
|
|
await connectivity.emit("online");
|
|
await flush();
|
|
|
|
// The descriptor is still resolved again (ADR 0043) — but the same answer changes nothing.
|
|
expect(server.descriptorCalls()).toBeGreaterThan(before);
|
|
expect(display.counts).toEqual({ mounts: 1, unmounts: 0 });
|
|
expect(query("display-host-loading")).toBeNull();
|
|
});
|
|
|
|
it("keeps the running display when the descriptor cannot be reached yet", async () => {
|
|
const server = changingServer();
|
|
const connectivity = controllableConnectivity();
|
|
const display = countingArtifact();
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
display.importModule,
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
await flush();
|
|
|
|
server.set(503, { code: "UNAVAILABLE" });
|
|
await connectivity.emit("offline");
|
|
await connectivity.emit("online");
|
|
await flush();
|
|
|
|
expect(display.counts).toEqual({ mounts: 1, unmounts: 0 });
|
|
expect(query("display-host-error")).toBeNull();
|
|
});
|
|
|
|
it("replaces the display when the server now names a new version", async () => {
|
|
const server = changingServer();
|
|
const connectivity = controllableConnectivity();
|
|
const display = countingArtifact();
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
display.importModule,
|
|
"announcements",
|
|
connectivity.source,
|
|
);
|
|
await flush();
|
|
|
|
server.set(200, descriptorPayload("announcements", "2.0.0"));
|
|
await connectivity.emit("offline");
|
|
await connectivity.emit("online");
|
|
await flush();
|
|
|
|
expect(display.counts.unmounts).toBe(1);
|
|
expect(display.counts.mounts).toBe(2);
|
|
});
|
|
|
|
it("returns a device revoked while its display is open to pairing, without a reload", async () => {
|
|
const server = changingServer();
|
|
const display = countingArtifact();
|
|
await render({ apiBaseUrl, fetch: server.fetch }, display.importModule, "announcements");
|
|
await flush();
|
|
expect(query("display-module-container")).not.toBeNull();
|
|
|
|
// The administrator revokes the device. Its next module request is refused.
|
|
server.set(403, { code: "AUTHORIZATION_DENIED" });
|
|
await act(async () => {
|
|
await display.context()?.api.request("refused");
|
|
});
|
|
await flush();
|
|
|
|
expect(display.counts.unmounts).toBe(1);
|
|
expect(query("display-pairing")).not.toBeNull();
|
|
});
|
|
|
|
it("does not remount when a refused request turns out not to be a revocation", async () => {
|
|
const server = changingServer();
|
|
const display = countingArtifact();
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
display.importModule,
|
|
"announcements",
|
|
undefined,
|
|
{
|
|
offlineIndicatorDelayMs: 0,
|
|
revalidationIntervalMs: 60_000,
|
|
},
|
|
);
|
|
await flush();
|
|
const before = server.descriptorCalls();
|
|
|
|
await act(async () => {
|
|
await display.context()?.api.request("refused");
|
|
await display.context()?.api.request("refused");
|
|
await display.context()?.api.request("refused");
|
|
});
|
|
await flush();
|
|
|
|
// One revalidation for the burst, and the display stays exactly where it was.
|
|
expect(server.descriptorCalls()).toBe(before + 1);
|
|
expect(display.counts).toEqual({ mounts: 1, unmounts: 0 });
|
|
});
|
|
|
|
it("does not show the offline indicator for a momentary blip", async () => {
|
|
const server = changingServer();
|
|
const connectivity = controllableConnectivity();
|
|
await render(
|
|
{ apiBaseUrl, fetch: server.fetch },
|
|
countingArtifact().importModule,
|
|
"announcements",
|
|
connectivity.source,
|
|
{ offlineIndicatorDelayMs: 60 },
|
|
);
|
|
await flush();
|
|
|
|
await connectivity.emit("offline");
|
|
await connectivity.emit("online");
|
|
await act(async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 120));
|
|
});
|
|
expect(query("display-offline")).toBeNull();
|
|
|
|
await connectivity.emit("offline");
|
|
await act(async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 120));
|
|
});
|
|
expect(query("display-offline")?.textContent).toBe("Offline — reconnecting");
|
|
});
|
|
});
|