207 lines
8.9 KiB
TypeScript
207 lines
8.9 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { describe, it } from "node:test";
|
|
import { createOfficeScreenPanel } from "../media/officeScreenPanel.ts";
|
|
import type { MediaSurfaceDescriptor } from "../media/presentation.ts";
|
|
|
|
type Listener = (event: FakeEvent) => void;
|
|
class FakeEvent {
|
|
defaultPrevented = false;
|
|
readonly type: string;
|
|
readonly target: FakeElement;
|
|
readonly key: string;
|
|
readonly shiftKey: boolean;
|
|
constructor(
|
|
type: string,
|
|
target: FakeElement,
|
|
key = "",
|
|
shiftKey = false,
|
|
) {
|
|
this.type = type;
|
|
this.target = target;
|
|
this.key = key;
|
|
this.shiftKey = shiftKey;
|
|
}
|
|
preventDefault(): void { this.defaultPrevented = true; }
|
|
}
|
|
class FakeElement {
|
|
readonly children: FakeElement[] = [];
|
|
readonly attributes = new Map<string, string>();
|
|
readonly listeners = new Map<string, Listener[]>();
|
|
parentElement: FakeElement | null = null;
|
|
className = "";
|
|
textContent = "";
|
|
hidden = false;
|
|
disabled = false;
|
|
type = "";
|
|
id = "";
|
|
readonly ownerDocument: FakeDocument;
|
|
readonly tagName: string;
|
|
constructor(ownerDocument: FakeDocument, tagName: string) {
|
|
this.ownerDocument = ownerDocument;
|
|
this.tagName = tagName;
|
|
}
|
|
append(...nodes: FakeElement[]): void { for (const node of nodes) { node.parentElement = this; this.children.push(node); } }
|
|
setAttribute(name: string, value: string): void { this.attributes.set(name, value); }
|
|
getAttribute(name: string): string | null { return this.attributes.get(name) ?? null; }
|
|
addEventListener(type: string, listener: Listener): void {
|
|
const list = this.listeners.get(type); if (list) list.push(listener); else this.listeners.set(type, [listener]);
|
|
}
|
|
dispatch(type: string, init: { key?: string; shiftKey?: boolean } = {}): FakeEvent {
|
|
const event = new FakeEvent(type, this, init.key, init.shiftKey);
|
|
for (const listener of this.listeners.get(type) ?? []) listener(event);
|
|
return event;
|
|
}
|
|
focus(): void { this.ownerDocument.activeElement = this; }
|
|
remove(): void {
|
|
if (!this.parentElement) return;
|
|
const index = this.parentElement.children.indexOf(this); if (index >= 0) this.parentElement.children.splice(index, 1);
|
|
this.parentElement = null;
|
|
}
|
|
find(attribute: string, value: string): FakeElement {
|
|
if (this.attributes.get(attribute) === value) return this;
|
|
for (const child of this.children) { try { return child.find(attribute, value); } catch { /* next */ } }
|
|
throw new Error(`missing [${attribute}=${value}]`);
|
|
}
|
|
text(): string { return this.textContent + this.children.map((child) => child.text()).join(""); }
|
|
}
|
|
class FakeDocument {
|
|
activeElement: FakeElement | null = null;
|
|
createElement(tag: string): FakeElement { return new FakeElement(this, tag.toUpperCase()); }
|
|
}
|
|
|
|
const SURFACES: MediaSurfaceDescriptor[] = [
|
|
{ screenId: "lobby-monitor", officeId: "hq", levelId: "level-1", roomId: "Lobby", kind: "tera:screen.monitor", bound: false },
|
|
{ screenId: "commons-display", officeId: "hq", levelId: "level-2", roomId: "Commons", kind: "tera:screen.wall-display", bound: true },
|
|
];
|
|
|
|
function setup() {
|
|
const document = new FakeDocument();
|
|
const container = document.createElement("div");
|
|
const selected: string[] = [];
|
|
const shares: string[] = [];
|
|
const stops: string[] = [];
|
|
const opts: [string, boolean][] = [];
|
|
const panel = createOfficeScreenPanel({
|
|
container: container as unknown as HTMLElement,
|
|
surfaces: SURFACES,
|
|
onSelect: (surface) => selected.push(surface.screenId),
|
|
onRequestShare: (surface) => shares.push(surface.screenId),
|
|
onStopShare: (surface) => stops.push(surface.screenId),
|
|
onViewerOptIn: (surface, value) => opts.push([surface.screenId, value]),
|
|
});
|
|
return { document, container, panel, selected, shares, stops, opts };
|
|
}
|
|
|
|
describe("office screen manager panel", () => {
|
|
it("builds a closed labelled dialog with safe screen, room, and status text", () => {
|
|
const { container, panel } = setup();
|
|
const root = panel.root as unknown as FakeElement;
|
|
assert.equal(container.children.length, 1);
|
|
assert.equal(root.hidden, true);
|
|
assert.equal(root.getAttribute("role"), "dialog");
|
|
assert.equal(root.getAttribute("aria-modal"), "true");
|
|
assert.match(root.text(), /lobby-monitor/);
|
|
assert.match(root.text(), /Lobby/);
|
|
assert.match(root.text(), /Media off/);
|
|
assert.match(root.text(), /Media active/);
|
|
});
|
|
|
|
it("selects, explicitly opts in, and emits share/stop intent without capture", () => {
|
|
const { panel, selected, shares, stops, opts } = setup();
|
|
panel.open();
|
|
const root = panel.root as unknown as FakeElement;
|
|
root.find("data-screen-id", "commons-display").dispatch("click");
|
|
root.find("data-action", "opt-in").dispatch("click");
|
|
root.find("data-action", "share").dispatch("click");
|
|
root.find("data-action", "stop").dispatch("click");
|
|
assert.deepEqual(selected, ["commons-display"]);
|
|
assert.deepEqual(opts, [["commons-display", true]]);
|
|
assert.deepEqual(shares, ["commons-display"]);
|
|
assert.deepEqual(stops, ["commons-display"]);
|
|
assert.deepEqual(panel.state().optedInScreenIds, ["commons-display"]);
|
|
assert.equal("mediaDevices" in panel, false);
|
|
});
|
|
|
|
it("keeps presenting separate from viewer opt-in", () => {
|
|
const { panel, shares, opts } = setup();
|
|
panel.open();
|
|
const root = panel.root as unknown as FakeElement;
|
|
const share = root.find("data-action", "share");
|
|
assert.equal(share.disabled, false);
|
|
share.dispatch("click");
|
|
assert.deepEqual(shares, ["lobby-monitor"]);
|
|
assert.deepEqual(opts, []);
|
|
assert.deepEqual(panel.state().optedInScreenIds, []);
|
|
});
|
|
|
|
it("updates defensively, removes stale consent, and represents an empty office", () => {
|
|
const { panel } = setup();
|
|
const root = panel.root as unknown as FakeElement;
|
|
root.find("data-action", "opt-in").dispatch("click");
|
|
const next = [{ ...SURFACES[1]!, screenId: "safe-text-<script>" }];
|
|
panel.update(next);
|
|
next[0]!.screenId = "mutated";
|
|
assert.equal(panel.state().selectedId, "safe-text-<script>");
|
|
assert.deepEqual(panel.state().optedInScreenIds, []);
|
|
assert.match(root.text(), /safe-text-<script>/);
|
|
panel.update([]);
|
|
assert.equal(panel.state().selectedId, null);
|
|
assert.match(root.text(), /No authored office screens/);
|
|
});
|
|
|
|
it("shows concise remote lifecycle states and forgets them with their screen", () => {
|
|
const { panel, stops, opts } = setup();
|
|
const root = panel.root as unknown as FakeElement;
|
|
root.find("data-action", "opt-in").dispatch("click");
|
|
panel.setRemoteStatus("lobby-monitor", "connecting");
|
|
assert.equal(panel.state().remoteStatusByScreen["lobby-monitor"], "connecting");
|
|
assert.match(root.text(), /Remote connecting/);
|
|
assert.equal(root.find("data-action", "stop").disabled, false);
|
|
root.find("data-action", "stop").dispatch("click");
|
|
assert.deepEqual(stops, ["lobby-monitor"]);
|
|
panel.setRemoteStatus("lobby-monitor", "unavailable");
|
|
assert.match(root.text(), /No remote share/);
|
|
assert.equal(root.find("data-action", "opt-in").textContent, "Retry remote");
|
|
root.find("data-action", "opt-in").dispatch("click");
|
|
assert.deepEqual(opts.at(-1), ["lobby-monitor", true]);
|
|
assert.deepEqual(panel.state().optedInScreenIds, ["lobby-monitor"]);
|
|
panel.update([SURFACES[1]!]);
|
|
assert.deepEqual(panel.state().remoteStatusByScreen, {});
|
|
assert.throws(() => panel.setRemoteStatus("commons-display", "invalid" as "live"), /invalid remote status/);
|
|
});
|
|
|
|
it("refreshes a remote surface from bound back to cleared", () => {
|
|
const { panel } = setup();
|
|
const root = panel.root as unknown as FakeElement;
|
|
panel.setRemoteStatus("lobby-monitor", "live");
|
|
panel.update([{ ...SURFACES[0]!, bound: true }, SURFACES[1]!]);
|
|
assert.match(root.text(), /Media active · Remote live/);
|
|
panel.update(SURFACES);
|
|
panel.setRemoteStatus("lobby-monitor", "off");
|
|
assert.match(root.text(), /Media off · Remote off/);
|
|
assert.equal(root.find("data-action", "stop").disabled, true);
|
|
});
|
|
|
|
it("traps tab focus, closes on Escape, restores focus, and disposes idempotently", () => {
|
|
const { document, container, panel } = setup();
|
|
const trigger = document.createElement("button");
|
|
trigger.focus();
|
|
panel.open();
|
|
const root = panel.root as unknown as FakeElement;
|
|
const first = root.find("data-screen-id", "lobby-monitor");
|
|
const last = root.find("data-action", "close");
|
|
last.focus();
|
|
assert.equal(root.dispatch("keydown", { key: "Tab" }).defaultPrevented, true);
|
|
assert.equal(document.activeElement, first);
|
|
first.focus();
|
|
assert.equal(root.dispatch("keydown", { key: "Tab", shiftKey: true }).defaultPrevented, true);
|
|
assert.equal(document.activeElement, last);
|
|
assert.equal(root.dispatch("keydown", { key: "Escape" }).defaultPrevented, true);
|
|
assert.equal(panel.state().open, false);
|
|
assert.equal(document.activeElement, trigger);
|
|
panel.dispose();
|
|
panel.dispose();
|
|
assert.equal(container.children.length, 0);
|
|
});
|
|
});
|