chore: update test suite utils and snapshot format

Author: DylanPiercey

package-lock.json

@@ -6,16 +6,16 @@
   "bugs": "https://github.com/marko-js/micro-frame/issues",
   "dependencies": {
     "make-fetch-happen": "^12.0.0",
-    "writable-dom": "^1.0.3"
+    "writable-dom": "^1.0.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
-    "@marko/compiler": "^5.16.1",
-    "@marko/express": "^1.0.0",
-    "@marko/fixture-snapshots": "^2.1.6",
-    "@marko/testing-library": "^6.0.0",
+    "@marko/compiler": "^5.39.13",
+    "@marko/express": "^2.1.0",
+    "@marko/testing-library": "^6.2.0",
     "@types/convert-source-map": "^1.5.2",
+    "@types/diffable-html": "^5.0.2",
     "@types/express": "^4.17.13",
     "@types/istanbul-lib-instrument": "^1.7.4",
     "@types/jsdom": "^16.2.13",
@@ -25,6 +25,7 @@
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "@typescript-eslint/parser": "^5.2.0",
     "convert-source-map": "^1.8.0",
+    "diffable-html": "^6.0.1",
     "esbuild": "^0.13.9",
     "esbuild-register": "^3.0.0",
     "eslint": "^8.1.0",
@@ -36,9 +37,9 @@
     "istanbul-lib-instrument": "^5.0.4",
     "jsdom": "^18.0.0",
     "lint-staged": "^11.2.6",
-    "marko": "^5.17.2",
+    "marko": "^5.37.20",
     "mocha": "^9.1.3",
-    "mocha-snap": "^4.0.2",
+    "mocha-snap": "^5.0.0",
     "nyc": "^15.1.0",
     "playwright": "^1.51.0",
     "prettier": "^2.8.8",

package.json

@@ -2,9 +2,8 @@ import fs from "fs";
 import path from "path";
 import crypto from "crypto";
 import snap from "mocha-snap";
-import { JSDOM } from "jsdom";
 import * as playwright from "playwright";
-import { defaultNormalizer, defaultSerializer } from "@marko/fixture-snapshots";
+import toDiffableHTML from "diffable-html";
 import { start } from "./start";
 
 type Step = (page: playwright.Page) => Promise<unknown> | unknown;
@@ -14,25 +13,34 @@ let page: playwright.Page;
 let browser: playwright.Browser | undefined;
 let changes: string[] = [];
 
-export default (dir: string, step?: Step[] | Step) => {
+export default (name: string, dir: string, step?: Step[] | Step) => {
   const steps = step ? (Array.isArray(step) ? step : [step]) : [];
-  return () => {
-    it("renders", async function () {
-      const app = await start(dir);
-
-      try {
-        await waitForPendingRequests(page, () => page.goto(app!.url));
-        await forEachChange((html, i) => snap(html, `loading.${i}.html`));
+  it(name, async function () {
+    const app = await start(dir);
+    const snapshots: string[] = [];
+    try {
+      await trackStep("Load", () => page.goto(app!.url));
+      for (const [i, step] of steps.entries()) {
+        await trackStep(`Step ${i}`, step);
+      }
+    } finally {
+      await app.close();
+    }
 
-        for (const [i, step] of steps.entries()) {
-          await waitForPendingRequests(page, step);
-          await forEachChange((html, j) => snap(html, `step-${i}.${j}.html`));
-        }
-      } finally {
-        await app.close();
+    await snap(snapshots.join("\n\n") + "\n", { ext: ".md" });
+
+    async function trackStep(name: string, step: Step) {
+      await waitForPendingRequests(page, step);
+      await new Promise((r) => setTimeout(r, 500));
+      if (changes.length) {
+        snapshots.push(
+          `# ${name}\n` +
+            changes.map((html) => `\`\`\`html\n${html}\n\`\`\``).join("\n")
+        );
+        changes = [];
       }
-    });
-  };
+    }
+  });
 };
 
 // Starts the playwright instance and records mutation data.
@@ -45,20 +53,28 @@ before(async () => {
    */
   await Promise.all([
     context.exposeFunction("__track__", (html: string) => {
-      const formatted = defaultSerializer(
-        defaultNormalizer(JSDOM.fragment(html))
-      ).replace(/http:\/\/[^/]+/g, "");
+      const formatted = toDiffableHTML(
+        html.replace(/http:\/\/[^/]+/g, "")
+      ).trim();
 
       if (changes.at(-1) !== formatted) {
         changes.push(formatted);
       }
     }),
     context.addInitScript(() => {
+      const { port1, port2 } = new MessageChannel();
+      port1.onmessage = () => {
+        if (document.body.innerHTML) {
+          __track__(document.body.innerHTML);
+        }
+        observe();
+      };
+      // Tracks all mutations in the dom.
       const observer = new MutationObserver(() => {
         if (document.body) {
-          __track__(document.body.innerHTML);
+          // throttle the observer so we only snapshot once per frame.
           observer.disconnect();
-          queueMicrotask(observe);
+          requestAnimationFrame(() => port2.postMessage(0));
         }
       });
 
@@ -109,14 +125,20 @@ if (process.env.NYC_CONFIG) {
  * Utility to run a function against the current page and wait until every
  * in flight network request has completed before continuing.
  */
-async function waitForPendingRequests(page: playwright.Page, step: Step) {
+async function waitForPendingRequests(
+  page: playwright.Page,
+  action: (page: playwright.Page) => unknown
+) {
   let remaining = 0;
   let resolve!: () => void;
   const addOne = () => remaining++;
   const finishOne = async () => {
-    // wait a tick to see if new requests start from this one.
-    await page.evaluate(() => {});
-    if (!--remaining) resolve();
+    if (!--remaining) {
+      // wait some time to see if new requests start from this one.
+      await page.evaluate(() => {});
+      await new Promise((r) => setTimeout(r, 200));
+      if (!remaining) resolve();
+    }
   };
   const pending = new Promise<void>((_resolve) => (resolve = _resolve));
 
@@ -126,8 +148,7 @@ async function waitForPendingRequests(page: playwright.Page, step: Step) {
 
   try {
     addOne();
-    await page.pause();
-    await step(page);
+    await action(page);
     finishOne();
     await pending;
   } finally {
@@ -136,19 +157,3 @@ async function waitForPendingRequests(page: playwright.Page, step: Step) {
     page.off("requestfailed", finishOne);
   }
 }
-
-/**
- * Applies changes currently and ensures no new changes come in while processing.
- */
-async function forEachChange<F extends (html: string, i: number) => unknown>(
-  fn: F
-) {
-  const len = changes.length;
-  await Promise.all(changes.map(fn));
-
-  if (len !== changes.length) {
-    throw new Error("A mutation occurred when the page should have been idle.");
-  }
-
-  changes = [];
-}

src/__tests__/fixture.ts

@@ -53,9 +53,10 @@ export async function start(dir: string) {
           }
         }
 
-        app.get(`/${name === "index" ? "" : name}`, (_req, res) => {
+        app.get(`/${name === "index" ? "" : name}`, (req, res) => {
           res.locals.runtimeId = runtimeId;
           res.locals.assets = assets;
+          res.locals.req = req;
 
           if (process.env.NODE_ENV === "test") {
             // for some reason express suppresses errors in test env.

src/__tests__/start.ts

@@ -0,0 +1,38 @@
+# Load
+```html
+<div>
+  Host app
+</div>
+<script>
+  $csr_404_index_C=(window.$csr_404_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["T7lhsNg"]})
+</script>
+```
+```html
+<div>
+  Host app
+</div>
+<div>
+</div>
+<div>
+</div>
+<div>
+</div>
+<script>
+  $csr_404_index_C=(window.$csr_404_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["T7lhsNg"]})
+</script>
+```
+```html
+<div>
+  Host app
+</div>
+<div>
+</div>
+<div>
+  Slot_1 Error: Not Found
+</div>
+<div>
+</div>
+<script>
+  $csr_404_index_C=(window.$csr_404_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["T7lhsNg"]})
+</script>
+```