Add render tests

test/__setup.js

@@ -10,3 +10,36 @@ global.window = window;
 global.navigator = {
     userAgent: "node.js"
 };
+
+global.CustomEvent = function CustomEvent(name, {detail}) {
+    this.name = name;
+    this.detail = detail;
+}
+
+global.spyFunction = function(orig = x => void x) {
+    let _args = [];
+
+    function fake(...args) {
+        _args = args;
+        return orig(...args);
+    }
+
+    fake.args = () => _args;
+    return fake;
+}
+
+global.mockElement = function() {
+    let _innerHTML = "";
+
+    return {
+        _dirty: new Map(),
+        set innerHTML(value) {
+            this._dirty.set("innerHTML", true);
+            _innerHTML = value;
+        },
+        get innerHTML() {
+            return _innerHTML;
+        },
+        dispatchEvent: spyFunction()
+    };
+}

test/connect_test.js

@@ -12,18 +12,6 @@ function counter(state = 0, action) {
     }
 }
 
-function spy(orig = x => void x) {
-    let _args = [];
-
-    function fake(...args) {
-        _args = args;
-        return orig(...args);
-    }
-
-    fake.args = () => _args;
-    return fake;
-}
-
 suite("connect", function() {
     let store;
     let root;
@@ -36,7 +24,7 @@ suite("connect", function() {
     test("passes the current state as the first argument", function() {
         const { attach, connect, dispatch } = store;
 
-        const TestApp = spy();
+        const TestApp = spyFunction();
         const ConnectedTestApp = connect(TestApp);
         attach(ConnectedTestApp, root);
         dispatch("INCREMENT");
@@ -47,7 +35,7 @@ suite("connect", function() {
     test("passes other args after the state", function() {
         const { attach, connect, dispatch } = store;
 
-        const TestComponent = spy();
+        const TestComponent = spyFunction();
         const ConnectedTestComponent = connect(TestComponent);
 
         function TestApp() {

test/render_test.js

@@ -0,0 +1,93 @@
+require = require("@std/esm")(module, {esm: "js"});
+
+const assert = require("assert");
+const { createStore } = require("../index")
+
+function counter(state = 0, action) {
+    switch (action) {
+        case "INCREMENT":
+            return state + 1;
+        default:
+            return state;
+    }
+}
+
+suite("render", function() {
+    let store;
+    let root;
+
+    setup(function() {
+        store = createStore(counter);
+        root = mockElement();
+    });
+
+    test("assigns innerHTML of the root", function() {
+        const { attach, dispatch } = store;
+
+        // Always returns the same output.
+        const TestApp = () => "Foo";
+        attach(TestApp, root);
+
+        dispatch("INCREMENT");
+        assert.equal(root.innerHTML, "Foo");
+    });
+
+    test("re-assigns when the output changes", function() {
+        const { attach, connect, dispatch } = store;
+
+        const TestApp = state => `Foo ${state}`;
+        const ConnectedTestApp = connect(TestApp);
+
+        attach(ConnectedTestApp, root);
+        assert.equal(root.innerHTML, "Foo 0");
+
+        dispatch("INCREMENT");
+        assert.equal(root.innerHTML, "Foo 1");
+
+        dispatch("INCREMENT");
+        assert.equal(root.innerHTML, "Foo 2");
+    });
+
+    test("dispatches an event when the output changes", function() {
+        const { attach, connect, dispatch } = store;
+
+        const TestApp = state => `Foo ${state}`;
+        const ConnectedTestApp = connect(TestApp);
+        attach(ConnectedTestApp, root);
+        assert.deepEqual(root.dispatchEvent.args(), [{
+            name: "render",
+            detail: 0
+        }]);
+
+        dispatch("INCREMENT");
+        assert.deepEqual(root.dispatchEvent.args(), [{
+            name: "render",
+            detail: 1
+        }]);
+
+        dispatch("INCREMENT");
+        assert.deepEqual(root.dispatchEvent.args(), [{
+            name: "render",
+            detail: 2
+        }]);
+    });
+
+    test("avoids re-assignment if the output doesn't change", function() {
+        const { attach, connect, dispatch } = store;
+
+        // Always returns the same output.
+        const TestApp = () => "Foo";
+        root._dirty.set("innerHTML", false);
+
+        attach(TestApp, root);
+        assert.equal(root._dirty.get("innerHTML"), true);
+
+        root._dirty.set("innerHTML", false);
+        dispatch("INCREMENT");
+        assert.equal(root._dirty.get("innerHTML"), false);
+
+        root._dirty.set("innerHTML", false);
+        dispatch("INCREMENT");
+        assert.equal(root._dirty.get("innerHTML"), false);
+    });
+});