@tangle-network/ui 11.51.7 → 11.51.9

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/,
-    );
-  });
-});

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

@@ -1,226 +0,0 @@
-import { act, render, screen, waitFor } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Doc } from "yjs";
-import { createEditorProvider, useEditorContext } from "./editor-provider";
-import type * as EditorPeers from "./editor-peers";
-import type { EditorProviderPeers } from "./editor-peers";
-import { useEditorConnection } from "./use-editor";
-
-interface ProviderOptions {
-  url: string;
-  name: string;
-  document: Doc;
-  onConnect: () => void;
-  onDisconnect: () => void;
-}
-
-class StubHocuspocusProvider {
-  static instances: StubHocuspocusProvider[] = [];
-
-  awareness = {
-    clientID: 1,
-    getStates: () => new Map(),
-    getLocalState: () => ({}),
-    setLocalStateField: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-  };
-  connect = vi.fn();
-  disconnect = vi.fn();
-  destroy = vi.fn();
-
-  constructor(readonly options: ProviderOptions) {
-    StubHocuspocusProvider.instances.push(this);
-  }
-}
-
-/** Only the members the provider reads; yjs is the real package. */
-function stubPeers() {
-  return {
-    yjs: { Doc },
-    hocuspocus: { HocuspocusProvider: StubHocuspocusProvider },
-  } as unknown as EditorProviderPeers;
-}
-
-function ConnectionProbe() {
-  // Reads the context through the public hook, not through the provider
-  // module, so a context created per factory call would leave it unresolved.
-  const { state, isConnected } = useEditorConnection();
-  const { doc } = useEditorContext();
-  return (
-    <span data-testid="probe" data-fragment={doc.getXmlFragment("prosemirror").length}>
-      {state}
-      {isConnected ? " (live)" : ""}
-    </span>
-  );
-}
-
-afterEach(() => {
-  StubHocuspocusProvider.instances = [];
-  vi.doUnmock("./editor-peers");
-  vi.resetModules();
-});
-
-describe("createEditorProvider", () => {
-  it("builds the document and the transport from the loaded peers", () => {
-    const EditorProvider = createEditorProvider(stubPeers());
-
-    render(
-      <EditorProvider
-        websocketUrl="wss://collab.example/ws"
-        documentName="doc:readme"
-        token="jwt"
-        user={{ name: "Ada" }}
-      >
-        <ConnectionProbe />
-      </EditorProvider>,
-    );
-
-    expect(StubHocuspocusProvider.instances).toHaveLength(1);
-    const [provider] = StubHocuspocusProvider.instances;
-    expect(provider.options.url).toBe("wss://collab.example/ws");
-    expect(provider.options.name).toBe("doc:readme");
-    // The Y.Doc came from `peers.yjs.Doc`, and the editor asks it for this
-    // fragment, so the transport and the editor must share the one instance.
-    expect(provider.options.document).toBeInstanceOf(Doc);
-    expect(provider.awareness.setLocalStateField).toHaveBeenCalledWith(
-      "user",
-      expect.objectContaining({ name: "Ada" }),
-    );
-  });
-
-  it("serves the connection state to hooks that read the shared context", async () => {
-    const EditorProvider = createEditorProvider(stubPeers());
-    const onConnectionChange = vi.fn();
-
-    render(
-      <EditorProvider
-        websocketUrl="wss://collab.example/ws"
-        documentName="doc:readme"
-        token="jwt"
-        user={{ name: "Ada" }}
-        onConnectionChange={onConnectionChange}
-      >
-        <ConnectionProbe />
-      </EditorProvider>,
-    );
-
-    expect(screen.getByTestId("probe")).toHaveTextContent("connecting");
-
-    const [provider] = StubHocuspocusProvider.instances;
-    act(() => {
-      provider.options.onConnect();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("probe")).toHaveTextContent("connected (live)");
-    });
-    expect(onConnectionChange).toHaveBeenCalledWith("connected");
-  });
-
-  it("destroys the transport when it unmounts", () => {
-    const EditorProvider = createEditorProvider(stubPeers());
-
-    const { unmount } = render(
-      <EditorProvider
-        websocketUrl="wss://collab.example/ws"
-        documentName="doc:readme"
-        token="jwt"
-        user={{ name: "Ada" }}
-      >
-        <ConnectionProbe />
-      </EditorProvider>,
-    );
-
-    const [provider] = StubHocuspocusProvider.instances;
-    unmount();
-
-    expect(provider.destroy).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("EditorProvider", () => {
-  it("renders with no tiptap package installed", async () => {
-    // The provider builds the document and the socket from yjs and Hocuspocus
-    // alone. A consumer that drives its own editor from this context installs
-    // those two and nothing else, so reaching for a tiptap namespace here
-    // would break that consumer's build-clean install.
-    const tiptapSpecifiers = [
-      "@tiptap/react",
-      "@tiptap/starter-kit",
-      "@tiptap/extension-collaboration",
-      "@tiptap/extension-collaboration-caret",
-    ];
-    vi.resetModules();
-    for (const specifier of tiptapSpecifiers) {
-      vi.doMock(specifier, () => {
-        throw new Error(`Could not resolve "${specifier}"`);
-      });
-    }
-    vi.doMock("yjs", () => ({ Doc }));
-    vi.doMock("@hocuspocus/provider", () => ({
-      HocuspocusProvider: StubHocuspocusProvider,
-    }));
-    const { EditorProvider } = await import("./editor-provider");
-
-    render(
-      <EditorProvider
-        websocketUrl="wss://collab.example/ws"
-        documentName="doc:readme"
-        token="jwt"
-        user={{ name: "Ada" }}
-      >
-        <span data-testid="child">custom editor surface</span>
-      </EditorProvider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("child")).toBeInTheDocument();
-    });
-    expect(StubHocuspocusProvider.instances).toHaveLength(1);
-
-    for (const specifier of [...tiptapSpecifiers, "yjs", "@hocuspocus/provider"]) {
-      vi.doUnmock(specifier);
-    }
-  });
-
-  it("holds children back until the peers load, then renders them", async () => {
-    let releasePeers: (() => void) | null = null;
-    const gate = new Promise<void>((resolve) => {
-      releasePeers = resolve;
-    });
-    vi.resetModules();
-    vi.doMock("./editor-peers", async () => ({
-      ...(await vi.importActual<typeof EditorPeers>("./editor-peers")),
-      loadEditorProviderPeers: async () => {
-        await gate;
-        return stubPeers();
-      },
-    }));
-    const { EditorProvider } = await import("./editor-provider");
-
-    render(
-      <EditorProvider
-        websocketUrl="wss://collab.example/ws"
-        documentName="doc:readme"
-        token="jwt"
-        user={{ name: "Ada" }}
-      >
-        <span data-testid="child">connected surface</span>
-      </EditorProvider>,
-    );
-
-    // A child that rendered before the provider would throw out of
-    // `useEditorContext`, so the wrapper must render nothing while the gate
-    // holds the loader.
-    expect(screen.queryByTestId("child")).toBeNull();
-    expect(StubHocuspocusProvider.instances).toHaveLength(0);
-
-    releasePeers?.();
-
-    await waitFor(() => {
-      expect(screen.getByTestId("child")).toBeInTheDocument();
-    });
-    expect(StubHocuspocusProvider.instances).toHaveLength(1);
-  });
-});