@marimo-team/islands 0.23.15-dev32 → 0.23.15-dev4

package/src/core/islands/components/__tests__/web-components.test.tsx

@@ -1,214 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { act } from "react";
-import {
-  afterAll,
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-} from "vitest";
-import { cellId } from "@/__tests__/branded";
-import { MockNotebook } from "@/__mocks__/notebook";
-import { MockRequestClient } from "@/__mocks__/requests";
-import { notebookAtom } from "@/core/cells/cells";
-import {
-  ISLAND_DATA_ATTRIBUTES,
-  ISLAND_TAG_NAMES,
-  ISLANDS_JSON_SCRIPT_TYPE,
-} from "@/core/islands/constants";
-import { requestClientAtom } from "@/core/network/requests";
-import { store } from "@/core/state/jotai";
-import { parseMarimoIslandApps } from "../../parse";
-import { MarimoIslandElement } from "../web-components";
-
-beforeAll(() => {
-  setReactActEnvironment(true);
-  if (!customElements.get(ISLAND_TAG_NAMES.ISLAND)) {
-    customElements.define(ISLAND_TAG_NAMES.ISLAND, MarimoIslandElement);
-  }
-});
-
-afterAll(() => {
-  setReactActEnvironment(false);
-});
-
-beforeEach(() => {
-  store.set(notebookAtom, MockNotebook.notebookState({ cellData: {} }));
-  store.set(requestClientAtom, MockRequestClient.create());
-});
-
-afterEach(async () => {
-  await actAndFlush(() => document.body.replaceChildren());
-  store.set(requestClientAtom, null);
-});
-
-describe("MarimoIslandElement lifecycle", () => {
-  it("binds a reactive island after its runtime cell index is materialized", async () => {
-    setNotebook("outgoing-cell", "outgoing runtime output");
-    const container = document.createElement("div");
-    container.innerHTML = `
-      <marimo-island data-app-id="app-1" data-reactive="true">
-        <marimo-cell-output><div>initial output</div></marimo-cell-output>
-        <marimo-cell-code hidden>${encodeURIComponent("value = 1")}</marimo-cell-code>
-      </marimo-island>
-    `;
-    await actAndFlush(() => document.body.append(container));
-
-    const island = container.querySelector<HTMLElement>(
-      ISLAND_TAG_NAMES.ISLAND,
-    );
-    expect(island).not.toBeNull();
-    expect(island?.getAttribute("data-status")).toBeNull();
-
-    await actAndFlush(() => {
-      parseMarimoIslandApps(container);
-    });
-
-    expect(island?.textContent).toContain("outgoing runtime output");
-
-    await actAndFlush(() => {
-      setNotebook("runtime-cell");
-    });
-
-    expect(island?.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
-    expect(island?.getAttribute("data-status")).toBe("idle");
-
-    await actAndFlush(() => {
-      island?.remove();
-      if (island) {
-        container.append(island);
-      }
-    });
-    expect(island?.textContent).toContain("initial output");
-
-    island?.setAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID, "source-cell");
-    island?.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "false");
-    expect((island as MarimoIslandElement | null)?.cellId).toBeUndefined();
-  });
-
-  it("refreshes a reused payload island and clears an old app binding", async () => {
-    const container = document.createElement("div");
-    container.innerHTML = `
-      <marimo-island
-        data-app-id="app-1"
-        data-cell-id="cell-1"
-        data-reactive="true"
-      >
-        <marimo-cell-output><div>old output</div></marimo-cell-output>
-        <marimo-cell-code hidden>${encodeURIComponent('print("old")')}</marimo-cell-code>
-      </marimo-island>
-    `;
-    const script = document.createElement("script");
-    script.type = ISLANDS_JSON_SCRIPT_TYPE;
-    script.textContent = payloadSource({
-      code: 'print("unchanged")',
-      outputHtml: "<div>old output</div>",
-    });
-    container.append(script);
-    await actAndFlush(() => document.body.append(container));
-
-    await actAndFlush(() => {
-      parseMarimoIslandApps(container);
-      script.textContent = payloadSource({
-        code: 'print("unchanged")',
-        outputHtml: "<div>updated output</div>",
-      });
-      parseMarimoIslandApps(container);
-    });
-
-    const island = container.querySelector<HTMLElement>(
-      ISLAND_TAG_NAMES.ISLAND,
-    );
-    expect(island?.textContent).toContain("updated output");
-    expect(island?.textContent).not.toContain("old output");
-    expect(island?.querySelector(ISLAND_TAG_NAMES.CELL_OUTPUT)).toBeNull();
-
-    await actAndFlush(() => {
-      setNotebook("outgoing-cell", "outgoing runtime output");
-    });
-    expect(island?.textContent).toContain("outgoing runtime output");
-
-    await actAndFlush(() => {
-      island?.setAttribute(ISLAND_DATA_ATTRIBUTES.APP_ID, "app-2");
-      island?.setAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID, "cell-2");
-      script.textContent = payloadSource({
-        appId: "app-2",
-        cellId: "cell-2",
-        code: 'print("next")',
-        outputHtml: "<div>next app output</div>",
-      });
-      parseMarimoIslandApps(container);
-    });
-
-    expect(island?.textContent).toContain("next app output");
-    expect(island?.textContent).not.toContain("outgoing runtime output");
-  });
-});
-
-function setNotebook(id: string, output?: string): void {
-  const runtimeCellId = cellId(id);
-  store.set(
-    notebookAtom,
-    MockNotebook.notebookState({
-      cellData: { [runtimeCellId]: {} },
-      cellRuntime: output
-        ? {
-            [runtimeCellId]: {
-              output: {
-                channel: "output",
-                data: `<div>${output}</div>`,
-                mimetype: "text/html",
-                timestamp: 0,
-              },
-            },
-          }
-        : undefined,
-    }),
-  );
-}
-
-function payloadSource({
-  appId = "app-1",
-  cellId = "cell-1",
-  code,
-  outputHtml,
-}: {
-  appId?: string;
-  cellId?: string;
-  code: string;
-  outputHtml: string;
-}): string {
-  return JSON.stringify({
-    schemaVersion: 1,
-    appId,
-    cells: [
-      {
-        cellId,
-        code,
-        outputHtml,
-        outputMimetype: "text/html",
-        reactive: true,
-        displayCode: false,
-        displayOutput: true,
-      },
-    ],
-  });
-}
-
-async function actAndFlush(action: () => void): Promise<void> {
-  await act(async () => {
-    action();
-    await Promise.resolve();
-  });
-}
-
-function setReactActEnvironment(value: boolean): void {
-  (
-    globalThis as typeof globalThis & {
-      IS_REACT_ACT_ENVIRONMENT: boolean;
-    }
-  ).IS_REACT_ACT_ENVIRONMENT = value;
-}

