@marimo-team/frontend 0.20.5-dev51 → 0.20.5-dev53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.20.5-dev51",
+  "version": "0.20.5-dev53",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__mocks__/common.ts

@@ -3,9 +3,19 @@
 import { type Mock, vi } from "vitest";
 import { invariant } from "@/utils/invariant";
 
+interface MockLogger {
+  debug: Mock;
+  log: Mock;
+  warn: Mock;
+  error: Mock;
+  trace: Mock;
+  get: Mock;
+  disabled: Mock;
+}
+
 // Common mock factories
 export const Mocks = {
-  quietLogger: () => ({
+  quietLogger: (): MockLogger => ({
     debug: vi.fn(),
     log: vi.fn(),
     warn: vi.fn(),
@@ -15,7 +25,7 @@ export const Mocks = {
     disabled: vi.fn(),
   }),
 
-  logger: () => ({
+  logger: (): MockLogger => ({
     debug: vi.fn().mockImplementation(console.debug),
     log: vi.fn().mockImplementation(console.log),
     warn: vi.fn().mockImplementation(console.warn),
@@ -70,8 +80,33 @@ export const Mocks = {
     },
 };
 
+// Common mock modules for vi.mock() calls
+export const MockModules = {
+  toast: () => ({ toast: vi.fn() }),
+  toastWithControls: () => {
+    const dismiss = vi.fn();
+    const update = vi.fn();
+    return {
+      mock: { toast: vi.fn(() => ({ dismiss, update })) },
+      dismiss,
+      update,
+    };
+  },
+};
+
 // Global mock setup functions
 export const SetupMocks = {
+  resizeObserver: () => {
+    const observe = vi.fn();
+    const unobserve = vi.fn();
+    const disconnect = vi.fn();
+    global.ResizeObserver = class MockResizeObserver {
+      observe = observe;
+      unobserve = unobserve;
+      disconnect = disconnect;
+    } as unknown as typeof ResizeObserver;
+    return { observe, unobserve, disconnect };
+  },
   clipboard: (mockClipboard = Mocks.clipboard()) => {
     Object.defineProperty(navigator, "clipboard", {
       value: mockClipboard,
@@ -79,12 +114,10 @@ export const SetupMocks = {
     });
 
     // Mock ClipboardItem
-    // @ts-expect-error - ClipboardItem types not exact
-    global.ClipboardItem = vi
-      .fn()
-      .mockImplementation((data) => Mocks.clipboardItem(data));
-
-    global.ClipboardItem.supports = vi.fn().mockReturnValue(true);
+    global.ClipboardItem = Object.assign(
+      vi.fn().mockImplementation((data) => Mocks.clipboardItem(data)),
+      { supports: vi.fn().mockReturnValue(true) },
+    ) as unknown as typeof ClipboardItem;
 
     // Mock Blob
     global.Blob = vi

package/src/components/chat/__tests__/useFileState.test.tsx

@@ -2,12 +2,11 @@
 
 import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { toast } from "@/components/ui/use-toast";
 import { useFileState } from "../chat-utils";
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 describe("useFileState", () => {
   beforeEach(() => {

package/src/components/chat/acp/__tests__/context-utils.test.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { beforeEach, describe, expect, it, type Mocked, vi } from "vitest";
+import { Mocks } from "@/__mocks__/common";
 import {
   convertFilesToResourceLinks,
   parseContextFromPrompt,
@@ -19,12 +20,7 @@ vi.mock("@/core/state/jotai", () => ({
   store: {},
 }));
 
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    error: vi.fn(),
-    debug: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
 import { getAIContextRegistry } from "@/core/ai/context/context";
 import type {

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -2,6 +2,7 @@
 import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -25,17 +26,7 @@ function createTestWrapper() {
 }
 
 beforeAll(() => {
-  global.ResizeObserver = class ResizeObserver {
-    observe() {
-      // do nothing
-    }
-    unobserve() {
-      // do nothing
-    }
-    disconnect() {
-      // do nothing
-    }
-  };
+  SetupMocks.resizeObserver();
   global.HTMLDivElement.prototype.scrollIntoView = () => {
     // do nothing
   };

package/src/components/editor/file-tree/__tests__/requesting-tree.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { toast } from "@/components/ui/use-toast";
 import type { FilePath } from "@/utils/paths";
 import { RequestingTree } from "../requesting-tree";
@@ -9,9 +10,7 @@ const sendCreateFileOrFolder = vi.fn();
 const sendDeleteFileOrFolder = vi.fn();
 const sendRenameFileOrFolder = vi.fn();
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 describe("RequestingTree", () => {
   let requestingTree: RequestingTree;

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -3,15 +3,13 @@
 
 import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { asMock, Mocks, SetupMocks } from "@/__mocks__/common";
+import { asMock, MockModules, Mocks, SetupMocks } from "@/__mocks__/common";
 import type { CellActions, NotebookState } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { useCellClipboard } from "../clipboard";
 
 // Mock dependencies
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 vi.mock("@/core/cells/cells", () => ({
   getNotebook: vi.fn(),

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -2,24 +2,14 @@
 
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { ConsoleOutput } from "../ConsoleOutput";
 
-// Mock ResizeObserver for tests
-global.ResizeObserver = class ResizeObserver {
-  observe() {
-    // noop
-  }
-  unobserve() {
-    // noop
-  }
-  disconnect() {
-    // noop
-  }
-};
+SetupMocks.resizeObserver();
 
 const renderWithProvider = (ui: React.ReactElement) => {
   return render(<TooltipProvider>{ui}</TooltipProvider>);

package/src/core/cells/__tests__/session.test.ts

@@ -3,6 +3,7 @@
 import type * as api from "@marimo-team/marimo-api";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Mocks } from "@/__mocks__/common";
 import { parseOutline } from "@/core/dom/outline";
 import { MultiColumn, visibleForTesting } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
@@ -11,13 +12,7 @@ import { type CellId, SETUP_CELL_ID } from "../ids";
 import { notebookStateFromSession } from "../session";
 
 // Mock dependencies
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    error: vi.fn(),
-    warn: vi.fn(),
-    debug: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
 vi.mock("@/core/dom/outline", () => ({
   parseOutline: vi.fn(),

package/src/core/codemirror/compat/__tests__/jupyter.test.ts

@@ -3,6 +3,7 @@
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { toast } from "@/components/ui/use-toast";
 import { store } from "@/core/state/jotai";
@@ -16,9 +17,7 @@ vi.mock("@/core/state/jotai", () => ({
   },
 }));
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 // Mock the helper to get request client
 const mockRequestClient = MockRequestClient.create();

package/src/core/codemirror/markdown/__tests__/commands.test.ts

@@ -9,6 +9,7 @@ import {
   test,
   vi,
 } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
@@ -25,9 +26,7 @@ import {
   insertUL,
 } from "../commands";
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 import { toast } from "@/components/ui/use-toast";
 

package/src/core/export/__tests__/hooks.test.ts

@@ -5,6 +5,7 @@ import { createStore, Provider } from "jotai";
 import type { ReactNode } from "react";
 import * as React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockModules, Mocks } from "@/__mocks__/common";
 import type { CellId } from "@/core/cells/ids";
 import { CellOutputId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
@@ -20,17 +21,9 @@ vi.mock("html-to-image", () => ({
   toPng: vi.fn(),
 }));
 
-// Mock Logger
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    error: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
-// Mock toast
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 // Mock cellsRuntimeAtom - must be defined inline in the factory function
 vi.mock("@/core/cells/cells", async () => {

package/src/core/runtime/__tests__/runtime.test.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Mocks } from "@/__mocks__/common";
 import type { SessionId } from "@/core/kernel/session";
 import { Logger } from "@/utils/Logger";
 import { RuntimeManager } from "../runtime";
@@ -11,14 +12,7 @@ vi.mock("@/core/kernel/session", () => ({
   getSessionId: () => "test-session-id" as SessionId,
 }));
 
-// Mock the Logger module
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    debug: vi.fn(),
-    error: vi.fn(),
-    warn: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
 describe("RuntimeManager", () => {
   const mockConfig: RuntimeConfig = {

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -4,6 +4,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
 import type { DownloadAsArgs } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { store } from "@/core/state/jotai";
@@ -14,17 +15,7 @@ import {
 } from "../DataTablePlugin";
 
 beforeAll(() => {
-  global.ResizeObserver = class ResizeObserver {
-    observe() {
-      // do nothing
-    }
-    unobserve() {
-      // do nothing
-    }
-    disconnect() {
-      // do nothing
-    }
-  };
+  SetupMocks.resizeObserver();
 });
 
 describe("LoadingDataTableComponent", () => {

package/src/plugins/impl/__tests__/DropdownPlugin.test.tsx

@@ -3,23 +3,14 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import type { z } from "zod";
+import { SetupMocks } from "@/__mocks__/common";
 import { initialModeAtom } from "@/core/mode";
 import { store } from "@/core/state/jotai";
 import type { IPluginProps } from "../../types";
 import { DropdownPlugin } from "../DropdownPlugin";
 
 beforeAll(() => {
-  global.ResizeObserver = class ResizeObserver {
-    observe() {
-      // do nothing
-    }
-    unobserve() {
-      // do nothing
-    }
-    disconnect() {
-      // do nothing
-    }
-  };
+  SetupMocks.resizeObserver();
   global.HTMLDivElement.prototype.scrollIntoView = () => {
     // do nothing
   };

package/src/utils/__tests__/download.test.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Mocks } from "@/__mocks__/common";
 import type { CellId } from "@/core/cells/ids";
 import { CellOutputId } from "@/core/cells/ids";
 import {
@@ -27,26 +28,23 @@ vi.mock("@/core/network/requests", () => ({
 }));
 
 // Mock the toast module
-const mockDismiss = vi.fn();
-const mockUpdate = vi.fn();
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(() => ({
-    dismiss: mockDismiss,
-    update: mockUpdate,
-  })),
-}));
+const { mockDismiss, mockUpdate, toastMock } = vi.hoisted(() => {
+  const dismiss = vi.fn();
+  const update = vi.fn();
+  return {
+    mockDismiss: dismiss,
+    mockUpdate: update,
+    toastMock: { toast: vi.fn(() => ({ dismiss, update })) },
+  };
+});
+vi.mock("@/components/ui/use-toast", () => toastMock);
 
 // Mock the Spinner component
 vi.mock("@/components/icons/spinner", () => ({
   Spinner: () => "MockSpinner",
 }));
 
-// Mock Logger
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    error: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
 // Mock Filenames
 vi.mock("@/utils/filenames", () => ({