test(view:codeblock:mermaid): Check more config cases

src/utils/mermaid.ts

@@ -4,7 +4,6 @@ import type {
 	BCNodeAttributes,
 	EdgeAttribute,
 } from "src/graph/MyMultiGraph";
-import type { ShowNodeOptions } from "src/interfaces/settings";
 import { remove_duplicates_by } from "./arrays";
 import { remove_nullish_keys, untyped_pick } from "./objects";
 import { url_search_params } from "./url";
@@ -25,14 +24,16 @@ const from_edges = (
 	config?: {
 		kind?: "flowchart" | "graph";
 		direction?: MermaidDirection;
-		show_node_options?: ShowNodeOptions;
 		show_attributes?: EdgeAttribute[];
 		get_node_label?: (id: string, attr: BCNodeAttributes) => string;
 		renderer?: MermaidRenderer;
 		click?:
 			| { method: "class" }
 			| { method: "callback"; callback_name: string }
-			| { method: "href"; getter: (target_id: string) => string };
+			| {
+					method: "href";
+					getter: (id: string, attr: BCNodeAttributes) => string;
+			  };
 	},
 ) => {
 	const { direction, kind, renderer, get_node_label } = Object.assign(
@@ -42,7 +43,7 @@ const from_edges = (
 
 	const lines = [
 		// TODO: If I add 'graph' as an option, double-check if the below "flowchart" property needs to change accordingly
-		`%%{init: {"flowchart": {"defaultRenderer": "${renderer}"}} }%%`,
+		`%%{init: {"${kind}": {"defaultRenderer": "${renderer}"}} }%%`,
 		`${kind} ${direction}`,
 	];
 
@@ -112,7 +113,7 @@ const from_edges = (
 		case "href": {
 			node_map.forEach((node, path) => {
 				lines.push(
-					`\tclick ${node.i} "${(<Extract<(typeof config)["click"], { method: "href" }>>config.click)?.getter(path)}"`,
+					`\tclick ${node.i} "${(<Extract<(typeof config)["click"], { method: "href" }>>config.click)?.getter(path, node.attr)}"`,
 				);
 			});
 

tests/utils/mermaid.test.ts

@@ -3,12 +3,64 @@ import { _mock_edge } from "tests/__mocks__/graph";
 import { describe, test } from "vitest";
 
 describe("from_edges", () => {
-	test("should create a mermaid flowchart from edges", (t) => {
+	const edges = [
+		_mock_edge("a.md", "b.md", { explicit: true, field: "up" }),
+		_mock_edge("b.md", "c.md", { explicit: false, field: "down" }),
+	];
+
+	test("!config", (t) => {
+		t.expect(Mermaid.from_edges(edges).trim()).toBe(
+			`
+%%{init: {"flowchart": {"defaultRenderer": "dagre"}} }%%
+flowchart LR
+\t0("a.md")
+\t1("b.md")
+\t2("c.md")
+
+\t0 --> 1
+\t1 -.-> 2`.trimStart(),
+		);
+	});
+
+	test("config.kind,direction,renderer", (t) => {
 		t.expect(
-			Mermaid.from_edges([
-				_mock_edge("a.md", "b.md", { explicit: true, field: "up" }),
-				_mock_edge("b.md", "c.md", { explicit: false, field: "down" }),
-			]).trim(),
+			Mermaid.from_edges(edges, {
+				kind: "graph",
+				direction: "TB",
+				renderer: "elk",
+			}).trim(),
+		).toBe(
+			`
+%%{init: {"graph": {"defaultRenderer": "elk"}} }%%
+graph TB
+\t0("a.md")
+\t1("b.md")
+\t2("c.md")
+
+\t0 --> 1
+\t1 -.-> 2`.trimStart(),
+		);
+	});
+
+	test("config.show_attributes", (t) => {
+		t.expect(
+			Mermaid.from_edges(edges, { show_attributes: ["field"] }).trim(),
+		).toBe(
+			`
+%%{init: {"flowchart": {"defaultRenderer": "dagre"}} }%%
+flowchart LR
+\t0("a.md")
+\t1("b.md")
+\t2("c.md")
+
+\t0 -->|"up"| 1
+\t1 -.->|"down"| 2`.trimStart(),
+		);
+	});
+
+	test("config.click.class", (t) => {
+		t.expect(
+			Mermaid.from_edges(edges, { click: { method: "class" } }).trim(),
 		).toBe(
 			`
 %%{init: {"flowchart": {"defaultRenderer": "dagre"}} }%%
@@ -18,7 +70,9 @@ flowchart LR
 \t2("c.md")
 
 \t0 --> 1
-\t1 -.-> 2`.trimStart(),
+\t1 -.-> 2
+
+\tclass 0,1,2 internal-link`.trimStart(),
 		);
 	});
 });