@surrealdb/ui 1.2.11 → 1.2.13

package/tests/unit/MarkdownViewer/jsx-block-nesting.test.tsx

@@ -7,33 +7,33 @@ 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>,
+	);
 }
 
 /**
@@ -42,40 +42,40 @@ function shell(node: ReactElement): string {
  * `renderToString` assert the full parsed structure of all tab bodies.
  */
 function EagerGroup({ children }: { children?: ReactNode }): ReactElement {
-    const items = Children.toArray(children).filter(isValidElement);
-    return (
-        <div data-eager-group>
-            <div
-                data-labels={items.map((el) => (el.props as { label?: string }).label).join("|")}
-            />
-            {items.map((el, i) => (
-                <section
-                    data-panel={i}
-                    key={(el.props as { label?: string }).label ?? i}
-                >
-                    {(el.props as { children?: ReactNode }).children}
-                </section>
-            ))}
-        </div>
-    );
+	const items = Children.toArray(children).filter(isValidElement);
+	return (
+		<div data-eager-group>
+			<div
+				data-labels={items.map((el) => (el.props as { label?: string }).label).join("|")}
+			/>
+			{items.map((el, i) => (
+				<section
+					data-panel={i}
+					key={(el.props as { label?: string }).label ?? i}
+				>
+					{(el.props as { children?: ReactNode }).children}
+				</section>
+			))}
+		</div>
+	);
 }
 
 function EagerItem({ children }: { children?: ReactNode }): ReactElement {
-    return <>{children}</>;
+	return <>{children}</>;
 }
 
 const EAGER_COMPONENTS: MarkdownComponents = {
-    Tabs: { component: EagerGroup, block: true },
-    TabItem: { component: EagerItem, block: true },
+	Tabs: { component: EagerGroup, block: true },
+	TabItem: { component: EagerItem, block: true },
 };
 
 function stripTags(html: string): string {
-    return html.replace(/<[^>]+>/g, "");
+	return html.replace(/<[^>]+>/g, "");
 }
 
 describe("MarkdownViewer / JSX block nesting", () => {
-    it("pairs a Tabs block into exactly its authored TabItems (no synthetic tabs)", () => {
-        const content = `<Tabs syncKey="demo">
+	it("pairs a Tabs block into exactly its authored TabItems (no synthetic tabs)", () => {
+		const content = `<Tabs syncKey="demo">
 <TabItem label="Create an instance">
 \tSurrealDB Cloud allows you to connect.
 
@@ -89,24 +89,24 @@ describe("MarkdownViewer / JSX block nesting", () => {
 \tSince SurrealDB Cloud is closely integrated.
 </TabItem>
 </Tabs>`;
-        const html = shell(<MarkdownViewer content={content} />);
-
-        // Exactly two tab buttons with the authored labels — no paragraphs
-        // leaking out as extra "Tab N" children.
-        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(["Create an instance", "Connect to your instance"]);
-
-        // The active tab renders its full multi-paragraph markdown body.
-        const text = stripTags(html);
-        expect(text).toContain("SurrealDB Cloud allows you to connect.");
-        expect(text).toContain("1. Create Instance.");
-        expect(text).toContain("When creating an instance");
-    });
-
-    it("renders full multi-paragraph markdown for every TabItem (via eager group)", () => {
-        const content = `<Tabs syncKey="demo">
+		const html = shell(<MarkdownViewer content={content} />);
+
+		// Exactly two tab buttons with the authored labels — no paragraphs
+		// leaking out as extra "Tab N" children.
+		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(["Create an instance", "Connect to your instance"]);
+
+		// The active tab renders its full multi-paragraph markdown body.
+		const text = stripTags(html);
+		expect(text).toContain("SurrealDB Cloud allows you to connect.");
+		expect(text).toContain("1. Create Instance.");
+		expect(text).toContain("When creating an instance");
+	});
+
+	it("renders full multi-paragraph markdown for every TabItem (via eager group)", () => {
+		const content = `<Tabs syncKey="demo">
 <TabItem label="Create an instance">
 \tSurrealDB Cloud allows you to connect.
 
@@ -122,30 +122,30 @@ describe("MarkdownViewer / JSX block nesting", () => {
 \tSince SurrealDB Cloud is closely integrated.
 </TabItem>
 </Tabs>`;
-        const html = shell(
-            <MarkdownViewer
-                content={content}
-                components={EAGER_COMPONENTS}
-            />,
-        );
-
-        expect(html).toContain('data-labels="Create an instance|Connect to your instance"');
-        expect(html).not.toContain("Tab 2");
-
-        // Both panels rendered, in order, with all their paragraphs.
-        const text = stripTags(html);
-        expect(text).toContain("SurrealDB Cloud allows you to connect.");
-        expect(text).toContain("1. Create Instance.");
-        expect(text).toContain("When creating an instance");
-        expect(text).toContain("You can connect via Surrealist");
-        expect(text).toContain("closely integrated");
-        // Links inside both tabs survive.
-        expect(html).toContain('href="/docs/x"');
-        expect(html).toContain('href="/docs/y"');
-    });
-
-    it("renders a single-paragraph Tabs block (regression)", () => {
-        const content = `<Tabs syncKey="s">
+		const html = shell(
+			<MarkdownViewer
+				content={content}
+				components={EAGER_COMPONENTS}
+			/>,
+		);
+
+		expect(html).toContain('data-labels="Create an instance|Connect to your instance"');
+		expect(html).not.toContain("Tab 2");
+
+		// Both panels rendered, in order, with all their paragraphs.
+		const text = stripTags(html);
+		expect(text).toContain("SurrealDB Cloud allows you to connect.");
+		expect(text).toContain("1. Create Instance.");
+		expect(text).toContain("When creating an instance");
+		expect(text).toContain("You can connect via Surrealist");
+		expect(text).toContain("closely integrated");
+		// Links inside both tabs survive.
+		expect(html).toContain('href="/docs/x"');
+		expect(html).toContain('href="/docs/y"');
+	});
+
+	it("renders a single-paragraph Tabs block (regression)", () => {
+		const content = `<Tabs syncKey="s">
 <TabItem label="First">
 Alpha content.
 </TabItem>
@@ -153,21 +153,21 @@ Alpha content.
 Beta content.
 </TabItem>
 </Tabs>`;
-        const html = shell(
-            <MarkdownViewer
-                content={content}
-                components={EAGER_COMPONENTS}
-            />,
-        );
-        expect(html).toContain('data-labels="First|Second"');
-        expect(html).not.toContain("Tab 2");
-        const text = stripTags(html);
-        expect(text).toContain("Alpha content.");
-        expect(text).toContain("Beta content.");
-    });
-
-    it("renders block content around a Tabs block", () => {
-        const content = `# Heading
+		const html = shell(
+			<MarkdownViewer
+				content={content}
+				components={EAGER_COMPONENTS}
+			/>,
+		);
+		expect(html).toContain('data-labels="First|Second"');
+		expect(html).not.toContain("Tab 2");
+		const text = stripTags(html);
+		expect(text).toContain("Alpha content.");
+		expect(text).toContain("Beta content.");
+	});
+
+	it("renders block content around a Tabs block", () => {
+		const content = `# Heading
 
 Intro paragraph.
 
@@ -181,23 +181,23 @@ Second tab.
 </Tabs>
 
 Outro paragraph.`;
-        const html = shell(
-            <MarkdownViewer
-                content={content}
-                components={EAGER_COMPONENTS}
-            />,
-        );
-        const text = stripTags(html);
-        expect(text).toContain("Heading");
-        expect(text).toContain("Intro paragraph.");
-        expect(text).toContain("Outro paragraph.");
-        expect(html).toContain('data-labels="One|Two"');
-        expect(text).toContain("First tab.");
-        expect(text).toContain("Second tab.");
-    });
-
-    it("renders nested block components (Tabs inside a TabItem)", () => {
-        const content = `<Tabs syncKey="outer">
+		const html = shell(
+			<MarkdownViewer
+				content={content}
+				components={EAGER_COMPONENTS}
+			/>,
+		);
+		const text = stripTags(html);
+		expect(text).toContain("Heading");
+		expect(text).toContain("Intro paragraph.");
+		expect(text).toContain("Outro paragraph.");
+		expect(html).toContain('data-labels="One|Two"');
+		expect(text).toContain("First tab.");
+		expect(text).toContain("Second tab.");
+	});
+
+	it("renders nested block components (Tabs inside a TabItem)", () => {
+		const content = `<Tabs syncKey="outer">
 <TabItem label="Outer A">
 Outer A body.
 
@@ -214,21 +214,21 @@ Inner Y body.
 Outer B body.
 </TabItem>
 </Tabs>`;
-        const html = shell(
-            <MarkdownViewer
-                content={content}
-                components={EAGER_COMPONENTS}
-            />,
-        );
-        // Outer group has exactly the two authored tabs.
-        expect(html).toContain('data-labels="Outer A|Outer B"');
-        // Inner group nested inside Outer A has its own two tabs.
-        expect(html).toContain('data-labels="Inner X|Inner Y"');
-        expect(html).not.toContain("Tab 2");
-        const text = stripTags(html);
-        expect(text).toContain("Outer A body.");
-        expect(text).toContain("Outer B body.");
-        expect(text).toContain("Inner X body.");
-        expect(text).toContain("Inner Y body.");
-    });
+		const html = shell(
+			<MarkdownViewer
+				content={content}
+				components={EAGER_COMPONENTS}
+			/>,
+		);
+		// Outer group has exactly the two authored tabs.
+		expect(html).toContain('data-labels="Outer A|Outer B"');
+		// Inner group nested inside Outer A has its own two tabs.
+		expect(html).toContain('data-labels="Inner X|Inner Y"');
+		expect(html).not.toContain("Tab 2");
+		const text = stripTags(html);
+		expect(text).toContain("Outer A body.");
+		expect(text).toContain("Outer B body.");
+		expect(text).toContain("Inner X body.");
+		expect(text).toContain("Inner Y body.");
+	});
 });