✅ better dom errors

client/rerender.js

@@ -122,7 +122,11 @@ export default function rerender(selector, current, next) {
     } else {
       for (let i = limit - 1; i > -1; i--) {
         if (typeof selector.childNodes[i] === 'undefined') {
-          throw new Error(`Virtual DOM does not match the DOM. Expected tag ${current.type} but instead found undefined. This error usually happens because of an invalid HTML hierarchy like nested forms or tables without tr.`);
+          console.error(
+            `${current.type.toUpperCase()} expected tag ${current.children[i].type.toUpperCase()} to be child at index ${i} but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.`,
+            selector
+          )
+          throw new Error('Virtual DOM does not match the DOM.')
           return;
         }
         rerender(selector.childNodes[i], current.children[i], next.children[i]);

tests/src/ErrorOnChildNode.njs

@@ -1,35 +1,71 @@
 import Nullstack from 'nullstack';
 
+class ObjectId {
+
+  constructor(id) {
+    this.id = id
+  }
+
+  toJSON() {
+    return this.id;
+  }
+
+}
+
 class ErrorOnChildNode extends Nullstack {
+
   testValue = 'initial Value';
+
+  records = [
+    { _id: new ObjectId('a') },
+  ]
+
   testClick() {
     this.testValue = 'Changed Value';
   }
-  render() {
+
+  renderSerializationError() {
+    const records = this.records.filter((r) => r._id === 'a')
+    if (!records.length) return false;
+    return (
+      <div>
+        {records.map((record) => <div>{record._id}</div>)}
+      </div>
+    )
+  }
+
+  renderDOMError() {
+    return (
+      <table>
+        <thead>
+          <th>No.</th>
+          <th>Fisrt Name</th>
+          <th>Last Name</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Jeanette</td>
+            <td>Penddreth</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Giavani</td>
+            <td>Frediani</td>
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+
+  render({ params }) {
     return (
       <>
         <h1> Table Error </h1>
-        <table>
-          <thead>
-            <th>No.</th>
-            <th>Fisrt Name</th>
-            <th>Last Name</th>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1</td>
-              <td>Jeanette</td>
-              <td>Penddreth</td>
-            </tr>
-            <tr>
-              <td>2</td>
-              <td>Giavani</td>
-              <td>Frediani</td>
-            </tr>
-          </tbody>
-        </table>
+        {params.serialization && <SerializationError />}
+        {params.dom && <DOMError />}
         <div id="text">
-        {this.testValue}
+          {this.testValue}
         </div>
         <button id="buttonTest" onclick={this.testClick}> Change Value </button>
       </>

tests/src/ErrorOnChildNode.test.js

@@ -1,14 +1,32 @@
-beforeAll(async () => {
-  await page.goto('http://localhost:6969/error-on-child-node');
-});
+describe('ErrorOnChildNode dom', () => {
 
-describe('Error when ChildNode is undefined', () => {
+  let error;
 
-  test('Should be able to click on button', async () => {
-    page.on("console", async (msg) => {
-      expect(msg.text()).toMatch('Virtual DOM does not match the DOM. Expected tag thead but instead found undefined. This error usually happens because of an invalid HTML hierarchy like nested forms or tables without tr.');
-      await page.click('[id=buttonTest]');
-      await page.waitForSelector('[id=text]');
+  beforeAll(async () => {
+    jest.spyOn(console, 'error').mockImplementation((message) => error = message);
+    await page.goto('http://localhost:6969/error-on-child-node?dom=true');
+  });
+
+  test('should log that the dom is invalid', async () => {
+    page.on("console", async () => {
+      expect(error).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
+    })
+  });
+
+})
+
+describe('ErrorOnChildNode serialization', () => {
+
+  let error;
+
+  beforeAll(async () => {
+    jest.spyOn(console, 'error').mockImplementation((message) => error = message);
+    await page.goto('http://localhost:6969/error-on-child-node?serialization=true');
+  });
+
+  test('Should log that the serialization missmatches the server dom', async () => {
+    page.on("console", async () => {
+      expect(error).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
     })
   });