1import { renderToStaticMarkup } from "react-dom/server";
2import ReactMarkdown from "react-markdown";
3import remarkGfm from "remark-gfm";
4import { describe, expect, it } from "vite-plus/test";
5
6import { remarkGithubAlerts } from "@t3tools/shared/markdownGithubAlerts";
7
8function renderMarkdown(markdown: string): string {
9 return renderToStaticMarkup(
10 <ReactMarkdown remarkPlugins={[remarkGfm, remarkGithubAlerts]}>{markdown}</ReactMarkdown>,
11 );
12}
13
14describe("remarkGithubAlerts", () => {
15 it("tags a quote whose first line is a marker, and drops the marker line", () => {
16 const html = renderMarkdown("> [!NOTE]\n> The content of the note.");
17
18 expect(html).toContain('data-alert="note"');
19 expect(html).not.toContain("[!NOTE]");
20 expect(html).toContain("The content of the note.");
21 });
22
23 it("keeps content that follows a marker-only paragraph", () => {
24 const html = renderMarkdown("> [!WARNING]\n>\n> ### A heading\n>\n> And a paragraph.");
25
26 expect(html).toContain('data-alert="warning"');
27 expect(html).not.toContain("[!WARNING]");
28 expect(html).toContain("A heading");
29 expect(html).toContain("And a paragraph.");
30 });
31
32 it("tags a quote whose next line opens with an inline node rather than text", () => {
33 const html = renderMarkdown("> [!NOTE]\n> **Medium Risk** Changes live transcript routing.");
34
35 expect(html).toContain('data-alert="note"');
36 expect(html).not.toContain("[!NOTE]");
37 expect(html).toContain("<strong>Medium Risk</strong>");
38 expect(html).toContain("Changes live transcript routing.");
39 });
40
41 it("reads the marker case-insensitively, normalizing the kind", () => {
42 const html = renderMarkdown("> [!important]\n> Read this.");
43
44 expect(html).toContain('data-alert="important"');
45 });
46
47 it("leaves a quote alone when the marker shares its line with anything else", () => {
48 const html = renderMarkdown("> [!NOTE] an ordinary quote");
49
50 expect(html).not.toContain("data-alert");
51 expect(html).toContain("[!NOTE] an ordinary quote");
52 });
53
54 it("leaves an unknown marker as the text it is", () => {
55 const html = renderMarkdown("> [!DANGER]\n> Not one of GitHub's.");
56
57 expect(html).not.toContain("data-alert");
58 expect(html).toContain("[!DANGER]");
59 });
60});