@roku-sdk/components 0.0.0-stage → 2.18.0

package/src/sg-nodes/__tests__/solid-integration.test.tsx

@@ -0,0 +1,719 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { beforeEach, describe, expect, jest, test } from "@jest/globals";
+import { registerInternStringApi } from "@roku-sdk/common/string-interner";
+import { transactionManager } from "@roku-sdk/common/transaction";
+import { Button, ContentNode, Label, LabelList } from "@roku-sdk/components";
+import { AnchorNode, DomNode } from "@roku-sdk/interfaces";
+import { InternStringApi, StructuredDataApi, TreeManipulationApi } from "@roku-sdk/interfaces";
+import { cleanUp, createEffect, createSignal, For, makeSolidRenderer, Renderer, Show } from "@roku-sdk/solid";
+
+describe("Solid", () => {
+    const anchorNodeRef = { id: 0 };
+    const anchorNameRef = { id: 0 };
+
+    let render: Renderer<DomNode>["render"];
+    const internMap = new Map<string, object>();
+    let mockTmApi: TreeManipulationApi;
+    let mockStructuredDataApi: StructuredDataApi;
+    const commitEarly = transactionManager.commitEarly;
+
+    beforeEach(() => {
+        let nodeRef = 0;
+        let internRef = 0;
+        let arrayRef = 0;
+        let objectRef = 0;
+        mockTmApi = {
+            createNode: jest.fn().mockImplementation((): object => {
+                return { 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 mockIntern: InternStringApi = {
+            internString: (str: string): object => {
+                const interned = internMap.get(str);
+                if (!interned) {
+                    const ref = { id: ++internRef };
+                    internMap.set(str, ref);
+                    return ref;
+                }
+                return interned;
+            }
+        };
+        registerInternStringApi(mockIntern);
+
+        mockStructuredDataApi = {
+            createArray: jest.fn().mockImplementation(() => ({ id: ++arrayRef })),
+            appendInt: jest.fn(),
+            createObject: jest.fn().mockImplementation(() => ({ id: ++objectRef })),
+            insertInt: jest.fn(),
+            insertArray: jest.fn()
+            // Add other methods as needed
+        };
+
+        const solidRenderer = makeSolidRenderer(mockTmApi, mockStructuredDataApi, mockStructuredDataApi);
+        ({ render } = solidRenderer.renderer);
+    });
+
+    test("should render a component", async () => {
+        const App = () => <Label text="Hello World!"></Label>;
+
+        const anchorNode = { r: anchorNodeRef, c: [], n: anchorNameRef };
+        const dispose = render(() => <App />, anchorNode);
+        commitEarly();
+        // Tests the Tree
+        expect(anchorNode).toEqual({ r: anchorNodeRef, c: [{ r: { id: 1 } }], n: anchorNameRef });
+
+        // Tests the TM API. Use this to test if props are set correctly
+        expect(mockTmApi.createNode).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.createNode).toHaveBeenCalledWith({}, { id: 1 });
+        expect(mockTmApi.appendNode).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.appendNode).toHaveBeenCalledWith({}, anchorNodeRef, { id: 1 });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "Hello World!");
+        dispose();
+    });
+
+    test("should work with a functional component", async () => {
+        const Nested = () => <Label text="Nested"></Label>;
+        const App = () => {
+            return (
+                <>
+                    <Label text="This is a Header"></Label>
+                    <Nested />
+                </>
+            );
+        };
+
+        const anchorNode = {};
+        render(() => <App />, anchorNode);
+        commitEarly();
+
+        expect(anchorNode).toEqual({
+            c: [{ r: { id: 1 } }, { r: { id: 2 } }]
+        });
+    });
+
+    test("should work with signals", async () => {
+        const [count, setCount] = createSignal(0);
+        const Counter = () => {
+            return (
+                <>
+                    <Label text={`Count: ${count()}`}></Label>
+                </>
+            );
+        };
+
+        const anchorNode = {};
+        render(() => <Counter />, anchorNode);
+        commitEarly();
+        expect(anchorNode).toEqual({ c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "Count: 0");
+
+        setCount(count() + 1);
+        commitEarly();
+        expect(anchorNode).toEqual({ c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(2);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "Count: 1");
+    });
+
+    test("should work with effects", async () => {
+        const [count, setCount] = createSignal(0);
+        let lastEffect;
+        const Counter = () => {
+            createEffect(() => {
+                lastEffect = count();
+                // function gets called each time count is updated
+            });
+
+            return <Label text={`Count: ${count()}`}></Label>;
+        };
+        const anchorNode = { r: anchorNodeRef };
+        render(() => <Counter />, anchorNode);
+        commitEarly();
+
+        setCount(10);
+        commitEarly();
+        expect(lastEffect).toBe(10);
+    });
+
+    test("signals should update props - also derived signals", async () => {
+        const [count, setCount] = createSignal(0);
+        const Counter = () => {
+            const doubleCount = () => count() * 2;
+
+            return <Label text={`Count: ${doubleCount()}`}></Label>;
+        };
+        const anchorNode = { r: anchorNodeRef };
+        render(() => <Counter />, anchorNode);
+        commitEarly();
+        expect(anchorNode).toEqual({ r: anchorNodeRef, c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "Count: 0");
+
+        setCount(10);
+        commitEarly();
+        expect(anchorNode).toEqual({ r: anchorNodeRef, c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(2);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "Count: 20");
+    });
+
+    test("should work with Show", async () => {
+        const [loggedIn, setLoggedIn] = createSignal(false);
+        const App = () => (
+            <>
+                <Show when={loggedIn()} fallback={<Label text="Logged Out"></Label>}>
+                    <Label text="Logged In"></Label>
+                </Show>
+            </>
+        );
+        const anchorNode = { r: 0 };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(anchorNode).toEqual({ r: 0, c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "Logged Out");
+
+        setLoggedIn(true);
+        commitEarly();
+        expect(anchorNode).toEqual({ r: 0, c: [{ r: { id: 2 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(2);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 2 }, { id: 2 }, "Logged In");
+    });
+
+    test("should work with Show without fallback (sole child)", async () => {
+        const [visible, setVisible] = createSignal(false);
+        const App = () => (
+            <>
+                <Show when={visible()}>
+                    <Label text="Visible"></Label>
+                </Show>
+            </>
+        );
+        const anchorNode = { r: 0 } as DomNode;
+        render(() => <App />, anchorNode);
+        commitEarly();
+
+        // When Show is the sole child with when=false and no fallback, parent has no children
+        // (the universal renderer's cleanChildren with marker=undefined removes all children)
+        expect(anchorNode.c?.length ?? 0).toBe(0);
+
+        setVisible(true);
+        commitEarly();
+        expect(anchorNode.c!.length).toBe(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, anchorNode.c![0].r, expect.anything(), "Visible");
+
+        setVisible(false);
+        commitEarly();
+        // Should not throw when toggling back to false
+        expect(anchorNode.c?.length ?? 0).toBe(0);
+    });
+
+    test("should work with Show without fallback alongside siblings", async () => {
+        // Show must be inside a real element (not Fragment) with siblings to trigger
+        // the insert(parent, show, marker) code path where createTextNode is called.
+        // Fragments compile to arrays which use a different (marker-free) path.
+        const [visible, setVisible] = createSignal(false);
+        const App = () => (
+            <group>
+                <label text="Before" />
+                <Show when={visible()}>
+                    <label text="Dynamic" />
+                </Show>
+                <label text="After" />
+            </group>
+        );
+        const anchorNode = { r: 0 } as DomNode;
+        render(() => <App />, anchorNode);
+        commitEarly();
+
+        // group is child of anchor; its children include Before, placeholder, After
+        const groupNode = anchorNode.c![0];
+        expect(groupNode.c!.length).toBeGreaterThanOrEqual(2);
+
+        setVisible(true);
+        commitEarly();
+        const dynamicSet = mockTmApi.setNodePropString.mock.calls.find((call: unknown[]) => call[3] === "Dynamic");
+        expect(dynamicSet).toBeDefined();
+
+        setVisible(false);
+        commitEarly();
+        // Should not throw — placeholder replaces Dynamic label
+        expect(groupNode.c!.length).toBeGreaterThanOrEqual(2);
+    });
+
+    test("can re-order elements without re-creating", async () => {
+        const [cats, setCats] = createSignal([
+            { id: "J---aiyznGQ", name: "Keyboard Cat" },
+            { id: "z_AbfPXTKms", name: "Maru" },
+            { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }
+        ]);
+        const App = () => {
+            return (
+                <>
+                    <For each={cats()}>
+                        {(cat, i) => <Label text={`idx: ${i()}, id: ${cat.id}, name: ${cat.name}`}></Label>}
+                    </For>
+                </>
+            );
+        };
+        const anchorNode = { r: { id: 0 } };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 1 } }, { r: { id: 2 } }, { r: { id: 3 } }]
+        });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(3);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith(
+            {},
+            { id: 1 },
+            { id: 2 },
+            "idx: 0, id: J---aiyznGQ, name: Keyboard Cat"
+        );
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith(
+            {},
+            { id: 2 },
+            { id: 2 },
+            "idx: 1, id: z_AbfPXTKms, name: Maru"
+        );
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith(
+            {},
+            { id: 3 },
+            { id: 2 },
+            "idx: 2, id: OUtn3pvWmpg, name: Henri The Existential Cat"
+        );
+
+        const currentCats = cats();
+        setCats([currentCats[1], currentCats[0], currentCats[2]]);
+        commitEarly();
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 2 } }, { r: { id: 1 } }, { r: { id: 3 } }]
+        });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(5);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith(
+            {},
+            { id: 2 },
+            { id: 2 },
+            "idx: 0, id: z_AbfPXTKms, name: Maru"
+        );
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith(
+            {},
+            { id: 1 },
+            { id: 2 },
+            "idx: 1, id: J---aiyznGQ, name: Keyboard Cat"
+        );
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith(
+            {},
+            { id: 3 },
+            { id: 2 },
+            "idx: 2, id: OUtn3pvWmpg, name: Henri The Existential Cat"
+        );
+        expect(mockTmApi.insertNodeBefore).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.insertNodeBefore).toHaveBeenCalledWith({}, { id: 0 }, { id: 1 }, { id: 3 });
+        expect(mockTmApi.removeNode).toHaveBeenCalledTimes(0);
+    });
+
+    test("Changing visibility should removeNode and create new ones", async () => {
+        const [visibility, setVisibility] = createSignal(true);
+        const App = () => {
+            return (
+                <>
+                    <Show when={visibility()}>
+                        <Label text="Toy Story"></Label>
+                    </Show>
+                    <Label text="Finding Nemo"></Label>
+                    <Show when={!visibility()}>
+                        <Label text="Cars"></Label>
+                    </Show>
+                    <Label text="Up"></Label>
+                </>
+            );
+        };
+
+        const anchorNode = { r: { id: 0 } };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 1 } }, { r: { id: 2 } }, { r: { id: 3 } }]
+        });
+        setVisibility(false);
+        commitEarly();
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 2 } }, { r: { id: 4 } }, { r: { id: 3 } }]
+        });
+
+        expect(mockTmApi.removeNode).toHaveBeenCalledTimes(1);
+        setVisibility(true);
+        commitEarly();
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 5 } }, { r: { id: 2 } }, { r: { id: 3 } }]
+        });
+
+        expect(mockTmApi.removeNode).toHaveBeenCalledTimes(2);
+    });
+
+    test("can add elements without re-creating", async () => {
+        const [cats, setCats] = createSignal(["Keyboard Cat", "Maru", "Henri The Existential Cat"]);
+        const App = () => {
+            return (
+                <>
+                    <For each={cats()}>{(cat, i) => <Label text={`idx: ${i()}, ${cat}`}></Label>}</For>
+                </>
+            );
+        };
+        const anchorNode = { r: { id: 0 } };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 1 } }, { r: { id: 2 } }, { r: { id: 3 } }]
+        });
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+        setCats(cats => cats.concat("New Cat"));
+        commitEarly();
+        console.log(anchorNode);
+        expect(anchorNode).toEqual({
+            r: { id: 0 },
+            c: [{ r: { id: 1 } }, { r: { id: 2 } }, { r: { id: 3 } }, { r: { id: 4 } }]
+        });
+    });
+
+    test("can add items to contentNode", async () => {
+        const [items, setItems] = createSignal(["Drama", "Action", "Horror", "Comedy"]);
+        const App = () => {
+            return (
+                <>
+                    <LabelList id="moviemenu" translation={[160, 92]} itemSize={[440, 48]}>
+                        <ContentNode role="content">
+                            <For each={items()}>{(item, i) => <ContentNode title={`idx: ${i()} ${item}`} />}</For>
+                        </ContentNode>
+                    </LabelList>
+                </>
+            );
+        };
+        const anchorNode = { r: 0 };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        console.log(JSON.stringify(anchorNode));
+        expect(anchorNode).toEqual({
+            r: 0,
+            c: [
+                {
+                    r: { id: 1 },
+                    c: [
+                        {
+                            r: { id: 2 },
+                            c: [{ r: { id: 3 } }, { r: { id: 4 } }, { r: { id: 5 } }, { r: { id: 6 } }]
+                        }
+                    ]
+                }
+            ]
+        });
+        expect(mockTmApi.setNodePropArray).toHaveBeenCalledTimes(2);
+        expect(mockTmApi.setNodePropArray).toHaveBeenCalledWith({}, { id: 1 }, { id: 6 }, { id: 1 });
+        expect(mockTmApi.setNodePropArray).toHaveBeenCalledWith({}, { id: 1 }, { id: 7 }, { id: 2 });
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+        console.log("heree...1");
+        setItems(items => items.concat("New Cat"));
+        commitEarly();
+        console.log(anchorNode);
+        expect(anchorNode).toEqual({
+            r: 0,
+            c: [
+                {
+                    r: { id: 1 },
+                    c: [
+                        {
+                            r: { id: 2 },
+                            c: [
+                                { r: { id: 3 } },
+                                { r: { id: 4 } },
+                                { r: { id: 5 } },
+                                { r: { id: 6 } },
+                                { r: { id: 7 } }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        });
+    });
+
+    test("should respond to external signals", async () => {
+        const [signal, setSignal] = createSignal(0);
+
+        const App = (props: { i: number }) => <Label text={`${props.i}`}></Label>;
+
+        const anchorNode = { r: 0 };
+        const props = {} as { i: number };
+        Object.defineProperty(props, "i", {
+            get: signal,
+            enumerable: true
+        });
+        const dispose = render(() => <App {...props} />, anchorNode);
+        commitEarly();
+
+        // Initial render check
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(anchorNode).toEqual({ r: 0, c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "0");
+
+        // Update signal and check if the component updates
+        setSignal(101);
+        commitEarly();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(anchorNode).toEqual({ r: 0, c: [{ r: { id: 1 } }] });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(2);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 }, "101");
+
+        dispose();
+    });
+
+    test("should render multiple sub trees", async () => {
+        // Use fake timers for this specific test to prevent runaway intervals
+        jest.useFakeTimers();
+
+        const [count1, setCount1] = createSignal(1);
+
+        const App1 = () => {
+            return (
+                <>
+                    <ContentNode title={`Hello World ${count1()}`}></ContentNode>
+                </>
+            );
+        };
+
+        const [count2, setCount2] = createSignal(2);
+        const App2 = () => {
+            return (
+                <>
+                    <Label text={`Hello World ${count2()}`}></Label>
+                </>
+            );
+        };
+
+        const anchorNode1 = { r: 0, c: [] };
+        const dispose1 = render(() => <App1 />, anchorNode1);
+        commitEarly();
+        expect(anchorNode1).toEqual({
+            r: 0,
+            c: [{ r: { id: 1 } }]
+        });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 3 }, "Hello World 1");
+
+        const anchorNode2 = { r: 1, c: [] };
+        const dispose2 = render(() => <App2 />, anchorNode2);
+        commitEarly();
+        expect(anchorNode2).toEqual({
+            r: 1,
+            c: [{ r: { id: 2 } }]
+        });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(2);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 2 }, { id: 2 }, "Hello World 2");
+
+        function updateCount1() {
+            setCount1(odd => odd + 2);
+            commitEarly();
+        }
+
+        function updateCount2() {
+            setCount2(even => even + 2);
+            commitEarly();
+        }
+
+        updateCount1();
+        updateCount2();
+        // TODO: Check if the props are updated
+        expect(anchorNode1).toEqual({
+            r: 0,
+            c: [{ r: { id: 1 } }]
+        });
+        expect(anchorNode2).toEqual({
+            r: 1,
+            c: [{ r: { id: 2 } }]
+        });
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledTimes(4);
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 1 }, { id: 3 }, "Hello World 3");
+        expect(mockTmApi.setNodePropString).toHaveBeenCalledWith({}, { id: 2 }, { id: 2 }, "Hello World 4");
+
+        let endTest;
+        const promise = new Promise(resolve => (endTest = resolve));
+        const clearCount1 = setInterval(() => {
+            if (count1() < 10) {
+                updateCount1();
+            } else {
+                clearInterval(clearCount1);
+            }
+        }, 1);
+        const clearCount2 = setInterval(() => {
+            if (count2() < 10) {
+                updateCount2();
+            } else {
+                clearInterval(clearCount2);
+            }
+        }, 1);
+
+        let count = 0;
+        const clearCombined = setInterval(() => {
+            if (count < 5) {
+                updateCount1();
+                updateCount2();
+            } else if (count === 5) {
+                dispose1();
+                updateCount1();
+                updateCount2();
+            } else if (count === 6) {
+                dispose2();
+                updateCount1();
+                updateCount2();
+            } else if (count > 6) {
+                clearInterval(clearCombined);
+                endTest();
+            }
+            ++count;
+        }, 10);
+
+        // Fast forward timers to complete the test quickly
+        jest.advanceTimersByTime(1000); // Advance by 1 second
+
+        // Restore real timers before awaiting the promise
+        jest.useRealTimers();
+
+        return promise;
+    });
+    test("should warn if orphan instances are present", () => {
+        const App = () => {
+            return (
+                <>
+                    <Label text="This is a Header"></Label>
+                </>
+            );
+        };
+
+        const anchorNode = { r: 0 };
+        render(() => <App />, anchorNode);
+
+        // Should not throw an exception, just log a warning
+        expect(() => commitEarly()).not.toThrow();
+
+        cleanUp();
+    });
+
+    test("setFocus be called with true", async () => {
+        const App = () => {
+            return (
+                <LabelList gainFocus={true} id="moviemenu" translation={{ fhd: [160, 92], hd: [110, 62] }}>
+                    <ContentNode>
+                        <ContentNode title="Backdrops preferences" />
+                        <ContentNode title="Connect" />
+                        <ContentNode title="Help" />
+                    </ContentNode>
+                </LabelList>
+            );
+        };
+
+        const anchorNode = { r: { id: 0 }, n: { id: 0 } };
+        render(() => <App />, anchorNode);
+        commitEarly();
+
+        expect(mockTmApi.setFocus).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setFocus).toHaveBeenCalledWith({}, { id: 1 }, true);
+    });
+
+    test("setFocus be called with false", async () => {
+        const [focus, setFocus] = createSignal(true);
+        const App = () => {
+            return (
+                <LabelList gainFocus={focus()} id="moviemenu" translation={{ fhd: [160, 92], hd: [110, 62] }}>
+                    <ContentNode>
+                        <ContentNode title="Backdrops preferences" />
+                        <ContentNode title="Connect" />
+                        <ContentNode title="Help" />
+                    </ContentNode>
+                </LabelList>
+            );
+        };
+
+        // canReceiveFocus=true simulates an anchor node that extends FocusBoundaryBase,
+        // which is the only case where the re-anchor fires.
+        // Use r:{} so the anchor node ref stays an empty object, matching the setFocus assertions below.
+        const anchorNode: AnchorNode = { r: {}, n: anchorNameRef, canReceiveFocus: true };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(mockTmApi.setFocus).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.setFocus).toHaveBeenCalledWith({}, { id: 1 }, true);
+
+        setFocus(false);
+        commitEarly();
+        expect(mockTmApi.setFocus).toHaveBeenCalledTimes(3);
+        expect(mockTmApi.setFocus).toHaveBeenCalledWith({}, { id: 1 }, false);
+        // SG focus is re-anchored to the node's owning anchor node when gainFocus=false
+        // fires with no new SG target in the same transaction.
+        expect(mockTmApi.setFocus).toHaveBeenCalledWith({}, {}, true);
+    });
+
+    test("Register field change handler", async () => {
+        const App = () => {
+            return <Button onButtonSelected={() => {}} text="Hello World!" opacity={1} />;
+        };
+        const anchorNode = { r: 0 };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(mockTmApi.registerFieldChangeHandler).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.registerFieldChangeHandler).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 });
+    });
+
+    test("Change handler based on signal", async () => {
+        const [isSelected, setIsSelected] = createSignal(0);
+        const App = () => {
+            return (
+                <Button onButtonSelected={[null, () => {}, undefined][isSelected()]} text="Hello World!" opacity={1} />
+            );
+        };
+        const anchorNode = { r: 0 };
+        render(() => <App />, anchorNode);
+        commitEarly();
+        expect(mockTmApi.unregisterFieldHandler).toHaveBeenCalledTimes(0);
+        expect(mockTmApi.registerFieldChangeHandler).toHaveBeenCalledTimes(0);
+
+        setIsSelected(1);
+        commitEarly();
+        expect(mockTmApi.registerFieldChangeHandler).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.registerFieldChangeHandler).toHaveBeenCalledWith({}, { id: 1 }, { id: 2 });
+        expect(mockTmApi.unregisterFieldHandler).toHaveBeenCalledTimes(0);
+
+        setIsSelected(2);
+        commitEarly();
+        expect(mockTmApi.unregisterFieldHandler).toHaveBeenCalledTimes(1);
+        expect(mockTmApi.registerFieldChangeHandler).toHaveBeenCalledTimes(1);
+    });
+
+    // TODO: These are cases are possible but not implemented yet
+    test("Assign node ref as child and also as prop", async () => {});
+    test("Remove node ref as child and assign as prop and viceversa", async () => {});
+});