test: cover email HAST traversal

Author: teallarson

app/_components/toolkit-docs/lib/neutralize-emails.tsx

@@ -49,7 +49,7 @@ export function splitEmails(text: string): ReactNode {
 }
 
 /** Splits `value` into text/`<wbr>` element pairs at each email `@` break. */
-function neutralizeTextValue(value: string): Array<Text | Element> {
+export function splitEmailText(value: string): Array<Text | Element> {
   const breaks = atBreakOffsets(value);
   const out: Array<Text | Element> = [];
   let cursor = 0;
@@ -73,7 +73,7 @@ export function rehypeNeutralizeEmails() {
       if (index === undefined || !parent) {
         return;
       }
-      const replacement = neutralizeTextValue(node.value);
+      const replacement = splitEmailText(node.value);
       if (replacement.length <= 1) {
         return;
       }

tests/neutralize-emails.test.tsx

@@ -1,8 +1,10 @@
+import type { Element, Root, RootContent } from "hast";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, test } from "vitest";
 import {
   rehypeNeutralizeEmails,
   splitEmails,
+  splitEmailText,
 } from "@/app/_components/toolkit-docs/lib/neutralize-emails";
 
 /**
@@ -39,27 +41,51 @@ describe("splitEmails", () => {
   });
 });
 
-type HastNode = {
-  type: string;
-  value?: string;
-  tagName?: string;
-  properties?: Record<string, unknown>;
-  children?: HastNode[];
-};
+describe("splitEmailText", () => {
+  test("returns one text node when there are no emails", () => {
+    expect(splitEmailText("just some text")).toEqual([
+      { type: "text", value: "just some text" },
+    ]);
+  });
+
+  test("splits every email while preserving the text", () => {
+    const nodes = splitEmailText(
+      "contact jane@example.com or sam@example.org today"
+    );
+
+    expect(nodes).toEqual([
+      { type: "text", value: "contact jane" },
+      { type: "element", tagName: "wbr", properties: {}, children: [] },
+      { type: "text", value: "@example.com or sam" },
+      { type: "element", tagName: "wbr", properties: {}, children: [] },
+      { type: "text", value: "@example.org today" },
+    ]);
+    expect(
+      nodes
+        .filter((node) => node.type === "text")
+        .map((node) => node.value)
+        .join("")
+    ).toBe("contact jane@example.com or sam@example.org today");
+  });
+});
 
-const collectText = (node: HastNode): string =>
-  node.type === "text"
-    ? (node.value ?? "")
-    : (node.children ?? []).map(collectText).join("");
+const collectText = (node: Root | RootContent): string => {
+  if (node.type === "text") {
+    return node.value;
+  }
+  return "children" in node ? node.children.map(collectText).join("") : "";
+};
 
-const hasContiguousEmail = (node: HastNode): boolean =>
-  node.type === "text"
-    ? EMAIL.test(node.value ?? "")
-    : (node.children ?? []).some(hasContiguousEmail);
+const hasContiguousEmail = (node: Root | RootContent): boolean => {
+  if (node.type === "text") {
+    return EMAIL.test(node.value);
+  }
+  return "children" in node ? node.children.some(hasContiguousEmail) : false;
+};
 
 describe("rehypeNeutralizeEmails", () => {
   test("splits email text nodes and inserts a <wbr>, losslessly", () => {
-    const tree: HastNode = {
+    const tree: Root = {
       type: "root",
       children: [
         {
@@ -73,13 +99,43 @@ describe("rehypeNeutralizeEmails", () => {
 
     rehypeNeutralizeEmails()(tree);
 
-    const paragraph = tree.children?.[0];
-    expect(paragraph?.children?.some((child) => child.tagName === "wbr")).toBe(
-      true
-    );
+    const paragraph = tree.children[0] as Element;
+    expect(
+      paragraph.children.some(
+        (child) => child.type === "element" && child.tagName === "wbr"
+      )
+    ).toBe(true);
     // No single text node still holds a full email...
     expect(hasContiguousEmail(tree)).toBe(false);
     // ...and the concatenated text is unchanged.
     expect(collectText(tree)).toBe("reach user@example.com now");
   });
+
+  test("visits nested elements and every matching text node", () => {
+    const tree: Root = {
+      type: "root",
+      children: [
+        {
+          type: "element",
+          tagName: "blockquote",
+          properties: {},
+          children: [
+            {
+              type: "element",
+              tagName: "em",
+              properties: {},
+              children: [{ type: "text", value: "jane@example.com" }],
+            },
+            { type: "text", value: " and sam@example.org" },
+          ],
+        },
+      ],
+    };
+
+    rehypeNeutralizeEmails()(tree);
+
+    expect(hasContiguousEmail(tree)).toBe(false);
+    expect(collectText(tree)).toBe("jane@example.com and sam@example.org");
+    expect(JSON.stringify(tree).match(/"tagName":"wbr"/g)).toHaveLength(2);
+  });
 });