1import { render } from "pele";
2import { describe, expect, it } from "vite-plus/test";
3
4import { mermaidSvgForNative, withDiagramBackground } from "./mermaidSvg";
5
6describe("mermaidSvgForNative", () => {
7 it("turns Pele's CSS variables and styles into attributes react-native-svg draws", () => {
8 const { svg } = render(
9 'flowchart LR\n A[Client] -->|ws| B(Server)\n B --> C["var(--pele-fg)"]',
10 {
11 links: false,
12 images: false,
13 },
14 );
15
16 const native = mermaidSvgForNative(svg, {
17 "--pele-fg": "#111111",
18 "--pele-line": "#222222",
19 "--pele-font": "Helvetica",
20 });
21
22 expect(native).not.toMatch(/="[^"]*var\(|style=/);
23 // A label that reads like a variable keeps its text.
24 expect(native).toContain(">var(--pele-fg)<");
25 expect(native).toMatch(
26 /^<svg[^>]* fill="#111111"[^>]* font-family="Helvetica" font-size="16">/,
27 );
28 expect(native).toContain('stroke="#222222"');
29 // Colors the theme leaves out keep Pele's fallback, and the corner radius becomes geometry.
30 expect(native).toContain('fill="#f3f3f3"');
31 expect(native).toMatch(/<rect[^>]* rx="4"/);
32 // The exported image fills the viewBox before anything else draws.
33 expect(withDiagramBackground(native, "#fafafa")).toMatch(
34 /^<svg[^>]*><rect x="0" y="0" width="\d+(\.\d+)?" height="\d+(\.\d+)?" fill="#fafafa"\/>/,
35 );
36 });
37});