@elabs-ai/components-editor 4.0.0

package/src/markdown-editor/markdown-editor.paste-embed.test.tsx

@@ -0,0 +1,297 @@
+/**
+ * Tests for the paste-embed feature (onEmbedAsset hook).
+ *
+ * Two test layers:
+ *
+ * 1. Headless Milkdown (no React) — same pattern as insert-directive.test.ts.
+ *    Boots a real ProseMirror editor with the paste-embed plugin, calls
+ *    `embedAsset()` directly against the live view, and asserts the document
+ *    serializes correctly. This is the reliable path: no DOM-event synthesis,
+ *    no symbol-based view extraction.
+ *
+ * 2. React + @testing-library — smoke-tests that the prop wires through the
+ *    React component tree (MarkdownEditor mounts without onEmbedAsset; mounts
+ *    with it; the editor still shows its content).
+ *
+ * We mock `@elabs-ai/components-ui` to intercept `toast.error` calls (the Toaster is not
+ * mounted in jsdom; the toast call is a side-effect, not the only error cue).
+ */
+
+// vi.hoisted() ensures the variable is initialized before the hoisted vi.mock() call.
+const { mockToastError } = vi.hoisted(() => ({ mockToastError: vi.fn() }));
+vi.mock("@elabs-ai/components-ui", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  return {
+    ...actual,
+    toast: Object.assign(vi.fn(), { error: mockToastError, success: vi.fn() }),
+  };
+});
+
+import { Editor, defaultValueCtx, editorViewCtx, rootCtx } from "@milkdown/kit/core";
+import { commonmark } from "@milkdown/kit/preset/commonmark";
+import { gfm } from "@milkdown/kit/preset/gfm";
+import { getMarkdown } from "@milkdown/kit/utils";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { MarkdownEditor } from "./markdown-editor";
+import { embedAsset, pasteEmbedPlugin } from "./paste-embed";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+// ---------------------------------------------------------------------------
+// Headless Milkdown helper (mirrors insert-directive.test.ts)
+// ---------------------------------------------------------------------------
+
+/** Boot a headless Milkdown editor with the paste-embed plugin wired. */
+async function makeEditor(
+  onEmbedAsset?: (file: File) => Promise<string>,
+  initial = "",
+): Promise<Editor> {
+  const root = document.createElement("div");
+  document.body.appendChild(root);
+  const editor = await Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, root);
+      ctx.set(defaultValueCtx, initial);
+    })
+    .use(commonmark)
+    .use(gfm)
+    .use(pasteEmbedPlugin(onEmbedAsset))
+    .create();
+  return editor;
+}
+
+/** Serialize the editor's current doc to markdown. */
+function serialize(editor: Editor): string {
+  return editor.action(getMarkdown());
+}
+
+/** Get the live ProseMirror view from a Milkdown editor. */
+function getView(editor: Editor) {
+  return editor.action((ctx) => ctx.get(editorViewCtx));
+}
+
+// ---------------------------------------------------------------------------
+// 1. INSERT PATH: onEmbedAsset resolves → image node in document
+// ---------------------------------------------------------------------------
+describe("insert path (headless, resolve)", () => {
+  let editor: Editor;
+
+  beforeEach(async () => {
+    editor = await makeEditor(undefined, "Hello world.\n");
+  });
+
+  afterEach(async () => {
+    await editor.destroy();
+    document.body.innerHTML = "";
+  });
+
+  test("embedAsset inserts an image node that serializes to markdown", async () => {
+    const resolvedPath = "/assets/test-image.png";
+    const onEmbedAsset = vi.fn().mockResolvedValue(resolvedPath);
+    const view = getView(editor);
+    const file = new File(["px"], "photo.png", { type: "image/png" });
+
+    embedAsset(view, file, view.state.selection.from, onEmbedAsset);
+
+    // Wait for the async resolve to settle.
+    await vi.waitFor(
+      () => {
+        const md = serialize(editor);
+        expect(md).toContain("![");
+        expect(md).toContain(resolvedPath);
+      },
+      { timeout: 5000 },
+    );
+
+    expect(onEmbedAsset).toHaveBeenCalledWith(file);
+    // The alt text is derived from the filename stem.
+    expect(serialize(editor)).toContain("photo");
+  });
+
+  test("placeholder decoration is added synchronously then removed after resolve", async () => {
+    let resolveUpload!: (path: string) => void;
+    const onEmbedAsset = vi.fn(
+      () =>
+        new Promise<string>((res) => {
+          resolveUpload = res;
+        }),
+    );
+
+    const view = getView(editor);
+    const file = new File(["px"], "banner.png", { type: "image/png" });
+
+    embedAsset(view, file, view.state.selection.from, onEmbedAsset);
+
+    // Placeholder chip DOM node is rendered by ProseMirror as a widget decoration
+    // inside the editor root div (which the headless test appended to document.body).
+    await vi.waitFor(
+      () => {
+        expect(document.body.querySelector('[role="status"]')).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
+
+    // Resolve the upload.
+    resolveUpload("/uploads/banner.png");
+
+    // After resolve: placeholder gone, image in doc.
+    await vi.waitFor(
+      () => {
+        expect(document.body.querySelector('[role="status"]')).toBeFalsy();
+        expect(serialize(editor)).toContain("![");
+      },
+      { timeout: 3000 },
+    );
+  });
+
+  test("image node alt is the filename stem (without extension)", async () => {
+    const onEmbedAsset = vi.fn().mockResolvedValue("/cdn/my-photo.png");
+    const view = getView(editor);
+    const file = new File(["px"], "my-photo.png", { type: "image/png" });
+
+    embedAsset(view, file, view.state.selection.from, onEmbedAsset);
+
+    await vi.waitFor(() => expect(serialize(editor)).toContain("my-photo"), { timeout: 5000 });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// 2. FAILURE PATH: onEmbedAsset rejects → no broken image, error chip shown
+// ---------------------------------------------------------------------------
+describe("failure path (headless, reject)", () => {
+  let editor: Editor;
+
+  beforeEach(async () => {
+    editor = await makeEditor(undefined, "Hello world.\n");
+  });
+
+  afterEach(async () => {
+    await editor.destroy();
+    document.body.innerHTML = "";
+  });
+
+  test("on reject: no broken image in doc, error chip shown, toast.error called", async () => {
+    const onEmbedAsset = vi.fn().mockRejectedValue(new Error("Network timeout"));
+    const view = getView(editor);
+    const file = new File(["px"], "fail.png", { type: "image/png" });
+
+    embedAsset(view, file, view.state.selection.from, onEmbedAsset);
+
+    await vi.waitFor(
+      () => {
+        // Error chip must appear.
+        expect(document.body.querySelector('[role="alert"]')).toBeTruthy();
+      },
+      { timeout: 5000 },
+    );
+
+    // No `![` in the serialized markdown — broken image was never inserted.
+    expect(serialize(editor)).not.toContain("![");
+
+    // toast.error was called with the error message.
+    expect(mockToastError).toHaveBeenCalledWith(expect.stringContaining("Network timeout"));
+  });
+
+  test("error chip carries role=alert and aria-live=assertive", async () => {
+    const onEmbedAsset = vi.fn().mockRejectedValue(new Error("403 Forbidden"));
+    const view = getView(editor);
+    const file = new File(["px"], "denied.png", { type: "image/png" });
+
+    embedAsset(view, file, view.state.selection.from, onEmbedAsset);
+
+    await vi.waitFor(() => expect(document.body.querySelector('[role="alert"]')).toBeTruthy(), {
+      timeout: 5000,
+    });
+
+    const chip = document.body.querySelector('[role="alert"]') as HTMLElement | null;
+    expect(chip).not.toBeNull();
+    expect(chip!.getAttribute("aria-live")).toBe("assertive");
+  });
+
+  test("no error chip leaks from a previous test (isolation)", async () => {
+    // Each test gets a fresh editor; afterEach calls document.body.innerHTML = ""
+    // so chips from prior tests are gone. Confirm the DOM starts clean.
+    expect(document.body.querySelector('[role="alert"]')).toBeFalsy();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// 3. MULTIPLE FILES: each gets its own placeholder → each resolves independently
+// ---------------------------------------------------------------------------
+describe("multiple files", () => {
+  let editor: Editor;
+
+  beforeEach(async () => {
+    editor = await makeEditor(undefined, "");
+  });
+
+  afterEach(async () => {
+    await editor.destroy();
+    document.body.innerHTML = "";
+  });
+
+  test("two simultaneous embeds each insert their own image", async () => {
+    const onEmbedAsset = vi
+      .fn()
+      .mockResolvedValueOnce("/cdn/alpha.png")
+      .mockResolvedValueOnce("/cdn/beta.png");
+
+    const view = getView(editor);
+    const fileA = new File(["px"], "alpha.png", { type: "image/png" });
+    const fileB = new File(["px"], "beta.png", { type: "image/png" });
+
+    embedAsset(view, fileA, view.state.selection.from, onEmbedAsset);
+    embedAsset(view, fileB, view.state.selection.from, onEmbedAsset);
+
+    await vi.waitFor(
+      () => {
+        const md = serialize(editor);
+        expect(md).toContain("/cdn/alpha.png");
+        expect(md).toContain("/cdn/beta.png");
+      },
+      { timeout: 5000 },
+    );
+  });
+});
+
+// ---------------------------------------------------------------------------
+// 4. REACT PROP CONTRACT: onEmbedAsset is accepted + forwarded correctly
+// ---------------------------------------------------------------------------
+describe("React component prop contract", () => {
+  test("MarkdownEditor mounts normally without onEmbedAsset prop", async () => {
+    render(<MarkdownEditor defaultValue="# No embed" />);
+    await waitFor(() => expect(screen.getByText("No embed")).toBeInTheDocument(), {
+      timeout: 8000,
+    });
+  });
+
+  test("MarkdownEditor accepts onEmbedAsset prop without type errors", async () => {
+    const onEmbedAsset = vi.fn().mockResolvedValue("/path/to/image.png");
+    render(<MarkdownEditor defaultValue="# With embed" onEmbedAsset={onEmbedAsset} />);
+    await waitFor(() => expect(screen.getByText("With embed")).toBeInTheDocument(), {
+      timeout: 8000,
+    });
+    // onEmbedAsset is set but not triggered (no paste/drop in this test).
+    expect(onEmbedAsset).not.toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// 5. UNIT: pasteEmbedPlugin is a no-op when onEmbedAsset is undefined
+// ---------------------------------------------------------------------------
+describe("pasteEmbedPlugin no-op without hook", () => {
+  test("plugin does not intercept when onEmbedAsset is not provided", async () => {
+    const editor = await makeEditor(undefined, "plain text\n");
+    // handlePaste returns false for image files when no onEmbedAsset is provided —
+    // we verify indirectly: the doc is unchanged and no decoration is added.
+    const md = serialize(editor);
+    expect(md).toContain("plain text");
+    await editor.destroy();
+    document.body.innerHTML = "";
+  });
+});