72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { DiagramSourcePanel } from "./DiagramSourcePanel";
|
|
|
|
// Tell React this environment uses act() for event flushing.
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
describe("DiagramSourcePanel", () => {
|
|
const defaultSource = "graph TD\n A --> B";
|
|
|
|
it("shows 'View Mermaid source' trigger in collapsed state", () => {
|
|
render(<DiagramSourcePanel mermaidSource={defaultSource} onRerender={vi.fn()} />);
|
|
expect(screen.getByText("View Mermaid source")).toBeTruthy();
|
|
});
|
|
|
|
it("clicking trigger expands to show textarea with mermaidSource", () => {
|
|
render(<DiagramSourcePanel mermaidSource={defaultSource} onRerender={vi.fn()} />);
|
|
const trigger = screen.getByText("View Mermaid source");
|
|
fireEvent.click(trigger);
|
|
const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
|
|
expect(textarea).toBeTruthy();
|
|
expect(textarea.value).toBe(defaultSource);
|
|
});
|
|
|
|
it("expanded state shows 'Hide source' trigger text", () => {
|
|
render(<DiagramSourcePanel mermaidSource={defaultSource} onRerender={vi.fn()} />);
|
|
const trigger = screen.getByText("View Mermaid source");
|
|
fireEvent.click(trigger);
|
|
expect(screen.getByText("Hide source")).toBeTruthy();
|
|
});
|
|
|
|
it("'Copy source' button has aria-label='Copy source'", () => {
|
|
render(<DiagramSourcePanel mermaidSource={defaultSource} onRerender={vi.fn()} />);
|
|
const trigger = screen.getByText("View Mermaid source");
|
|
fireEvent.click(trigger);
|
|
const copyBtn = screen.getByRole("button", { name: "Copy source" });
|
|
expect(copyBtn).toBeTruthy();
|
|
expect(copyBtn.getAttribute("aria-label")).toBe("Copy source");
|
|
});
|
|
|
|
it("editing textarea and blurring shows 'Re-render diagram' button", () => {
|
|
render(<DiagramSourcePanel mermaidSource={defaultSource} onRerender={vi.fn()} />);
|
|
const trigger = screen.getByText("View Mermaid source");
|
|
fireEvent.click(trigger);
|
|
const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
|
|
fireEvent.change(textarea, { target: { value: "graph LR\n X --> Y" } });
|
|
fireEvent.blur(textarea);
|
|
expect(screen.getByText("Re-render diagram")).toBeTruthy();
|
|
});
|
|
|
|
it("clicking 'Re-render diagram' calls onRerender with edited source", () => {
|
|
const onRerender = vi.fn();
|
|
render(<DiagramSourcePanel mermaidSource={defaultSource} onRerender={onRerender} />);
|
|
const trigger = screen.getByText("View Mermaid source");
|
|
fireEvent.click(trigger);
|
|
const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
|
|
const editedSource = "graph LR\n X --> Y";
|
|
fireEvent.change(textarea, { target: { value: editedSource } });
|
|
fireEvent.blur(textarea);
|
|
const rerenderBtn = screen.getByText("Re-render diagram");
|
|
fireEvent.click(rerenderBtn);
|
|
expect(onRerender).toHaveBeenCalledWith(editedSource);
|
|
});
|
|
});
|