@ic-reactor/mcp 0.0.0-stage → 0.0.0

package/packages/react/tests/ownership.test.tsx

@@ -0,0 +1,260 @@
+/**
+ * A provider disposes only a client its own factory call created (#780).
+ *
+ * Apps very often create one client at module scope, one per tab and used
+ * outside React too, and hand it over as `client={() => client}`. When the
+ * provider disposed that client on unmount, every later provider (a remount,
+ * a route that remounts the tree, the next test's render) got the same client
+ * back from its factory, already disposed: every call was cancelled and the
+ * auth read anonymous, with no error anywhere. Such a client is borrowed, and
+ * whoever created it decides when it ends.
+ */
+import type { Client } from "@ic-reactor/core"
+import { act, render } from "@testing-library/react"
+import { StrictMode, useState } from "react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { ReactorProvider, useAuth } from "../src/index.js"
+import {
+  anonymousClient,
+  callThrough,
+  clientWithAuth,
+  clientWithCanister,
+  macrotask,
+  testAuth,
+  trackedFactory,
+  withDisposeSpy,
+} from "./helpers.js"
+
+afterEach(() => {
+  vi.unstubAllEnvs()
+  vi.restoreAllMocks()
+})
+
+function Status({ id = "status" }: { id?: string }) {
+  return <p data-testid={id}>{useAuth().status}</p>
+}
+
+/**
+ * A client created before any provider renders, as one at module scope is,
+ * on a fake replica, with a spy on its `dispose`.
+ */
+function moduleScopeClient() {
+  const {
+    client: real,
+    auth,
+    callers,
+  } = clientWithCanister({ identity: 7, signedIn: false })
+  const { client, dispose } = withDisposeSpy(real)
+  return { real, client, dispose, auth, callers }
+}
+
+describe("a client created before the provider's factory ran", () => {
+  it("is probed with a call that a disposed client cancels before it is sent", async () => {
+    const { real, callers } = moduleScopeClient()
+    await callThrough(real)
+    expect(callers).toEqual(["2vxsx-fae"])
+
+    real.dispose()
+
+    await expect(callThrough(real)).rejects.toMatchObject({
+      kind: "cancelled",
+      code: "client_disposed",
+    })
+    expect(callers).toHaveLength(1)
+  })
+
+  it("stays usable through three renders and unmounts in a row, as a test suite's renders are", async () => {
+    const { real, client, dispose, auth, callers } = moduleScopeClient()
+    client.queryClient.setQueryData(["cached"], "from the first render")
+    const seen: string[] = []
+
+    for (let round = 1; round <= 3; round++) {
+      const view = render(
+        <ReactorProvider client={() => client}>
+          <Status />
+        </ReactorProvider>
+      )
+      await act(macrotask)
+
+      // Its subscription works: a sign-in renders the tree again.
+      expect(view.getByTestId("status").textContent).toBe("anonymous")
+      await act(() => client.signIn())
+      expect(view.getByTestId("status").textContent).toBe("signed-in")
+      const alice = auth.getPrincipal()!.toText()
+      expect(client.authState()).toEqual({
+        status: "signed-in",
+        principal: alice,
+        expiresAt: (auth.getStatus() as { expiresAtMs: number }).expiresAtMs,
+      })
+      seen.push(alice)
+      // A call still goes out, as the signed-in user.
+      await callThrough(real)
+      await act(() => client.signOut())
+
+      view.unmount()
+      await act(macrotask)
+      expect(dispose).not.toHaveBeenCalled()
+    }
+
+    expect(callers).toEqual(seen)
+    expect(seen).toHaveLength(3)
+    // Disposing clears the cache; it is still there.
+    expect(client.queryClient.getQueryData(["cached"])).toBe(
+      "from the first render"
+    )
+  })
+
+  it("is never disposed under StrictMode's double mount, nor by the unmount after it", async () => {
+    const { real, client, dispose } = moduleScopeClient()
+
+    for (let round = 1; round <= 2; round++) {
+      const view = render(
+        <StrictMode>
+          <ReactorProvider client={() => client}>
+            <Status />
+          </ReactorProvider>
+        </StrictMode>
+      )
+      await act(macrotask)
+      view.unmount()
+      await act(macrotask)
+    }
+
+    expect(dispose).not.toHaveBeenCalled()
+    await expect(callThrough(real)).resolves.toBeUndefined()
+  })
+
+  it("keeps working for one provider when another that shares it unmounts", async () => {
+    const { real, client, dispose, auth, callers } = moduleScopeClient()
+    let hideFirst: () => void = () => {}
+    function Page() {
+      const [first, setFirst] = useState(true)
+      hideFirst = () => setFirst(false)
+      return (
+        <>
+          {first && (
+            <ReactorProvider client={() => client}>
+              <Status id="first" />
+            </ReactorProvider>
+          )}
+          <ReactorProvider client={() => client}>
+            <Status id="second" />
+          </ReactorProvider>
+        </>
+      )
+    }
+    const view = render(<Page />)
+    await act(macrotask)
+
+    act(() => hideFirst())
+    await act(macrotask)
+    expect(view.queryByTestId("first")).toBeNull()
+
+    expect(dispose).not.toHaveBeenCalled()
+    await act(() => client.signIn())
+    expect(view.getByTestId("second").textContent).toBe("signed-in")
+    await callThrough(real)
+    expect(callers).toEqual([auth.getPrincipal()!.toText()])
+  })
+
+  it("says once, in development, that the client it was given is already disposed", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {})
+    const client = anonymousClient()
+    client.dispose()
+
+    const view = render(
+      <StrictMode>
+        <ReactorProvider client={() => client}>
+          <Status />
+        </ReactorProvider>
+      </StrictMode>
+    )
+    await act(macrotask)
+    view.unmount()
+    render(
+      <ReactorProvider client={() => client}>
+        <Status />
+      </ReactorProvider>
+    )
+    await act(macrotask)
+
+    expect(error).toHaveBeenCalledTimes(1)
+    expect(String(error.mock.calls[0]![0])).toMatch(
+      /got a disposed client.*client_disposed.*client=\{\(\) => createClient\(/
+    )
+  })
+
+  it("says nothing about a disposed client in production", async () => {
+    vi.stubEnv("NODE_ENV", "production")
+    const error = vi.spyOn(console, "error").mockImplementation(() => {})
+    const client = anonymousClient()
+    client.dispose()
+
+    render(
+      <ReactorProvider client={() => client}>
+        <Status />
+      </ReactorProvider>
+    )
+    await act(macrotask)
+
+    expect(error).not.toHaveBeenCalled()
+  })
+})
+
+describe("a client the provider's factory created", () => {
+  it("is the provider's when the factory creates it lazily, so the next provider is told it is disposed", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {})
+    let shared: Client | undefined
+    const tracked = trackedFactory(() =>
+      clientWithAuth(() => testAuth({ identity: 8 }))
+    )
+    // A getter that creates the shared client on its first call: the first
+    // provider's factory call created it.
+    const getClient = () => (shared ??= tracked.factory())
+
+    const first = render(
+      <ReactorProvider client={getClient}>
+        <Status />
+      </ReactorProvider>
+    )
+    await act(macrotask)
+    first.unmount()
+    await act(macrotask)
+    expect(tracked.disposals()).toBe(1)
+
+    render(
+      <ReactorProvider client={getClient}>
+        <Status />
+      </ReactorProvider>
+    )
+    await act(macrotask)
+    expect(error).toHaveBeenCalledTimes(1)
+  })
+
+  it("is decided for a copy without core's stamps by whether a client was created during the call", async () => {
+    // A spread copy keeps no symbol key, so it carries no serial.
+    const shared = anonymousClient()
+    const sharedDispose = vi.fn()
+    const borrowed: Client = { ...shared, dispose: sharedDispose }
+    const ownedDispose = vi.fn()
+
+    const view = render(
+      <>
+        <ReactorProvider client={() => borrowed}>
+          <Status />
+        </ReactorProvider>
+        <ReactorProvider
+          client={() => ({ ...anonymousClient(), dispose: ownedDispose })}
+        >
+          <Status />
+        </ReactorProvider>
+      </>
+    )
+    await act(macrotask)
+    view.unmount()
+    await act(macrotask)
+
+    expect(sharedDispose).not.toHaveBeenCalled()
+    expect(ownedDispose).toHaveBeenCalledTimes(1)
+  })
+})

