@createiq/htmldiff 1.0.5-beta.2 → 1.0.5-beta.4

package/test/HtmlDiff.tables.matrix.spec.ts

@@ -0,0 +1,367 @@
+import { describe, expect, it } from 'vitest'
+
+import HtmlDiff from '../src/HtmlDiff'
+
+/**
+ * Exhaustive matrix of common table operations and their pairwise
+ * combinations. Each case runs HtmlDiff.execute and asserts structural
+ * invariants on the output:
+ *
+ *   • Every `<tr>` opens and closes
+ *   • No row has more cells than max(old-row, new-row) cell count
+ *     (accounting for colspan)
+ *   • All `<ins>`/`<del>` tags balance
+ *   • Class markers are coherent (a `<tr class='diffins'>` row's cells
+ *     all have ins-marked content or are empty; a deleted row's cells
+ *     all have del-marked content or are empty)
+ *   • The cell content of every `<td>` from new appears somewhere in
+ *     the output (we don't silently drop cells)
+ *
+ * The matrix is built combinatorially — single operations × single
+ * operations — so a regression in any pairwise combination surfaces
+ * here even if no test was added for that exact pair.
+ */
+describe('HtmlDiff — table operations matrix', () => {
+  describe('single operations on a 3×3 base', () => {
+    for (const op of allSingleOperations()) {
+      it(`${op.name} produces structurally valid output`, () => {
+        const base = baseTable3x3()
+        const newHtml = op.apply(base)
+        const oldHtml = renderTable(base)
+        const result = HtmlDiff.execute(oldHtml, newHtml)
+        assertStructurallyValid(result, oldHtml, newHtml, op.name)
+      })
+    }
+  })
+
+  describe('pairwise combinations on a 3×3 base', () => {
+    const ops = allSingleOperations()
+    for (const opA of ops) {
+      for (const opB of ops) {
+        if (opA === opB) continue
+        // Some combinations don't compose cleanly (e.g. "delete-row-end"
+        // + "delete-row-end" applied twice). Skip pairs that mutate
+        // overlapping ranges.
+        if (!canCompose(opA, opB)) continue
+        it(`${opA.name} + ${opB.name} produces structurally valid output`, () => {
+          const base = baseTable3x3()
+          const intermediate = parseTable(opA.apply(base))
+          const newHtml = opB.apply(intermediate)
+          const oldHtml = renderTable(base)
+          const result = HtmlDiff.execute(oldHtml, newHtml)
+          assertStructurallyValid(result, oldHtml, newHtml, `${opA.name} + ${opB.name}`)
+        })
+      }
+    }
+  })
+
+  describe('user-reported regression scenarios', () => {
+    it('multiple deleted rows including the last appear in old-order, AFTER preserved header (regression for "deleted rows out of order")', () => {
+      // The user's exact scenario: column added + multiple rows deleted
+      // including the last row, with content edits that prevent fuzzy
+      // pairing of some rows. Before the fix, all deletes ended up at
+      // the START of the output (above the header) because they were
+      // emitted at cursor=row-0-start, regardless of where they came
+      // from in old.
+      const oldHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Form</th><th>Date</th></tr>' +
+        '<tr><td>Party A</td><td>IRS Forms W-8BEN-E</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party B</td><td>IRS Form W-9, as applicable (or any successor thereto).</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party A and Party B</td><td>Any document required.</td><td>Promptly upon reasonable demand.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Extra column</th><th>Form</th><th>Date</th></tr>' +
+        "<tr><td>Party A</td><td>Yes</td><td>IRS Forms W-8BEN-E. Here's some extra content</td><td>(i) Upon execution.</td></tr>" +
+        '<tr><td>Party B</td><td>A</td><td>IRS Form W</td><td>Yeah OK</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      assertStructurallyValid(result, oldHtml, newHtml, 'multiple deleted rows out of order')
+      // The header (preserved with column added) MUST come first.
+      const headerIdx = result.indexOf('<tr><th>Party</th>')
+      const firstDelIdx = result.indexOf("<tr class='diffdel'>")
+      expect(headerIdx).toBeGreaterThanOrEqual(0)
+      expect(firstDelIdx).toBeGreaterThan(headerIdx)
+    })
+
+    it('column added + empty row inserted in middle (regression for issue with blank row)', () => {
+      const oldHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Form</th><th>Date</th></tr>' +
+        '<tr><td>Party A</td><td>IRS Forms W-8BEN-E and W-8ECI (or any successors thereto).</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party B</td><td>IRS Form W-9, as applicable (or any successor thereto).</td><td>(i) Upon execution.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Extra column</th><th>Form</th><th>Date</th></tr>' +
+        "<tr><td>Party A</td><td>Yes</td><td>IRS Forms W-8BEN-E and W-8ECI (or any successors thereto). Here's some extra content</td><td>(i) Upon execution.</td></tr>" +
+        '<tr><td></td><td></td><td></td><td></td></tr>' +
+        '<tr><td>Party B</td><td>A</td><td>IRS Form W-9, as applicable (or any successor thereto).</td><td>(i) Upon execution.</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      assertStructurallyValid(result, oldHtml, newHtml, 'column-add + empty row insert')
+      // Specific assertions on this case so we can see exactly what went
+      // wrong if the structural-invariant check passes but the output
+      // still drifts.
+      const rowCount = countMatches(result, /<tr[\s>]/g)
+      expect(rowCount).toBe(4) // header + Party A + empty + Party B
+      expect(result).toContain(
+        "<tr class='diffins'><td class='diffins'></td><td class='diffins'></td><td class='diffins'></td><td class='diffins'></td></tr>"
+      )
+    })
+  })
+})
+
+// ──────────────────────── operations ────────────────────────
+
+interface Op {
+  name: string
+  apply: (table: TableData) => string
+}
+
+function allSingleOperations(): Op[] {
+  return [
+    { name: 'no-op', apply: t => renderTable(t) },
+    { name: 'edit-cell', apply: t => renderTable(mutate(t, m => m.editCell(1, 1, 'EDITED'))) },
+    { name: 'add-row-start', apply: t => renderTable(mutate(t, m => m.addRowAt(0, ['NEW1', 'NEW2', 'NEW3']))) },
+    { name: 'add-row-middle', apply: t => renderTable(mutate(t, m => m.addRowAt(2, ['NEW1', 'NEW2', 'NEW3']))) },
+    {
+      name: 'add-row-end',
+      apply: t => renderTable(mutate(t, m => m.addRowAt(t.rows.length, ['NEW1', 'NEW2', 'NEW3']))),
+    },
+    { name: 'add-empty-row-middle', apply: t => renderTable(mutate(t, m => m.addRowAt(2, ['', '', '']))) },
+    {
+      name: 'add-multiple-rows',
+      apply: t =>
+        renderTable(
+          mutate(t, m => {
+            m.addRowAt(t.rows.length, ['X1', 'X2', 'X3'])
+            m.addRowAt(t.rows.length + 1, ['Y1', 'Y2', 'Y3'])
+          })
+        ),
+    },
+    { name: 'delete-row-start', apply: t => renderTable(mutate(t, m => m.deleteRow(1))) }, // skip header
+    { name: 'delete-row-middle', apply: t => renderTable(mutate(t, m => m.deleteRow(2))) },
+    { name: 'delete-row-end', apply: t => renderTable(mutate(t, m => m.deleteRow(t.rows.length - 1))) },
+    {
+      name: 'delete-multiple-rows',
+      apply: t =>
+        renderTable(
+          mutate(t, m => {
+            m.deleteRow(t.rows.length - 1)
+            m.deleteRow(1)
+          })
+        ),
+    },
+    {
+      name: 'delete-multiple-rows-from-end',
+      apply: t =>
+        renderTable(
+          mutate(t, m => {
+            m.deleteRow(t.rows.length - 1)
+            m.deleteRow(t.rows.length - 1)
+          })
+        ),
+    },
+    {
+      name: 'add-column-start',
+      apply: t => renderTable(mutate(t, m => m.addColumnAt(0, ['NewHeader', 'newA', 'newB', 'newC']))),
+    },
+    {
+      name: 'add-column-middle',
+      apply: t => renderTable(mutate(t, m => m.addColumnAt(1, ['NewHeader', 'newA', 'newB', 'newC']))),
+    },
+    {
+      name: 'add-column-end',
+      apply: t => renderTable(mutate(t, m => m.addColumnAt(t.rows[0].length, ['NewHeader', 'newA', 'newB', 'newC']))),
+    },
+    {
+      name: 'add-multiple-columns',
+      apply: t =>
+        renderTable(
+          mutate(t, m => {
+            m.addColumnAt(t.rows[0].length, ['H1', 'a1', 'b1', 'c1'])
+            m.addColumnAt(t.rows[0].length + 1, ['H2', 'a2', 'b2', 'c2'])
+          })
+        ),
+    },
+    { name: 'delete-column-start', apply: t => renderTable(mutate(t, m => m.deleteColumn(0))) },
+    { name: 'delete-column-middle', apply: t => renderTable(mutate(t, m => m.deleteColumn(1))) },
+    { name: 'delete-column-end', apply: t => renderTable(mutate(t, m => m.deleteColumn(t.rows[0].length - 1))) },
+    { name: 'shift-content-right', apply: t => renderTable(mutate(t, m => m.shiftContentRight(1))) },
+  ]
+}
+
+/**
+ * Some operation pairs don't compose cleanly because the second
+ * operation's row/column index assumes the original table dimensions.
+ * We skip pairs where the second op's index would be out of bounds
+ * after the first op's mutation.
+ */
+function canCompose(_a: Op, _b: Op): boolean {
+  // For now, allow all combinations and let the operation skip
+  // gracefully when bounds are invalid. The mutate helpers clamp.
+  return true
+}
+
+// ──────────────────────── table model ────────────────────────
+
+interface TableData {
+  rows: string[][]
+}
+
+function baseTable3x3(): TableData {
+  return {
+    rows: [
+      ['Header1', 'Header2', 'Header3'],
+      ['A1', 'A2', 'A3'],
+      ['B1', 'B2', 'B3'],
+      ['C1', 'C2', 'C3'],
+    ],
+  }
+}
+
+function renderTable(t: TableData): string {
+  const out: string[] = ['<table>']
+  for (let r = 0; r < t.rows.length; r++) {
+    out.push('<tr>')
+    const tag = r === 0 ? 'th' : 'td'
+    for (const cell of t.rows[r]) {
+      out.push(`<${tag}>${cell}</${tag}>`)
+    }
+    out.push('</tr>')
+  }
+  out.push('</table>')
+  return out.join('')
+}
+
+function parseTable(html: string): TableData {
+  // Tiny parser sufficient for our generated tables. NOT a general
+  // HTML parser; only used inside this matrix.
+  const rows: string[][] = []
+  const rowMatches = html.matchAll(/<tr[^>]*>(.*?)<\/tr>/gs)
+  for (const rowMatch of rowMatches) {
+    const cells: string[] = []
+    const cellMatches = rowMatch[1].matchAll(/<t[dh][^>]*>(.*?)<\/t[dh]>/gs)
+    for (const cellMatch of cellMatches) cells.push(cellMatch[1])
+    rows.push(cells)
+  }
+  return { rows }
+}
+
+interface Mutator {
+  editCell(row: number, col: number, content: string): void
+  addRowAt(at: number, content: string[]): void
+  deleteRow(at: number): void
+  addColumnAt(at: number, columnContent: string[]): void
+  deleteColumn(at: number): void
+  shiftContentRight(rowIdx: number): void
+}
+
+function mutate(t: TableData, fn: (m: Mutator) => void): TableData {
+  const cloned: TableData = { rows: t.rows.map(row => [...row]) }
+  const m: Mutator = {
+    editCell(row, col, content) {
+      if (cloned.rows[row]?.[col] !== undefined) cloned.rows[row][col] = content
+    },
+    addRowAt(at, content) {
+      const idx = Math.max(0, Math.min(at, cloned.rows.length))
+      cloned.rows.splice(idx, 0, content)
+    },
+    deleteRow(at) {
+      if (at >= 0 && at < cloned.rows.length) cloned.rows.splice(at, 1)
+    },
+    addColumnAt(at, columnContent) {
+      for (let r = 0; r < cloned.rows.length; r++) {
+        const idx = Math.max(0, Math.min(at, cloned.rows[r].length))
+        cloned.rows[r].splice(idx, 0, columnContent[r] ?? '')
+      }
+    },
+    deleteColumn(at) {
+      for (const row of cloned.rows) {
+        if (at >= 0 && at < row.length) row.splice(at, 1)
+      }
+    },
+    shiftContentRight(rowIdx) {
+      const row = cloned.rows[rowIdx]
+      if (!row) return
+      // Shift each cell's content one position to the right; first
+      // cell becomes empty, last cell's content drops off.
+      for (let c = row.length - 1; c > 0; c--) row[c] = row[c - 1]
+      row[0] = ''
+    },
+  }
+  fn(m)
+  return cloned
+}
+
+// ──────────────────────── invariant checks ────────────────────────
+
+/**
+ * Asserts the diff output is structurally valid:
+ *   • All `<tr>`/`<td>`/`<th>` open/close tags balance
+ *   • All `<ins>`/`<del>` tags balance
+ *   • Every row in the output has cell count ≤ max(old-row-cell-count,
+ *     new-row-cell-count) — no phantom cells
+ *   • Output isn't empty when inputs aren't equal
+ */
+function assertStructurallyValid(output: string, oldHtml: string, newHtml: string, label: string) {
+  const ctx = `[${label}]`
+
+  // Tag balance
+  const openTr = countMatches(output, /<tr[\s>]/g)
+  const closeTr = countMatches(output, /<\/tr>/g)
+  expect(openTr, `${ctx} <tr> tag balance`).toBe(closeTr)
+
+  const openTd = countMatches(output, /<td[\s>]/g)
+  const closeTd = countMatches(output, /<\/td>/g)
+  expect(openTd, `${ctx} <td> tag balance`).toBe(closeTd)
+
+  const openTh = countMatches(output, /<th[\s>]/g)
+  const closeTh = countMatches(output, /<\/th>/g)
+  expect(openTh, `${ctx} <th> tag balance`).toBe(closeTh)
+
+  // ins/del balance — each opening tag has a matching closing tag.
+  const openIns = countMatches(output, /<ins[\s>]/g)
+  const closeIns = countMatches(output, /<\/ins>/g)
+  expect(openIns, `${ctx} <ins> tag balance`).toBe(closeIns)
+
+  const openDel = countMatches(output, /<del[\s>]/g)
+  const closeDel = countMatches(output, /<\/del>/g)
+  expect(openDel, `${ctx} <del> tag balance`).toBe(closeDel)
+
+  // Per-row cell count ≤ max(old, new) row width.
+  const oldMaxCells = maxRowCellCount(oldHtml)
+  const newMaxCells = maxRowCellCount(newHtml)
+  const limit = Math.max(oldMaxCells, newMaxCells)
+
+  // Walk output rows
+  const rowMatches = output.matchAll(/<tr[^>]*>(.*?)<\/tr>/gs)
+  for (const rowMatch of rowMatches) {
+    const cellsInRow = countMatches(rowMatch[1], /<t[dh][\s>]/g)
+    expect(cellsInRow, `${ctx} row has too many cells (${cellsInRow} > ${limit})`).toBeLessThanOrEqual(limit)
+  }
+
+  // Output is non-empty when inputs aren't equal.
+  if (oldHtml !== newHtml) {
+    expect(output.length, `${ctx} output is empty`).toBeGreaterThan(0)
+  }
+}
+
+function maxRowCellCount(html: string): number {
+  let max = 0
+  const rowMatches = html.matchAll(/<tr[^>]*>(.*?)<\/tr>/gs)
+  for (const rowMatch of rowMatches) {
+    const count = countMatches(rowMatch[1], /<t[dh][\s>]/g)
+    if (count > max) max = count
+  }
+  return max
+}
+
+function countMatches(s: string, re: RegExp): number {
+  const matches = s.match(re)
+  return matches ? matches.length : 0
+}

