@ryupold/vode 1.8.4 → 1.8.6

package/test/tests-createState.ts

@@ -0,0 +1,43 @@
+import { expect } from "./helper";
+import { createState, app, DIV } from "../index";
+
+export default {
+    "createState(): throws when state is not an object": () => {
+        const err = expect(() => createState(null as any)).toFail();
+        expect(err.message)
+            .toEqual("createState() must be called with a state object");
+    },
+
+    "createState(): adds patch function to state": () => {
+        const state = createState({ x: 1 });
+        expect(typeof (state as any).patch).toEqual("function");
+        expect((state)).toEqual({ x: 1, patch: (state as any).patch });
+    },
+
+    "createState(): patch is non-enumerable": () => {
+        const state = createState({ x: 1 });
+        expect(Object.keys(state)).toEqual(["x"]);
+    },
+
+    "createState(): app picks up queued patches": () => {
+        const state: any = createState({ count: 0 });
+        state.patch({ count: 1 });
+        state.patch({ count: 2 });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, state, () => [DIV]);
+
+        expect(state.count)
+            .toEqual(2);
+    },
+
+    "createState(): already-patchable state is kept as-is": () => {
+        const existingPatch = (action: any) => { };
+        const state: any = { value: 5, patch: existingPatch };
+        const result = createState(state);
+
+        expect(result.patch === existingPatch)
+            .toEqual(true);
+    },
+};

package/test/tests-defuse.ts

@@ -0,0 +1,74 @@
+import { expect } from "./helper";
+import { app, DIV, defuse } from "../index";
+
+export default {
+    "defuse(): on a container without _vode is a no-op": () => {
+        const container = document.createElement("div");
+
+        expect(() => defuse(container as any))
+            .toSucceed();
+    },
+
+    "defuse(): removes _vode from container": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV]);
+        expect(typeof (container as any)._vode).toEqual("object");
+        defuse(container as any);
+
+        expect((container as any)._vode)
+            .toEqual(undefined);
+    },
+
+    "defuse(): removes patch function from state": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        const state: any = {};
+        app(container, state, () => [DIV]);
+        expect(typeof state.patch).toEqual("function");
+        defuse(container as any);
+
+        expect(state.patch)
+            .toEqual(undefined);
+    },
+
+    "defuse(): disables renderSync and renderAsync": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV]);
+        defuse(container as any);
+
+        expect((container as any)._vode)
+            .toEqual(undefined);
+    },
+
+    "defuse(): clears event listeners from rendered elements": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV, { onclick: () => ({}) }] as any);
+        const node = (container as any)._vode.vode.node;
+        expect(typeof node.onclick).toEqual("function");
+        defuse(container as any);
+
+        expect(node.onclick)
+            .toEqual(null);
+    },
+
+    "defuse(): recurses into child containers": () => {
+        const root = document.createElement("div");
+        const outer = document.createElement("div");
+        const inner = document.createElement("div");
+        root.appendChild(outer);
+        outer.appendChild(inner);
+        const state: any = {};
+        app(inner, state, () => [DIV]);
+        defuse(outer as any);
+
+        expect(state.patch)
+            .toEqual(undefined);
+    }
+};

package/test/tests-hydrate.ts

@@ -0,0 +1,68 @@
+import { expect } from "./helper";
+import { hydrate, DIV, SPAN, P } from "../index";
+import { MockElement, MockText } from "./mocks";
+
+export default {
+    "hydrate(): text node returns its text content": () => {
+        const text = new MockText("hello world");
+
+        expect(hydrate(text as any))
+            .toMatch("hello world");
+    },
+
+    "hydrate(): empty element returns a vode": () => {
+        const el = new MockElement("div");
+        const result = hydrate(el as any);
+
+        expect(result)
+            .toMatch([DIV]);
+    },
+
+    "hydrate(): element with children returns full vode tree": () => {
+        const parent = new MockElement("div");
+        const child = new MockElement("span");
+        parent.appendChild(child);
+
+        expect(hydrate(parent as any))
+            .toMatch([DIV, [SPAN]]);
+    },
+
+    "hydrate(): element with text child": () => {
+        const parent = new MockElement("p");
+        const text = new MockText("hello");
+        parent.appendChild(text);
+
+        expect(hydrate(parent as any))
+            .toMatch([P, "hello"]);
+    },
+
+    "hydrate(): element with attributes reads them into props": () => {
+        const el = new MockElement("div");
+        el.setAttribute("class", "foo");
+        el.setAttribute("id", "bar");
+
+        expect(hydrate(el as any))
+            .toMatch([DIV, { class: "foo", id: "bar" }]);
+    },
+
+    "hydrate(): unknown node type returns undefined": () => {
+        const frag = { nodeType: 999 } as any;
+
+        expect(hydrate(frag))
+            .toEqual(undefined);
+    },
+
+    "hydrate(): empty text node returns undefined": () => {
+        const text = new MockText("   ");
+
+        expect(hydrate(text as any))
+            .toEqual(undefined);
+    },
+
+    "hydrate(): only element and text nodes are supported": () => {
+        const comment = { nodeType: Node.COMMENT_NODE } as any;
+
+        expect(hydrate(comment))
+            .toEqual(undefined);
+    },
+};

