@surrealdb/ui 1.2.12 → 1.2.14

package/tests/unit/MarkdownViewer/ssr.test.tsx

@@ -4,46 +4,47 @@ import { MANTINE_THEME } from "@src/theme/mantine";
 import type { ReactElement } from "react";
 import { renderToString } from "react-dom/server";
 import { beforeAll, describe, expect, it } from "vitest";
+
 import { md, mdViewer } from "../../_setup/markdown-classes";
 
 // Mantine's `useComputedColorScheme` reaches for `window.matchMedia` even
 // during a `renderToString` pass; stub it so the SSR test can exercise the
 // full viewer pipeline (including `MarkdownCodeLines`).
 beforeAll(() => {
-    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
-        Object.defineProperty(window, "matchMedia", {
-            writable: true,
-            value: (query: string) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }),
-        });
-    }
+	if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: (query: string) => ({
+				matches: false,
+				media: query,
+				onchange: null,
+				addListener: () => {},
+				removeListener: () => {},
+				addEventListener: () => {},
+				removeEventListener: () => {},
+				dispatchEvent: () => false,
+			}),
+		});
+	}
 });
 
 function shell(node: ReactElement): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            {node}
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			{node}
+		</MantineProvider>,
+	);
 }
 
 describe("MarkdownViewer / SSR", () => {
-    it("renders to a static HTML string with semantic markdown structure", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`# Title
+	it("renders to a static HTML string with semantic markdown structure", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`# Title
 
 Body with **bold**, *italic* and [a link](https://surrealdb.com).
 
@@ -57,37 +58,37 @@ Body with **bold**, *italic* and [a link](https://surrealdb.com).
 return true;
 \`\`\`
 `}
-            />,
-        );
+			/>,
+		);
 
-        // Wrapper.
-        expect(html).toContain(mdViewer.viewerRoot);
+		// Wrapper.
+		expect(html).toContain(mdViewer.viewerRoot);
 
-        // Semantic heading.
-        expect(html).toContain(md.h1);
-        expect(html).toMatch(/id="title"/);
-        expect(html).toContain("Title");
+		// Semantic heading.
+		expect(html).toContain(md.h1);
+		expect(html).toMatch(/id="title"/);
+		expect(html).toContain("Title");
 
-        // Paragraph and inline marks (paragraph uses bare <p> without module class).
-        expect(html).toMatch(/<p[^>]*>Body with/);
-        expect(html).toContain(md.strong);
-        expect(html).toContain("bold</strong>");
-        expect(html).toContain(md.emphasis);
-        expect(html).toContain(md.link);
+		// Paragraph and inline marks (paragraph uses bare <p> without module class).
+		expect(html).toMatch(/<p[^>]*>Body with/);
+		expect(html).toContain(md.strong);
+		expect(html).toContain("bold</strong>");
+		expect(html).toContain(md.emphasis);
+		expect(html).toContain(md.link);
 
-        // Semantic lists.
-        expect(html).toContain(md.list);
-        expect(html).toContain("<li");
+		// Semantic lists.
+		expect(html).toContain(md.list);
+		expect(html).toContain("<li");
 
-        // Semantic code block.
-        expect(html).toContain(md.codeBlock);
-        expect(html).toContain("<code");
-        expect(html).toContain("</code></pre>");
+		// Semantic code block.
+		expect(html).toContain(md.codeBlock);
+		expect(html).toContain("<code");
+		expect(html).toContain("</code></pre>");
 
-        // Raw markdown markers must not leak through.
-        expect(html).not.toContain("**bold**");
-        expect(html).not.toContain("*italic*");
-        expect(html).not.toContain("## ");
-        expect(html).not.toMatch(/<p[^>]*>#/);
-    });
+		// Raw markdown markers must not leak through.
+		expect(html).not.toContain("**bold**");
+		expect(html).not.toContain("*italic*");
+		expect(html).not.toContain("## ");
+		expect(html).not.toMatch(/<p[^>]*>#/);
+	});
 });

package/tests/unit/MarkdownViewer/syntax-highlighting.test.tsx

@@ -4,43 +4,44 @@ import { MANTINE_THEME } from "@src/theme/mantine";
 import type { ReactElement } from "react";
 import { renderToString } from "react-dom/server";
 import { beforeAll, describe, expect, it } from "vitest";
+
 import { md } from "../../_setup/markdown-classes";
 
 beforeAll(() => {
-    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
-        Object.defineProperty(window, "matchMedia", {
-            writable: true,
-            value: (query: string) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }),
-        });
-    }
+	if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: (query: string) => ({
+				matches: false,
+				media: query,
+				onchange: null,
+				addListener: () => {},
+				removeListener: () => {},
+				addEventListener: () => {},
+				removeEventListener: () => {},
+				dispatchEvent: () => false,
+			}),
+		});
+	}
 });
 
 function shell(node: ReactElement): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            {node}
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			{node}
+		</MantineProvider>,
+	);
 }
 
 describe("MarkdownViewer / syntax highlighting", () => {
-    it("highlights bash and sh fenced blocks", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`\`\`\`bash
+	it("highlights bash and sh fenced blocks", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`\`\`\`bash
 cd project
 \`\`\`
 
@@ -48,26 +49,26 @@ cd project
 export FOO=bar
 \`\`\`
 `}
-            />,
-        );
+			/>,
+		);
 
