@createiq/htmldiff 1.0.5-beta.4 → 1.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createiq/htmldiff",
-  "version": "1.0.5-beta.4",
+  "version": "1.1.0-beta.0",
   "description": "TypeScript port of htmldiff.net",
   "type": "module",
   "author": "Mathew Mannion <mathew.mannion@linklaters.com>",

package/test/HtmlDiff.tables.spec.ts

@@ -1147,6 +1147,66 @@ describe('HtmlDiff — tables', () => {
   // containing comments, CDATA, mixed-case tags, foreign attribute values
   // that look like class= patterns, etc.
   describe('hostile / adversarial inputs', () => {
+    it('handles a processing instruction (<?xml?>) in cell content', () => {
+      // parseOpeningTagAt has explicit handling for `<?...?>`. Pin
+      // that path so a future refactor can't break it.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><?xml version="1.0"?>text</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          '<?xml version="1.0"?>' +
+          "<ins class='diffins'>text</ins>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles an unquoted class attribute value when injecting diffins', () => {
+      // findClassAttribute's unquoted-value branch wasn't exercised —
+      // most generators emit quoted values. HTML5 permits unquoted
+      // simple values, so support them.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td class=existing>B</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // The existing unquoted class is preserved; the injected class
+      // appends. Exact form depends on injectClass's writeback (it
+      // rewrites the attribute value at its parsed range).
+      expect(result).toContain('class=existing')
+      expect(result).toContain('diffins')
+    })
+
+    it('passes content through verbatim when a cell contains a lone `<` (malformed)', () => {
+      // wrapInlineTextRuns sees `<` and calls parseOpeningTagAt, which
+      // returns null for a lone `<` with no closing `>`. The function
+      // then bails by pushing the rest verbatim. The output isn't
+      // pretty but it's predictable and doesn't crash.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>fee < cost</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // The inserted row should still be marked.
+      expect(result).toContain("<tr class='diffins'>")
+      // The literal `<` (with no closing >) should appear in the output.
+      expect(result).toContain('fee')
+      expect(result).toContain('cost')
+    })
+
+    it('handles a malformed table tag missing its closing > (no crash, falls back)', () => {
+      // findTopLevelTables → parseOpeningTagAt returns null → scanner
+      // increments i and continues. preprocessTables ends up with no
+      // valid tables and falls through to the word-level diff.
+      const oldHtml = '<p>before</p><table<tr><td>A</td></tr></table><p>after</p>'
+      const newHtml = '<p>before</p><table<tr><td>B</td></tr></table><p>after</p>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // Should not crash. Should produce *some* del/ins markers.
+      expect(result.length).toBeGreaterThan(0)
+    })
+
     it('passes an HTML comment with embedded > through cell content unmolested', () => {
       // Word-exported HTML routinely has comments with `>` inside (e.g.
       // conditional comments). Before the parser fix, the scanner cut
@@ -1513,6 +1573,152 @@ describe('HtmlDiff — tables', () => {
     })
   })
 
+  // Coverage gaps surfaced by the v8 report: the cell-LCS fallback path
+  // (diffStructurallyAlignedRow + cellKey + pairSimilarUnmatchedCells) is
+  // only entered when the per-row column delta exceeds MAX_COLUMN_DELTA
+  // (6) or the row's logical width exceeds MAX_COLUMN_SEARCH_WIDTH (40).
+  // None of the existing tests trigger that. These tests exercise the
+  // fallback and pin its behaviour.
+  describe('cell-LCS fallback for very-wide column changes', () => {
+    it('handles 8 columns inserted alongside existing cells (delta > MAX_COLUMN_DELTA)', () => {
+      // Old: 3 cells. New: 11 cells (8 columns added). Exact-LCS finds
+      // A, B, C as matches; the 8 unmatched new cells are inserted.
+      const oldHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td>' +
+        '<td>X1</td><td>X2</td><td>X3</td><td>X4</td>' +
+        '<td>X5</td><td>X6</td><td>X7</td><td>X8</td>' +
+        '<td>B</td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          '<td>A</td>' +
+          "<td class='diffins'><ins class='diffins'>X1</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X2</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X3</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X4</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X5</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X6</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X7</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X8</ins></td>" +
+          '<td>B</td>' +
+          '<td>C</td>' +
+          '</tr></table>'
+      )
+    })
+
+    it('handles 8 columns inserted alongside a content edit (cell fuzzy match in fallback)', () => {
+      // The fallback path's pairSimilarUnmatchedCells should pair the
+      // edited cell (OldText → NewText) by content similarity so it
+      // emits as one content-edit cell, not as delete + insert.
+      const oldHtml = '<table><tr><td>A</td><td>OldText</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td>' +
+        '<td>X1</td><td>X2</td><td>X3</td><td>X4</td>' +
+        '<td>X5</td><td>X6</td><td>X7</td>' +
+        '<td>NewText</td>' +
+        '<td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          '<td>A</td>' +
+          "<td class='diffins'><ins class='diffins'>X1</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X2</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X3</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X4</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X5</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X6</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X7</ins></td>" +
+          "<td><del class='diffmod'>OldText</del><ins class='diffmod'>NewText</ins></td>" +
+          '<td>C</td>' +
+          '</tr></table>'
+      )
+    })
+
+    it('handles many columns deleted (delta < -MAX_COLUMN_DELTA)', () => {
+      const oldHtml =
+        '<table><tr><td>A</td>' +
+        '<td>X1</td><td>X2</td><td>X3</td><td>X4</td>' +
+        '<td>X5</td><td>X6</td><td>X7</td><td>X8</td>' +
+        '<td>B</td><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          '<td>A</td>' +
+          "<td class='diffdel'><del class='diffdel'>X1</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X2</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X3</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X4</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X5</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X6</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X7</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X8</del></td>" +
+          '<td>B</td>' +
+          '<td>C</td>' +
+          '</tr></table>'
+      )
+    })
+
+    it('preserves whitespace between inline elements in a fully-inserted cell (no spurious <ins>)', () => {
+      // wrapInlineTextRuns walks content; when it encounters
+      // whitespace-only text between two inline elements (e.g. the
+      // space between `<strong>` and `<em>`), it passes the whitespace
+      // through unwrapped — the body of the `else` branch on the
+      // text-run path.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><strong>a</strong> <em>b</em></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<strong><ins class='diffins'>a</ins></strong> <em><ins class='diffins'>b</ins></em>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles a colspan-changed row where some cells have matching colspans', () => {
+      // diffColspanChangedRow walks cells; when oSpan === nSpan for a
+      // pair, it emits a content diff for that cell pair. This branch
+      // wasn't exercised — needs a row with BOTH a colspan change AND
+      // matching-colspan cells in the same row.
+      const oldHtml =
+        '<table><tr>' + '<td>FirstA</td>' + '<td>MidA</td><td>MidB</td>' + '<td>LastA</td>' + '</tr></table>'
+      const newHtml =
+        '<table><tr>' + '<td>FirstB</td>' + '<td colspan="2">Merged AB</td>' + '<td>LastB</td>' + '</tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // First and last cells should diff content cell-by-cell (matching
+      // colspans = 1 on both sides); middle two old cells merge into
+      // one colspan=2 cell tagged 'mod colspan'.
+      expect(result).toContain("<del class='diffmod'>FirstA</del>")
+      expect(result).toContain("<ins class='diffmod'>FirstB</ins>")
+      expect(result).toContain('colspan="2" class=\'mod colspan\'')
+      expect(result).toContain("<del class='diffmod'>LastA</del>")
+      expect(result).toContain("<ins class='diffmod'>LastB</ins>")
+    })
+
+    it('handles row wider than MAX_COLUMN_SEARCH_WIDTH (40 cells) — fallback to cell-LCS', () => {
+      // 50-cell row in old, 51-cell row in new (1 column added at
+      // start). MAX_COLUMN_SEARCH_WIDTH guard prevents the
+      // combinatorial search; fallback to cell-LCS which finds 50
+      // exact matches and the 1 new cell as an insertion.
+      const oldCells = Array.from({ length: 50 }, (_, i) => `<td>c${i}</td>`).join('')
+      const newCells = `<td>NEW</td>${oldCells}`
+      const oldHtml = `<table><tr>${oldCells}</tr></table>`
+      const newHtml = `<table><tr>${newCells}</tr></table>`
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // We should see exactly one inserted cell and 50 preserved cells.
+      expect(result).toContain("<td class='diffins'><ins class='diffins'>NEW</ins></td>")
+      // Sanity: total td count is 51 (no phantoms).
+      const tdCount = (result.match(/<td[\s>]/g) || []).length
+      expect(tdCount).toBe(51)
+    })
+  })
+
   describe('attribute edge cases', () => {
     it('does not introduce a leading space when the existing class attribute is empty', () => {
       const oldHtml = '<table><tr><td>A</td></tr></table>'