Convert mhtml to html behind a feature toggle (usehMhtmlConverter)

ergon · Nov 19, 2024 · 740d656 · 740d656
1 parent 8f7a1eb
commit 740d656
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git 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
@@ -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(