José Almeida
a2d98f5d3e
* fix(web): replace mermaid bomb-icon error flood with toast notifications mermaid.render() called without a container leaves orphaned error elements (with bomb icons) in document.body on parse failures. Clean up these orphans after every render and show an error toast instead. * fix(web): address PR review — prevent toast flooding, include error detail, add hook tests - Add latestRenderId guard in TipTap MermaidNodeView to skip stale renders, preventing toast spam on every keystroke - Include mermaid error message in toast description via CustomEvent detail - Add useMermaidErrorToast hook tests (event listener + cleanup) * style(web): format mermaid-error-toast test with prettier * fix(web): include error message in MermaidBlock toast description
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
import { renderHook, act } from "@testing-library/react";
|
|
import { useMermaidErrorToast } from "./mermaid-error-toast";
|
|
import { MERMAID_ERROR_EVENT } from "./mermaid-utils";
|
|
|
|
const mockToast = vi.fn();
|
|
|
|
vi.mock("@/components/toast-provider", () => ({
|
|
useToast: () => ({ toast: mockToast, updateToast: vi.fn(), dismissToast: vi.fn() }),
|
|
}));
|
|
|
|
beforeEach(() => {
|
|
mockToast.mockClear();
|
|
});
|
|
|
|
describe("useMermaidErrorToast", () => {
|
|
it("calls toast with error details when event fires", () => {
|
|
const { unmount } = renderHook(() => useMermaidErrorToast());
|
|
|
|
act(() => {
|
|
document.dispatchEvent(
|
|
new CustomEvent(MERMAID_ERROR_EVENT, { detail: { message: "Parse error at line 1" } }),
|
|
);
|
|
});
|
|
|
|
expect(mockToast).toHaveBeenCalledOnce();
|
|
expect(mockToast).toHaveBeenCalledWith({
|
|
title: "Failed to render diagram",
|
|
description: "Parse error at line 1",
|
|
variant: "error",
|
|
});
|
|
|
|
unmount();
|
|
});
|
|
|
|
it("removes listener on unmount", () => {
|
|
const { unmount } = renderHook(() => useMermaidErrorToast());
|
|
unmount();
|
|
|
|
act(() => {
|
|
document.dispatchEvent(new CustomEvent(MERMAID_ERROR_EVENT, { detail: { message: "oops" } }));
|
|
});
|
|
|
|
expect(mockToast).not.toHaveBeenCalled();
|
|
});
|
|
});
|