-        expect(html).toContain(md.codeBlock);
-        expect(html).toMatch(/style="color:#ffd000"/);
-    });
+		expect(html).toContain(md.codeBlock);
+		expect(html).toMatch(/style="color:#ffd000"/);
+	});
 
-    it("highlights json fenced blocks", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`\`\`\`json
+	it("highlights json fenced blocks", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`\`\`\`json
 {
   "name": "example"
 }
 \`\`\`
 `}
-            />,
-        );
+			/>,
+		);
 
-        expect(html).toContain(md.codeBlock);
-        expect(html).toMatch(/style="color:#00ff6e"/);
-    });
+		expect(html).toContain(md.codeBlock);
+		expect(html).toMatch(/style="color:#00ff6e"/);
+	});
 });

package/tests/unit/MarkdownViewer/tabs-fenced-code.test.tsx

@@ -6,37 +6,37 @@ import { renderToString } from "react-dom/server";
 import { beforeAll, describe, expect, it } from "vitest";
 
 beforeAll(() => {
-    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
-        Object.defineProperty(window, "matchMedia", {
-            writable: true,
-            value: (query: string) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }),
-        });
-    }
+	if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: (query: string) => ({
+				matches: false,
+				media: query,
+				onchange: null,
+				addListener: () => {},
+				removeListener: () => {},
+				addEventListener: () => {},
+				removeEventListener: () => {},
+				dispatchEvent: () => false,
+			}),
+		});
+	}
 });
 
 function shell(node: ReactElement): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            {node}
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			{node}
+		</MantineProvider>,
+	);
 }
 
 function labels(html: string): string[] {
-    return [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1] ?? "");
+	return [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1] ?? "");
 }
 
 // Tab items whose fenced code sits directly under the tag (no blank-line
