@createiq/htmldiff 1.1.0 → 1.2.0-beta.0

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

@@ -0,0 +1,407 @@
+import { describe, expect, it } from 'vitest'
+
+import HtmlDiff from '../src/HtmlDiff'
+
+describe('HtmlDiff.executeThreeWay (tables, positional case)', () => {
+  describe('cell-level attribution propagates through table scaffolding', () => {
+    it('CP-only edit inside a cell', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>Rate</td><td>five</td></tr></table>',
+          '<table><tr><td>Interest Rate</td><td>five</td></tr></table>',
+          '<table><tr><td>Interest Rate</td><td>five</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td><ins class='diffins cp' data-author='cp'>Interest </ins>Rate</td><td>five</td></tr></table>"
+      )
+    })
+
+    it('Me-only edit inside a cell', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>Rate</td><td>five</td></tr></table>',
+          '<table><tr><td>Rate</td><td>five</td></tr></table>',
+          '<table><tr><td>Rate</td><td>five percent</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>Rate</td><td>five<ins class='diffins me' data-author='me'>&nbsp;percent</ins></td></tr></table>"
+      )
+    })
+
+    it('Me keeps a CP cell insertion AND adds their own to a different cell', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>Rate</td><td>five</td></tr></table>',
+          '<table><tr><td>Interest Rate</td><td>five</td></tr></table>',
+          '<table><tr><td>Interest Rate</td><td>five percent</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td><ins class='diffins cp' data-author='cp'>Interest </ins>Rate</td><td>five<ins class='diffins me' data-author='me'>&nbsp;percent</ins></td></tr></table>"
+      )
+    })
+
+    it('Me rejects a CP cell insertion (reject markup inside the cell)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>five</td></tr></table>',
+          '<table><tr><td>five and a half</td></tr></table>',
+          '<table><tr><td>five</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>five<del class='diffdel me rejects-cp' data-author='me' data-rejects='cp'>&nbsp;and a half</del></td></tr></table>"
+      )
+    })
+
+    it('CP-deletion of V1 cell content', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>five and a half</td></tr></table>',
+          '<table><tr><td>five</td></tr></table>',
+          '<table><tr><td>five</td></tr></table>'
+        )
+      ).toBe("<table><tr><td>five<del class='diffdel cp' data-author='cp'>&nbsp;and a half</del></td></tr></table>")
+    })
+
+    it('Me-deletion of V1 cell content (CP did nothing)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>five and a half</td></tr></table>',
+          '<table><tr><td>five and a half</td></tr></table>',
+          '<table><tr><td>five</td></tr></table>'
+        )
+      ).toBe("<table><tr><td>five<del class='diffdel me' data-author='me'>&nbsp;and a half</del></td></tr></table>")
+    })
+  })
+
+  describe('scaffolding scanner edge cases', () => {
+    it('preserves <thead>/<tbody> wrappers', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><thead><tr><th>Term</th></tr></thead><tbody><tr><td>Old</td></tr></tbody></table>',
+          '<table><thead><tr><th>Term</th></tr></thead><tbody><tr><td>New</td></tr></tbody></table>',
+          '<table><thead><tr><th>Term</th></tr></thead><tbody><tr><td>New</td></tr></tbody></table>'
+        )
+      ).toBe(
+        "<table><thead><tr><th>Term</th></tr></thead><tbody><tr><td><del class='diffdel cp' data-author='cp'>Old</del><ins class='diffins cp' data-author='cp'>New</ins></td></tr></tbody></table>"
+      )
+    })
+
+    it('handles <th> header cells correctly', () => {
+      // Branches on td vs th in the scanner; the contentEnd computation
+      // uses the right tagName length.
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><th>Label</th><th>Value</th></tr></table>',
+          '<table><tr><th>Description</th><th>Value</th></tr></table>',
+          '<table><tr><th>Description</th><th>Value</th></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><th><del class='diffdel cp' data-author='cp'>Label</del><ins class='diffins cp' data-author='cp'>Description</ins></th><th>Value</th></tr></table>"
+      )
+    })
+
+    it('handles an empty cell (contentStart == contentEnd)', () => {
+      // Empty cell on both sides — no diff, just scaffolding pass-through.
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td><td></td></tr></table>',
+          '<table><tr><td>a</td><td></td></tr></table>',
+          '<table><tr><td>a</td><td></td></tr></table>'
+        )
+      ).toBe('<table><tr><td>a</td><td></td></tr></table>')
+    })
+
+    it('handles cells with inline HTML (formatting tags)', () => {
+      // The formatting-tag special case kicks in inside the cell content.
+      const out = HtmlDiff.executeThreeWay(
+        '<table><tr><td>The fee is due.</td></tr></table>',
+        '<table><tr><td>The <strong>fee</strong> is due.</td></tr></table>',
+        '<table><tr><td>The <strong>fee</strong> is due.</td></tr></table>'
+      )
+      expect(out).toContain("data-author='cp'")
+      expect(out).toMatch(/<ins class='mod[^']*cp'/)
+      expect(out).toContain('<table>')
+      expect(out).toContain('</table>')
+    })
+
+    it('preserves attributes on the <table> element', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table class="rates"><tr><td>Old</td></tr></table>',
+          '<table class="rates"><tr><td>New</td></tr></table>',
+          '<table class="rates"><tr><td>New</td></tr></table>'
+        )
+      ).toBe(
+        "<table class=\"rates\"><tr><td><del class='diffdel cp' data-author='cp'>Old</del><ins class='diffins cp' data-author='cp'>New</ins></td></tr></table>"
+      )
+    })
+
+    it('multi-row table with edit in only one row', () => {
+      // Cursor handoff between rows must work — row 0 unchanged, row 1 edited by CP, row 2 unchanged.
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr><tr><td>c</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>B</td></tr><tr><td>c</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>B</td></tr><tr><td>c</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr><tr><td><del class='diffdel cp' data-author='cp'>b</del><ins class='diffins cp' data-author='cp'>B</ins></td></tr><tr><td>c</td></tr></table>"
+      )
+    })
+
+    it('preserves whitespace between row/cell tags', () => {
+      // Real Word-sourced HTML has \n and indentation between tags;
+      // confirm the cursor-based emission passes it through unchanged.
+      const text = '<table>\n  <tr>\n    <td>a</td>\n  </tr>\n</table>'
+      expect(HtmlDiff.executeThreeWay(text, text, text)).toBe(text)
+    })
+  })
+
+  describe('structural changes (rows added or removed)', () => {
+    it('CP-inserted row (V1 → V2 adds a row, Me kept it)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr><tr class='diffins cp' data-author='cp'><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>b</ins></td></tr></table>"
+      )
+    })
+
+    it('Me-inserted row (V2 → V3 adds a row, CP did nothing)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>new</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr><tr class='diffins me' data-author='me'><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>new</ins></td></tr></table>"
+      )
+    })
+
+    it('CP-deleted V1 row (V1 → V2 removes a row, Me kept the removal)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr><tr class='diffdel cp' data-author='cp'><td class='diffdel cp' data-author='cp'><del class='diffdel cp' data-author='cp'>b</del></td></tr></table>"
+      )
+    })
+
+    it('Me-deleted V1 row (V2 == V1, Me removed it in V3)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr><tr class='diffdel me' data-author='me'><td class='diffdel me' data-author='me'><del class='diffdel me' data-author='me'>b</del></td></tr></table>"
+      )
+    })
+
+    it('Me rejects CP-inserted row (CP added it, Me removed it)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr><tr class='diffdel me rejects-cp' data-author='me' data-rejects='cp'><td class='diffdel me rejects-cp' data-author='me' data-rejects='cp'><del class='diffdel me rejects-cp' data-author='me' data-rejects='cp'>b</del></td></tr></table>"
+      )
+    })
+
+    it('both CP and Me add their own rows in different places', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>row1</td></tr></table>',
+          '<table><tr><td>row1</td></tr><tr><td>cp-added</td></tr></table>',
+          '<table><tr><td>row1</td></tr><tr><td>cp-added</td></tr><tr><td>me-added</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>row1</td></tr><tr class='diffins cp' data-author='cp'><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>cp-added</ins></td></tr><tr class='diffins me' data-author='me'><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>me-added</ins></td></tr></table>"
+      )
+    })
+  })
+
+  describe('multi-table mismatch (D3)', () => {
+    it('CP added a whole new table, Me kept it', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table><table><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table><table><tr><td>b</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr></table><ins class='diffins cp' data-author='cp'><table><tr><td>b</td></tr></table></ins>"
+      )
+    })
+
+    it('CP removed a table that was in V1, Me kept it removed', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table><table><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr></table><del class='diffdel cp' data-author='cp'><table><tr><td>b</td></tr></table></del>"
+      )
+    })
+
+    it('Me added a brand-new table in V3 (CP did not touch it)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table><table><tr><td>new</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr></table><ins class='diffins me' data-author='me'><table><tr><td>new</td></tr></table></ins>"
+      )
+    })
+
+    it('Me removed a table that V1 had and CP kept (Me-deletion of preserved table)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table><table><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table><table><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr></table><del class='diffdel me' data-author='me'><table><tr><td>b</td></tr></table></del>"
+      )
+    })
+
+    it('Me rejected a CP-added table (CP added, Me removed)', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>a</td></tr></table>',
+          '<table><tr><td>a</td></tr></table><table><tr><td>b</td></tr></table>',
+          '<table><tr><td>a</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>a</td></tr></table><del class='diffdel me rejects-cp' data-author='me' data-rejects='cp'><table><tr><td>b</td></tr></table></del>"
+      )
+    })
+
+    it('falls through to content-LCS when tables are reordered (counts match but positions diverge)', () => {
+      // V1: [Schedule of Fees, Penalty Notices]. V2 swaps them. V3 keeps the swap.
+      // Counts match but the positional pairing would compare unrelated
+      // tables — the similarity gate routes to content-LCS, which pairs
+      // by content regardless of position.
+      const fees = '<table><tr><td>Schedule of Fees</td><td>five percent annually</td></tr></table>'
+      const penalties = '<table><tr><td>Penalty Notices</td><td>seven days written notice</td></tr></table>'
+      const v1 = fees + penalties
+      const v2 = penalties + fees
+      const v3 = penalties + fees
+      const out = HtmlDiff.executeThreeWay(v1, v2, v3)
+      // Me did nothing — should produce zero Me attribution.
+      expect(out).not.toContain("data-author='me'")
+      // Both tables preserved verbatim (content-paired across positions).
+      // Positional pairing would have produced wild ins/del replacing
+      // "Schedule of Fees" with "Penalty Notices" and vice versa.
+      expect(out).toContain('Schedule of Fees')
+      expect(out).toContain('Penalty Notices')
+      // Output should NOT contain replace-style ins/del wrapping the
+      // distinctive table names (they should appear unchanged).
+      expect(out).not.toMatch(/<del[^>]*>Schedule/)
+      expect(out).not.toMatch(/<ins[^>]*>Penalty/)
+    })
+
+    it('both CP and Me each add their own new table', () => {
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td>orig</td></tr></table>',
+          '<table><tr><td>orig</td></tr></table><table><tr><td>cp-added</td></tr></table>',
+          '<table><tr><td>orig</td></tr></table><table><tr><td>cp-added</td></tr></table><table><tr><td>me-added</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td>orig</td></tr></table><ins class='diffins cp' data-author='cp'><table><tr><td>cp-added</td></tr></table></ins><ins class='diffins me' data-author='me'><table><tr><td>me-added</td></tr></table></ins>"
+      )
+    })
+  })
+
+  describe('cell-level edge cases', () => {
+    it('rowspan attribute preserved and content within attributed correctly', () => {
+      // V1 has a rowspan="2" cell with "Foo"; CP edits to "Bar"; Me kept.
+      // The rowspan attribute survives; the content is attributed.
+      expect(
+        HtmlDiff.executeThreeWay(
+          '<table><tr><td rowspan="2">Foo</td></tr></table>',
+          '<table><tr><td rowspan="2">Bar</td></tr></table>',
+          '<table><tr><td rowspan="2">Bar</td></tr></table>'
+        )
+      ).toBe(
+        "<table><tr><td rowspan=\"2\"><del class='diffdel cp' data-author='cp'>Foo</del><ins class='diffins cp' data-author='cp'>Bar</ins></td></tr></table>"
+      )
+    })
+
+    it('exceedsSizeLimit bail-out: oversized table falls through to word-level path', () => {
+      // Build a table with > 1500 rows. preprocessTablesThreeWay returns
+      // null on size cap, so executeThreeWay treats the table as raw HTML
+      // — output is V2 (since V1==V2==V3 in this construction) verbatim.
+      const rows = Array.from({ length: 1501 }, (_, i) => `<tr><td>row ${i}</td></tr>`).join('')
+      const html = `<table>${rows}</table>`
+      // Identical inputs — output is verbatim regardless of size-cap path.
+      expect(HtmlDiff.executeThreeWay(html, html, html)).toBe(html)
+    })
+  })
+
+  describe('nested tables', () => {
+    it('handles a table nested inside a cell — both attributed correctly', () => {
+      // Outer table with a single cell containing an inner table. CP edits
+      // the inner table's content; Me doesn't touch it. The recursion
+      // through cellDiff should reach the inner table and attribute it.
+      const v1 = '<table><tr><td><table><tr><td>inner</td></tr></table></td></tr></table>'
+      const v2 = '<table><tr><td><table><tr><td>INNER</td></tr></table></td></tr></table>'
+      const v3 = '<table><tr><td><table><tr><td>INNER</td></tr></table></td></tr></table>'
+      const out = HtmlDiff.executeThreeWay(v1, v2, v3)
+      // Inner cell content attributed to CP via the recursive cellDiff.
+      expect(out).toMatch(/<del[^>]*data-author='cp'[^>]*>inner<\/del>/)
+      expect(out).toMatch(/<ins[^>]*data-author='cp'[^>]*>INNER<\/ins>/)
+      // Outer table scaffolding intact.
+      expect(out.startsWith('<table><tr><td><table>')).toBe(true)
+      expect(out.endsWith('</table></td></tr></table>')).toBe(true)
+    })
+
+    it('safely handles deeply-nested tables without infinite recursion', () => {
+      // Build a 10-deep nested table. The MaxThreeWayDepth cap kicks in
+      // at level 8, falling back to word-level treatment of deeper tables.
+      // The test just verifies no crash and reasonable output.
+      let v = 'leaf'
+      for (let i = 0; i < 10; i++) v = `<table><tr><td>${v}</td></tr></table>`
+      // Identical inputs — should produce input verbatim regardless of depth.
+      expect(HtmlDiff.executeThreeWay(v, v, v)).toBe(v)
+    })
+  })
+
+  describe('integration with surrounding prose', () => {
+    it('attributes both the cell content AND the surrounding prose', () => {
+      const out = HtmlDiff.executeThreeWay(
+        '<p>Rates as follows:</p><table><tr><td>five</td></tr></table>',
+        '<p>Interest rates as follows:</p><table><tr><td>five and a half</td></tr></table>',
+        '<p>Interest rates as follows:</p><table><tr><td>five</td></tr></table>'
+      )
+      // CP edited the prose (added "Interest "), Me rejected CP's table edit.
+      expect(out).toContain("<ins class='diffins cp' data-author='cp'>Interest")
+      expect(out).toContain("data-rejects='cp'")
+      // Table scaffolding intact.
+      expect(out).toContain('<table>')
+      expect(out).toContain('</table>')
+    })
+
+    it('passes inputs with no tables through to the word-level path unchanged', () => {
+      // No tables → preprocessTablesThreeWay returns null → executeThreeWay
+      // skips straight to word-level. Sanity check the no-op.
+      expect(HtmlDiff.executeThreeWay('<p>a</p>', '<p>a</p>', '<p>a</p>')).toBe('<p>a</p>')
+    })
+  })
+})

