@tangle-network/ui 11.51.7 → 11.51.8

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @tangle-network/ui
 
+## 11.51.8
+
+- Retire mock-dependent component tests while preserving the real editor source-saving integration without callback spies. Component implementations and built exports are unchanged; packed-consumer and browser checks remain.
+
 ## 11.51.7
 
 - Expose the existing retained report component and follow-tail modules without optional chat stores. Derive all build entries from the package export map.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.7",
+  "version": "11.51.8",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/editor/source-markdown-editor.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, waitFor } from "@testing-library/react";
 import type { Editor } from "@tiptap/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { MarkdownDocumentEditor } from "./markdown-document-editor";
 import { CALL_SHEET, KITCHEN_SINK } from "./source-markdown.fixtures";
 
@@ -10,12 +10,12 @@ const PEERS_LOADED = { timeout: 15_000 };
 const LOADS_PEERS = 30_000;
 
 async function openEditor(value: string) {
-  const onChange = vi.fn<(markdown: string) => void>();
+  const changes: string[] = [];
   let editor: Editor | null = null;
   const view = render(
     <MarkdownDocumentEditor
       value={value}
-      onChange={(markdown) => onChange(markdown)}
+      onChange={(markdown) => changes.push(markdown)}
       onReady={(ready) => {
         editor = ready;
       }}
@@ -32,9 +32,9 @@ async function openEditor(value: string) {
     get editor() {
       return editor! as Editor;
     },
-    onChange,
+    changes,
     /** The Markdown the editor last reported, or the value it opened. */
-    saved: () => onChange.mock.calls.at(-1)?.[0] ?? value,
+    saved: () => changes.at(-1) ?? value,
   };
 }
 
@@ -63,13 +63,13 @@ function tableRows(markdown: string) {
 
 describe("MarkdownDocumentEditor source preservation", () => {
   it("opens every Markdown construct without reporting a change", async () => {
-    const { editor, onChange, view } = await openEditor(KITCHEN_SINK);
+    const { editor, changes, view } = await openEditor(KITCHEN_SINK);
     act(() => {
       editor.commands.setTextSelection(1);
       editor.setEditable(false);
       editor.setEditable(true);
     });
-    expect(onChange).not.toHaveBeenCalled();
+    expect(changes).toHaveLength(0);
     // The table is shown as a table, read-only, instead of a run-on paragraph.
     const table = view.container.querySelector('[data-md-kind="table"] table');
     expect(table?.querySelectorAll("tbody tr")).toHaveLength(1);

package/src/editor/document-editor-pane.test.tsx

@@ -1,60 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type * as EditorPeers from "./editor-peers";
-
-const markdown = "# Release notes\n\nThe editor loads on demand.";
-
-afterEach(() => {
-  vi.resetModules();
-});
-
-/** Loads the pane with every peer loader rejecting, as for a consumer that
- *  installed neither tiptap nor the collaboration stack. The spies report
- *  whether a render reached a loader at all. */
-async function paneWithoutPeers(message: string) {
-  const loaders = {
-    loadDocumentEditorPeers: vi.fn(async () => {
-      throw new Error(message);
-    }),
-    loadCollaborationPeers: vi.fn(async () => {
-      throw new Error(message);
-    }),
-    loadEditorProviderPeers: vi.fn(async () => {
-      throw new Error(message);
-    }),
-  };
-  vi.resetModules();
-  vi.doMock("./editor-peers", async () => ({
-    ...(await vi.importActual<typeof EditorPeers>("./editor-peers")),
-    ...loaders,
-  }));
-  const { DocumentEditorPane } = await import("./document-editor-pane");
-  return { DocumentEditorPane, loaders };
-}
-
-// The pane is imported on a fresh module graph, which re-transforms its whole
-// dependency tree: seconds on a busy runner, past the 5s default.
-describe("DocumentEditorPane without the editor peers", () => {
-  it("renders the preview, because only the edit tab needs the peers", async () => {
-    const { DocumentEditorPane, loaders } = await paneWithoutPeers(
-      "peers are not installed",
-    );
-
-    render(<DocumentEditorPane title="Notes" markdown={markdown} />);
-
-    // The promise this pane's editors carry is exactly this: a consumer that
-    // never opens the edit tab pays nothing for tiptap.
-    expect(screen.getByText("Release notes")).toBeInTheDocument();
-    expect(screen.getByText("The editor loads on demand.")).toBeInTheDocument();
-    expect(screen.getByRole("tab", { name: "Edit" })).toBeInTheDocument();
-
-    // Reaching no loader is the claim. Asserting only that the placeholder is
-    // absent would also pass for a pane that rendered nothing at all.
-    await waitFor(() => {
-      expect(screen.queryByText("Loading editor…")).toBeNull();
-    });
-    expect(loaders.loadDocumentEditorPeers).not.toHaveBeenCalled();
-    expect(loaders.loadCollaborationPeers).not.toHaveBeenCalled();
-    expect(loaders.loadEditorProviderPeers).not.toHaveBeenCalled();
-  }, 30_000);
-});

package/src/editor/editor-lazy.test.tsx

@@ -1,102 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { Component, type ReactNode, Suspense } from "react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { retryableLazyEditor } from "./editor-lazy";
-import { MissingEditorPeersError } from "./editor-peers";
-
-/** Catches the rejection the lazy component throws, and can mount it again. */
-class ResettableBoundary extends Component<
-  { children: ReactNode },
-  { failure: Error | null }
-> {
-  state = { failure: null as Error | null };
-
-  static getDerivedStateFromError(error: Error) {
-    return { failure: error };
-  }
-
-  render() {
-    if (this.state.failure) {
-      return (
-        <button type="button" onClick={() => this.setState({ failure: null })}>
-          failed: {this.state.failure.message}
-        </button>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-function Loaded() {
-  return <span>editor</span>;
-}
-
-/** React reports a caught render error on the console; the assertions read it. */
-let consoleError: ReturnType<typeof vi.spyOn>;
-
-beforeEach(() => {
-  consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-});
-
-afterEach(() => {
-  consoleError.mockRestore();
-});
-
-function renderRetryable(load: () => Promise<typeof Loaded>) {
-  const lazyEditor = retryableLazyEditor(load);
-  function Host() {
-    const LazyEditor = lazyEditor();
-    return (
-      <Suspense fallback={<span>loading</span>}>
-        <LazyEditor />
-      </Suspense>
-    );
-  }
-  return render(
-    <ResettableBoundary>
-      <Host />
-    </ResettableBoundary>,
-  );
-}
-
-describe("retryableLazyEditor", () => {
-  it("re-attempts the load after a transient failure", async () => {
-    // `lazy` caches its first rejection for the life of the component, so one
-    // failed chunk fetch would otherwise hold the editor broken until a full
-    // page reload.
-    const load = vi
-      .fn<() => Promise<typeof Loaded>>()
-      .mockRejectedValueOnce(new Error("Failed to fetch dynamically imported module"))
-      .mockResolvedValue(Loaded);
-
-    renderRetryable(load);
-
-    const retry = await screen.findByRole("button");
-    expect(retry).toHaveTextContent("Failed to fetch dynamically imported module");
-    expect(load).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(retry);
-
-    expect(await screen.findByText("editor")).toBeInTheDocument();
-    expect(load).toHaveBeenCalledTimes(2);
-  });
-
-  it("keeps a missing peer permanent, so a remount does not import it again", async () => {
-    // A package does not install itself mid-session. Retrying would only
-    // repeat the same failure and hide the install list behind a loop.
-    const load = vi
-      .fn<() => Promise<typeof Loaded>>()
-      .mockRejectedValue(new MissingEditorPeersError("Install @tiptap/react."));
-
-    renderRetryable(load);
-
-    const retry = await screen.findByRole("button");
-    expect(retry).toHaveTextContent("Install @tiptap/react.");
-    expect(load).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(retry);
-
-    expect(await screen.findByRole("button")).toHaveTextContent("Install @tiptap/react.");
-    expect(load).toHaveBeenCalledTimes(1);
-  });
-});

package/src/editor/editor-peers.test.ts

@@ -1,250 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import {
-  asMissingEditorPeersError,
-  isMissingEditorPeersError,
-  isMissingPeerError,
-} from "./editor-peers";
-
-/** The namespace shape each peer has when it is installed. */
-const installedPeers: Record<string, Record<string, unknown>> = {
-  "@tiptap/react": { useEditor: () => null, EditorContent: () => null },
-  "@tiptap/starter-kit": { default: { configure: () => ({}) } },
-  "@tiptap/extension-collaboration": { default: { configure: () => ({}) } },
-  "@tiptap/extension-collaboration-caret": { default: { configure: () => ({}) } },
-  "@hocuspocus/provider": { HocuspocusProvider: class {} },
-  yjs: { Doc: class {} },
-};
-
-/**
- * Loads the module under test with the named peers replaced. The loaders read
- * their peers through a dynamic import, so the substitution has to happen
- * before the module graph is built — hence the reset and the dynamic import.
- */
-async function loadPeerLoaders(
-  replacements: Record<string, Record<string, unknown>> = {},
-) {
-  vi.resetModules();
-  for (const specifier of Object.keys(installedPeers)) {
-    const namespace = replacements[specifier] ?? installedPeers[specifier];
-    vi.doMock(specifier, () => namespace);
-  }
-  return await import("./editor-peers");
-}
-
-afterEach(() => {
-  vi.resetModules();
-});
-
-describe("isMissingPeerError", () => {
-  it("recognises what each bundler and runtime says for an uninstalled package", () => {
-    const messages = [
-      // Vite's stub for an optional peer that is not installed.
-      'Could not resolve "@tiptap/react" imported by "@tangle-network/ui". Is it installed?',
-      // Node ESM.
-      "Cannot find package '@tiptap/react' imported from /app/index.js",
-      // CommonJS.
-      "Cannot find module '@tiptap/react'",
-      // webpack.
-      "Module not found: Error: Can't resolve '@tiptap/react' in '/app'",
-      // esbuild.
-      'Failed to resolve entry for package "@tiptap/react"',
-    ];
-
-    for (const message of messages) {
-      expect(isMissingPeerError(new Error(message)), message).toBe(true);
-    }
-  });
-
-  it("leaves a transient chunk failure to report its own cause", () => {
-    // Enriching this one with "install the peers" sends the reader to the
-    // wrong fix, and the peers are already installed.
-    expect(
-      isMissingPeerError(new Error("Failed to fetch dynamically imported module")),
-    ).toBe(false);
-    expect(isMissingPeerError(new Error("Network request failed"))).toBe(false);
-    expect(isMissingPeerError("Could not resolve")).toBe(false);
-  });
-});
-
-describe("editor optional peer loaders", () => {
-  it("returns the namespaces the editors call", async () => {
-    const { loadCollaborationPeers, loadDocumentEditorPeers } = await loadPeerLoaders();
-
-    const documentPeers = await loadDocumentEditorPeers();
-    expect(documentPeers.react.useEditor).toBe(installedPeers["@tiptap/react"].useEditor);
-    expect(documentPeers.starterKit.default).toBe(
-      installedPeers["@tiptap/starter-kit"].default,
-    );
-
-    const collaborationPeers = await loadCollaborationPeers();
-    expect(collaborationPeers.hocuspocus.HocuspocusProvider).toBe(
-      installedPeers["@hocuspocus/provider"].HocuspocusProvider,
-    );
-    expect(collaborationPeers.yjs.Doc).toBe(installedPeers.yjs.Doc);
-  });
-
-  it("names the install list when a peer resolves to a namespace with no editor in it", async () => {
-    // A bundler can stub a missing optional peer as a silent empty namespace
-    // rather than a throwing module. That shape must still fail with the peers
-    // named, and not as an undefined-property crash in the middle of a render.
-    const { loadDocumentEditorPeers } = await loadPeerLoaders({
-      "@tiptap/starter-kit": { default: undefined },
-    });
-
-    await expect(loadDocumentEditorPeers()).rejects.toThrow(
-      /Install @tiptap\/react and @tiptap\/starter-kit/,
-    );
-  });
-
-  it("names the install list when an extension stub carries a default it cannot configure", async () => {
-    // The commonest stub shape is a default export that is present but empty.
-    // It passes a plain "is the default defined" test, and then the factory
-    // calls .configure() on it and throws an opaque TypeError mid-render.
-    const { loadDocumentEditorPeers } = await loadPeerLoaders({
-      "@tiptap/starter-kit": { default: {} },
-    });
-
-    await expect(loadDocumentEditorPeers()).rejects.toThrow(
-      /Install @tiptap\/react and @tiptap\/starter-kit/,
-    );
-  });
-
-  it.each([
-    "@tiptap/extension-collaboration",
-    "@tiptap/extension-collaboration-caret",
-  ])("names the collaboration install list when %s is an empty default", async (specifier) => {
-    const { loadCollaborationPeers } = await loadPeerLoaders({
-      [specifier]: { default: {} },
-    });
-
-    await expect(loadCollaborationPeers()).rejects.toThrow(
-      /@hocuspocus\/provider and yjs/,
-    );
-  });
-
-  it("marks a missing peer permanent and leaves any other failure retryable", async () => {
-    // editor-lazy.ts reads this distinction to decide whether a remount may
-    // try the import again.
-    const { loadDocumentEditorPeers } = await loadPeerLoaders({
-      "@tiptap/starter-kit": { default: {} },
-    });
-
-    await expect(loadDocumentEditorPeers()).rejects.toSatisfy(isMissingEditorPeersError);
-    expect(isMissingEditorPeersError(new Error("Failed to fetch dynamically imported module"))).toBe(
-      false,
-    );
-  });
-
-  it("reports an unresolved import as a permanent missing peer and keeps the cause", async () => {
-    // The rejection a throwing stub gives must become the install list, so a
-    // consumer reads which packages to add, and must count as permanent so a
-    // remount does not retry an import that cannot start to succeed.
-    const resolutionFailure = new Error('Could not resolve "@tiptap/starter-kit"');
-    const mapped = asMissingEditorPeersError(resolutionFailure, "install the peers");
-
-    expect(isMissingEditorPeersError(mapped)).toBe(true);
-    expect(mapped).toHaveProperty("cause", resolutionFailure);
-    // The install list holds every peer the surface needs, so the message also
-    // names the one that is actually absent.
-    expect((mapped as Error).message).toBe(
-      "install the peers @tiptap/starter-kit did not resolve.",
-    );
-  });
-
-  it("names the caret package rather than the collaboration package it contains", async () => {
-    // "@tiptap/extension-collaboration" is a prefix of the caret specifier, so
-    // a naive substring match reports the wrong package.
-    const caretFailure = new Error(
-      'Could not resolve "@tiptap/extension-collaboration-caret"',
-    );
-    const mapped = asMissingEditorPeersError(caretFailure, "install the peers");
-
-    expect((mapped as Error).message).toBe(
-      "install the peers @tiptap/extension-collaboration-caret did not resolve.",
-    );
-  });
-
-  it("leaves a resolution failure that names no peer alone, so it stays retryable", async () => {
-    // An application chunk, or a dependency of a peer that did load, can fail
-    // to resolve too. Installing the editor peers would not fix that, and
-    // marking it permanent would stop a remount from trying again.
-    const unrelated = new Error("Cannot find module './app-chunk-a91f.js'");
-    const mapped = asMissingEditorPeersError(unrelated, "install the peers");
-
-    expect(mapped).toBe(unrelated);
-    expect(isMissingEditorPeersError(mapped)).toBe(false);
-  });
-
-  it("treats a @tiptap/core failure as a missing peer, though no loader imports it", async () => {
-    // The tiptap packages need @tiptap/core in turn, so a consumer that
-    // resolves it to nothing breaks exactly as one missing @tiptap/react
-    // does. Leaving it out of the list left that failure retryable.
-    const coreFailure = new Error('Could not resolve "@tiptap/core"');
-    const mapped = asMissingEditorPeersError(coreFailure, "install the peers");
-
-    expect(isMissingEditorPeersError(mapped)).toBe(true);
-    expect((mapped as Error).message).toBe(
-      "install the peers @tiptap/core did not resolve.",
-    );
-  });
-
-  it("keeps the install list alone when the failure names several peers", async () => {
-    const both = new Error(
-      'Could not resolve "@tiptap/react" or "@hocuspocus/provider"',
-    );
-    const mapped = asMissingEditorPeersError(both, "install the peers");
-
-    expect(isMissingEditorPeersError(mapped)).toBe(true);
-    expect((mapped as Error).message).toBe("install the peers");
-  });
-
-  it("leaves a transient chunk failure unchanged, so a remount can retry it", async () => {
-    const transient = new Error("Failed to fetch dynamically imported module");
-
-    expect(asMissingEditorPeersError(transient, "install the peers")).toBe(transient);
-    expect(isMissingEditorPeersError(transient)).toBe(false);
-  });
-
-  it("names the install list when a peer carries the wrong member type", async () => {
-    const { loadDocumentEditorPeers } = await loadPeerLoaders({
-      "@tiptap/react": { useEditor: undefined, EditorContent: undefined },
-    });
-
-    await expect(loadDocumentEditorPeers()).rejects.toThrow(
-      /Install @tiptap\/react and @tiptap\/starter-kit/,
-    );
-  });
-
-  it("accepts the shapes the installed peers really have", async () => {
-    // The other cases in this file describe the peers, so nothing here would
-    // notice a tiptap release that moves `configure` off the default export.
-    // Loading the real packages is what turns that into a failure here rather
-    // than in a consumer's editor.
-    vi.resetModules();
-    for (const specifier of Object.keys(installedPeers)) {
-      vi.doUnmock(specifier);
-    }
-    const { loadCollaborationPeers } = await import("./editor-peers");
-
-    const peers = await loadCollaborationPeers();
-    // Prove the substitutions are gone; against the stubs this case would
-    // pass without reading a real package at all.
-    expect(peers.starterKit.default).not.toBe(installedPeers["@tiptap/starter-kit"].default);
-    expect(typeof peers.starterKit.default.configure).toBe("function");
-    expect(typeof peers.collaboration.default.configure).toBe("function");
-    expect(typeof peers.collaborationCaret.default.configure).toBe("function");
-  });
-
-  it("keeps the local editor usable when only a collaboration peer is missing", async () => {
-    // sandbox-ui installs the tiptap packages alone, so the local markdown
-    // editor must not start to require yjs or Hocuspocus.
-    const { loadCollaborationPeers, loadDocumentEditorPeers } = await loadPeerLoaders({
-      yjs: { Doc: undefined },
-    });
-
-    await expect(loadDocumentEditorPeers()).resolves.toBeDefined();
-    await expect(loadCollaborationPeers()).rejects.toThrow(
-      /@hocuspocus\/provider and yjs/,
-    );
-  });
-});