From 740d656ffaf5b98b9477ef523b272501b385d9aa Mon Sep 17 00:00:00 2001
From: Philipp Matter <philipp.matter@ergon.ch>
Date: Tue, 19 Nov 2024 09:37:59 +0100
Subject: [PATCH] Convert mhtml to html behind a feature toggle
 (usehMhtmlConverter)

---
 server/src/api.js    | 20 ++++++++++++++++++--
 server/src/render.js | 24 +++++++++++++++++++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/server/src/api.js b/server/src/api.js
index db66c31..8356a83 100644
--- a/server/src/api.js
+++ b/server/src/api.js
@@ -31,6 +31,7 @@ export function buildFastify(renderFn, compareFn) {
       fullpage: { type: "boolean" },
       viewport: { $ref: "#viewport" },
       style: { type: "string" },
+      usehMhtmlConverter: { type: "boolean" },
     },
     required: ["actualHtml", "expected", "viewport"],
   });
@@ -43,6 +44,7 @@ export function buildFastify(renderFn, compareFn) {
       fullpage: { type: "boolean" },
       viewport: { $ref: "#viewport" },
       style: { type: "string" },
+      usehMhtmlConverter: { type: "boolean" },
     },
     required: ["actualHtml", "viewport"],
   });
@@ -59,8 +61,15 @@ export function buildFastify(renderFn, compareFn) {
       const viewport = request.body.viewport;
       const fullpage = request.body.fullpage ?? false;
       const style = request.body.style;
+      const usehMhtmlConverter = request.body.usehMhtmlConverter ?? false;
 
-      const actual = await renderFn(actualHtml, viewport, fullpage, style);
+      const actual = await renderFn(
+        actualHtml,
+        viewport,
+        fullpage,
+        style,
+        usehMhtmlConverter,
+      );
       const result = await compareFn(expected, actual);
 
       return {
@@ -83,8 +92,15 @@ export function buildFastify(renderFn, compareFn) {
       const viewport = request.body.viewport;
       const fullpage = request.body.fullpage ?? false;
       const style = request.body.style;
+      const usehMhtmlConverter = request.body.usehMhtmlConverter ?? false;
 
-      const actual = await renderFn(actualHtml, viewport, fullpage, style);
+      const actual = await renderFn(
+        actualHtml,
+        viewport,
+        fullpage,
+        style,
+        usehMhtmlConverter,
+      );
 
       return {
         actual: actual.toString("base64"),
diff --git a/server/src/render.js b/server/src/render.js
index 36aff80..a8480b4 100644
--- a/server/src/render.js
+++ b/server/src/render.js
@@ -3,18 +3,36 @@ import path from "node:path";
 import os from "node:os";
 import { chromium } from "playwright";
 import pino from "pino";
+import mhtml2html from "mhtml2html";
+import { JSDOM } from "jsdom";
 
 const logger = pino({
   level: process.env.LOG_LEVEL || "info",
 });
 
-export async function render(actualMhtml, viewport, fullpage, style) {
+export async function render(
+  actualMhtml,
+  viewport,
+  fullpage,
+  style,
+  usehMhtmlConverter,
+) {
   const renderer = new BrowserRenderer();
   const workspaceDirectory = await fs.mkdtemp(
     path.join(os.tmpdir(), "pixelpact-"),
   );
-  const indexFile = `${workspaceDirectory}/index.mhtml`;
-  await fs.writeFile(indexFile, actualMhtml);
+  let indexFile;
+  if (usehMhtmlConverter) {
+    indexFile = `${workspaceDirectory}/index.html`;
+    const convertedHtml = mhtml2html.convert(actualMhtml, {
+      parseDOM: (html) => new JSDOM(html),
+    });
+    const actualHtml = convertedHtml.serialize();
+    await fs.writeFile(indexFile, actualHtml);
+  } else {
+    indexFile = `${workspaceDirectory}/index.mhtml`;
+    await fs.writeFile(indexFile, actualMhtml);
+  }
   try {
     await renderer.start();
     return await renderer.screenshot(