package/src/core/islands/worker/__tests__/controller.test.ts

@@ -1,173 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import type { PyodideInterface } from "pyodide";
-import { describe, expect, it, vi } from "vitest";
-import { ReadonlyWasmController } from "../controller";
-
-class TestController extends ReadonlyWasmController {
-  setPyodide(pyodide: PyodideInterface) {
-    this.pyodide = pyodide;
-  }
-}
-
-function createSessionResources(
-  stopImplementation: () => Promise<void> = () => Promise.resolve(),
-) {
-  const bridge = { destroy: vi.fn() };
-  const init = Object.assign(vi.fn(), { destroy: vi.fn() });
-  const stop = Object.assign(vi.fn(stopImplementation), {
-    destroy: vi.fn(),
-  });
-  const packages = { destroy: vi.fn(), toJs: () => [] };
-  const sessionResources = Object.assign([bridge, init, packages, stop], {
-    destroy: vi.fn(),
-  });
-
-  return { bridge, init, packages, sessionResources, stop };
-}
-
-function createPyodideStub(
-  sessions = Array.from({ length: 4 }, () => createSessionResources()),
-) {
-  const [first] = sessions;
-  if (!first) {
-    throw new Error("At least one session is required");
-  }
-  const loadPackagesFromImports = vi.fn().mockResolvedValue(undefined);
-  const pyodide = {
-    runPython: vi
-      .fn()
-      .mockImplementation(() => sessions.shift()?.sessionResources),
-    loadPackagesFromImports,
-    loadedPackages: {},
-    runPythonAsync: vi.fn(),
-  } as unknown as PyodideInterface;
-
-  return {
-    ...first,
-    loadPackagesFromImports,
-    pyodide,
-  };
-}
-
-function startSession(controller: TestController, code: string) {
-  return controller.startSession({
-    code,
-    filename: `${code}.py`,
-    onMessage: vi.fn(),
-  });
-}
-
-describe("WASM controller session lifecycle", () => {
-  it("stops and releases the active session", async () => {
-    const { init, packages, pyodide, sessionResources, stop } =
-      createPyodideStub();
-    const controller = new TestController();
-    controller.setPyodide(pyodide);
-
-    await startSession(controller, "current");
-    await vi.waitFor(() => expect(init).toHaveBeenCalledOnce());
-    await controller.stopSession();
-
-    expect(stop).toHaveBeenCalledOnce();
-    expect(stop.destroy).toHaveBeenCalledOnce();
-    expect(sessionResources.destroy).toHaveBeenCalledOnce();
-    expect(packages.destroy).toHaveBeenCalledOnce();
-    expect(init.destroy).toHaveBeenCalledOnce();
-  });
-
-  it("loads dependencies serially and skips superseded sessions", async () => {
-    let finishFirstLoad!: () => void;
-    const { loadPackagesFromImports, pyodide } = createPyodideStub();
-    loadPackagesFromImports
-      .mockReturnValueOnce(
-        new Promise<void>((resolve) => {
-          finishFirstLoad = resolve;
-        }),
-      )
-      .mockResolvedValueOnce(undefined);
-    const controller = new TestController();
-    controller.setPyodide(pyodide);
-
-    await startSession(controller, "first_dependency");
-    await startSession(controller, "superseded_dependency");
-    await controller.stopSession();
-    await startSession(controller, "current_dependency");
-
-    expect(loadPackagesFromImports).toHaveBeenCalledOnce();
-    finishFirstLoad();
-    await vi.waitFor(() =>
-      expect(loadPackagesFromImports).toHaveBeenCalledTimes(2),
-    );
-
-    const loadedSources = loadPackagesFromImports.mock.calls.map(
-      ([source]) => source as string,
-    );
-    expect(loadedSources[1]).toContain("current_dependency");
-    expect(loadedSources.join("\n")).not.toContain("superseded_dependency");
-  });
-
-  it("stops every session created for a multi-app page", async () => {
-    const first = createSessionResources();
-    const second = createSessionResources();
-    const { pyodide } = createPyodideStub([first, second]);
-    const controller = new TestController();
-    controller.setPyodide(pyodide);
-
-    await startSession(controller, "first");
-    await startSession(controller, "second");
-    second.bridge.destroy();
-
-    expect(first.stop.destroy).not.toHaveBeenCalled();
-
-    await controller.stopSession();
-
-    expect(first.stop).toHaveBeenCalledOnce();
-    expect(second.stop).toHaveBeenCalledOnce();
-    expect(first.stop.destroy).toHaveBeenCalledOnce();
-    expect(second.stop.destroy).toHaveBeenCalledOnce();
-  });
-
-  it("continues stopping sessions after one stop fails", async () => {
-    const failure = new Error("stop failed");
-    const first = createSessionResources(() => Promise.reject(failure));
-    const second = createSessionResources();
-    const { pyodide } = createPyodideStub([first, second]);
-    const controller = new TestController();
-    controller.setPyodide(pyodide);
-
-    await startSession(controller, "first");
-    await startSession(controller, "second");
-
-    await expect(controller.stopSession()).rejects.toThrow("stop failed");
-    expect(first.stop).toHaveBeenCalledOnce();
-    expect(second.stop).toHaveBeenCalledOnce();
-    expect(first.stop.destroy).not.toHaveBeenCalled();
-    expect(second.stop.destroy).toHaveBeenCalledOnce();
-
-    first.stop.mockResolvedValueOnce(undefined);
-    await controller.stopSession();
-
-    expect(first.stop).toHaveBeenCalledTimes(2);
-    expect(first.stop.destroy).toHaveBeenCalledOnce();
-    expect(second.stop).toHaveBeenCalledOnce();
-  });
-
-  it("reports and retries a falsy stop failure", async () => {
-    const session = createSessionResources(() => Promise.reject(false));
-    const { pyodide } = createPyodideStub([session]);
-    const controller = new TestController();
-    controller.setPyodide(pyodide);
-
-    await startSession(controller, "current");
-
-    await expect(controller.stopSession()).rejects.toBe(false);
-    expect(session.stop.destroy).not.toHaveBeenCalled();
-
-    session.stop.mockResolvedValueOnce(undefined);
-    await controller.stopSession();
-
-    expect(session.stop).toHaveBeenCalledTimes(2);
-    expect(session.stop.destroy).toHaveBeenCalledOnce();
-  });
-});

