@createiq/htmldiff 1.0.5-beta.3 → 1.0.5

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

@@ -1,327 +0,0 @@
-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('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: '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
-}