@roku-sdk/components 0.0.0-stage → 2.18.0

package/src/standard-dialog-next/__tests__/standard-dialog-next.test.tsx

@@ -0,0 +1,186 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { type RemoteKeyEvent } from "@roku-sdk/interfaces";
+import { RootFocusBoundary, useModal } from "@roku-sdk/navigation";
+import { Component, createSignal } from "@roku-sdk/solid";
+import { render } from "@roku-sdk/testing-library";
+
+import { StandardDialogNext } from "../standard-dialog-next";
+
+type KeyEvent = RemoteKeyEvent | null;
+
+describe("StandardDialogNext", () => {
+    let cleanup: (() => Promise<void> | void) | undefined;
+
+    afterEach(async () => {
+        await cleanup?.();
+        cleanup = undefined;
+    });
+
+    test("OK on the default button calls onButtonSelected and onClosed once", async () => {
+        const onButtonSelected = jest.fn();
+        const onClosed = jest.fn();
+        const [keyEvent, setKeyEvent] = createSignal<KeyEvent>(null);
+
+        let openModal!: ReturnType<typeof useModal>;
+        const Opener: Component = () => {
+            openModal = useModal();
+            return (
+                <>
+                    <group />
+                    <StandardDialogNext
+                        show={openModal.isOpen()}
+                        focusId={openModal.focusId}
+                        title="Title"
+                        text="Body"
+                        buttons={[{ text: "OK" }]}
+                        onButtonSelected={onButtonSelected}
+                        onClosed={onClosed}
+                        onDismiss={openModal.close}
+                    />
+                </>
+            );
+        };
+
+        const r = await render(() => (
+            <RootFocusBoundary keyEvent={keyEvent()} initialFocus={{}} focusActive={true}>
+                <Opener />
+            </RootFocusBoundary>
+        ));
+        cleanup = r.dispose;
+
+        openModal.open();
+        await r.transaction();
+
+        setKeyEvent({ key: "OK", press: true });
+        await r.transaction();
+        setKeyEvent({ key: "OK", press: false });
+        await r.transaction();
+
+        expect(onButtonSelected).toHaveBeenCalledWith(0);
+        expect(onClosed).toHaveBeenCalledTimes(1);
+    });
+
+    test("two dialogs open at once keep their buttons apart", async () => {
+        const firstSelected = jest.fn();
+        const secondSelected = jest.fn();
+        const [keyEvent, setKeyEvent] = createSignal<KeyEvent>(null);
+        const firstFocusId: object = {};
+        const secondFocusId: object = {};
+
+        // Chaining one dialog onto another (terms, then a confirmation over it) is the case that
+        // makes per-instance button identity necessary. Each dialog's ModalBoundary scopes key
+        // routing to its own subtree, which is what keeps the presses apart; this pins that, so a
+        // change to how button focus ids are allocated cannot quietly start crossing the streams.
+        const r = await render(() => (
+            <RootFocusBoundary keyEvent={keyEvent()} initialFocus={firstFocusId} focusActive={true}>
+                <StandardDialogNext
+                    show={true}
+                    focusId={firstFocusId}
+                    title="Terms"
+                    buttons={[{ text: "Accept" }]}
+                    onButtonSelected={firstSelected}
+                />
+                <StandardDialogNext
+                    show={true}
+                    focusId={secondFocusId}
+                    title="Confirm"
+                    buttons={[{ text: "Yes" }]}
+                    onButtonSelected={secondSelected}
+                />
+            </RootFocusBoundary>
+        ));
+        cleanup = r.dispose;
+
+        setKeyEvent({ key: "OK", press: true });
+        await r.transaction();
+        setKeyEvent({ key: "OK", press: false });
+        await r.transaction();
+
+        expect(firstSelected).toHaveBeenCalledWith(0);
+        expect(secondSelected).not.toHaveBeenCalled();
+    });
+
+    test("a button past the old eight-entry focus-id table is still focusable", async () => {
+        const onButtonSelected = jest.fn();
+        const [keyEvent, setKeyEvent] = createSignal<KeyEvent>(null);
+        const focusId: object = {};
+        const buttons = Array.from({ length: 12 }, (_, index) => ({ text: `Option ${index}` }));
+
+        // Index 9 had no entry in the fixed eight-slot table, so the button got `focusId:
+        // undefined` and `initialButtonIndex` could not reach it.
+        const r = await render(() => (
+            <RootFocusBoundary keyEvent={keyEvent()} initialFocus={focusId} focusActive={true}>
+                <StandardDialogNext
+                    show={true}
+                    focusId={focusId}
+                    title="Pick one"
+                    buttons={buttons}
+                    initialButtonIndex={9}
+                    onButtonSelected={onButtonSelected}
+                />
+            </RootFocusBoundary>
+        ));
+        cleanup = r.dispose;
+        await r.transaction();
+
+        setKeyEvent({ key: "OK", press: true });
+        await r.transaction();
+        setKeyEvent({ key: "OK", press: false });
+        await r.transaction();
+
+        expect(onButtonSelected).toHaveBeenCalledWith(9);
+    });
+
+    test("driving show to false fires onClosed, with no button and no Back", async () => {
+        const onClosed = jest.fn();
+        const [open, setOpen] = createSignal(true);
+
+        const r = await render(() => (
+            <RootFocusBoundary keyEvent={null} initialFocus={{}} focusActive={true}>
+                <StandardDialogNext show={open()} title="Loading" buttons={[{ text: "OK" }]} onClosed={onClosed} />
+            </RootFocusBoundary>
+        ));
+        cleanup = r.dispose;
+        await r.transaction();
+        expect(onClosed).not.toHaveBeenCalled();
+
+        setOpen(false);
+        await r.transaction();
+
+        expect(onClosed).toHaveBeenCalledTimes(1);
+    });
+
+    test("Back dismisses and fires onClosed once", async () => {
+        const onClosed = jest.fn();
+        const onDismiss = jest.fn();
+        const [keyEvent, setKeyEvent] = createSignal<KeyEvent>(null);
+        const [open, setOpen] = createSignal(true);
+        const focusId: object = {};
+
+        const r = await render(() => (
+            <RootFocusBoundary keyEvent={keyEvent()} initialFocus={focusId} focusActive={true}>
+                <StandardDialogNext
+                    show={open()}
+                    focusId={focusId}
+                    title="Exit"
+                    buttons={[{ text: "OK" }]}
+                    onDismiss={() => {
+                        onDismiss();
+                        setOpen(false);
+                    }}
+                    onClosed={onClosed}
+                />
+            </RootFocusBoundary>
+        ));
+        cleanup = r.dispose;
+
+        setKeyEvent({ key: "back", press: true });
+        await r.transaction();
+
+        expect(onDismiss).toHaveBeenCalledTimes(1);
+        expect(onClosed).toHaveBeenCalledTimes(1);
+    });
+});