package/test/tests-memo.ts

@@ -0,0 +1,119 @@
+import { expect } from "./helper";
+import { memo, DIV, app, createState, SPAN } from "../index";
+
+export default {
+    "memo(): returns the given function": () => {
+        const fn = (s: any) => [DIV];
+        const result = memo([1, 2], fn);
+        expect(result === fn).toEqual(true);
+    },
+
+    "memo(): throws when compare is not an array": () => {
+        const err = expect(() => memo(null as any, (s: any) => [DIV]))
+            .toFail();
+        expect(err.message)
+            .toEqual("first argument to memo() must be an array of values to compare");
+    },
+
+    "memo(): throws when componentOrProps is not a function": () => {
+        const err = expect(() => memo([1], null as any))
+            .toFail();
+        expect(err.message)
+            .toEqual("second argument to memo() must be a function that returns a vode or props object");
+    },
+
+    "memo(): integration with app prevents re-render when deps match": () => {
+        const state = createState({ count: 12 });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let callCount = 0;
+        app<typeof state>(container, state, (s) => [DIV, memo(
+            [s.count],
+            (s) => {
+                callCount++;
+                return [DIV, [SPAN, `${s.count}`]];
+            }
+        )]);
+
+
+        expect(callCount).toEqual(1);
+
+        state.patch({ count: 12 }); //same value, should not re-render
+        expect(callCount).toEqual(1);
+        state.patch({ count: 13 }); //different value, should re-render
+        expect(callCount).toEqual(2);
+        expect(container).toMatch(
+            [DIV,
+                [DIV,
+                    [SPAN, "13"]
+                ]
+            ]
+        );
+    },
+
+    "memo(): works also with props factory": () => {
+        const state = createState({ count: 12, prefix: "Count is: " });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let callCount = 0;
+        app<typeof state>(container, state, (s) => [DIV,
+            [DIV,
+                memo(
+                    [s.count],
+                    (s) => {
+                        callCount++;
+                        return {
+                            class: {
+                                low: s.count < 10,
+                                high: s.count >= 10,
+                            }
+                        };
+                    }
+                ),
+                [SPAN, `${s.prefix}${s.count}`]
+            ],
+        ]);
+
+
+        expect(callCount).toEqual(1);
+        state.patch({ count: 12 });
+        expect(callCount).toEqual(1); // unchanged count should not cause re-render
+        state.patch({ count: 13 });
+        expect(callCount).toEqual(2);
+        state.patch({ prefix: "count: " });
+        expect(callCount).toEqual(3);
+        expect(container).toMatch(
+            [DIV,
+                [DIV, { class: { low: false, high: true } },
+                    [SPAN, "count: 13"]
+                ]
+            ]
+        );
+    },
+
+    "memo(): can be a nested component function": () => {
+        const state = createState({ count: 12 });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let callCount = 0;
+        app<typeof state>(container, state, (s) => [DIV,
+            () => memo(
+                [s.count],
+                (s) => {
+                    callCount++;
+                    return [DIV, [SPAN, `${s.count}`]];
+                }
+            )]);
+
+
+        expect(callCount).toEqual(1);
+        state.patch({ count: 12 }); //same value, should not re-render
+        expect(callCount).toEqual(1);
+    },
+};

package/test/tests-mergeClass.ts

