@surrealdb/ui 1.2.3 → 1.2.4

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

@@ -0,0 +1,196 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+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";
+
+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,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    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] ?? "");
+}
+
+// Tab items whose fenced code sits directly under the tag (no blank-line
+// separators) and contains an interior blank line.
+const FLUSH = `<Tabs groupId="package-manager">
+<TabItem value="esm" label="ESM" default>
+\`\`\`ts
+import { Surreal } from 'surrealdb';
+
+// Create a new Surreal instance
+const db = new Surreal();
+\`\`\`
+</TabItem>
+<TabItem value="cjs" label="CommonJS">
+\`\`\`ts
+const { Surreal } = require('surrealdb');
+
+// Create a new Surreal instance
+const db = new Surreal();
+\`\`\`
+</TabItem>
+</Tabs>`;
+
+// Same content, but the tab items are indented under <Tabs> with tabs.
+const INDENTED = `<Tabs groupId="package-manager">
+\t<TabItem value="esm" label="ESM" default>
+\t\`\`\`ts
+\timport { Surreal } from 'surrealdb';
+
+\t// Create a new Surreal instance
+\tconst db = new Surreal();
+\t\`\`\`
+\t</TabItem>
+\t<TabItem value="cjs" label="CommonJS">
+\t\`\`\`ts
+\tconst { Surreal } = require('surrealdb');
+
+\t// Create a new Surreal instance
+\tconst db = new Surreal();
+\t\`\`\`
+\t</TabItem>
+</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("```");
+        });
+    }
+});
+
+// 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");
+}
+
+// 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>",
+].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("```");
+    });
+});
+
+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");
+        });
+    }
+});

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

@@ -0,0 +1,115 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import type { MarkdownComponents } from "@src/lib/markdown";
+import viewerClasses from "@src/lib/markdown/style/viewer.module.scss";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
+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,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            {node}
+        </MantineProvider>,
+    );
+}
+
+const TABS_MARKDOWN = `<Tabs>
+<TabItem label="JavaScript">
+
+\`\`\`javascript
+const x = 42;
+\`\`\`
+
+</TabItem>
+<TabItem label="Rust">
+
+\`\`\`rust
+fn main() {}
+\`\`\`
+
+</TabItem>
+</Tabs>`;
+
+describe("MarkdownViewer / Tabs", () => {
+    it("renders one tab button per TabItem with the correct labels", () => {
+        const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
+
+        const tabButtons = html.match(/mantine-Tabs-tab\b/g) ?? [];
+        expect(tabButtons).toHaveLength(2);
+
+        const labels = [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1]);
+        expect(labels).toEqual(["JavaScript", "Rust"]);
+    });
+
+    it("renders the active tab's content as markdown (code block highlighted)", () => {
+        const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
+        // A real fenced code block is rendered (not raw text).
+        expect(html).toContain('data-language="javascript"');
+        // The code is highlighted into spans, so the plain text survives stripping tags.
+        const text = html.replace(/<[^>]+>/g, "");
+        expect(text).toContain("const x = 42");
+    });
+
+    it("wraps tab sub-content in the shared content-flow class for top-level rhythm", () => {
+        const contentFlow = viewerClasses.contentFlow;
+        expect(contentFlow).toBeTruthy();
+
+        const html = shell(<MarkdownViewer content={TABS_MARKDOWN} />);
+
+        // The class is shared: the viewer root composes it, and the tab body
+        // wrapper applies it — so nested content is spaced like top-level content.
+        const occurrences = html.split(contentFlow).length - 1;
+        expect(occurrences).toBeGreaterThanOrEqual(2);
+    });
+
+    it("exposes bare child elements with their props for custom introspecting components", () => {
+        // Mirrors how docs' <ContentTabs> reads each child's label/content via
+        // React.Children — the children must be the bare TabItem elements.
+        function Group({ children }: { children?: ReactNode }): ReactElement {
+            const tabs = Children.toArray(children)
+                .filter(isValidElement)
+                .map((el) => (el.props as { label?: string }).label ?? "MISSING");
+            return <div data-labels={tabs.join("|")} />;
+        }
+        function Item({ children }: { children?: ReactNode }): ReactElement {
+            return <>{children}</>;
+        }
+        const components: MarkdownComponents = {
+            Group: { component: Group, block: true },
+            Item: { component: Item, block: true },
+        };
+        const html = shell(
+            <MarkdownViewer
+                content={
+                    '<Group>\n<Item label="One">\n\na\n\n</Item>\n<Item label="Two">\n\nb\n\n</Item>\n</Group>'
+                }
+                components={components}
+            />,
+        );
+        expect(html).toContain('data-labels="One|Two"');
+    });
+});