@marimo-team/islands 0.23.17-dev1 → 0.23.17-dev10

package/src/components/editor/actions/export-dialog/__tests__/export-notebook.test.ts

@@ -0,0 +1,178 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ExportedFile } from "@/core/network/types";
+import { exportNotebook } from "../export-notebook";
+import { DEFAULT_EXPORT_OPTIONS, type ExportOptions } from "../state";
+
+type Requests = Parameters<typeof exportNotebook>[0]["requests"];
+
+const FILE: ExportedFile<string> = {
+  contents: "exported",
+  filename: "notebook.txt",
+  mediaType: "text/plain",
+};
+
+function makeOptions(overrides: Partial<ExportOptions> = {}): ExportOptions {
+  return {
+    ...DEFAULT_EXPORT_OPTIONS,
+    ...overrides,
+  };
+}
+
+function makeRequests(): Requests {
+  return {
+    exportAsHTML: vi.fn().mockResolvedValue(FILE),
+    exportAsMarkdown: vi.fn().mockResolvedValue(FILE),
+    exportAsIPYNB: vi.fn().mockResolvedValue(FILE),
+    exportAsPDF: vi.fn().mockResolvedValue({
+      ...FILE,
+      contents: new Blob(),
+      filename: "notebook.pdf",
+      mediaType: "application/pdf",
+    }),
+    exportAsScript: vi.fn().mockResolvedValue(FILE),
+    readCode: vi.fn().mockResolvedValue({
+      contents: "import marimo",
+    }),
+  };
+}
+
+describe("exportNotebook", () => {
+  let requests: Requests;
+  let captureOutputs: ReturnType<typeof vi.fn>;
+  let capturePNG: ReturnType<typeof vi.fn>;
+  let downloadFile: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    requests = makeRequests();
+    captureOutputs = vi.fn().mockResolvedValue(undefined);
+    capturePNG = vi.fn().mockResolvedValue(undefined);
+    downloadFile = vi.fn();
+  });
+
+  const run = (
+    format: Parameters<typeof exportNotebook>[0]["format"],
+    options = makeOptions(),
+  ) =>
+    exportNotebook({
+      format,
+      options,
+      requests,
+      sourceFilename: "notebook.py",
+      htmlFiles: ["data.csv"],
+      captureOutputs,
+      capturePNG,
+      downloadFile,
+    });
+
+  it("passes HTML settings and virtual files through the session API", async () => {
+    await run("html", makeOptions({ html: { includeCode: false } }));
+
+    expect(requests.exportAsHTML).toHaveBeenCalledWith({
+      download: false,
+      files: ["data.csv"],
+      includeCode: false,
+    });
+    expect(downloadFile).toHaveBeenCalledWith(FILE);
+  });
+
+  it("passes the selected Markdown flavor through the session API", async () => {
+    await run("markdown", makeOptions({ markdown: { flavor: "qmd" } }));
+
+    expect(requests.exportAsMarkdown).toHaveBeenCalledWith({
+      download: false,
+      flavor: "qmd",
+    });
+    expect(downloadFile).toHaveBeenCalledWith(FILE);
+  });
+
+  it("captures outputs before an IPYNB export when requested", async () => {
+    const calls: string[] = [];
+    captureOutputs.mockImplementation(async () => {
+      calls.push("capture");
+    });
+    vi.mocked(requests.exportAsIPYNB).mockImplementation(async () => {
+      calls.push("export");
+      return FILE;
+    });
+
+    await run(
+      "ipynb",
+      makeOptions({
+        ipynb: { sortMode: "top-down", includeOutputs: true },
+      }),
+    );
+
+    expect(calls).toEqual(["capture", "export"]);
+    expect(requests.exportAsIPYNB).toHaveBeenCalledWith({
+      download: false,
+      sortMode: "top-down",
+      includeOutputs: true,
+    });
+    expect(downloadFile).toHaveBeenCalledWith(FILE);
+  });
+
+  it("skips browser capture when IPYNB outputs are excluded", async () => {
+    await run("ipynb");
+
+    expect(captureOutputs).not.toHaveBeenCalled();
+    expect(requests.exportAsIPYNB).toHaveBeenCalledWith({
+      download: false,
+      sortMode: "topological",
+      includeOutputs: false,
+    });
+    expect(downloadFile).toHaveBeenCalledWith(FILE);
+  });
+
+  it("captures current outputs before PDF export and sends every option", async () => {
+    const pdf = makeOptions({
+      pdf: {
+        preset: "slides",
+        includeInputs: false,
+        includeOutputs: true,
+        webpdf: false,
+      },
+    });
+
+    await run("pdf", pdf);
+
+    expect(captureOutputs).toHaveBeenCalledOnce();
+    expect(requests.exportAsPDF).toHaveBeenCalledWith(pdf.pdf);
+    expect(downloadFile).toHaveBeenCalledWith(
+      expect.objectContaining({ filename: "notebook.pdf" }),
+    );
+  });
+
+  it("downloads the editable notebook source", async () => {
+    await run("script");
+
+    expect(requests.readCode).toHaveBeenCalledOnce();
+    expect(requests.exportAsScript).not.toHaveBeenCalled();
+    expect(downloadFile).toHaveBeenCalledWith({
+      contents: "import marimo",
+      filename: "notebook.py",
+      mediaType: "text/plain",
+    });
+  });
+
+  it("downloads a flat script through the export API", async () => {
+    await run(
+      "script",
+      makeOptions({
+        script: { type: "flat" },
+      }),
+    );
+
+    expect(requests.exportAsScript).toHaveBeenCalledWith({ download: false });
+    expect(requests.readCode).not.toHaveBeenCalled();
+    expect(downloadFile).toHaveBeenCalledWith(FILE);
+  });
+
+  it("uses client-side capture for PNG", async () => {
+    await run("png");
+
+    expect(capturePNG).toHaveBeenCalledOnce();
+    expect(downloadFile).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/actions/export-dialog/__tests__/state.test.ts

@@ -0,0 +1,234 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { ExportAvailabilityResponse } from "@/core/network/types";
+import {
+  applyExportOptionOverrides,
+  DEFAULT_EXPORT_OPTIONS,
+  type ExportFormat,
+  type ExportOptions,
+  getExportFormatStatus,
+  isExportFormat,
+  mergeExportOptions,
+} from "../state";
+
+const AVAILABLE: ExportAvailabilityResponse = {
+  source: "server",
+  formats: [
+    {
+      format: "ipynb",
+      dependenciesAvailable: true,
+      missingPackages: [],
+    },
+    {
+      format: "pdf",
+      dependenciesAvailable: true,
+      missingPackages: [],
+    },
+  ],
+};
+
+const EXPECTED_DEFAULT_OPTIONS: ExportOptions = {
+  html: { includeCode: true },
+  markdown: { flavor: null },
+  ipynb: { sortMode: "topological", includeOutputs: false },
+  pdf: {
+    preset: "document",
+    includeInputs: true,
+    includeOutputs: true,
+    webpdf: true,
+  },
+  script: { type: "source" },
+};
+
+type StatusOptions = Parameters<typeof getExportFormatStatus>[0];
+
+function status(
+  format: ExportFormat,
+  overrides: Partial<Omit<StatusOptions, "format">> = {},
+) {
+  return getExportFormatStatus({
+    format,
+    options: DEFAULT_EXPORT_OPTIONS,
+    runtime: "server",
+    filename: "notebook.py",
+    availability: { status: "success", data: AVAILABLE },
+    ...overrides,
+  });
+}
+
+describe("export option state", () => {
+  it("adds current defaults to a stored partial option shape", () => {
+    expect(
+      mergeExportOptions({
+        html: { includeCode: false },
+        pdf: { preset: "slides" },
+      }),
+    ).toEqual({
+      ...EXPECTED_DEFAULT_OPTIONS,
+      html: { includeCode: false },
+      pdf: {
+        ...EXPECTED_DEFAULT_OPTIONS.pdf,
+        preset: "slides",
+      },
+    });
+  });
+
+  it("keeps valid stored fields and resets invalid fields", () => {
+    expect(
+      mergeExportOptions({
+        html: { includeCode: "false" },
+        markdown: { flavor: "unknown" },
+        ipynb: { sortMode: "unknown", includeOutputs: true },
+        pdf: {
+          preset: "unknown",
+          includeInputs: false,
+          includeOutputs: "false",
+          webpdf: false,
+        },
+        script: { type: "unknown" },
+      }),
+    ).toEqual({
+      ...EXPECTED_DEFAULT_OPTIONS,
+      ipynb: {
+        ...EXPECTED_DEFAULT_OPTIONS.ipynb,
+        includeOutputs: true,
+      },
+      pdf: {
+        ...EXPECTED_DEFAULT_OPTIONS.pdf,
+        includeInputs: false,
+        webpdf: false,
+      },
+    });
+  });
+
+  it.each([null, { pdf: "invalid" }])(
+    "resets malformed stored options",
+    (stored) => {
+      expect(mergeExportOptions(stored)).toEqual(EXPECTED_DEFAULT_OPTIONS);
+    },
+  );
+
+  it("applies a shortcut preset without resetting sibling options", () => {
+    const options = {
+      ...DEFAULT_EXPORT_OPTIONS,
+      pdf: {
+        preset: "document" as const,
+        includeInputs: false,
+        includeOutputs: false,
+        webpdf: false,
+      },
+    };
+
+    expect(
+      applyExportOptionOverrides(options, {
+        pdf: { preset: "slides" },
+      }).pdf,
+    ).toEqual({
+      ...options.pdf,
+      preset: "slides",
+    });
+    expect(
+      applyExportOptionOverrides(options, {
+        script: { type: "flat" },
+      }).script,
+    ).toEqual({ type: "flat" });
+  });
+
+  it("accepts current formats and rejects unknown values", () => {
+    expect(isExportFormat("markdown")).toBe(true);
+    expect(isExportFormat("wasm")).toBe(false);
+    expect(isExportFormat(null)).toBe(false);
+  });
+});
+
+describe("getExportFormatStatus", () => {
+  it("waits only for formats with server dependencies", () => {
+    expect(status("ipynb", { availability: { status: "pending" } })).toEqual({
+      available: false,
+      reason: { type: "checking-requirements" },
+    });
+    expect(status("html", { availability: { status: "pending" } })).toEqual({
+      available: true,
+    });
+  });
+
+  it("requires a notebook name for file-backed server formats", () => {
+    expect(status("markdown", { filename: null })).toEqual({
+      available: false,
+      reason: { type: "notebook-must-be-named" },
+    });
+  });
+
+  it("requires a saved file for notebook source but not flat script", () => {
+    expect(status("script", { filename: null })).toEqual({
+      available: false,
+      reason: { type: "notebook-must-be-named" },
+    });
+    expect(
+      status("script", {
+        filename: null,
+        options: {
+          ...DEFAULT_EXPORT_OPTIONS,
+          script: { type: "flat" },
+        },
+      }),
+    ).toEqual({ available: true });
+  });
+
+  it("reports missing server packages", () => {
+    expect(
+      status("pdf", {
+        availability: {
+          status: "success",
+          data: {
+            source: "server",
+            formats: [
+              {
+                format: "pdf",
+                dependenciesAvailable: false,
+                missingPackages: ["nbconvert[webpdf]"],
+              },
+            ],
+          },
+        },
+      }),
+    ).toEqual({
+      available: false,
+      reason: {
+        type: "missing-packages",
+        packages: ["nbconvert[webpdf]"],
+      },
+    });
+  });
+
+  it.each([
+    ["html", true, undefined],
+    ["markdown", true, undefined],
+    ["ipynb", false, "wasm-runtime"],
+    ["pdf", true, "wasm-runtime"],
+    ["script", true, undefined],
+    ["png", true, undefined],
+  ] as const)(
+    "describes %s availability in WebAssembly",
+    (format, available, reason) => {
+      expect(
+        status(format, {
+          runtime: "wasm",
+          filename: null,
+          availability: { status: "success", data: null },
+        }),
+      ).toEqual({
+        available,
+        ...(reason ? { reason: { type: reason } } : {}),
+      });
+    },
+  );
+
+  it("allows an export attempt when the availability check fails", () => {
+    expect(status("pdf", { availability: { status: "error" } })).toEqual({
+      available: true,
+      availabilityCheckFailed: true,
+    });
+  });
+});

package/src/components/editor/actions/export-dialog/__tests__/use-export-dialog.test.tsx

@@ -0,0 +1,287 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, renderHook, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { isWasm } from "@/core/wasm/utils";
+import {
+  DEFAULT_EXPORT_OPTIONS,
+  type ExportFormat,
+  exportOptionsAtom,
+  lastExportFormatAtom,
+} from "../state";
+import { useExportDialog } from "../use-export-dialog";
+
+const { downloadHTMLAsImageMock, exportNotebookMock, toastMock } = vi.hoisted(
+  () => ({
+    downloadHTMLAsImageMock: vi.fn().mockResolvedValue(true),
+    exportNotebookMock: vi.fn().mockResolvedValue(undefined),
+    toastMock: vi.fn(() => ({
+      dismiss: vi.fn(),
+      update: vi.fn(),
+    })),
+  }),
+);
+
+vi.mock("@/components/ui/use-toast", () => ({
+  toast: toastMock,
+}));
+
+vi.mock("@/core/wasm/utils", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/wasm/utils")>();
+  return { ...actual, isWasm: vi.fn(() => false) };
+});
+
+vi.mock("@/utils/download", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/utils/download")>();
+  return { ...actual, downloadHTMLAsImage: downloadHTMLAsImageMock };
+});
+
+vi.mock("../export-notebook", () => ({
+  exportNotebook: exportNotebookMock,
+}));
+
+function wrapper({ children }: { children: React.ReactNode }) {
+  return <Provider store={store}>{children}</Provider>;
+}
+
+function renderController(initialFormat?: ExportFormat, onClose = vi.fn()) {
+  return renderHook(() => useExportDialog({ initialFormat, onClose }), {
+    wrapper,
+  });
+}
+
+async function waitForAvailable(
+  getController: () => ReturnType<typeof useExportDialog>,
+) {
+  await waitFor(() =>
+    expect(getController().selected.status.available).toBe(true),
+  );
+}
+
+describe("useExportDialog", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(filenameAtom, "/project/notebook.py");
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+    store.set(exportOptionsAtom, DEFAULT_EXPORT_OPTIONS);
+    store.set(lastExportFormatAtom, "html");
+    vi.mocked(isWasm).mockReturnValue(false);
+    document.title = "Notebook";
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.getElementById("App")?.remove();
+  });
+
+  it("keeps PNG export open when the app view is missing", async () => {
+    exportNotebookMock.mockImplementationOnce(
+      async ({ capturePNG }: { capturePNG: () => Promise<void> }) =>
+        capturePNG(),
+    );
+    const onClose = vi.fn();
+    const { result } = renderController("png", onClose);
+    await waitForAvailable(() => result.current);
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(toastMock).toHaveBeenCalledWith({
+      title: "Failed to download as PNG",
+      description: "The current app view could not be captured.",
+      variant: "danger",
+    });
+    expect(result.current.isExporting).toBe(false);
+    expect(store.get(viewStateAtom).mode).toBe("edit");
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("captures the app view and restores the dialog", async () => {
+    const app = document.createElement("div");
+    app.id = "App";
+    document.body.append(app);
+    const { container: dialogContainer } = render(<div />);
+    const dialog = dialogContainer.firstElementChild as HTMLDivElement;
+    exportNotebookMock.mockImplementationOnce(
+      async ({ capturePNG }: { capturePNG: () => Promise<void> }) =>
+        capturePNG(),
+    );
+    downloadHTMLAsImageMock.mockImplementationOnce(
+      async ({ prepare }: Parameters<typeof downloadHTMLAsImageMock>[0]) => {
+        const cleanup = prepare?.(app);
+        expect(dialogContainer).not.toBeVisible();
+        cleanup?.();
+        return true;
+      },
+    );
+    const onClose = vi.fn();
+    const { result } = renderController("png", onClose);
+    await waitForAvailable(() => result.current);
+    act(() => {
+      result.current.dialogRef.current = dialog;
+    });
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(onClose).toHaveBeenCalledOnce();
+    expect(store.get(viewStateAtom).mode).toBe("edit");
+    expect(dialogContainer).toBeVisible();
+  });
+
+  it("restores the dialog and edit mode when PNG capture fails", async () => {
+    const app = document.createElement("div");
+    app.id = "App";
+    document.body.append(app);
+    const { container: dialogContainer } = render(<div />);
+    const dialog = dialogContainer.firstElementChild as HTMLDivElement;
+    exportNotebookMock.mockImplementationOnce(
+      async ({ capturePNG }: { capturePNG: () => Promise<void> }) =>
+        capturePNG(),
+    );
+    downloadHTMLAsImageMock.mockImplementationOnce(
+      async ({ prepare }: Parameters<typeof downloadHTMLAsImageMock>[0]) => {
+        const cleanup = prepare?.(app);
+        cleanup?.();
+        return false;
+      },
+    );
+    const onClose = vi.fn();
+    const { result } = renderController("png", onClose);
+    await waitForAvailable(() => result.current);
+    act(() => {
+      result.current.dialogRef.current = dialog;
+    });
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(result.current.isExporting).toBe(false);
+    expect(store.get(viewStateAtom).mode).toBe("edit");
+    expect(dialogContainer).toBeVisible();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("does not close a newer modal after unmounting", async () => {
+    let finishExport: (() => void) | undefined;
+    exportNotebookMock.mockImplementationOnce(
+      () =>
+        new Promise<void>((resolve) => {
+          finishExport = resolve;
+        }),
+    );
+    const onClose = vi.fn();
+    const { result, unmount } = renderController(undefined, onClose);
+    await waitForAvailable(() => result.current);
+
+    let submit: Promise<void> | undefined;
+    act(() => {
+      submit = result.current.submit();
+    });
+    await waitFor(() => expect(exportNotebookMock).toHaveBeenCalledOnce());
+
+    unmount();
+    finishExport?.();
+    await submit;
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("keeps the dialog open when a server export fails", async () => {
+    exportNotebookMock.mockRejectedValueOnce(new Error("export failed"));
+    const onClose = vi.fn();
+    const { result } = renderController(undefined, onClose);
+    await waitForAvailable(() => result.current);
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(result.current.isExporting).toBe(false);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("preserves the saved notebook filename for source export", async () => {
+    store.set(filenameAtom, "/project/report.qmd");
+    document.title = "Custom app title";
+    const { result } = renderController("script");
+    await waitForAvailable(() => result.current);
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(exportNotebookMock).toHaveBeenCalledWith(
+      expect.objectContaining({ sourceFilename: "report.qmd" }),
+    );
+  });
+
+  it("uses the page title for WebAssembly source export", async () => {
+    vi.mocked(isWasm).mockReturnValue(true);
+    store.set(filenameAtom, "notebook.py");
+    document.title = "Shared analysis";
+    const { result } = renderController("script");
+    await waitForAvailable(() => result.current);
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(exportNotebookMock).toHaveBeenCalledWith(
+      expect.objectContaining({ sourceFilename: "Shared analysis.py" }),
+    );
+  });
+
+  it("keeps equivalent CLI commands for WebAssembly exports", () => {
+    vi.mocked(isWasm).mockReturnValue(true);
+    const { result } = renderController("html");
+
+    expect(result.current.selected.command).toBe(
+      "marimo export html /project/notebook.py --include-code -o /project/notebook.html",
+    );
+  });
+
+  it("persists the selected format and its options", () => {
+    const first = renderController();
+
+    act(() => {
+      first.result.current.selectFormat("pdf");
+      first.result.current.updateOptions("pdf", { preset: "slides" });
+    });
+    first.unmount();
+
+    const second = renderController();
+    expect(second.result.current.selected.format).toBe("pdf");
+    expect(second.result.current.options.pdf.preset).toBe("slides");
+  });
+
+  it("prints the current view for PDF export in WebAssembly", async () => {
+    vi.mocked(isWasm).mockReturnValue(true);
+    const print = vi.fn();
+    vi.stubGlobal("print", print);
+    const onClose = vi.fn();
+    const { result } = renderController("pdf", onClose);
+
+    expect(result.current.selected.usesBrowserPrint).toBe(true);
+
+    await act(async () => {
+      await result.current.submit();
+    });
+
+    expect(onClose).toHaveBeenCalledOnce();
+    await waitFor(() => expect(print).toHaveBeenCalledOnce());
+    expect(exportNotebookMock).not.toHaveBeenCalled();
+  });
+});