@@ -0,0 +1,63 @@
+import { mergeClass } from "../index";
+import { expect } from "./helper";
+
+export default {
+    "mergeClass(): no args returns null": () => {
+        expect(mergeClass()).toEqual(null);
+    },
+
+    "mergeClass(): single string returns it": () => {
+        expect(mergeClass("foo")).toEqual("foo");
+    },
+
+    "mergeClass(): two strings are joined and deduplicated": () => {
+        expect(mergeClass("foo", "bar")).toEqual("foo bar");
+        expect(mergeClass("foo bar", "bar baz")).toEqual("foo bar baz");
+    },
+
+    "mergeClass(): string and array": () => {
+        expect(mergeClass("foo", ["bar", "baz"])).toEqual("bar baz foo");
+    },
+
+    "mergeClass(): array and string": () => {
+        expect(mergeClass(["foo", "bar"], "baz")).toEqual("foo bar baz");
+    },
+
+    "mergeClass(): two arrays": () => {
+        expect(mergeClass(["foo", "bar"], ["baz", "qux"])).toEqual("foo bar baz qux");
+    },
+
+    "mergeClass(): two string arrays with duplicates": () => {
+        expect(mergeClass(["foo", "bar"], ["bar", "baz"])).toEqual("foo bar baz");
+    },
+
+    "mergeClass(): string and object": () => {
+        expect(mergeClass("foo", { bar: true, baz: false })).toEqual({ foo: true, bar: true, baz: false });
+    },
+
+    "mergeClass(): object and string": () => {
+        expect(mergeClass({ foo: true, bar: false }, "baz")).toEqual({ foo: true, bar: false, baz: true });
+    },
+
+    "mergeClass(): two objects": () => {
+        expect(mergeClass({ foo: true, bar: true }, { bar: false, baz: true })).toEqual({ foo: true, bar: false, baz: true });
+    },
+
+    "mergeClass(): object and array": () => {
+        expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, 0: "bar", 1: "baz" });
+    },
+
+    "mergeClass(): array and object": () => {
+        expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ 0: "foo", 1: "bar", baz: true, qux: false });
+    },
+
+    "mergeClass(): falsy entries are skipped": () => {
+        expect(mergeClass("foo", null, "bar")).toEqual("foo bar");
+        expect(mergeClass(null, "foo", undefined, "bar")).toEqual("foo bar");
+    },
+
+    "mergeClass(): multiple args (3+)": () => {
+        expect(mergeClass("a", "b", "c")).toEqual("a b c");
+        expect(mergeClass("x", null, ["y", "z"], "w")).toEqual("y z x w");
+    }
+};

package/test/tests-mergeProps.ts

@@ -0,0 +1,43 @@
+import { mergeProps, Props } from "../index";
+import { expect } from "./helper";
+
+export default {
+    "mergeProps(): no args returns undefined": () => {
+        expect(mergeProps()).toEqual(undefined);
+    },
+
+    "mergeProps(): single arg returned as-is": () => {
+        const p = { class: "foo" };
+        expect(mergeProps(p) === p).toEqual(true);
+    },
+
+    "mergeProps(): two plain objects merged": () => {
+        expect(mergeProps({ a: 1 }, { b: 2 })).toEqual({ a: 1, b: 2 });
+    },
+
+    "mergeProps(): right overwrites left for simple keys": () => {
+        expect(mergeProps({ a: 1, b: "x" }, { b: 2 })).toEqual({ a: 1, b: 2 });
+    },
+
+    "mergeProps(): class merged via mergeClass": () => {
+        expect(mergeProps({ class: "foo" }, { class: "bar" })).toEqual({ class: "foo bar" });
+    },
+
+    "mergeProps(): style merged via mergeStyle (strings)": () => {
+        const result = mergeProps({ style: "color: red" }, { style: "font-size: 14px" }) as Props;
+        expect((<string>result.style!).includes("color: red")).toEqual(true);
+        expect((<string>result.style!).includes("font-size: 14px")).toEqual(true);
+    },
+
+    "mergeProps(): null and undefined entries skipped": () => {
+        expect(mergeProps({ a: 1 }, null, { b: 2 }, undefined)).toEqual({ a: 1, b: 2 });
+    },
+
+    "mergeProps(): multiple args (3+)": () => {
+        expect(mergeProps({ a: 1 }, { b: 2 }, { c: 3 })).toEqual({ a: 1, b: 2, c: 3 });
+    },
+
+    "mergeProps(): first arg null returns defined from later args": () => {
+        expect(mergeProps(null, { a: 1 })).toEqual({ a: 1 });
+    }
+};

package/test/tests-mergeStyle.ts

@@ -0,0 +1,39 @@
+import { mergeStyle } from "../index";
+import { expect } from "./helper";
+
+export default {
+    "mergeStyle(): no args returns empty string": () => {
+        expect(mergeStyle()).toEqual("");
+    },
+
+    "mergeStyle(): object style sets properties, returns cssText": () => {
+        const result = mergeStyle({ color: "red", fontSize: "14px" });
+        expect(typeof result).toEqual("string");
+    },
+
+    "mergeStyle(): single string starts with semicolon": () => {
+        expect(mergeStyle("color: red")).toEqual(";color: red");
+    },
+
+    "mergeStyle(): two strings are concatenated": () => {
+        expect(mergeStyle("color: red", "font-size: 14px")).toEqual(";color: red;font-size: 14px");
+    },
+
+    "mergeStyle(): object then string": () => {
+        const result = mergeStyle({ color: "red" }, "font-size: 14px") as string;
+        expect(result.indexOf("font-size: 14px") > 0).toEqual(true);
+    },
+
+    "mergeStyle(): null and undefined entries are skipped": () => {
+        expect(mergeStyle(null, "color: red", undefined)).toEqual(";color: red");
+    },
+
+    "mergeStyle(): multiple objects and strings alternate": () => {
+        const result = mergeStyle(
+            { color: "red" },
+            "font-size: 14px",
+            { background: "blue" }
+        ) as string;
+        expect(result.includes("font-size: 14px")).toEqual(true);
+    }
+};