You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
memos/web/tests/mermaid-block.test.tsx

34 lines
1.1 KiB
TypeScript

import { render, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { MermaidBlock } from "@/components/MemoContent/MermaidBlock";
vi.mock("@/contexts/AuthContext", () => ({
useAuth: () => ({
userGeneralSetting: { theme: "default" },
}),
}));
const renderMermaid = vi.fn(async () => ({ svg: '<svg data-testid="diagram"></svg>' }));
const initializeMermaid = vi.fn();
vi.mock("mermaid", () => ({
default: {
initialize: initializeMermaid,
render: renderMermaid,
},
}));
const codeElement = (content: string) => <code className="language-mermaid">{content}</code>;
describe("MermaidBlock", () => {
it("clears rendered output when code content becomes empty", async () => {
const { container, rerender } = render(<MermaidBlock>{codeElement("graph TD; A-->B")}</MermaidBlock>);
await waitFor(() => expect(container.querySelector(".mermaid-diagram")).not.toBeNull());
rerender(<MermaidBlock>{codeElement("")}</MermaidBlock>);
await waitFor(() => expect(container.querySelector(".mermaid-diagram")).toBeNull());
});
});