package/test/HtmlDiff.tables.spec.ts

@@ -802,6 +802,86 @@ describe('HtmlDiff — tables', () => {
       )
     })
 
+    it('preserves data-* attributes on a <tr> in an inserted row alongside the injected class', () => {
+      // The frontend uses `data-behaviour` (and similar `data-*` attrs)
+      // on `<tr>` to drive table semantics. The diff must keep these
+      // attributes verbatim AND add `class='diffins'` for the structural
+      // change. (Whether downstream DOMPurify allows `data-*` is a
+      // separate concern — htmldiff's job is to not lose them.)
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" class=\'diffins\'>' +
+          "<td class='diffins'><ins class='diffins'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves data-* attributes on a <tr> in a deleted row alongside the injected class', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" class=\'diffdel\'>' +
+          "<td class='diffdel'><del class='diffdel'>B</del></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves multiple data-* attributes on a <tr> in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data" id="row2" data-x="y"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" id="row2" data-x="y" class=\'diffins\'>' +
+          "<td class='diffins'><ins class='diffins'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves data-* attribute on a <tr> when the row passes through column-add path (preserved row)', () => {
+      // The row exists in both old and new but cell counts differ
+      // (column added) — goes through diffPreservedRow → multi-column
+      // detection path. Attribute should still be preserved verbatim
+      // via rowHeaderSlice.
+      const oldHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>X</td></tr><tr data-behaviour="data"><td>B</td><td>EXTRA</td><td>C</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('<tr data-behaviour="data">')
+    })
+
+    it('preserves data-* attribute on a <tr> when the row passes through fuzzy-matching with content edit', () => {
+      // The row gets fuzzy-matched after exact LCS misses the content
+      // edit. Goes through diffStructurallyAlignedTable → fuzzy pair →
+      // diffPreservedRow. Attribute should still flow through.
+      const oldHtml =
+        '<table>' +
+        '<tr><td>A</td></tr>' +
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td>A</td></tr>' +
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over the lazy dog.</td></tr>' +
+        '<tr><td>NEW</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('<tr data-behaviour="data">')
+    })
+
     it('preserves <table> attributes verbatim from new (no diff marker on attribute changes)', () => {
       const oldHtml = '<table border="1"><tr><td>A</td></tr></table>'
       const newHtml = '<table border="2" style="width:100%"><tr><td>A</td></tr></table>'