package/src/hooks/__tests__/useHotkey.test.tsx

@@ -1,88 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { renderHook } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
-import { describe, expect, it, vi } from "vitest";
-import { Functions } from "@/utils/functions";
-import { useHotkey } from "../useHotkey";
-
-// global.hideCode is bound to "Mod-." by default; "mod" accepts ctrl or meta.
-const SHORTCUT = "global.hideCode";
-
-function createWrapper() {
-  const store = createStore();
-  return ({ children }: { children: React.ReactNode }) => (
-    <Provider store={store}>{children}</Provider>
-  );
-}
-
-function press() {
-  const event = new KeyboardEvent("keydown", {
-    key: ".",
-    ctrlKey: true,
-    cancelable: true,
-    bubbles: true,
-  });
-  document.dispatchEvent(event);
-  return event;
-}
-
-describe("useHotkey", () => {
-  it("invokes the callback and prevents default", () => {
-    const callback = vi.fn();
-    renderHook(() => useHotkey(SHORTCUT, callback), {
-      wrapper: createWrapper(),
-    });
-
-    const event = press();
-    expect(callback).toHaveBeenCalledOnce();
-    expect(event.defaultPrevented).toBe(true);
-  });
-
-  it("does not prevent default when the callback returns false", () => {
-    const callback = vi.fn(() => false);
-    renderHook(() => useHotkey(SHORTCUT, callback), {
-      wrapper: createWrapper(),
-    });
-
-    const event = press();
-    expect(callback).toHaveBeenCalledOnce();
-    expect(event.defaultPrevented).toBe(false);
-  });
-
-  it("still swallows the keystroke for NOOP catch-all handlers", () => {
-    renderHook(() => useHotkey(SHORTCUT, Functions.NOOP), {
-      wrapper: createWrapper(),
-    });
-
-    const event = press();
-    expect(event.defaultPrevented).toBe(true);
-  });
-
-  it("neither runs the callback nor prevents default when disabled", () => {
-    const callback = vi.fn();
-    renderHook(() => useHotkey(SHORTCUT, callback, { disabled: true }), {
-      wrapper: createWrapper(),
-    });
-
-    const event = press();
-    expect(callback).not.toHaveBeenCalled();
-    expect(event.defaultPrevented).toBe(false);
-  });
-
-  it("re-enables when disabled flips back to false", () => {
-    const callback = vi.fn();
-    const { rerender } = renderHook(
-      ({ disabled }: { disabled: boolean }) =>
-        useHotkey(SHORTCUT, callback, { disabled }),
-      { wrapper: createWrapper(), initialProps: { disabled: true } },
-    );
-
-    press();
-    expect(callback).not.toHaveBeenCalled();
-
-    rerender({ disabled: false });
-    const event = press();
-    expect(callback).toHaveBeenCalledOnce();
-    expect(event.defaultPrevented).toBe(true);
-  });
-});

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -1,71 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { fireEvent, render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import ImageComparisonComponent from "../ImageComparisonComponent";
-
-const baseProps = {
-  beforeSrc: "before.png",
-  afterSrc: "after.png",
-  value: 50,
-  direction: "horizontal" as const,
-};
-
-describe("ImageComparisonComponent", () => {
-  it("renders the comparison slider with both images", () => {
-    const { getByAltText, container } = render(
-      <ImageComparisonComponent {...baseProps} />,
-    );
-    expect(getByAltText("Before")).toBeTruthy();
-    expect(getByAltText("After")).toBeTruthy();
-    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
-  });
-
-  it("shows a visible error instead of collapsing when an image fails to load", () => {
-    const brokenSrc = "https://example.com/does-not-exist.png";
-    const { getByAltText, queryByText, container } = render(
-      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
-    );
-
-    // No error before the image fails.
-    expect(queryByText(/Failed to load/)).toBeNull();
-
-    fireEvent.error(getByAltText("Before"));
-
-    // The slider is replaced with a visible error mentioning the source, so
-    // the output is never a silent blank.
-    expect(container.querySelector("img-comparison-slider")).toBeNull();
-    const error = queryByText(/Failed to load image/);
-    expect(error).toBeTruthy();
-    expect(error?.textContent).toContain(brokenSrc);
-  });
-
-  it("clears the error when the sources change so new images can load", () => {
-    const brokenSrc = "https://example.com/does-not-exist.png";
-    const { getByAltText, queryByText, container, rerender } = render(
-      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
-    );
-
-    fireEvent.error(getByAltText("Before"));
-    expect(queryByText(/Failed to load/)).toBeTruthy();
-
-    // Re-render with a new source (e.g. the user fixed the notebook): the error
-    // should clear and the slider should mount again rather than stay stuck.
-    rerender(<ImageComparisonComponent {...baseProps} beforeSrc="fixed.png" />);
-    expect(queryByText(/Failed to load/)).toBeNull();
-    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
-  });
-
-  it("truncates long sources (e.g. data URLs) in the error message", () => {
-    const longSrc = `data:image/png;base64,${"A".repeat(200)}`;
-    const { getByAltText, queryByText } = render(
-      <ImageComparisonComponent {...baseProps} afterSrc={longSrc} />,
-    );
-
-    fireEvent.error(getByAltText("After"));
-
-    const error = queryByText(/Failed to load image/);
-    expect(error?.textContent).toContain("…");
-    expect(error?.textContent).not.toContain("A".repeat(200));
-  });
-});

package/src/theme/__tests__/useTheme.test.ts

@@ -1,68 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { afterEach, describe, expect, it } from "vitest";
-import { configOverridesAtom, userConfigAtom } from "@/core/config/config";
-import { defaultUserConfig } from "@/core/config/config-schema";
-import { store } from "@/core/state/jotai";
-import type { Theme } from "../useTheme";
-import { resolvedThemeAtom, visibleForTesting } from "../useTheme";
-
-const { themeFromQueryParam } = visibleForTesting;
-
-function setQuery(search: string): void {
-  window.history.replaceState({}, "", search === "" ? "/" : `/?${search}`);
-}
-
-function setConfigTheme(theme: Theme): void {
-  const config = defaultUserConfig();
-  store.set(userConfigAtom, {
-    ...config,
-    display: { ...config.display, theme },
-  });
-}
-
-afterEach(() => {
-  setQuery("");
-  store.set(userConfigAtom, defaultUserConfig());
-  store.set(configOverridesAtom, {});
-});
-
-describe("themeFromQueryParam", () => {
-  it.each(["light", "dark", "system"] as const)(
-    "returns the valid theme %s",
-    (theme) => {
-      setQuery(`theme=${theme}`);
-      expect(themeFromQueryParam()).toBe(theme);
-    },
-  );
-
-  it("returns undefined when the param is absent", () => {
-    setQuery("");
-    expect(themeFromQueryParam()).toBeUndefined();
-  });
-
-  it("returns undefined for an invalid value", () => {
-    setQuery("theme=blue");
-    expect(themeFromQueryParam()).toBeUndefined();
-  });
-});
-
-describe("resolvedThemeAtom with a theme query param", () => {
-  it("uses the saved config theme when no param is present", () => {
-    setConfigTheme("dark");
-    setQuery("");
-    expect(store.get(resolvedThemeAtom)).toBe("dark");
-  });
-
-  it("lets the query param override the saved config theme", () => {
-    setConfigTheme("light");
-    setQuery("theme=dark");
-    expect(store.get(resolvedThemeAtom)).toBe("dark");
-  });
-
-  it("falls back to the config theme for an invalid param value", () => {
-    setConfigTheme("dark");
-    setQuery("theme=blue");
-    expect(store.get(resolvedThemeAtom)).toBe("dark");
-  });
-});