package/packages/react/tests/provider.server.test.tsx

@@ -0,0 +1,169 @@
+/**
+ * The provider on a server, in a plain Node environment: no `window`, no
+ * `localStorage`, no effects. A server renders each request as a tree of its
+ * own, so the provider has to build a separate client for every request,
+ * render the whole first pass anonymously without ever building the browser's
+ * auth, and leave nothing behind: no `QueryClient` subscribed to the
+ * process-wide focus and online managers, no client disposed.
+ */
+import { QueryClient, useQueryClient } from "@tanstack/react-query"
+import type { Client } from "@ic-reactor/core"
+import { renderToString } from "react-dom/server"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { ReactorProvider, useAuth, useClient } from "../src/index.js"
+import {
+  anonymousClient,
+  bindingsWith,
+  clientOf,
+  clientWithAuth,
+  fakeFinalizationRegistry,
+  testAuth,
+  trackedFactory,
+} from "./helpers.js"
+
+const storage = Object.getOwnPropertyDescriptor(globalThis, "localStorage")
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+  if (storage === undefined) {
+    Reflect.deleteProperty(globalThis, "localStorage")
+  } else {
+    Object.defineProperty(globalThis, "localStorage", storage)
+  }
+})
+
+describe("ReactorProvider on a server", () => {
+  it("renders in Node with no window or localStorage, anonymous, without building the auth", () => {
+    // Reading storage on the server would throw in a real runtime that has
+    // none; make it throw here too, so that touching it fails the render.
+    Object.defineProperty(globalThis, "localStorage", {
+      configurable: true,
+      get() {
+        throw new Error("localStorage was read during a server render")
+      },
+    })
+    expect(typeof window).toBe("undefined")
+    const buildAuth = vi.fn(() => testAuth({ identity: 1 }))
+
+    function Page() {
+      const { status, principal } = useAuth()
+      return <p>{`${status}:${principal}`}</p>
+    }
+    const html = renderToString(
+      <ReactorProvider client={() => clientWithAuth(buildAuth)}>
+        <Page />
+      </ReactorProvider>
+    )
+
+    expect(html).toBe("<p>anonymous:2vxsx-fae</p>")
+    expect(buildAuth).not.toHaveBeenCalled()
+    // The snapshot is a constant of this package: it must say what core's
+    // client reports for a caller nobody signed.
+    const { status, principal } = anonymousClient().authState()
+    expect(html).toBe(`<p>${status}:${principal}</p>`)
+  })
+
+  it("builds a separate client and QueryClient for each request and mounts nothing", () => {
+    const mount = vi.spyOn(QueryClient.prototype, "mount")
+    const buildAuth = vi.fn(() => testAuth({ identity: 1 }))
+    const { factory, made } = trackedFactory(() => clientWithAuth(buildAuth))
+    const seen: Array<{ client: Client; queryClient: QueryClient }> = []
+
+    function Page() {
+      seen.push({ client: useClient(), queryClient: useQueryClient() })
+      return <p>{useAuth().status}</p>
+    }
+    const request = () =>
+      renderToString(
+        <ReactorProvider client={factory}>
+          <Page />
+        </ReactorProvider>
+      )
+
+    const first = request()
+    const second = request()
+
+    expect(first).toBe("<p>anonymous</p>")
+    expect(second).toBe(first)
+    expect(factory).toHaveBeenCalledTimes(2)
+    expect(made[0]?.client).not.toBe(made[1]?.client)
+    expect(made[0]?.client.queryClient).not.toBe(made[1]?.client.queryClient)
+    // Each request's components read that request's own client and cache, and
+    // the cache a component reaches through TanStack is the client's. Compared
+    // by identity: two QueryClients that are alike are still two.
+    expect(seen).toHaveLength(2)
+    for (const [index, entry] of seen.entries()) {
+      expect(clientOf(entry.client)).toBe(made[index]?.client)
+      expect(entry.queryClient).toBe(made[index]?.client.queryClient)
+    }
+    expect(mount).not.toHaveBeenCalled()
+    expect(made.map((entry) => entry.dispose.mock.calls.length)).toEqual([0, 0])
+    expect(buildAuth).not.toHaveBeenCalled()
+  })
+
+  it("builds a separate client for each request that renders the same element", () => {
+    // The same element is rendered by two requests, as an element built once
+    // at module scope is. A server commits nothing and reaches no effect, so
+    // the provider has no place to keep a client for later: a client kept for
+    // that element would reach every later request, and with it the first
+    // request's cache and caller.
+    const { factory, made } = trackedFactory(() =>
+      clientWithAuth(() => testAuth({ identity: 1 }))
+    )
+    const seen: Client[] = []
+    function Page() {
+      seen.push(useClient())
+      return null
+    }
+    const element = (
+      <ReactorProvider client={factory}>
+        <Page />
+      </ReactorProvider>
+    )
+
+    renderToString(element)
+    renderToString(element)
+
+    expect(factory).toHaveBeenCalledTimes(2)
+    expect(seen).toHaveLength(2)
+    expect(seen[0]).not.toBe(seen[1])
+    expect(made).toHaveLength(2)
+  })
+
+  it("registers no client for disposal at collection, since the rest of the request still uses it", async () => {
+    // A server keeps no state once a component has rendered, while the
+    // children it renders later in the same request still call through the
+    // client. A registration against that state could dispose the client in
+    // the middle of the request, at whatever moment a collection runs.
+    const registry = fakeFinalizationRegistry()
+    const fresh = await bindingsWith(registry.Registry)
+    const { factory, made, disposals } = trackedFactory(() =>
+      clientWithAuth(() => testAuth({ identity: 1 }))
+    )
+    function Page() {
+      return <p>{fresh.useAuth().status}</p>
+    }
+
+    const html = renderToString(
+      <fresh.ReactorProvider client={factory}>
+        <Page />
+      </fresh.ReactorProvider>
+    )
+    registry.collectAll()
+
+    expect(html).toBe("<p>anonymous</p>")
+    expect(made).toHaveLength(1)
+    expect(registry.cleanups).toHaveLength(0)
+    expect(registry.registered).toEqual([])
+    expect(disposals()).toBe(0)
+  })
+
+  it("names the provider when a component reads the client outside one", () => {
+    function Orphan() {
+      useClient()
+      return null
+    }
+    expect(() => renderToString(<Orphan />)).toThrow(/ReactorProvider/)
+  })
+})

