fix: fix TypeError in table diffs

Author: gkubisa

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.7.1
+
+-   Fix a TypeError in table diff, which occured when THEAD or TFOOT was added or removed, and a column was removed.
+
 # 0.7.0
 
 -   Add `diffText` option.

demo/main.css

@@ -13,6 +13,7 @@ table {
     border-collapse: collapse;
 }
 
+th,
 td {
     border: calc(1rem / 16) solid black;
     padding: 0.25rem;

src/diff.test.ts

@@ -884,6 +884,28 @@ test.each<[string, Node, Node, string, Options | undefined]>([
         '<table><tbody><tr><th>first column</th><th class="vdd-removed">second column</th><th>last column</th></tr><tr class="vdd-removed"><td>1111</td><td>2222</td><td>3333</td></tr><tr><td>4444</td><td class="vdd-removed">5555</td><td>6666</td></tr></tbody></table>',
         undefined,
     ],
+    [
+        'table - remove column and add THEAD',
+        htmlToFragment(
+            '<table><tbody><tr><th>first column</th><th>second column</th><th>last column</th></tr></tbody></table>',
+        ),
+        htmlToFragment(
+            '<table><thead><tr><th>1111</th><th>3333</th></tr></thead><tbody><tr><th>first column</th><th>last column</th></tr></tbody></table>',
+        ),
+        '<table><thead class="vdd-added"><tr><th>1111</th><td class="vdd-removed"></td><th>3333</th></tr></thead><tbody><tr><th>first column</th><th class="vdd-removed">second column</th><th>last column</th></tr></tbody></table>',
+        undefined,
+    ],
+    [
+        'table - remove column and THEAD',
+        htmlToFragment(
+            '<table><thead><tr><th>1111</th><th>2222</th><th>3333</th></tr></thead><tbody><tr><th>first column</th><th>second column</th><th>last column</th></tr></tbody></table>',
+        ),
+        htmlToFragment(
+            '<table><tbody><tr><th>first column</th><th>last column</th></tr></tbody></table>',
+        ),
+        '<table><thead class="vdd-removed"><tr><th>1111</th><th>2222</th><th>3333</th></tr></thead><tbody><tr><th>first column</th><th class="vdd-removed">second column</th><th>last column</th></tr></tbody></table>',
+        undefined,
+    ],
 ])(
     '%s',
     (

src/diff.ts

@@ -466,7 +466,7 @@ export function visualDomDiff(
         for (const row of new DomIterator(outputTable, trIteratorOptions)) {
             const cells = row.childNodes
 
-            if (addedNodes.has(row)) {
+            if (addedNodes.has(row) || addedNodes.has(row.parentNode!)) {
                 if (cells.length < columnCount) {
                     for (let i = 0; i < columnCount; ++i) {
                         if (columns[i] === -1) {
@@ -476,7 +476,10 @@ export function visualDomDiff(
                         }
                     }
                 }
-            } else if (removedNodes.has(row)) {
+            } else if (
+                removedNodes.has(row) ||
+                removedNodes.has(row.parentNode!)
+            ) {
                 if (cells.length < columnCount) {
                     for (let i = 0; i < columnCount; ++i) {
                         if (columns[i] === 1) {