package/src/standard-dialog-next/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+export * from "./standard-dialog-next";
+export * from "./standard-dialog-next.props";

package/src/standard-dialog-next/standard-dialog-next.props.ts

@@ -0,0 +1,80 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { JSX } from "@roku-sdk/solid";
+
+/**
+ * Colour bag matching the native StandardDialog palette fields that StandardDialogNext chrome draws.
+ *
+ * Only the fields this component actually reads are here. StandardDialog's `dialogItemColor` and
+ * `dialogFootprintColor` have no counterpart in the chrome composed from core-contract primitives,
+ * and declaring them would invite a caller to set a colour that silently does nothing.
+ */
+export interface IStandardDialogNextPaletteColors {
+    /** Panel fill. */
+    dialogBackgroundColor?: string;
+    /** Title text, and the label on an unfocused button. */
+    dialogTextColor?: string;
+    /** Fill of the focused button. */
+    dialogFocusColor?: string;
+    /** Label on the focused button. */
+    dialogFocusItemColor?: string;
+    /** Body text. */
+    dialogSecondaryTextColor?: string;
+    /** Fill of an unfocused button, and the rule under the title. */
+    dialogSecondaryItemColor?: string;
+}
+
+export interface IStandardDialogNextButton {
+    text: string;
+}
+
+/**
+ * Portable dialog built from core-contract primitives on {@link ModalBoundary}.
+ * Prefer this over {@link StandardDialog} when using the portable core contract.
+ *
+ * The intended successor to {@link StandardDialog}, hence the name: it is the same kind of
+ * component -- a themed dialog with a title, a body and a row of buttons -- but composed from the
+ * frozen primitive subset instead of the native SceneGraph dialog node, so it renders on every
+ * target rather than on device only. The two ship side by side while apps migrate; `Next` collapses
+ * into the base name once the SceneGraph implementation is retired.
+ *
+ * The props are deliberately close to `IStandardDialogProps` but not identical -- see
+ * {@link IStandardDialogNextPaletteColors} for the palette fields that have no counterpart in
+ * primitive-composed chrome.
+ *
+ * @see rsg-sdk/external/documentation/guides/focus-management/modal-boundary.md
+ */
+export interface IStandardDialogNextProps {
+    /** Whether the dialog is visible. Wire to `useModal().isOpen()` or app state. */
+    show: boolean;
+    /**
+     * Stable focus identity shared with `useModal().focusId` when opening via `open()`.
+     * Required when the dialog participates in virtual-focus modality.
+     */
+    focusId?: object;
+    title?: string;
+    /** Plain-text body when `children` is not provided. Ignored when `children` is. */
+    text?: string;
+    /**
+     * Custom body, replacing `text`. Rendered in the panel's content region, so its own
+     * coordinates start at the left margin below the title rule rather than at the panel corner.
+     *
+     * Nothing here can measure a subtree, so pass {@link contentHeight} as well — without it the
+     * content region is zero-height and the buttons are laid out over the top of the children.
+     */
+    children?: JSX.Element;
+    /** Height reserved for `children`, in FHD units. Ignored when `children` is absent. */
+    contentHeight?: number;
+    buttons?: IStandardDialogNextButton[];
+    /** Which button receives initial focus. @default 0 */
+    initialButtonIndex?: number;
+    /** Panel width in FHD space. @default 960 */
+    width?: number;
+    palette?: IStandardDialogNextPaletteColors;
+    onButtonSelected?: (index: number) => void;
+    /** Back / dismissKeys path before `onClosed`. */
+    onDismiss?: () => void;
+    /** Fires at most once per open cycle (button, Back, or programmatic close). */
+    onClosed?: () => void;
+}

