Difficulties Combining JSDOM with diff-dom for Full HTML Comparisons

[MilanConrad]

Issue Description:

I'm facing challenges when trying to use the diff-dom library in conjunction with JSDOM. My aim is to compare two entire HTML documents, apply the differences to one of them, and then save the modified HTML to a file. However, I'm running into type mismatches and errors during the process.
Environment:

• Node.js
  

• JSDOM
  

• diff-dom library
  

Code Sample:

Here's a snippet of the code I'm working with:

const initialDOM = new JSDOM(initialHTMLCode);
const finalDOM = new JSDOM(finalHTMLCode);

const initialDocument = initialDOM.window.document;
const finalDocument = finalDOM.window.document;

const dd = new DiffDOM();
const diffs = dd.diff(initialDocument.documentElement.outerHTML, finalDocument.documentElement.outerHTML);

const initialDocumentClone = initialDocument.documentElement.cloneNode(true);

// Type checks fail in the following apply function
dd.apply(initialDocumentClone, diffs);

await fs.writeFile(`playground.html`, initialDocument.documentElement.outerHTML, 'utf8');

Steps to Reproduce:

• Generate two HTML documents using JSDOM.
  

• Utilize diff-dom to create the diff between these HTML documents.
  

• Apply these diffs to one of the HTML documents.
  

• Save the resulting HTML to a file.
  

Expected Behavior:

The differences should be applied to initialDocumentClone, and the resulting HTML should be saved to a file without issues.
Actual Behavior:

I'm encountering type mismatches during the applyDiff operation. The type checks for Element instances within applyDiff function fail. Consequently, I'm unable to successfully apply the diffs and save the result. I am really happy about anyone helping me out with this issue

[johanneswilm]

Can you please create a full example in jsfiddle or similar? Else it will take me a long time to recreate this before being able to start working on it.

[johanneswilm]

@MilanConrad Take a look at the tests. They are running using jsdom.