package/test/TableDiff.bench.ts

@@ -110,6 +110,45 @@ describe('TableDiff — column added', () => {
   )
 })
 
+describe('TableDiff — column-position DP worst case', () => {
+  // The pre-DP combinatorial path was O(C(N, K)) per row. At N=40 and
+  // K=6 (the caps), that's 3.8M combos × ~34 string ops, multiplied by
+  // every preserved row. This case exercises that path: 50 preserved
+  // rows × 40-cell wide new (34-cell old + 6 inserted columns).
+  const oldHtml = buildTable(50, 34, defaultCell)
+  const newHtml = buildTable(50, 40, (r, c) => {
+    if (c < 3) return `NEW_PREFIX_r${r}_c${c}`
+    if (c >= 37) return `NEW_SUFFIX_r${r}_c${c}`
+    return defaultCell(r, c - 3)
+  })
+
+  bench(
+    '50×40 — 6 columns inserted (was C(40,6) ≈ 3.8M combos/row pre-DP)',
+    () => {
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toBeTruthy()
+    },
+    benchOptions
+  )
+})
+
+describe('TableDiff — column-position DP common case', () => {
+  // Companion to the worst-case bench above: the common case is a wide
+  // row with a single column added. This should stay sub-ms and not
+  // hide behind the worst-case headline if anything regresses.
+  const oldHtml = buildTable(50, 40, defaultCell)
+  const newHtml = buildTable(50, 41, (r, c) =>
+    c < 20 ? defaultCell(r, c) : c === 20 ? `Inserted col r${r}` : defaultCell(r, c - 1)
+  )
+
+  bench(
+    '50×40 — 1 column inserted (common case)',
+    () => {
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toBeTruthy()
+    },
+    benchOptions
+  )
+})
+
 describe('TableDiff — horizontal merge (colspan)', () => {
   // Old: <tr><td>a</td><td>b</td><td>c</td></tr>
   // New: <tr><td colspan=2>a b</td><td>c</td></tr>

package/test/Utils.spec.ts

@@ -117,4 +117,52 @@ describe('Utils', () => {
       expect(Utils.isWord('b')).toBe(true)
     })
   })