package/src/standard-dialog-next/standard-dialog-next.tsx

@@ -0,0 +1,326 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { ModalBoundary, onPress, useFocusable, type UseFocusableOptions } from "@roku-sdk/navigation";
+import { batch, Component, createEffect, createMemo, For, Show } from "@roku-sdk/solid";
+
+import { SystemFont } from "../sg-nodes/types";
+import type { IStandardDialogNextPaletteColors, IStandardDialogNextProps } from "./standard-dialog-next.props";
+
+// ---------------------------------------------------------------------------
+// Layout constants.
+//
+// Every value here is taken from a `weeland tree -v` dump of the `StandardDialog` this
+// component replaces, converted from the device's 720p render space to the FHD coordinate
+// space the app authors in (HD x 1.5). Keeping the two visually identical is the whole point
+// of the component, so prefer re-measuring over adjusting these by eye.
+// ---------------------------------------------------------------------------
+
+const SCREEN_WIDTH = 1920;
+const SCREEN_HEIGHT = 1080;
+const DEFAULT_WIDTH = 960;
+const H_MARGIN = 90;
+const TITLE_TOP = 58;
+const SEPARATOR_TOP = 124;
+const SEPARATOR_HEIGHT = 3;
+const BODY_TOP = 156;
+const BODY_LINE_HEIGHT = 47;
+const BODY_MAX_LINES = 12;
+const BODY_BUTTON_GAP = 48;
+const BUTTON_HEIGHT = 70;
+const BUTTON_GAP = 16;
+const BUTTON_TEXT_INSET = 24;
+const BOTTOM_MARGIN = 60;
+
+// StandardDialog draws its panel and buttons as 9-patch bitmaps, which the frozen property
+// subset has no equivalent for. `effect borderRadius` is the portable way to get the same rounded corners.
+const PANEL_RADIUS = 12;
+const BUTTON_RADIUS = 8;
+
+/** Scrim color StandardDialog draws behind itself (`0,0,0` is visibly wrong against it). */
+const DIM_COLOR = "0x0B001BCC";
+
+/**
+ * Average advance width of the body font at FHD, used to estimate how many lines the body will
+ * wrap to. Nothing here can measure text, and the panel has to be tall enough to keep the body
+ * clear of the buttons, so the estimate is deliberately generous.
+ */
+const BODY_AVG_CHAR_WIDTH = 16;
+
+// StandardDialog's type ramp, matched by rasterized size rather than by name: its title is
+// RokuUI-Regular at 30 (720p), its body RokuUI-Regular at 22, its button labels RokuUI-Medium
+// at 22. The `*SystemFont` names are used rather than an explicit `<font>` node because `font`
+// is not a portable core-contract element.
+const TITLE_FONT = SystemFont.Large;
+const BODY_FONT = SystemFont.Small;
+const BUTTON_FONT = SystemFont.SmallBold;
+
+function estimateLineCount(text: string, width: number): number {
+    const perLine = Math.max(1, Math.floor(width / BODY_AVG_CHAR_WIDTH));
+    const lines = text.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(line.length / perLine)), 0);
+    return Math.min(lines, BODY_MAX_LINES);
+}
+
+const DEFAULT_PALETTE: IStandardDialogNextPaletteColors = {
+    dialogBackgroundColor: "#e5e5e5",
+    dialogTextColor: "#121212ff",
+    dialogFocusColor: "#7540c4ff",
+    dialogFocusItemColor: "#EFEFEF",
+    dialogSecondaryTextColor: "#121212ff",
+    dialogSecondaryItemColor: "#0000001A"
+};
+
+/** Map `#RRGGBB` / `#RRGGBBAA` palette strings to SceneGraph `0xRRGGBBAA`. */
+function toSceneGraphColor(color: string): string {
+    if (color.startsWith("0x") || color.startsWith("0X")) {
+        return color;
+    }
+    if (!color.startsWith("#")) {
+        return color;
+    }
+    const hex = color.slice(1);
+    if (hex.length === 6) {
+        return `0x${hex}FF`;
+    }
+    if (hex.length === 8) {
+        return `0x${hex}`;
+    }
+    return color;
+}
+
+function resolveColor(
+    palette: IStandardDialogNextPaletteColors,
+    key: keyof IStandardDialogNextPaletteColors,
+    fallback: string
+): string {
+    const raw = palette[key] ?? DEFAULT_PALETTE[key] ?? fallback;
+    return toSceneGraphColor(raw!);
+}
+
+interface DialogButtonProps {
+    label: string;
+    focusId: object;
+    palette: IStandardDialogNextPaletteColors;
+    x: number;
+    width: number;
+    y: number;
+    onSelect: () => void;
+}
+
+const DialogButton: Component<DialogButtonProps> = props => {
+    // Built here rather than at module scope: JSX outside a component body runs at import time,
+    // before a renderer exists.
+    const roundedButtonEffect = <effect borderRadius={BUTTON_RADIUS} />;
+    const { isFocused, ref } = useFocusable({
+        focusId: props.focusId,
+        onKey: {
+            OK: onPress(() => props.onSelect())
+        }
+    } satisfies UseFocusableOptions);
+
+    const focusFill = () => resolveColor(props.palette, "dialogFocusColor", DEFAULT_PALETTE.dialogFocusColor!);
+    const idleFill = () =>
+        resolveColor(props.palette, "dialogSecondaryItemColor", DEFAULT_PALETTE.dialogSecondaryItemColor!);
+    const idleText = () => resolveColor(props.palette, "dialogTextColor", DEFAULT_PALETTE.dialogTextColor!);
+    const focusText = () => resolveColor(props.palette, "dialogFocusItemColor", DEFAULT_PALETTE.dialogFocusItemColor!);
+
+    return (
+        <group ref={ref} translation={[props.x, props.y]}>
+            <rectangle
+                width={props.width}
+                height={BUTTON_HEIGHT}
+                color={isFocused() ? focusFill() : idleFill()}
+                effect={roundedButtonEffect}
+            />
+            <label
+                text={props.label}
+                color={isFocused() ? focusText() : idleText()}
+                font={BUTTON_FONT}
+                width={props.width - BUTTON_TEXT_INSET * 2}
+                height={BUTTON_HEIGHT}
+                horizAlign="left"
+                vertAlign="center"
+                translation={[BUTTON_TEXT_INSET, 0]}
+            />
+        </group>
+    );
+};
+
+/**
+ * Portable dialog chrome composed from core-contract primitives on {@link ModalBoundary}.
+ * Use instead of {@link StandardDialog} when the app must stay within the portable core-contract elements.
+ */
+export const StandardDialogNext: Component<IStandardDialogNextProps> = props => {
+    const width = () => props.width ?? DEFAULT_WIDTH;
+    const palette = (): IStandardDialogNextPaletteColors => ({ ...DEFAULT_PALETTE, ...props.palette });
+    const buttons = () => props.buttons ?? [{ text: "OK" }];
+    const initialIndex = () => props.initialButtonIndex ?? 0;
+
+    /**
+     * Focus identity per button position, owned by this dialog instance.
+     *
+     * Grown on demand, which is the part that matters: the fixed eight-entry table this replaces
+     * handed `focusId: undefined` to every button past the eighth, so a ninth button could not be
+     * reached by `initialButtonIndex` at all.
+     *
+     * Per-instance rather than module-level for the case of two dialogs open at once — a
+     * confirmation over the terms dialog that raised it. Each dialog's `ModalBoundary` scopes key
+     * routing to its own subtree, so sharing the objects did not misroute presses, but two live
+     * registrations of one identity is not a property worth depending on.
+     *
+     * Keyed by position rather than by button object so a caller that rebuilds its `buttons` array
+     * on every render does not churn focus.
+     */
+    const buttonFocusIds = new Map<number, object>();
+    const focusIdFor = (index: number): object => {
+        let id = buttonFocusIds.get(index);
+        if (!id) {
+            id = {};
+            buttonFocusIds.set(index, id);
+        }
+        return id;
+    };
+
+    const initialFocusId = createMemo(() => focusIdFor(initialIndex()));
+
+    const panelX = createMemo(() => (SCREEN_WIDTH - width()) / 2);
+    const innerWidth = createMemo(() => width() - H_MARGIN * 2);
+
+    const bodyLines = createMemo(() => (props.text ? estimateLineCount(props.text, innerWidth()) : 0));
+    const bodyHeight = createMemo(() => bodyLines() * BODY_LINE_HEIGHT);
+
+    const contentBottom = createMemo(() => {
+        // `children` replaces the text body, and cannot be measured — the caller's `contentHeight`
+        // is the only thing standing between it and the buttons laid out on top of it.
+        if (props.children) {
+            return BODY_TOP + (props.contentHeight ?? 0);
+        }
+        if (props.text) {
+            return BODY_TOP + bodyHeight();
+        }
+        return props.title ? SEPARATOR_TOP + SEPARATOR_HEIGHT : H_MARGIN;
+    });
+
+    // StandardDialog stacks its buttons vertically, each spanning the panel's inner width.
+    const buttonTop = createMemo(() => contentBottom() + BODY_BUTTON_GAP);
+    const buttonY = (index: number) => buttonTop() + index * (BUTTON_HEIGHT + BUTTON_GAP);
+
+    const panelHeight = createMemo(() => {
+        const n = buttons().length;
+        return buttonTop() + n * BUTTON_HEIGHT + (n - 1) * BUTTON_GAP + BOTTOM_MARGIN;
+    });
+    // Floor rather than round: StandardDialog's panel lands one 720p pixel higher than rounding
+    // gives, and every line of body text inherits the offset.
+    const panelY = createMemo(() => Math.floor((SCREEN_HEIGHT - panelHeight()) / 2));
+
+    let closedLatch = false;
+
+    const fireClosedOnce = () => {
+        if (closedLatch) {
+            return;
+        }
+        closedLatch = true;
+        props.onClosed?.();
+    };
+
+    // `onClosed` is documented as firing once per open cycle however the dialog closed, so a
+    // caller driving `show` back to false directly — no button, no Back — has to reach it too.
+    // The latch is armed on the rising edge and fired on the falling one, which keeps a
+    // button-initiated close (where the handler has already fired it) to a single call.
+    let wasShown = false;
+    createEffect(() => {
+        const shown = props.show;
+        if (shown && !wasShown) {
+            closedLatch = false;
+        } else if (!shown && wasShown) {
+            fireClosedOnce();
+        }
+        wasShown = shown;
+    });
+
+    const handleDismiss = () => {
+        batch(() => {
+            props.onDismiss?.();
+            fireClosedOnce();
+        });
+    };
+
+    const handleButton = (index: number) => {
+        batch(() => {
+            props.onButtonSelected?.(index);
+            fireClosedOnce();
+        });
+    };
+
+    const panelBg = () => resolveColor(palette(), "dialogBackgroundColor", DEFAULT_PALETTE.dialogBackgroundColor!);
+    const titleColor = () => resolveColor(palette(), "dialogTextColor", DEFAULT_PALETTE.dialogTextColor!);
+    const bodyColor = () =>
+        resolveColor(palette(), "dialogSecondaryTextColor", DEFAULT_PALETTE.dialogSecondaryTextColor!);
+    const ruleColor = () =>
+        resolveColor(palette(), "dialogSecondaryItemColor", DEFAULT_PALETTE.dialogSecondaryItemColor!);
+
+    const roundedPanelEffect = <effect borderRadius={PANEL_RADIUS} />;
+
+    return (
+        <ModalBoundary
+            show={props.show}
+            focusId={props.focusId}
+            dim={DIM_COLOR}
+            initialFocus={initialFocusId()}
+            navigation="vertical"
+            onDismiss={handleDismiss}
+        >
+            <group translation={[panelX(), panelY()]}>
+                <rectangle width={width()} height={panelHeight()} color={panelBg()} effect={roundedPanelEffect} />
+                <Show when={props.title}>
+                    <label
+                        text={props.title!}
+                        color={titleColor()}
+                        font={TITLE_FONT}
+                        width={innerWidth()}
+                        horizAlign="left"
+                        vertAlign="top"
+                        maxLines={1}
+                        translation={[H_MARGIN, TITLE_TOP]}
+                    />
+                    <rectangle
+                        width={innerWidth()}
+                        height={SEPARATOR_HEIGHT}
+                        color={ruleColor()}
+                        translation={[H_MARGIN, SEPARATOR_TOP]}
+                    />
+                </Show>
+                <Show when={props.text && !props.children}>
+                    <label
+                        text={props.text!}
+                        color={bodyColor()}
+                        font={BODY_FONT}
+                        width={innerWidth()}
+                        height={bodyHeight()}
+                        horizAlign="left"
+                        vertAlign="top"
+                        maxLines={bodyLines()}
+                        translation={[H_MARGIN, BODY_TOP]}
+                        wrap={true}
+                    />
+                </Show>
+                <Show when={props.children}>
+                    <group translation={[H_MARGIN, BODY_TOP]}>{props.children}</group>
+                </Show>
+                <For each={buttons()}>
+                    {(button, index) => (
+                        <DialogButton
+                            label={button.text}
+                            focusId={focusIdFor(index())}
+                            palette={palette()}
+                            width={innerWidth()}
+                            x={H_MARGIN}
+                            y={buttonY(index())}
+                            onSelect={() => handleButton(index())}
+                        />
+                    )}
+                </For>
+            </group>
+        </ModalBoundary>
+    );
+};