@@ -81,116 +81,116 @@ const INDENTED = `<Tabs groupId="package-manager">
 </Tabs>`;
 
 describe("MarkdownViewer / Tabs with fenced code", () => {
-    for (const [name, content] of [
-        ["flush", FLUSH],
-        ["indented", INDENTED],
-    ] as const) {
-        it(`${name}: renders both tabs, both labels, and highlighted code`, () => {
-            const html = shell(<MarkdownViewer content={content} />);
-            const text = html.replace(/<[^>]+>/g, "");
-
-            // Both tab buttons are present, in order.
-            expect(labels(html)).toEqual(["ESM", "CommonJS"]);
-            // The fenced code is rendered as a real (highlighted) code block
-            // whose tokens survive in the markup.
-            expect(html).toContain('data-language="ts"');
-            expect(html).toContain("Surreal");
-            expect(html).toContain("surrealdb");
-            // Tags and fences are not leaked as visible plain text.
-            expect(text).not.toContain("</TabItem>");
-            expect(text).not.toContain("<TabItem");
-            expect(text).not.toContain("```");
-        });
-    }
+	for (const [name, content] of [
+		["flush", FLUSH],
+		["indented", INDENTED],
+	] as const) {
+		it(`${name}: renders both tabs, both labels, and highlighted code`, () => {
+			const html = shell(<MarkdownViewer content={content} />);
+			const text = html.replace(/<[^>]+>/g, "");
+
+			// Both tab buttons are present, in order.
+			expect(labels(html)).toEqual(["ESM", "CommonJS"]);
+			// The fenced code is rendered as a real (highlighted) code block
+			// whose tokens survive in the markup.
+			expect(html).toContain('data-language="ts"');
+			expect(html).toContain("Surreal");
+			expect(html).toContain("surrealdb");
+			// Tags and fences are not leaked as visible plain text.
+			expect(text).not.toContain("</TabItem>");
+			expect(text).not.toContain("<TabItem");
+			expect(text).not.toContain("```");
+		});
+	}
 });
 
 // A tab item whose content mixes prose paragraphs, blank lines, and a fenced
 // code block — all indented under the tags. `bl` builds the blank separator
 // lines, optionally carrying the structural tab (some editors keep it).
 function mixedItem(bl: "" | "\t"): string {
-    return [
-        "<Tabs>",
-        '\t<TabItem value="esm" label="ESM">',
-        bl,
-        "\tTest",
-        bl,
-        "\t```ts",
-        "\timport { Surreal } from 'surrealdb';",
-        bl,
-        "\t// Create a new Surreal instance",
-        "\tconst db = new Surreal();",
-        "\t```",
-        bl,
-        "\ttest2",
-        bl,
-        "\t</TabItem>",
-        "</Tabs>",
-    ].join("\n");
+	return [
+		"<Tabs>",
+		'\t<TabItem value="esm" label="ESM">',
+		bl,
+		"\tTest",
+		bl,
+		"\t```ts",
+		"\timport { Surreal } from 'surrealdb';",
+		bl,
+		"\t// Create a new Surreal instance",
+		"\tconst db = new Surreal();",
+		"\t```",
+		bl,
+		"\ttest2",
+		bl,
+		"\t</TabItem>",
+		"</Tabs>",
+	].join("\n");
 }
 
 // Mirrors docs' in-memory.mdx: an indented tab item whose runaway fence used to
 // swallow the following flush <Tabs> block whole.
 const TWO_TAB_BLOCKS = [
-    "<Tabs>",
-    '\t<TabItem value="esm" label="ESM">',
-    "",
-    "\tTest",
-    "",
-    "\t```ts",
-    "\timport { Surreal } from 'surrealdb';",
-    "\t```",
-    "",
-    "\t</TabItem>",
-    "</Tabs>",
-    "",
-    "<Tabs>",
-    "",
-    '<TabItem label="SurrealDB 3.x">',
-    "",
-    "```bash",
-    "surreal start mem",
-    "```",
-    "",
-    "</TabItem>",
-    "</Tabs>",
+	"<Tabs>",
+	'\t<TabItem value="esm" label="ESM">',
+	"",
+	"\tTest",
+	"",
+	"\t```ts",
+	"\timport { Surreal } from 'surrealdb';",
+	"\t```",
+	"",
+	"\t</TabItem>",
+	"</Tabs>",
+	"",
+	"<Tabs>",
+	"",
+	'<TabItem label="SurrealDB 3.x">',
+	"",
+	"```bash",
+	"surreal start mem",
+	"```",
+	"",
+	"</TabItem>",
+	"</Tabs>",
 ].join("\n");
 
 describe("MarkdownViewer / two adjacent Tabs blocks", () => {
-    it("renders both blocks independently without one swallowing the next", () => {
-        const html = shell(<MarkdownViewer content={TWO_TAB_BLOCKS} />);
-        const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ");
-
-        // Both tab blocks produced their own labelled tab.
-        expect(labels(html)).toEqual(["ESM", "SurrealDB 3.x"]);
-        // Content from both blocks is present…
-        expect(html).toContain("surrealdb");
-        expect(text).toContain("surreal start mem");
-        // …and nothing leaked as raw tags or fences.
-        expect(text).not.toContain("TabItem");
-        expect(text).not.toContain("Tabs");
-        expect(text).not.toContain("```");
-    });
+	it("renders both blocks independently without one swallowing the next", () => {
+		const html = shell(<MarkdownViewer content={TWO_TAB_BLOCKS} />);
+		const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ");
+
+		// Both tab blocks produced their own labelled tab.
+		expect(labels(html)).toEqual(["ESM", "SurrealDB 3.x"]);
+		// Content from both blocks is present…
+		expect(html).toContain("surrealdb");
+		expect(text).toContain("surreal start mem");
+		// …and nothing leaked as raw tags or fences.
+		expect(text).not.toContain("TabItem");
+		expect(text).not.toContain("Tabs");
+		expect(text).not.toContain("```");
+	});
 });
 
 describe("MarkdownViewer / Tabs with mixed indented content", () => {
-    for (const blank of ["", "\t"] as const) {
-        const label = blank === "" ? "empty blank lines" : "tab-filled blank lines";
-        it(`renders prose + code + prose inside an indented tab item (${label})`, () => {
-            const html = shell(<MarkdownViewer content={mixedItem(blank)} />);
-            const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ");
-
-            expect(labels(html)).toEqual(["ESM"]);
-            // Prose before and after the code block renders as prose.
-            expect(text).toContain("Test");
-            expect(text).toContain("test2");
-            // The code renders as a highlighted code block, not leaked prose.
-            expect(html).toContain('data-language="ts"');
-            expect(html).toContain("surrealdb");
-            // Nothing is swallowed: tags and fences never surface as text.
-            expect(text).not.toContain("TabItem");
-            expect(text).not.toContain("```");
-            // The code content must not appear as an indented (tab-prefixed) blob.
-            expect(text).not.toContain("\timport");
-        });
-    }
+	for (const blank of ["", "\t"] as const) {
+		const label = blank === "" ? "empty blank lines" : "tab-filled blank lines";
+		it(`renders prose + code + prose inside an indented tab item (${label})`, () => {
+			const html = shell(<MarkdownViewer content={mixedItem(blank)} />);
+			const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ");
+
+			expect(labels(html)).toEqual(["ESM"]);
+			// Prose before and after the code block renders as prose.
+			expect(text).toContain("Test");
+			expect(text).toContain("test2");
+			// The code renders as a highlighted code block, not leaked prose.
+			expect(html).toContain('data-language="ts"');
+			expect(html).toContain("surrealdb");
+			// Nothing is swallowed: tags and fences never surface as text.
+			expect(text).not.toContain("TabItem");
+			expect(text).not.toContain("```");
+			// The code content must not appear as an indented (tab-prefixed) blob.
+			expect(text).not.toContain("\timport");
+		});
+	}
 });