@tangle-network/ui 11.51.6 → 11.51.8

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

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

@@ -1,126 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { Component, type ReactNode } from "react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { MarkdownDocumentEditor } from "./markdown-document-editor";
-import type * as EditorPeers from "./editor-peers";
-
-class ErrorTrap extends Component<{ children: ReactNode }, { message: string | null }> {
-  state = { message: null as string | null };
-
-  static getDerivedStateFromError(error: Error) {
-    return { message: error.message };
-  }
-
-  render() {
-    return this.state.message ?? this.props.children;
-  }
-}
-
-/**
- * Imports the editor with a fresh module graph, so its module-scope `lazy`
- * has not resolved yet. `loadDocumentEditorPeers` is replaced by `load`.
- */
-async function freshEditor(load: () => Promise<EditorPeers.DocumentEditorPeers>) {
-  vi.resetModules();
-  vi.doMock("./editor-peers", async () => ({
-    ...(await vi.importActual<typeof EditorPeers>("./editor-peers")),
-    loadDocumentEditorPeers: load,
-  }));
-  return (await import("./markdown-document-editor")).MarkdownDocumentEditor;
-}
-
-// The first render imports tiptap for real. A cold import on a busy runner
-// takes several seconds, well past waitFor's 1s and a test's 5s defaults.
-const PEERS_LOADED = { timeout: 15_000 };
-const LOADS_PEERS = 30_000;
-
-afterEach(() => {
-  vi.doUnmock("./editor-peers");
-  vi.resetModules();
-});
-
-describe("MarkdownDocumentEditor", () => {
-  it("renders the real tiptap surface once the peers load", async () => {
-    const { container } = render(
-      <MarkdownDocumentEditor value={"# Title\n\nBody text."} />,
-    );
-
-    await waitFor(() => {
-      expect(container.querySelector(".ProseMirror")).not.toBeNull();
-    }, PEERS_LOADED);
-
-    const surface = container.querySelector(".ProseMirror");
-    expect(surface?.querySelector("h1")?.textContent).toBe("Title");
-    expect(surface?.textContent).toContain("Body text.");
-    // StarterKit arrives through `peers.starterKit.default`. A broken hand-off
-    // leaves the document without the heading node that StarterKit configures.
-    expect(screen.getByTitle(/^Bold/)).toBeInTheDocument();
-  }, LOADS_PEERS);
-
-  it("holds a placeholder while the peers are still loading", async () => {
-    let releasePeers: (() => void) | null = null;
-    const gate = new Promise<void>((resolve) => {
-      releasePeers = resolve;
-    });
-    const HeldEditor = await freshEditor(async () => {
-      await gate;
-      const actual = await vi.importActual<typeof EditorPeers>("./editor-peers");
-      return actual.loadDocumentEditorPeers();
-    });
-
-    const { container } = render(<HeldEditor value="# Title" />);
-
-    // A live region, so a screen reader hears that the editor is still coming.
-    expect(screen.getByRole("status")).toHaveTextContent("Loading editor…");
-    expect(container.querySelector(".ProseMirror")).toBeNull();
-
-    releasePeers?.();
-
-    await waitFor(() => {
-      expect(container.querySelector(".ProseMirror h1")?.textContent).toBe("Title");
-    });
-    expect(screen.queryByText("Loading editor…")).toBeNull();
-  });
-
-  it("applies a new value prop to the loaded editor without reporting a change", async () => {
-    const onChange = vi.fn();
-    const { container, rerender } = render(
-      <MarkdownDocumentEditor value="start" onChange={onChange} />,
-    );
-
-    await waitFor(() => {
-      expect(container.querySelector(".ProseMirror")).not.toBeNull();
-    }, PEERS_LOADED);
-
-    // The editor reports once when it parses the initial content. What must
-    // not grow is the count across a value-prop write: pushing that back
-    // through onChange makes a controlled parent echo its own write.
-    const callsAfterMount = onChange.mock.calls.length;
-
-    rerender(<MarkdownDocumentEditor value="# Changed" onChange={onChange} />);
-
-    await waitFor(() => {
-      expect(container.querySelector(".ProseMirror h1")?.textContent).toBe("Changed");
-    });
-    expect(onChange).toHaveBeenCalledTimes(callsAfterMount);
-  }, LOADS_PEERS);
-
-  it("fails with the install list when the peers cannot be loaded", async () => {
-    const missing = "install @tiptap/react and @tiptap/starter-kit";
-    const LoadFailingEditor = await freshEditor(async () => {
-      throw new Error(missing);
-    });
-
-    render(
-      <ErrorTrap>
-        <LoadFailingEditor value="start" />
-      </ErrorTrap>,
-    );
-
-    // Loud, and only here: the consumer's build already succeeded without the
-    // peers, so this render is the first place the gap can surface.
-    await waitFor(() => {
-      expect(screen.getByText(missing)).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,228 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { Component, type ReactNode } from "react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Doc } from "yjs";
-import type * as EditorPeers from "./editor-peers";
-import { createEditorProvider } from "./editor-provider";
-import { createTiptapEditor } from "./tiptap-editor";
-
-class ErrorTrap extends Component<{ children: ReactNode }, { message: string | null }> {
-  state = { message: null as string | null };
-
-  static getDerivedStateFromError(error: Error) {
-    return { message: error.message };
-  }
-
-  render() {
-    return this.state.message ?? this.props.children;
-  }
-}
-
-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: { document: Doc }) {
-    StubHocuspocusProvider.instances.push(this);
-  }
-}
-
-/** A tiptap extension records what the editor configured it with. */
-function stubExtension(name: string) {
-  const calls: Record<string, unknown>[] = [];
-  return {
-    calls,
-    default: {
-      configure(options: Record<string, unknown>) {
-        calls.push(options);
-        return { name, options };
-      },
-    },
-  };
-}
-
-/**
- * Only the members the collaborative editor calls. yjs is the real package,
- * because the provider and the editor must agree on one document.
- */
-function collaborationStubs() {
-  const starterKit = stubExtension("starterKit");
-  const collaboration = stubExtension("collaboration");
-  const collaborationCaret = stubExtension("collaborationCaret");
-  const editorOptions: Record<string, unknown>[] = [];
-  const editor = {
-    setEditable: vi.fn(),
-    isEmpty: true,
-    commands: { setContent: vi.fn() },
-  };
-
-  const peers = {
-    react: {
-      useEditor: (options: Record<string, unknown>) => {
-        editorOptions.push(options);
-        return editor;
-      },
-      EditorContent: () => <div data-testid="editor-content" />,
-    },
-    starterKit,
-    collaboration,
-    collaborationCaret,
-    hocuspocus: { HocuspocusProvider: StubHocuspocusProvider },
-    yjs: { Doc },
-  } as unknown as EditorPeers.CollaborationPeers;
-
-  return { peers, starterKit, collaboration, collaborationCaret, editorOptions, editor };
-}
-
-function renderCollaborativeEditor(stubs: ReturnType<typeof collaborationStubs>) {
-  const EditorProvider = createEditorProvider(stubs.peers);
-  const TiptapEditor = createTiptapEditor(stubs.peers);
-  return render(
-    <EditorProvider
-      websocketUrl="wss://collab.example/ws"
-      documentName="doc:readme"
-      token="jwt"
-      user={{ name: "Ada" }}
-    >
-      <TiptapEditor />
-    </EditorProvider>,
-  );
-}
-
-afterEach(() => {
-  StubHocuspocusProvider.instances = [];
-  vi.doUnmock("./editor-peers");
-  vi.resetModules();
-});
-
-describe("createTiptapEditor", () => {
-  it("renders the editor surface from the loaded namespaces", () => {
-    renderCollaborativeEditor(collaborationStubs());
-
-    expect(screen.getByTestId("editor-content")).toBeInTheDocument();
-    expect(screen.getByText("Connecting...")).toBeInTheDocument();
-  });
-
-  it("gives Collaboration the document fragment the provider shares", () => {
-    const stubs = collaborationStubs();
-    renderCollaborativeEditor(stubs);
-
-    const [provider] = StubHocuspocusProvider.instances;
-    // The extensions rebuild once the transport arrives, so read the last
-    // configuration: the transport and the editor must bind to one Y.Doc, or
-    // remote edits never reach the surface.
-    expect(stubs.collaboration.calls.at(-1)?.fragment).toBe(
-      provider.options.document.getXmlFragment("prosemirror"),
-    );
-  });
-
-  it("gives CollaborationCaret the provider and a named user", () => {
-    const stubs = collaborationStubs();
-    renderCollaborativeEditor(stubs);
-
-    const [provider] = StubHocuspocusProvider.instances;
-    // The caret joins only once the provider carries awareness.
-    expect(stubs.collaborationCaret.calls).toHaveLength(1);
-    const [caretOptions] = stubs.collaborationCaret.calls;
-    expect(caretOptions.provider).toBe(provider);
-    // The stub awareness carries no local user yet, so the editor names the
-    // fallback rather than passing undefined into the caret renderer.
-    expect(caretOptions.user).toEqual({ name: "Anonymous", color: "#808080" });
-  });
-
-  it("passes every configured extension to the editor", () => {
-    const stubs = collaborationStubs();
-    renderCollaborativeEditor(stubs);
-
-    expect(stubs.starterKit.calls.at(-1)).toMatchObject({ history: false });
-    const options = stubs.editorOptions.at(-1);
-    expect(
-      (options?.extensions as { name: string }[]).map((one) => one.name),
-    ).toEqual(["starterKit", "collaboration", "collaborationCaret"]);
-  });
-});
-
-describe("TiptapEditor", () => {
-  it("holds a placeholder while the peers are still loading", async () => {
-    let releasePeers: (() => void) | null = null;
-    const gate = new Promise<void>((resolve) => {
-      releasePeers = resolve;
-    });
-    const stubs = collaborationStubs();
-    vi.resetModules();
-    vi.doMock("./editor-peers", async () => ({
-      ...(await vi.importActual<typeof EditorPeers>("./editor-peers")),
-      loadCollaborationPeers: async () => {
-        await gate;
-        return stubs.peers;
-      },
-    }));
-    const { TiptapEditor } = await import("./tiptap-editor");
-    // Both modules come from the reset graph, so the provider and the editor
-    // share one EditorContext. A provider built from the loaded peers
-    // directly, because the exported EditorProvider waits on the same gate and
-    // would render nothing at all.
-    const freshProvider = await import("./editor-provider");
-    const ResolvedProvider = freshProvider.createEditorProvider(stubs.peers);
-
-    render(
-      <ResolvedProvider
-        websocketUrl="wss://collab.example/ws"
-        documentName="doc:readme"
-        token="jwt"
-        user={{ name: "Ada" }}
-      >
-        <TiptapEditor />
-      </ResolvedProvider>,
-    );
-
-    expect(screen.getByText("Loading editor…")).toBeInTheDocument();
-    expect(screen.queryByTestId("editor-content")).toBeNull();
-
-    releasePeers?.();
-
-    await waitFor(() => {
-      expect(screen.getByTestId("editor-content")).toBeInTheDocument();
-    });
-    expect(screen.queryByText("Loading editor…")).toBeNull();
-  });
-
-  it("fails with the install list when the collaboration peers cannot be loaded", async () => {
-    const missing =
-      "@tangle-network/ui/editor needs its optional collaboration peers. Install yjs.";
-    vi.resetModules();
-    vi.doMock("./editor-peers", async () => {
-      const actual = await vi.importActual<typeof EditorPeers>("./editor-peers");
-      return {
-        ...actual,
-        loadCollaborationPeers: async () => {
-          throw new actual.MissingEditorPeersError(missing);
-        },
-      };
-    });
-    const { TiptapEditor } = await import("./tiptap-editor");
-
-    // The wrapper reaches its loader before it reads the editor context, so
-    // the install list surfaces without a provider around it.
-    render(
-      <ErrorTrap>
-        <TiptapEditor />
-      </ErrorTrap>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText(missing)).toBeInTheDocument();
-    });
-  });
-});