+
+  describe('wrapText()', () => {
+    it('produces the historical shape when no metadata is passed', () => {
+      expect(Utils.wrapText('hello', 'ins', 'diffins')).toBe("<ins class='diffins'>hello</ins>")
+    })
+
+    it('appends extraClasses after the base class', () => {
+      expect(Utils.wrapText('hello', 'ins', 'diffins', { extraClasses: 'cp' })).toBe(
+        "<ins class='diffins cp'>hello</ins>"
+      )
+    })
+
+    it('emits data-* attributes for each entry in dataAttrs', () => {
+      expect(Utils.wrapText('hello', 'ins', 'diffins', { dataAttrs: { author: 'cp' } })).toBe(
+        "<ins class='diffins' data-author='cp'>hello</ins>"
+      )
+    })
+
+    it('combines extraClasses and dataAttrs in one call', () => {
+      expect(
+        Utils.wrapText('hello', 'del', 'diffdel', {
+          extraClasses: 'me rejects-cp',
+          dataAttrs: { author: 'me', rejects: 'cp' },
+        })
+      ).toBe("<del class='diffdel me rejects-cp' data-author='me' data-rejects='cp'>hello</del>")
+    })
+
+    it('skips the metadata path entirely when neither extraClasses nor dataAttrs is set', () => {
+      // Empty metadata should still pass through the chosen branch deterministically.
+      expect(Utils.wrapText('hello', 'ins', 'diffins', {})).toBe("<ins class='diffins'>hello</ins>")
+    })
+  })
+
+  describe('composeTagAttributes()', () => {
+    it('returns just the class attribute when metadata is empty', () => {
+      expect(Utils.composeTagAttributes('diffins', {})).toBe(" class='diffins'")
+    })
+
+    it('appends extraClasses inside the class attribute', () => {
+      expect(Utils.composeTagAttributes('mod strong', { extraClasses: 'cp' })).toBe(" class='mod strong cp'")
+    })
+
+    it('includes all data-* attrs after the class attr', () => {
+      expect(Utils.composeTagAttributes('mod', { dataAttrs: { author: 'me', flag: 'on' } })).toBe(
+        " class='mod' data-author='me' data-flag='on'"
+      )
+    })
+  })
 })