package/packages/react/tests/query-client.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * An app that already uses TanStack Query, under `ReactorProvider` (#903).
+ *
+ * The provider renders a `QueryClientProvider` with the client's
+ * `QueryClient`, so an app's own queries (REST calls) run on it: they retry as
+ * they would on a plain `QueryClient`. An app that nests its own
+ * `QueryClientProvider` inside keeps its reads and runs its writes there, and
+ * a write invalidates the reads on the `QueryClient` it ran on.
+ */
+import { c } from "@meantjs/schema"
+import { createTestClient } from "@ic-reactor/core/testing"
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query"
+import { act, render, screen, waitFor } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { ReactorProvider, useClient } from "../src/index.js"
+
+const CANISTER = "rdmx6-jaaaa-aaaaa-aaadq-cai"
+
+/** A counter: one read of its total, one write that adds to it. */
+const COUNTER = c.service({
+  total: c.func([], [c.nat], "query"),
+  add: c.func([c.nat], [c.nat], "update"),
+})
+type Counter = {
+  total: () => Promise<bigint>
+  add: (n: bigint) => Promise<bigint>
+}
+
+const tests: ReturnType<typeof createTestClient>[] = []
+
+afterEach(() => {
+  for (const test of tests.splice(0)) test.client.dispose()
+})
+
+function counter() {
+  let total = 0n
+  const test = createTestClient()
+  test.mock<Counter>(COUNTER, CANISTER, {
+    total: () => total,
+    add: (n) => (total += n),
+  })
+  tests.push(test)
+  return test
+}
+
+describe("an app's own TanStack Query setup under ReactorProvider", () => {
+  it("retries a REST query as a plain QueryClient does", async () => {
+    const { client } = counter()
+    const rest = vi
+      .fn<() => Promise<string>>()
+      .mockRejectedValueOnce(new TypeError("Failed to fetch"))
+      .mockResolvedValue("rest data")
+    function Rest() {
+      const read = useQuery({
+        queryKey: ["rest"],
+        queryFn: rest,
+        retryDelay: 0,
+      })
+      return <p>{read.isError ? "ERROR" : (read.data ?? "loading")}</p>
+    }
+
+    render(
+      <ReactorProvider client={() => client}>
+        <Rest />
+      </ReactorProvider>
+    )
+
+    await screen.findByText("rest data")
+    expect(rest).toHaveBeenCalledTimes(2)
+  })
+
+  it("refreshes the reads of a nested QueryClientProvider after a write", async () => {
+    const { client } = counter()
+    const app = new QueryClient()
+    function Total() {
+      const view = useClient()
+      const canister = view.canister<Counter>(COUNTER, { id: CANISTER })
+      const total = useQuery(view.queryOptions(canister, "total"))
+      const add = useMutation(view.mutationOptions(canister, "add"))
+      return (
+        <>
+          <p>total {String(total.data ?? "loading")}</p>
+          <button onClick={() => add.mutate(5n)}>add</button>
+        </>
+      )
+    }
+
+    render(
+      <ReactorProvider client={() => client}>
+        <QueryClientProvider client={app}>
+          <Total />
+        </QueryClientProvider>
+      </ReactorProvider>
+    )
+    await screen.findByText("total 0")
+
+    act(() => screen.getByText("add").click())
+
+    await waitFor(() => expect(screen.getByText("total 5")).toBeTruthy())
+    app.clear()
+  })
+})