package/src/test-helpers/tween-test-setup.ts

@@ -0,0 +1,78 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { jest } from "@jest/globals";
+import { registerInternStringApi } from "@roku-sdk/common/string-interner";
+import { transactionManager } from "@roku-sdk/common/transaction";
+import type { InternStringApi, StructuredDataApi, TreeManipulationApi } from "@roku-sdk/interfaces";
+import { AnchorNode, type DomNode } from "@roku-sdk/interfaces";
+import { makeSolidRenderer, type Renderer } from "@roku-sdk/solid";
+
+const anchorNameRef = { id: 0 };
+
+export const commitEarly = transactionManager.commitEarly;
+
+/** Install mocked Solid renderer APIs. Call from beforeEach in tween tests. */
+export function installSolidTestRenderer(): Renderer<DomNode>["render"] {
+    let nodeRef = 0;
+    let internRef = 0;
+    const mockTmApi: TreeManipulationApi = {
+        createNode: jest.fn().mockImplementation(() => ({ id: ++nodeRef })),
+        appendNode: jest.fn(),
+        insertNodeBefore: jest.fn(),
+        removeNode: jest.fn(),
+        setNodePropNull: jest.fn(),
+        setNodePropBool: jest.fn(),
+        setNodePropInt: jest.fn(),
+        setNodePropFloat: jest.fn(),
+        setNodePropString: jest.fn(),
+        setNodePropObject: jest.fn(),
+        setNodePropArray: jest.fn(),
+        setNodePropNodeRef: jest.fn(),
+        registerFieldChangeHandler: jest.fn(),
+        unregisterFieldHandler: jest.fn(),
+        setFocus: jest.fn()
+    };
+
+    const internMap = new Map<string, object>();
+    const mockIntern: InternStringApi = {
+        internString: (str: string): object => {
+            const existing = internMap.get(str);
+            if (existing) return existing;
+            const ref = { id: ++internRef };
+            internMap.set(str, ref);
+            return ref;
+        }
+    };
+    registerInternStringApi(mockIntern);
+
+    const mockStructuredDataApi: StructuredDataApi = {
+        createArray: jest.fn(),
+        appendInt: jest.fn(),
+        appendBool: jest.fn(),
+        appendNull: jest.fn(),
+        appendFloat: jest.fn(),
+        appendString: jest.fn(),
+        appendObject: jest.fn(),
+        appendArray: jest.fn(),
+        appendNodeRef: jest.fn(),
+        createObject: jest.fn(),
+        insertInt: jest.fn(),
+        insertBool: jest.fn(),
+        insertNull: jest.fn(),
+        insertFloat: jest.fn(),
+        insertString: jest.fn(),
+        insertObject: jest.fn(),
+        insertArray: jest.fn(),
+        insertNodeRef: jest.fn(),
+        getArray: jest.fn(),
+        getObject: jest.fn()
+    };
+
+    const solidRenderer = makeSolidRenderer(mockTmApi, mockStructuredDataApi, mockStructuredDataApi);
+    return solidRenderer.renderer.render;
+}
+
+export function createAnchorNode(): AnchorNode {
+    return { r: { id: 0 }, c: [], n: anchorNameRef } as AnchorNode;
+}