@marimo-team/islands 0.25.3-dev21 → 0.25.3-dev210

package/src/core/cells/__tests__/notebook-outline.test.ts

@@ -0,0 +1,122 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createStore } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { CONFIG } from "@/core/notebook/document/__tests__/fixtures";
+import {
+  createNotebookActions,
+  notebookAtom,
+  notebookOutline,
+  notebookReducer,
+} from "../cells";
+import type { Outline } from "../outline";
+
+const first = cellId("first");
+const second = cellId("second");
+const firstOutline: Outline = {
+  items: [{ name: "First", level: 1, by: { id: "first" } }],
+};
+const secondOutline: Outline = {
+  items: [{ name: "Second", level: 2, by: { id: "second" } }],
+};
+
+function setup() {
+  const store = createStore();
+  store.set(
+    notebookAtom,
+    MockNotebook.notebookState({
+      cellData: { [first]: { code: "x = 1" }, [second]: {} },
+      cellRuntime: {
+        [first]: { outline: firstOutline },
+        [second]: { outline: secondOutline },
+      },
+    }),
+  );
+  const actions = createNotebookActions((action) =>
+    store.set(notebookAtom, (state) => notebookReducer(state, action)),
+  );
+  return { store, actions };
+}
+
+describe("notebookOutline", () => {
+  it("does not notify outline subscribers when cell code changes", () => {
+    const { store } = setup();
+    const initial = store.get(notebookOutline);
+    const listener = vi.fn();
+    const unsubscribe = store.sub(notebookOutline, listener);
+
+    store.set(notebookAtom, (state) => ({
+      ...state,
+      cellData: {
+        ...state.cellData,
+        [first]: { ...state.cellData[first], code: "x = 2" },
+      },
+    }));
+
+    expect(store.get(notebookOutline)).toBe(initial);
+    expect(listener).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+
+  it("updates headings when runtime outlines change or are removed", () => {
+    const { store } = setup();
+    const updated: Outline = {
+      items: [{ name: "Updated", level: 1, by: { id: "updated" } }],
+    };
+
+    for (const outline of [updated, null]) {
+      store.set(notebookAtom, (state) => ({
+        ...state,
+        cellRuntime: {
+          ...state.cellRuntime,
+          [first]: { ...state.cellRuntime[first], outline },
+        },
+      }));
+      expect(store.get(notebookOutline)).toEqual({
+        items: [...(outline?.items ?? []), ...secondOutline.items],
+      });
+    }
+  });
+
+  it("keeps headings in cell order after moving and deleting cells", () => {
+    const { store, actions } = setup();
+    actions.reconcileDocument({
+      order: [second, first],
+      cells: new Map([
+        [first, { id: first, code: "x = 1", name: "_", config: CONFIG }],
+        [second, { id: second, code: "y = 2", name: "_", config: CONFIG }],
+      ]),
+    });
+    expect(store.get(notebookOutline)).toEqual({
+      items: [...secondOutline.items, ...firstOutline.items],
+    });
+
+    actions.reconcileDocument({
+      order: [first],
+      cells: new Map([
+        [first, { id: first, code: "x = 1", name: "_", config: CONFIG }],
+      ]),
+    });
+    expect(store.get(notebookOutline)).toEqual(firstOutline);
+  });
+
+  it("notifies subscribers when output is replaced with the same headings", () => {
+    const { store } = setup();
+    const listener = vi.fn();
+    const unsubscribe = store.sub(notebookOutline, listener);
+
+    store.set(notebookAtom, (state) => ({
+      ...state,
+      cellRuntime: {
+        ...state.cellRuntime,
+        [first]: { ...state.cellRuntime[first], outline: { ...firstOutline } },
+      },
+    }));
+
+    // Consumers must reconnect to replacement heading elements in the DOM.
+    expect(listener).toHaveBeenCalledOnce();
+    unsubscribe();
+  });
+});

package/src/core/cells/__tests__/outputs.test.tsx

@@ -2,116 +2,134 @@
 
 import { act, renderHook } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { MockNotebook } from "@/__mocks__/notebook";
-import { notebookAtom } from "@/core/cells/cells";
+import { afterEach, describe, expect, it } from "vitest";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { CellId } from "@/core/cells/ids";
+import { DocumentProvider } from "@/core/notebook/document";
+import {
+  cell,
+  CONFIG,
+  document as documentOf,
+  withCells,
+} from "@/core/notebook/document/__tests__/fixtures";
 import { type AppMode, viewStateAtom } from "@/core/mode";
 import { useExpandedConsoleOutput, useExpandedOutput } from "../outputs";
 
-const saveCellConfig = vi.fn().mockResolvedValue(null);
+const stops: Array<() => void> = [];
 
-vi.mock("@/core/network/requests", () => ({
-  getRequestClient: () => ({ saveCellConfig }),
-}));
+afterEach(() => {
+  for (const stop of stops.splice(0)) {
+    stop();
+  }
+});
 
 function setup(opts: { mode: AppMode; expandOutput?: boolean }) {
   const cellId = CellId.create();
   const store = createStore();
-  store.set(
-    notebookAtom,
-    MockNotebook.notebookState({
-      cellData: {
-        [cellId]: { config: { expand_output: opts.expandOutput ?? false } },
+  const { model, stop } = mockDocumentModel(
+    store,
+    withCells(
+      documentOf(),
+      {
+        c1: null,
+        c2: null,
+        [cellId]: cell(cellId, "", {
+          config: { ...CONFIG, expand_output: opts.expandOutput ?? false },
+        }),
       },
-    }),
+      [cellId],
+    ),
   );
+  stops.push(stop);
   store.set(viewStateAtom, { mode: opts.mode, cellAnchor: null });
 
-  const { result } = renderHook(() => useExpandedOutput(cellId), {
-    wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
-  });
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
+  );
+  const expanded = () =>
+    store.get(model.documentAtom)?.cells.get(cellId)?.config.expand_output;
 
-  return { cellId, store, result };
+  return { cellId, store, wrapper, expanded };
 }
 
-const configOf = (store: ReturnType<typeof createStore>, cellId: CellId) =>
-  store.get(notebookAtom).cellData[cellId].config;
-
 describe("useExpandedOutput", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
   it("reads the initial state from the cell's expand_output config", () => {
-    expect(setup({ mode: "edit" }).result.current[0]).toBe(false);
-    expect(setup({ mode: "edit", expandOutput: true }).result.current[0]).toBe(
-      true,
-    );
+    const collapsed = setup({ mode: "edit" });
+    expect(
+      renderHook(() => useExpandedOutput(collapsed.cellId), {
+        wrapper: collapsed.wrapper,
+      }).result.current[0],
+    ).toBe(false);
+
+    const expanded = setup({ mode: "edit", expandOutput: true });
+    expect(
+      renderHook(() => useExpandedOutput(expanded.cellId), {
+        wrapper: expanded.wrapper,
+      }).result.current[0],
+    ).toBe(true);
   });
 
   it("persists the toggle to the cell's config in edit mode", () => {
-    const { cellId, store, result } = setup({ mode: "edit" });
+    const { cellId, wrapper, expanded } = setup({ mode: "edit" });
+    const { result } = renderHook(() => useExpandedOutput(cellId), {
+      wrapper,
+    });
 
     act(() => result.current[1](true));
 
     expect(result.current[0]).toBe(true);
-    expect(configOf(store, cellId).expand_output).toBe(true);
-    expect(saveCellConfig).toHaveBeenCalledWith({
-      configs: { [cellId]: { expand_output: true } },
-    });
+    expect(expanded()).toBe(true);
   });
 
   it("collapses by clearing the config", () => {
-    const { cellId, store, result } = setup({
+    const { cellId, wrapper, expanded } = setup({
       mode: "edit",
       expandOutput: true,
     });
+    const { result } = renderHook(() => useExpandedOutput(cellId), {
+      wrapper,
+    });
 
     act(() => result.current[1](false));
 
     expect(result.current[0]).toBe(false);
-    expect(configOf(store, cellId).expand_output).toBe(false);
-    expect(saveCellConfig).toHaveBeenCalledWith({
-      configs: { [cellId]: { expand_output: false } },
-    });
+    expect(expanded()).toBe(false);
   });
 
   it("keeps the toggle in memory outside of edit mode", () => {
-    const { cellId, store, result } = setup({ mode: "read" });
+    const { cellId, wrapper, expanded } = setup({ mode: "read" });
+    const { result } = renderHook(() => useExpandedOutput(cellId), {
+      wrapper,
+    });
 
     act(() => result.current[1](true));
 
     expect(result.current[0]).toBe(true);
     // Cell configs are read-only outside of edit mode.
-    expect(configOf(store, cellId).expand_output).toBe(false);
-    expect(saveCellConfig).not.toHaveBeenCalled();
+    expect(expanded()).toBe(false);
   });
 
   it("still honors expand_output outside of edit mode", () => {
-    const { result } = setup({ mode: "read", expandOutput: true });
+    const { cellId, wrapper } = setup({ mode: "read", expandOutput: true });
+    const { result } = renderHook(() => useExpandedOutput(cellId), {
+      wrapper,
+    });
     expect(result.current[0]).toBe(true);
   });
 
   // `expand_output` covers the cell's output area only. Console output is
   // clamped independently and stays an in-memory, per-session toggle.
   it("does not touch the config when console output is expanded", () => {
-    const cellId = CellId.create();
-    const store = createStore();
-    store.set(
-      notebookAtom,
-      MockNotebook.notebookState({ cellData: { [cellId]: {} } }),
-    );
-    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
-
+    const { cellId, wrapper, expanded } = setup({ mode: "edit" });
     const { result } = renderHook(() => useExpandedConsoleOutput(cellId), {
-      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+      wrapper,
     });
 
     act(() => result.current[1](true));
 
     expect(result.current[0]).toBe(true);
-    expect(configOf(store, cellId).expand_output).toBe(false);
-    expect(saveCellConfig).not.toHaveBeenCalled();
+    expect(expanded()).toBe(false);
   });
 });