v0.0.11: Added unit-tests, solved the key={...} problem, updated the build/watch configuration of CSX to be able to build minified and non-minified bundle outputs, as well as a CJS version of lib/ (for consuming in Node-environment, like Jest). The previous tests were renamed to examples, and should still need to be updated.

jest/render/key-property.test.js

@@ -0,0 +1,61 @@
+import { render } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+
+describe("Key-property tests", () => {
+    test("Keyed list", async () => {
+        let renderedIndexes = [];
+        let initIndexes = [0, 1, 2, 3];
+        
+        let makeSpec = (targetList, indexes)=>(
+            <ul>
+                {
+                    indexes.map(index => (
+                        <li id={`li_${index}`} key={index} ref={(el) => targetList[ index ] = el}>
+                            {index}
+                        </li>
+                    ))
+                }
+            </ul>
+        );
+        
+        let initialVSpec = makeSpec(renderedIndexes, initIndexes);
+        
+        let rendered = render(initialVSpec);
+        let container = testContainer(rendered);
+        
+        expect(container.innerHTML).toBe(
+            [
+                `<ul>`,
+                ...initIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
+                `</ul>`
+            ].join('')
+        );
+        
+        expect(renderedIndexes.length).toBe(4);
+        for(let rendered of renderedIndexes){
+            expect(rendered).not.toBeUndefined();
+        }
+        
+        let reorderedIndexes = [3,2,1,0];
+        let rerenderedIndexes = renderedIndexes.slice();
+        let updatedVSpec =  makeSpec(rerenderedIndexes, reorderedIndexes);
+        render(updatedVSpec, {host: rendered, old: initialVSpec});// Is this host right? it seems inconsistent and the source of our bug (as it is probably also misused in custom-elements)
+    
+        // Updated
+        expect(container.innerHTML).toBe(
+            [
+                `<ul>`,
+                ...reorderedIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
+                `</ul>`
+            ].join('')
+        );
+    
+        // Validate that items were merely re-arranged and not re-created
+        expect(rerenderedIndexes.length).toBe(4);
+        for(let i=0; i<4; ++i){
+            let initRendered = renderedIndexes[i];
+            let reorderedRendered = rerenderedIndexes[i];
+            expect(initRendered === reorderedRendered).toBe(true); // These should've remained the same
+        }
+    });
+});