@createiq/htmldiff 1.0.0 → 1.0.2

package/test/HtmlDiff.spec.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs/promises'
 import { describe, expect, it } from 'vitest'
 
 import HtmlDiff from '../src/HtmlDiff'
@@ -12,7 +13,7 @@ describe('HtmlDiff', () => {
     ],
     ['a c', 'a b c', "a <ins class='diffins'>b </ins>c"],
     ['a b c', 'a c', "a <del class='diffdel'>b </del>c"],
-    ['a b c', 'a <strong>b</strong> c', "a <strong><ins class='mod'>b</ins></strong> c"],
+    ['a b c', 'a <strong>b</strong> c', "a <strong><ins class='mod strong'>b</ins></strong> c"],
     ['a b c', 'a d c', "a <del class='diffmod'>b</del><ins class='diffmod'>d</ins> c"],
     ["<a title='xx'>test</a>", "<a title='yy'>test</a>", "<a title='yy'>test</a>"],
     ["<img src='logo.jpg'/>", '', "<del class='diffdel'><img src='logo.jpg'/></del>"],
@@ -30,7 +31,7 @@ describe('HtmlDiff', () => {
     [
       'This is a longer piece of text to ensure the new blocksize algorithm works',
       'This is a longer piece of text to <strong>ensure</strong> the new blocksize algorithm works decently',
-      "This is a longer piece of text to <strong><ins class='mod'>ensure</ins></strong> the new blocksize algorithm works<ins class='diffins'>&nbsp;decently</ins>",
+      "This is a longer piece of text to <strong><ins class='mod strong'>ensure</ins></strong> the new blocksize algorithm works<ins class='diffins'>&nbsp;decently</ins>",
     ],
     [
       'By virtue of an agreement between xxx and the <b>yyy schools</b>, ...',
@@ -40,12 +41,12 @@ describe('HtmlDiff', () => {
     [
       'Some plain text',
       'Some <strong><i>plain</i></strong> text',
-      "Some <strong><i><ins class='mod'>plain</ins></i></strong> text",
+      "Some <strong><i><ins class='mod strong i'>plain</ins></i></strong> text",
     ],
     [
       'Some <strong><i>formatted</i></strong> text',
       'Some formatted text',
-      "Some <ins class='mod'>formatted</ins> text",
+      "Some <ins class='mod strong i'>formatted</ins> text",
     ],
     [
       '<table><tr><td>col1</td><td>col2</td></tr><tr><td>Data 1</td><td>Data 2</td></tr></table>',
@@ -55,7 +56,7 @@ describe('HtmlDiff', () => {
     [
       'text',
       '<span style="text-decoration: line-through;">text</span>',
-      '<span style="text-decoration: line-through;"><ins class=\'mod\'>text</ins></span>',
+      '<span style="text-decoration: line-through;"><ins class=\'mod span\'>text</ins></span>',
     ],
 
     // TODO: Don't speak Chinese, this needs to be validated
@@ -145,35 +146,35 @@ describe('HtmlDiff', () => {
     [
       '<div class="dumb">Thiis a text without any sup-tags and other special things</div>',
       '<div class="dumb">Thiis a text <sup>1</sup>without any sup-tags and other special things</div>',
-      "<div class=\"dumb\">Thiis a text <sup><ins class='mod'><ins class='diffins'>1</ins></ins></sup>without any sup-tags and other special things</div>",
+      "<div class=\"dumb\">Thiis a text <sup><ins class='mod sup'><ins class='diffins'>1</ins></ins></sup>without any sup-tags and other special things</div>",
     ],
 
     // Inserting a new word at the end of the reformatted text
     [
       '<span>text remains</span>',
       '<span><strong>text remains Test</strong></span>',
-      "<span><strong><ins class='mod'>text remains<ins class='diffins'>&nbsp;Test</ins></ins></strong></span>",
+      "<span><strong><ins class='mod strong'>text remains<ins class='diffins'>&nbsp;Test</ins></ins></strong></span>",
     ],
 
     // Inserting a new word at the end of a reformatted text and another word at the end outside the reformatted text
     [
       '<span>text remains</span>',
       '<span><strong>text remains Test</strong> Test</span>',
-      "<span><strong><ins class='mod'>text remains<ins class='diffins'>&nbsp;Test</ins></ins></strong><ins class='diffins'>&nbsp;Test</ins></span>",
+      "<span><strong><ins class='mod strong'>text remains<ins class='diffins'>&nbsp;Test</ins></ins></strong><ins class='diffins'>&nbsp;Test</ins></span>",
     ],
 
     // Twice reformatted text with an offset at the end
     [
       '<span>text remains</span>',
       '<span><strong><big>text </big>remains</strong></span>',
-      "<span><strong><big><ins class='mod'>text </big>remains</ins></strong></span>",
+      "<span><strong><big><ins class='mod strong big'>text </big>remains</ins></strong></span>",
     ],
 
     // Inserting a new word at the beginning of a reformatted text.
     [
       '<span>text remains</span>',
       '<span><strong>Test text remains</strong></span>',
-      "<span><strong><ins class='mod'><ins class='diffins'>Test </ins>text remains</ins></strong></span>",
+      "<span><strong><ins class='mod strong'><ins class='diffins'>Test </ins>text remains</ins></strong></span>",
     ],
   ] as const)('should handle missing closing tag in diff (%s, %s) -> %s', ([oldText, newText, expected]) => {
     expect(HtmlDiff.execute(oldText, newText)).toEqual(expected)
@@ -183,12 +184,12 @@ describe('HtmlDiff', () => {
     [
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where <strong><em>5 years</em></strong> have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <strong><em><ins class='mod'>5 years</ins></em></strong> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <strong><em><ins class='mod strong em'>5 years</ins></em></strong> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where <em><strong>5 years</strong></em> have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <em><strong><ins class='mod'>5 years</ins></strong></em> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <em><strong><ins class='mod em strong'>5 years</ins></strong></em> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
@@ -198,12 +199,12 @@ describe('HtmlDiff', () => {
     [
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where [<strong><em>5 years</em></strong>] have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <ins class='diffins'>[</ins><strong><em><ins class='mod'>5 years</ins></em></strong><ins class='diffins'>]</ins> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <ins class='diffins'>[</ins><strong><em><ins class='mod strong em'>5 years</ins></em></strong><ins class='diffins'>]</ins> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where [<em><strong>5 years</strong></em>] have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <ins class='diffins'>[</ins><em><strong><ins class='mod'>5 years</ins></strong></em><ins class='diffins'>]</ins> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <ins class='diffins'>[</ins><em><strong><ins class='mod em strong'>5 years</ins></strong></em><ins class='diffins'>]</ins> have elapsed since the execution of this language.</p>`,
     ],
   ] as const)('should work when the comparison adds styling', ([oldText, newText, expected]) => {
     expect(HtmlDiff.execute(oldText, newText)).toEqual(expected)
@@ -213,12 +214,12 @@ describe('HtmlDiff', () => {
     [
       '<p>The additional term only applies where <strong><em>5 years</em></strong> have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <ins class='mod'>5 years</ins> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <ins class='mod strong em'>5 years</ins> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where <em><strong>5 years</strong></em> have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <ins class='mod'>5 years</ins> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <ins class='mod em strong'>5 years</ins> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where [5 years] have elapsed since the execution of this language.</p>',
@@ -228,24 +229,36 @@ describe('HtmlDiff', () => {
     [
       '<p>The additional term only applies where [<strong><em>5 years</em></strong>] have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <del class='diffdel'>[</del><ins class='mod'>5 years</ins><del class='diffdel'>]</del> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <del class='diffdel'>[</del><ins class='mod strong em'>5 years</ins><del class='diffdel'>]</del> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where [<em><strong>5 years</strong></em>] have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where 5 years have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <del class='diffdel'>[</del><ins class='mod'>5 years</ins><del class='diffdel'>]</del> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <del class='diffdel'>[</del><ins class='mod em strong'>5 years</ins><del class='diffdel'>]</del> have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where [<strong><em>5 years</em></strong>] have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where [<strong>5 years</strong>] have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where [<strong><ins class='mod'>5 years</ins></strong>] have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where [<strong><ins class='mod em'>5 years</ins></strong>] have elapsed since the execution of this language.</p>`,
     ],
     [
       '<p>The additional term only applies where <strong><em>5 years</em></strong> have elapsed since the execution of this language.</p>',
       '<p>The additional term only applies where [5 years] have elapsed since the execution of this language.</p>',
-      `<p>The additional term only applies where <ins class='mod'><ins class='diffmod'>[</ins>5 years</ins><ins class='diffmod'>]</ins> have elapsed since the execution of this language.</p>`,
+      `<p>The additional term only applies where <ins class='mod strong em'><ins class='diffmod'>[</ins>5 years</ins><ins class='diffmod'>]</ins> have elapsed since the execution of this language.</p>`,
     ],
   ] as const)('should work when the comparison removes styling', ([oldText, newText, expected]) => {
     expect(HtmlDiff.execute(oldText, newText)).toEqual(expected)
   })
+
+  it(
+    'should calculate a diff for a real-world example within 5s',
+    { timeout: process.env.CI ? 15_000 : 5_000 }, // CI is slower so give it more time
+    async () => {
+      const oldText = await fs.readFile('test/input1.html', 'utf-8')
+      const newText = await fs.readFile('test/input2.html', 'utf-8')
+      const expected = await fs.readFile('test/expected.html', 'utf-8')
+
+      expect(HtmlDiff.execute(oldText, newText)).toEqual(expected)
+    }
+  )
 })