david-yz-liu · david-yz-liu · Oct 21, 2024 · Oct 19, 2024 · Oct 19, 2024 · Oct 19, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### 🔧 Internal changes
 
 -   Added better typing.
+-   Added a page for viewing Jest SVG snapshots.
+-   Added a plugin for prettifying Jest SVG outputs.
 
 ## [0.3.2] - 2024-09-14
 

diff --git a/docs/docs/99-api/images/jest-svg-viewer-file-select.png b/docs/docs/99-api/images/jest-svg-viewer-file-select.png
diff --git a/docs/docs/99-api/images/jest-svg-viewer.png b/docs/docs/99-api/images/jest-svg-viewer.png
diff --git a/memory-viz/README.md b/memory-viz/README.md
@@ -113,3 +113,11 @@ To run the test suite, execute the following command:
 ```console
 $ npm run test --workspace=memory-viz
 ```
+
+#### Viewing Jest SVG snapshots
+
+To easily view the Jest SVG snapshots, run `open memory-viz/src/tests/__snapshots__/snapshot.html` and select the snapshot outputs with the `*.snap` extension:
+
+![Jest SVG Viewer File Select](../docs/docs/99-api/images/jest-svg-viewer-file-select.png)
+
+![Jest SVG Viewer](../docs/docs/99-api/images/jest-svg-viewer.png)
diff --git a/memory-viz/jest.config.ts b/memory-viz/jest.config.ts
@@ -147,7 +147,7 @@ const config: Config = {
     // slowTestThreshold: 5,
 
     // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-    // snapshotSerializers: [],
+    snapshotSerializers: ["./src/tests/plugins/pretty_svg.ts"],
 
     // The test environment that will be used for testing
     testEnvironment: "node",

diff --git a/memory-viz/package.json b/memory-viz/package.json
@@ -57,6 +57,8 @@
         "csstype": "^3.1.3",
         "husky": "^9.1.5",
         "jest": "^29.7.0",
+        "node-html-parser": "^6.1.13",
+        "pretty": "^2.0.0",
         "tmp": "^0.2.3",
         "ts-loader": "^9.5.1",
         "ts-node": "^10.9.2",

diff --git a/memory-viz/src/tests/__snapshots__/cli.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/cli.spec.tsx.snap
diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
diff --git a/memory-viz/src/tests/__snapshots__/snapshot.html b/memory-viz/src/tests/__snapshots__/snapshot.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>SVG Snapshot Viewer</title>
+    </head>
+    <body>
+        <label>
+            Load a Jest Snapshot Output
+            <input
+                type="file"
+                name="file"
+                id="file"
+                onchange="renderSVGs(event)"
+            />
+        </label>
+        <div id="output"></div>
+        <script>
+            async function renderSVGs(event) {
+                try {
+                    clearOutput();
+                    await loadScript(event);
+
+                    const outputDiv = document.getElementById("output");
+                    const fragment = document.createDocumentFragment();
+                    const parser = new DOMParser();
+
+                    for (const [key, value] of Object.entries(window.exports)) {
+                        const testName = document.createElement("div");
+                        testName.textContent = key;
+                        fragment.appendChild(testName);
+
+                        const svgContent = value.trim().replace(/(^"|"$)/g, "");
+                        const doc = parser.parseFromString(
+                            svgContent,
+                            "text/html"
+                        );
+                        fragment.appendChild(doc.firstChild);
+                    }
+
+                    outputDiv.appendChild(fragment);
+                } catch (error) {
+                    console.error("Error rendering SVGs:", error);
+                }
+            }
+
+            function clearOutput() {
+                window.exports = {};
+                const outputDiv = document.getElementById("output");
+                outputDiv.textContent = "";
+            }
+
+            async function loadScript(event) {
+                return new Promise((resolve, reject) => {
+                    const file = event.target.files.item(0);
+                    if (file) {
+                        const scriptTag = document.createElement("script");
+                        scriptTag.setAttribute(
+                            "src",
+                            URL.createObjectURL(file)
+                        );
+                        scriptTag.setAttribute("type", "text/javascript");
+                        scriptTag.addEventListener("load", resolve);
+                        scriptTag.addEventListener("error", reject);
+                        document.head.appendChild(scriptTag);
+                    } else {
+                        console.log("No file selected.");
+                        resolve();
+                    }
+                });
+            }
+        </script>
+    </body>
+</html>
diff --git a/memory-viz/src/tests/plugins/pretty_svg.ts b/memory-viz/src/tests/plugins/pretty_svg.ts
@@ -0,0 +1,22 @@
+// Custom pretty-format plugin for serializing SVG elements
+// See https://github.com/jestjs/jest/tree/main/packages/pretty-format#writing-plugins for more information
+
+import { NewPlugin } from "pretty-format";
+import pretty from "pretty";
+import { parse, HTMLElement } from "node-html-parser";
+
+export const serialize: NewPlugin["serialize"] = (val: HTMLElement) => {
+    return pretty(val);
+};
+
+export const test: NewPlugin["test"] = (val: any) => {
+    const root = parse(val);
+    return root.firstChild.rawTagName === "svg";
+};
+
+export const plugin: NewPlugin = {
+    test,
+    serialize,
+};
+
+export default plugin;