@createiq/htmldiff 1.0.4 → 1.0.5-beta.1

package/test/HtmlDiff.spec.ts

@@ -51,7 +51,7 @@ describe('HtmlDiff', () => {
     [
       '<table><tr><td>col1</td><td>col2</td></tr><tr><td>Data 1</td><td>Data 2</td></tr></table>',
       '<table><tr><td>col1</td><td>col2</td></tr></table>',
-      "<table><tr><td>col1</td><td>col2</td></tr><tr><td><del class='diffdel'>Data 1</del></td><td><del class='diffdel'>Data 2</del></td></tr></table>",
+      "<table><tr><td>col1</td><td>col2</td></tr><tr class='diffdel'><td class='diffdel'><del class='diffdel'>Data 1</del></td><td class='diffdel'><del class='diffdel'>Data 2</del></td></tr></table>",
     ],
     [
       'text',
@@ -339,4 +339,122 @@ describe('HtmlDiff', () => {
       )
     ).toEqual(`<div data-html="bar">Some<ins class='diffins'>&nbsp;different</ins> text here</div>`)
   })
+
+  it('should keep added paragraphs as separate <p> blocks instead of concatenating their content', () => {
+    // When new content adds extra paragraphs alongside an existing one, structural
+    // normalization currently strips the wrappers and emits the added content as a
+    // single concatenated <ins> ("BoopShoop"). Each added paragraph should remain
+    // its own <p> so they render on separate lines.
+    expect(HtmlDiff.execute('<p>shared</p>', '<p>shared</p><p>Boop</p><p>Shoop</p>')).toEqual(
+      `<p>shared</p><p><ins class='diffins'>Boop</ins></p><p><ins class='diffins'>Shoop</ins></p>`
+    )
+  })
+
+  it('should keep removed paragraphs as separate <p> blocks instead of concatenating their content', () => {
+    expect(HtmlDiff.execute('<p>shared</p><p>Boop</p><p>Shoop</p>', '<p>shared</p>')).toEqual(
+      `<p>shared</p><p><del class='diffdel'>Boop</del></p><p><del class='diffdel'>Shoop</del></p>`
+    )
+  })
+
+  it('should keep an added paragraph distinct from the preceding paragraph', () => {
+    // The compare-bubble regression: a single added <p>Boop</p> after a modified
+    // paragraph used to collapse onto the same line as "discovered." because the
+    // <p> wrapper was stripped from the inserted content.
+    expect(
+      HtmlDiff.execute(
+        '<p>Shared content has extra removed has been discovered.</p>',
+        '<p>Shared content has been discovered.</p><p>Boop</p>'
+      )
+    ).toEqual(
+      `<p>Shared content<del class='diffdel'>&nbsp;has extra removed</del> has been discovered.</p><p><ins class='diffins'>Boop</ins></p>`
+    )
+  })
+
+  it('should preserve new wrappers when old is plain text and new is wrapped', () => {
+    // Asymmetric structure case: when one side has no structural wrappers at all,
+    // normalization would produce dangling tags. We disable it for this case so the
+    // word-level diff can correctly emit new's structural wrappers around the diff.
+    expect(HtmlDiff.execute('X with extra', '<p>X</p><p>Boop</p>')).toEqual(
+      `<p>X<del class='diffmod'>&nbsp;with extra</del></p><p><ins class='diffmod'>Boop</ins></p>`
+    )
+  })
+
+  it('should preserve new wrappers when old is plain text spanning multiple paragraphs in new', () => {
+    expect(
+      HtmlDiff.execute(
+        'Shared content has extra removed has been discovered.',
+        '<div><p>Shared content has been discovered.</p><p>Boop</p></div>'
+      )
+    ).toEqual(
+      `<div><p>Shared content<del class='diffdel'>&nbsp;has extra removed</del> has been discovered.</p><p><ins class='diffins'>Boop</ins></p></div>`
+    )
+  })
+
+  it('should keep a paragraph added in the middle as its own block', () => {
+    expect(HtmlDiff.execute('<p>A</p><p>C</p>', '<p>A</p><p>B</p><p>C</p>')).toEqual(
+      `<p>A</p><p><ins class='diffins'>B</ins></p><p>C</p>`
+    )
+  })
+
+  it('should keep a paragraph added at the start as its own block', () => {
+    expect(HtmlDiff.execute('<p>B</p>', '<p>A</p><p>B</p>')).toEqual(`<p><ins class='diffins'>A</ins></p><p>B</p>`)
+  })
+
+  it('should keep multiple paragraphs added at the start as separate blocks', () => {
+    expect(HtmlDiff.execute('<p>C</p>', '<p>A</p><p>B</p><p>C</p>')).toEqual(
+      `<p><ins class='diffins'>A</ins></p><p><ins class='diffins'>B</ins></p><p>C</p>`
+    )
+  })
+
+  it('should keep a paragraph removed from the start as its own block', () => {
+    expect(HtmlDiff.execute('<p>A</p><p>B</p>', '<p>B</p>')).toEqual(`<p><del class='diffdel'>A</del></p><p>B</p>`)
+  })
+
+  it('should keep a paragraph removed from the middle as its own block', () => {
+    expect(HtmlDiff.execute('<p>A</p><p>B</p><p>C</p>', '<p>A</p><p>C</p>')).toEqual(
+      `<p>A</p><p><del class='diffdel'>B</del></p><p>C</p>`
+    )
+  })
+
+  it('should keep paragraph boundaries on a replace operation that spans multiple paragraphs', () => {
+    // The diff algorithm treats this as a single Replace block (delete A,B then insert X,Y,Z)
+    // rather than aligning per-paragraph; we accept that as the price of a single-pass algorithm
+    // but verify each paragraph still renders as its own <p> rather than concatenating.
+    expect(HtmlDiff.execute('<p>A</p><p>B</p>', '<p>X</p><p>Y</p><p>Z</p>')).toEqual(
+      `<p><del class='diffmod'>A</del></p><p><del class='diffmod'>B</del></p><p><ins class='diffmod'>X</ins></p><p><ins class='diffmod'>Y</ins></p><p><ins class='diffmod'>Z</ins></p>`
+    )
+  })
+
+  it('should keep added paragraphs containing inline formatting as their own blocks', () => {
+    expect(HtmlDiff.execute('<p>shared</p>', '<p>shared</p><p><strong>bold added</strong></p>')).toEqual(
+      `<p>shared</p><p><strong><ins class='diffins'>bold added</ins></strong></p>`
+    )
+  })
+
+  it('should preserve a paragraph added inside a list item', () => {
+    expect(HtmlDiff.execute('<ol><li><p>shared</p></li></ol>', '<ol><li><p>shared</p><p>added</p></li></ol>')).toEqual(
+      `<ol><li><p>shared</p><p><ins class='diffins'>added</ins></p></li></ol>`
+    )
+  })
+
+  it('should preserve old wrapper structure when old is wrapped and new is plain text', () => {
+    // Inverse of the plain-text-old / wrapped-new asymmetric case. With one side unwrapped,
+    // the asymmetric guardrail should disable structural normalization. The word-level diff
+    // emits old's paragraph structure with deletions in their original paragraphs and the
+    // new content appended inline.
+    expect(HtmlDiff.execute('<p>X</p><p>Boop</p>', 'X with extra')).toEqual(
+      `<p>X</p><p><del class='diffmod'>Boop</del></p><ins class='diffmod'>&nbsp;with extra</ins>`
+    )
+  })
+
+  it.each([
+    ['section', '<section>X</section>', '<section>X</section><section>Boop</section>'],
+    ['article', '<article>X</article>', '<article>X</article><article>Boop</article>'],
+    ['aside', '<aside>X</aside>', '<aside>X</aside><aside>Boop</aside>'],
+    ['nav', '<nav>X</nav>', '<nav>X</nav><nav>Boop</nav>'],
+  ])('should treat <%s> as a structural wrapper for paragraph-add diffs', (tag, oldText, newText) => {
+    expect(HtmlDiff.execute(oldText, newText)).toEqual(
+      `<${tag}>X</${tag}><${tag}><ins class='diffins'>Boop</ins></${tag}>`
+    )
+  })
 })