@ryupold/vode 1.8.8 → 1.8.11

package/test/mocks.ts

@@ -1,3 +1,5 @@
+import { globals } from "../src/vode";
+
 const NodeConstants = {
     ELEMENT_NODE: 1,
     ATTRIBUTE_NODE: 2,
@@ -181,14 +183,40 @@ export class FakeTextNode {
 }
 
 export function resetMocks() {
-    const mockDoc: any = {
+    let hidden = false;
+    let rafHandle = 0;
+    const rafQueue = new Map<number, FrameRequestCallback>();
+    let rafTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function scheduleNextFrame() {
+        if (rafTimer !== null || hidden || rafQueue.size === 0) {
+            return;
+        }
+
+        rafTimer = setTimeout(() => {
+            rafTimer = null;
+
+            if (hidden || rafQueue.size === 0) {
+                scheduleNextFrame();
+                return;
+            }
+
+            const now = performance.now();
+            const callbacks = Array.from(rafQueue.values());
+            rafQueue.clear();
+
+            for (const cb of callbacks) {
+                cb(now);
+            }
+
+            scheduleNextFrame();
+        }, 16);
+    }
+
+    const fakeDocument: any = {
         createElement: (tag: string) => new FakeElement(tag),
         createTextNode: (text: string) => new FakeTextNode(text),
         createElementNS: (ns: string, tag: string) => new FakeElement(tag),
-        hidden: false,
-    };
-    const mockWin: any = {
-        requestAnimationFrame: (cb: any) => cb(Date.now()),
         startViewTransition: (callbackOptions: any) => {
             return {
                 finished: Promise.resolve(),
@@ -196,10 +224,56 @@ export function resetMocks() {
                 updateCallbackDone: Promise.resolve(),
                 skipTransition() { },
             };
-        }
+        },
+        _fake: true,
     };
 
-    globalThis.document ??= mockDoc as Document;
-    globalThis.window ??= mockWin as (Window & typeof globalThis);
+    Object.defineProperty(fakeDocument, "hidden", {
+        enumerable: true,
+        configurable: true,
+        get: () => hidden,
+        set: (value: boolean) => {
+            hidden = !!value;
+            if (!hidden) {
+                scheduleNextFrame();
+            }
+        },
+    });
+
+    const fakeWindow: any = {
+        requestAnimationFrame: (cb: FrameRequestCallback) => {
+            const id = ++rafHandle;
+            rafQueue.set(id, cb);
+            scheduleNextFrame();
+            return id;
+        },
+        cancelAnimationFrame: (id: number) => {
+            rafQueue.delete(id);
+        },
+        _fake: true,
+    };
+
+    if ((<typeof fakeDocument>globalThis.document)?._fake)
+        globalThis.document = undefined as any;
+    if ((<typeof fakeWindow>globalThis.window)?._fake)
+        globalThis.window = undefined as any;
+
+
+    globalThis.document ??= fakeDocument as Document;
+    globalThis.window ??= fakeWindow as (Window & typeof globalThis);
     globalThis.Node ??= NodeConstants as any;
-}
+
+    if ((<typeof fakeWindow>globalThis.window)?._fake) {
+        const raf = globalThis.window?.requestAnimationFrame;
+        if (typeof raf === "function") {
+            globals.requestAnimationFrame = raf.bind(globalThis.window);
+        }
+    }
+
+    if ((<typeof fakeDocument>globalThis.document)?._fake) {
+        const startViewTransition = (globalThis.document as any)?.startViewTransition;
+        globals.startViewTransition = typeof startViewTransition === "function"
+            ? startViewTransition.bind(globalThis.document)
+            : null;
+    }
+}

package/test/run-tests.ts

@@ -0,0 +1,61 @@
+import { tests } from ".";
+import { expect, ExpectationError } from "./helper";
+import { resetMocks } from "./mocks";
+
+const count = {
+    total: 0,
+    passed: 0,
+    failed: <string[]>[],
+}
+const line = "----------------------------------";
+
+async function runTest(test: [string, () => any]) {
+    count.total++;
+    resetMocks();
+    const start = performance.now();
+    try {
+        expect(document).toBeNotHidden();
+        const result = test[1]();
+        if (result && typeof (result as any)?.then === "function") {
+            await result;
+        }
+        count.passed++;
+        const time = (performance.now() - start).toFixed(3) + " ms";
+        console.log(`#${count.total} ${test[0]}\n-> 🟢 passed ${time}\n${line}`);
+    } catch (err: any) {
+        const time = (performance.now() - start).toFixed(3) + " ms";
+        console.error(`#${count.total} ${test[0]}\n-> 🔴 failed ${time}`);
+        if (err instanceof ExpectationError) {
+            count.failed.push(`#${count.total} ${test[0]}\n-> 🔴 failed:\n${err.message}\n${line}`);
+        }
+        else {
+            count.failed.push(`#${count.total} ${test[0]}\n-> 🔴 failed:\n${err.message}\n${err.stack}\n${line}`);
+        }
+    }
+}
+
+const sw = performance.now();
+(async () => {
+    for (const test of Object.entries(tests)) {
+        await runTest(test);
+    }
+
+    const time = (performance.now() - sw).toFixed(3) + " ms";
+
+    console.log(`
+        total: ${count.total}
+        passed: ${count.passed}
+        failed: ${count.failed.length}
+
+        time: ${time}
+    `);
+
+    if (count.passed === count.total) {
+        console.log("\n\nall tests passed\n");
+    }
+    else {
+        console.error(`${line.replaceAll("-", "=")}\nError summary:\n\n${count.failed.join(`\n${line}\n`)}`);
+
+        throw "\n\nsome tests failed (see output)\n";
+    }
+})();

package/test/tests-app.ts

@@ -2,7 +2,7 @@ import { expect } from "./helper";
 import { app, ARTICLE, BUTTON, createState, DIV, P, SPAN, SECTION } from "../index";
 
 export default {
-    "app(): successful initialization": () => {
+    "app(): successful initialization": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -19,7 +19,7 @@ export default {
 
         expect(patch).toBeA("function");
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV,
                 [ARTICLE,
                     [P, "foo", [SPAN, "bar"]]
@@ -30,15 +30,15 @@ export default {
 
     //=== FAILURE CASES ===
 
-    "app(): fails when the container has no parent": () => {
+    "app(): fails when the container has no parent": async () => {
         const container = document.createElement("div");
         const err = expect(() => app(container, {}, () => [DIV]))
             .toFail();
 
-        expect(err.message).toEqual("first argument to app() must be a valid HTMLElement inside the <html></html> document");
+        await expect(err.message).toEqual("first argument to app() must be a valid HTMLElement inside the <html></html> document");
     },
 
-    "app(): fails when the state is not an object": () => {
+    "app(): fails when the state is not an object": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -46,10 +46,10 @@ export default {
         const err = expect(() => app(container, "oops", () => [DIV]))
             .toFail();
 
-        expect(err.message).toEqual("second argument to app() must be a state object");
+        await expect(err.message).toEqual("second argument to app() must be a state object");
     },
 
-    "app(): fails when the dom factory is not a function": () => {
+    "app(): fails when the dom factory is not a function": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -57,12 +57,12 @@ export default {
         const err = expect(() => app(container, {}, [DIV] as any))
             .toFail();
 
-        expect(err.message).toEqual("third argument to app() must be a function that returns a vode");
+        await expect(err.message).toEqual("third argument to app() must be a function that returns a vode");
     },
 
     //=== INITIAL PATCHES ===
 
-    "app(): executes initial patches after first render": () => {
+    "app(): executes initial patches after first render": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -74,12 +74,12 @@ export default {
             () => ({ start: 2 })
         );
 
-        expect(state).toEqual({ count: 7, start: 2 });
+        await expect(state).toEqual({ count: 7, start: 2 });
     },
 
     //=== STATE PATCHING ===
 
-    "app(): patch with object updates state and re-renders DOM": () => {
+    "app(): patch with object updates state and re-renders DOM": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -87,16 +87,16 @@ export default {
         const state: any = { msg: "hello" };
         app(container, state, (s: any) => [DIV, s.msg]);
 
-        expect(state.msg).toEqual("hello");
-        expect(container).toMatch([DIV, "hello"]);
+        await expect(state.msg).toEqual("hello");
+        await expect(container).toMatch([DIV, "hello"]);
 
         state.patch({ msg: "world" });
 
-        expect(state.msg).toEqual("world");
-        expect(container).toMatch([DIV, "world"]);
+        await expect(state.msg).toEqual("world");
+        await expect(container).toMatch([DIV, "world"]);
     },
 
-    "app(): patch with effect function executes and applies result": () => {
+    "app(): patch with effect function executes and applies result": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -106,11 +106,11 @@ export default {
 
         state.patch(() => ({ count: 5 }));
 
-        expect(state.count).toEqual(5);
-        expect(container).toMatch([DIV, "5"]);
+        await expect(state.count).toEqual(5);
+        await expect(container).toMatch([DIV, "5"]);
     },
 
-    "app(): patch with array applies multiple patches in sequence": () => {
+    "app(): patch with array applies multiple patches in sequence": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -118,13 +118,13 @@ export default {
         const state: any = { a: 1, b: 2 };
         app(container, state, () => [DIV]);
 
-        state.patch([{ a: 10 }, { b: 20 }]);
+        await state.patch([{ a: 10 }, { b: 20 }]);
 
-        expect(state.a).toEqual(10);
-        expect(state.b).toEqual(20);
+        await expect(state.a).toEqual(10);
+        await expect(state.b).toEqual(20);
     },
 
-    "app(): multiple sequential patches both apply": () => {
+    "app(): multiple sequential patches both apply": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -135,12 +135,12 @@ export default {
         state.patch({ x: 1 });
         state.patch({ y: 2 });
 
-        expect(state).toEqual({ x: 1, y: 2 });
+        await expect(state).toEqual({ x: 1, y: 2 });
     },
 
     //=== LIFECYCLE ===
 
-    "app(): onMount callback is called on newly created child elements": () => {
+    "app(): onMount callback is called on newly created child elements": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -152,12 +152,12 @@ export default {
             ] as any
         );
 
-        expect(mountCalled).toEqual(true);
+        await expect(mountCalled).toEqual(true);
     },
 
     //=== COMPONENTS ===
 
-    "app(): component function as child renders correctly": () => {
+    "app(): component function as child renders correctly": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -168,12 +168,12 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV, [SPAN, "component rendered"]]
         );
     },
 
-    "app(): component accesses state and renders dynamic content": () => {
+    "app(): component accesses state and renders dynamic content": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -185,12 +185,12 @@ export default {
             ]
         );
 
-        expect(container).toMatch([DIV, [SPAN, "dynamic"]]);
+        await expect(container).toMatch([DIV, [SPAN, "dynamic"]]);
     },
 
     //=== DEEP STATE ===
 
-    "app(): deep nested state merges correctly via patch": () => {
+    "app(): deep nested state merges correctly via patch": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -200,14 +200,14 @@ export default {
 
         state.patch({ nested: { value: 2 } });
 
-        expect(state.nested.value).toEqual(2);
-        expect(state.nested.other).toEqual("keep");
-        expect(container).toMatch([DIV, "2"]);
+        await expect(state.nested.value).toEqual(2);
+        await expect(state.nested.other).toEqual("keep");
+        await expect(container).toMatch([DIV, "2"]);
     },
 
     //=== IGNORED PATCHES ===
 
-    "app(): patching with ignored types is a no-op": () => {
+    "app(): patching with ignored types is a no-op": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -221,10 +221,10 @@ export default {
         state.patch("ignored");
         state.patch(true);
 
-        expect(state.x).toEqual(1);
+        await expect(state.x).toEqual(1);
     },
 
-    "app(): isolated state of multiple independent vode app instances": () => {
+    "app(): isolated state of multiple independent vode app instances": async () => {
         const root = document.createElement("div");
 
         // APP 1 (foo) //
@@ -254,14 +254,14 @@ export default {
         ]);
         /////////////////
 
-        expect(containerFoo).toMatch(
+        await expect(containerFoo).toMatch(
             [DIV,
                 [P, "App 1 count: 0"],
                 [BUTTON, "Sync +1"],
             ]
         );
 
-        expect(containerBar).toMatch(
+        await expect(containerBar).toMatch(
             [DIV,
                 [P, "App 2 count: 0"],
             ]
@@ -270,14 +270,14 @@ export default {
         // Patch state1 independently: no effect on state2
         patchFoo({ count: 5 });
 
-        expect(containerFoo).toMatch(
+        await expect(containerFoo).toMatch(
             [DIV,
                 [P, "App 1 count: 5"],
                 [BUTTON, "Sync +1"],
             ]
         );
 
-        expect(containerBar).toMatch(
+        await expect(containerBar).toMatch(
             [DIV,
                 [P, "App 2 count: 0"],
             ]
@@ -286,14 +286,14 @@ export default {
         // Patch state2 independently: no effect on state1
         patchBar({ count: 3 });
 
-        expect(containerFoo).toMatch(
+        await expect(containerFoo).toMatch(
             [DIV,
                 [P, "App 1 count: 5"],
                 [BUTTON, "Sync +1"],
             ]
         );
 
-        expect(containerBar).toMatch(
+        await expect(containerBar).toMatch(
             [DIV,
                 [P, "App 2 count: 3"],
             ]
@@ -302,14 +302,14 @@ export default {
         // Sync state2 via the returned patch function
         patchBar({ count: 10 });
 
-        expect(containerBar).toMatch(
+        await expect(containerBar).toMatch(
             [DIV,
                 [P, "App 2 count: 10"],
             ]
         );
     },
 
-    "app(): root tag changes between renders": () => {
+    "app(): root tag changes between renders": async () => {
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
@@ -319,11 +319,11 @@ export default {
             s.useSection ? [SECTION, "section mode"] : [DIV, "div mode"]
         );
 
-        expect(container).toMatch([DIV, "div mode"]);
+        await expect(container).toMatch([DIV, "div mode"]);
 
         patch({ useSection: true });
 
-        expect(root).toMatch([DIV, [SECTION, "section mode"]]);
+        await expect(root).toMatch([DIV, [SECTION, "section mode"]]);
     },
 
     "app(): event handler with object patch": () => {
@@ -339,4 +339,4 @@ export default {
         const el = (container as any)._vode.vode.node;
         expect(el.onclick).toBeA("function");
     },
-};
+};

package/test/tests-catch.ts

@@ -9,7 +9,7 @@ function setup() {
 }
 
 export default {
-    "catch: function fallback renders instead of broken component": () => {
+    "catch: function fallback renders instead of broken component": async () => {
         const container = setup();
         const broken = () => { throw new Error("boom"); };
 
@@ -22,14 +22,14 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV,
                 [P, "caught: boom"]
             ]
         );
     },
 
-    "catch: static vode fallback renders instead of broken component": () => {
+    "catch: static vode fallback renders instead of broken component": async () => {
         const container = setup();
         const broken = () => { throw new Error("boom"); };
 
@@ -42,14 +42,14 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV,
                 [ARTICLE, "error occurred"]
             ]
         );
     },
 
-    "catch: nested error boundaries — inner catch handles inner error": () => {
+    "catch: nested error boundaries — inner catch handles inner error": async () => {
         const container = setup();
         const broken = () => { throw new Error("inner boom"); };
 
@@ -66,7 +66,7 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV,
                 [SECTION,
                     [ARTICLE, "inner fallback"]
@@ -75,7 +75,7 @@ export default {
         );
     },
 
-    "catch: nested error boundaries — outer catches when inner has no handler": () => {
+    "catch: nested error boundaries — outer catches when inner has no handler": async () => {
         const container = setup();
         const broken = () => { throw new Error("boom"); };
 
@@ -88,14 +88,14 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV,
                 [P, "outer caught it"]
             ]
         );
     },
 
-    "catch: error propagates when no handler exists on entire tree": () => {
+    "catch: error propagates when no handler exists on entire tree": async () => {
         const container = setup();
         const broken = () => { throw new Error("crash"); };
         let threw = false;
@@ -108,10 +108,10 @@ export default {
             threw = true;
         }
 
-        expect(threw).toEqual(true);
+        await expect(threw).toEqual(true);
     },
 
-    "catch: catch handler changed on A→A path": () => {
+    "catch: catch handler changed on A→A path": async () => {
         const container = setup();
         const state = createState({ catchValue: "v1", showBroken: false });
         const broken = () => { throw new Error("boom"); };
@@ -125,18 +125,18 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV, [SECTION, "ok"]]
         );
 
         patch({ catchValue: "v2", showBroken: true });
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV, [P, "v2"]]
         );
     },
 
-    "catch: error in one sibling doesn't affect the other": () => {
+    "catch: error in one sibling doesn't affect the other": async () => {
         const container = setup();
         const broken = () => { throw new Error("boom"); };
 
@@ -150,7 +150,7 @@ export default {
             ]
         );
 
-        expect(container).toMatch(
+        await expect(container).toMatch(
             [DIV,
                 [P, "whoops"],
                 [ARTICLE, "i am fine"]