jazz-tools 0.19.7 → 0.19.10

package/src/react-core/tests/createCoValueSubscriptionContext.test.tsx

@@ -164,15 +164,31 @@ describe("createCoValueSubscriptionContext", () => {
   });
 
   it("the provider shows a loading fallback when loading the coValue", async () => {
+    await setupJazzTestSync({
+      asyncPeers: true,
+    });
+
     const TestMap = co.map({
       value: z.string(),
     });
 
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    await createJazzTestAccount({
+      isCurrentActiveAccount: true,
+    });
+
     const { Provider } = createCoValueSubscriptionContext(TestMap);
 
     const { container } = render(
       <JazzTestProvider>
-        <Provider id="co_test123" loadingFallback={<div>Loading...</div>}>
+        <Provider
+          id={map.$jazz.id}
+          loadingFallback={<div>Loading...</div>}
+          unavailableFallback={<div>Unavailable</div>}
+        >
           <div>Children should not render</div>
         </Provider>
       </JazzTestProvider>,
@@ -203,13 +219,7 @@ describe("createCoValueSubscriptionContext", () => {
       </JazzTestProvider>,
     );
 
-    // Initially shows loading fallback
-    expect(container.textContent).toContain("Loading...");
-
-    // Should show unavailable fallback after CoValue load timeout
-    await waitFor(() => {
-      expect(container.textContent).toContain("Unavailable");
-    });
+    expect(container.textContent).toContain("Unavailable");
 
     // Children should never be rendered
     expect(container.textContent).not.toContain("Children should not render");

package/src/react-core/tests/testUtils.tsx

@@ -4,9 +4,12 @@ import {
   render,
   renderHook,
 } from "@testing-library/react";
-import { Account, AnonymousJazzAgent, AuthSecretStorage } from "jazz-tools";
+import { Account, AnonymousJazzAgent } from "jazz-tools";
 import React from "react";
 import { JazzTestProvider } from "../testing.js";
+import { getSqliteStorageAsync, SQLiteDatabaseDriverAsync } from "cojson";
+import Database, { type Database as DatabaseT } from "libsql";
+import { onTestFinished } from "vitest";
 
 type JazzExtendedOptions = {
   account?: Account | { guest: AnonymousJazzAgent };
@@ -23,12 +26,16 @@ const customRender = (
         account={options.account}
         isAuthenticated={options.isAuthenticated}
       >
-        {children}
+        {options.wrapper ? (
+          <options.wrapper>{children}</options.wrapper>
+        ) : (
+          children
+        )}
       </JazzTestProvider>
     );
   };
 
-  return render(ui, { wrapper: AllTheProviders, ...options });
+  return render(ui, { ...options, wrapper: AllTheProviders });
 };
 
 const customRenderHook = <TProps, TResult>(
@@ -41,12 +48,16 @@ const customRenderHook = <TProps, TResult>(
         account={options.account}
         isAuthenticated={options.isAuthenticated}
       >
-        {children}
+        {options.wrapper ? (
+          <options.wrapper>{children}</options.wrapper>
+        ) : (
+          children
+        )}
       </JazzTestProvider>
     );
   };
 
-  return renderHook(callback, { wrapper: AllTheProviders, ...options });
+  return renderHook(callback, { ...options, wrapper: AllTheProviders });
 };
 
 // re-export everything
@@ -55,3 +66,54 @@ export * from "@testing-library/react";
 // override render method
 export { customRender as render };
 export { customRenderHook as renderHook };
+
+class LibSQLSqliteAsyncDriver implements SQLiteDatabaseDriverAsync {
+  private readonly db: DatabaseT;
+
+  constructor(filename: string) {
+    this.db = new Database(filename, {});
+  }
+
+  async initialize() {
+    await this.db.pragma("journal_mode = WAL");
+  }
+
+  async run(sql: string, params: unknown[]) {
+    this.db.prepare(sql).run(params);
+  }
+
+  async query<T>(sql: string, params: unknown[]): Promise<T[]> {
+    return this.db.prepare(sql).all(params) as T[];
+  }
+
+  async get<T>(sql: string, params: unknown[]): Promise<T | undefined> {
+    return this.db.prepare(sql).get(params) as T | undefined;
+  }
+
+  async transaction(callback: () => unknown) {
+    await this.run("BEGIN TRANSACTION", []);
+
+    try {
+      await callback();
+      await this.run("COMMIT", []);
+    } catch (error) {
+      await this.run("ROLLBACK", []);
+    }
+  }
+
+  async closeDb() {
+    this.db.close();
+  }
+}
+
+export async function createAsyncStorage() {
+  const storage = await getSqliteStorageAsync(
+    new LibSQLSqliteAsyncDriver(":memory:"),
+  );
+
+  onTestFinished(() => {
+    storage.close();
+  });
+
+  return storage;
+}

package/src/react-core/tests/useCoState.test.ts

@@ -64,13 +64,9 @@ describe("useCoState", () => {
       account,
     });
 
-    expect(result.current.$jazz.loadingState).toBe(CoValueLoadingState.LOADING);
-
-    await waitFor(() => {
-      expect(result.current.$jazz.loadingState).toBe(
-        CoValueLoadingState.UNAVAILABLE,
-      );
-    });
+    expect(result.current.$jazz.loadingState).toBe(
+      CoValueLoadingState.UNAVAILABLE,
+    );
   });
 
   it("should update the value when the coValue changes", async () => {

package/src/react-core/tests/useSubscriptionSelector.test.ts

@@ -89,13 +89,9 @@ describe("useSubscriptionSelector", () => {
       return useSubscriptionSelector(subscription);
     });
 
-    expect(result.current.$jazz.loadingState).toBe(CoValueLoadingState.LOADING);
-
-    await waitFor(() => {
-      expect(result.current.$jazz.loadingState).toBe(
-        CoValueLoadingState.UNAVAILABLE,
-      );
-    });
+    expect(result.current.$jazz.loadingState).toBe(
+      CoValueLoadingState.UNAVAILABLE,
+    );
   });
 
   it("should return coAccount", async () => {

package/src/react-core/tests/useSuspenseAccount.test.tsx

@@ -0,0 +1,343 @@
+// @vitest-environment happy-dom
+
+import { cojsonInternals } from "cojson";
+import { Account, Group, Loaded, co, z } from "jazz-tools";
+import { assertLoaded } from "jazz-tools/testing";
+import { beforeEach, describe, expect, expectTypeOf, it } from "vitest";
+import React, { Suspense } from "react";
+import { useSuspenseAccount, useLogOut } from "../hooks.js";
+import {
+  createJazzTestAccount,
+  createJazzTestGuest,
+  setActiveAccount,
+  setupJazzTestSync,
+} from "../testing.js";
+import { act, render, renderHook, waitFor } from "./testUtils.js";
+import { ErrorBoundary } from "react-error-boundary";
+
+// Silence unhandled rejection errors coming from Suspense
+process.on("unhandledRejection", () => {});
+
+beforeEach(async () => {
+  await setupJazzTestSync({
+    asyncPeers: true,
+  });
+
+  await createJazzTestAccount({
+    isCurrentActiveAccount: true,
+  });
+});
+
+cojsonInternals.setCoValueLoadingRetryDelay(10);
+
+describe("useSuspenseAccount", () => {
+  it("should return loaded account without suspending when data is available", async () => {
+    const AccountRoot = co.map({
+      projects: co.list(
+        co.map({
+          name: z.string(),
+          description: z.string(),
+        }),
+      ),
+    });
+
+    const MyAppAccount = co
+      .account({
+        profile: co.profile({
+          name: z.string(),
+        }),
+        root: AccountRoot,
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.profile) {
+          account.$jazz.set("profile", {
+            name: creationProps?.name || "John Doe",
+          });
+        }
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", {
+            projects: [],
+          });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema: MyAppAccount,
+      isCurrentActiveAccount: true,
+      creationProps: {
+        name: "John Doe",
+      },
+    });
+
+    let suspenseTriggered = false;
+
+    const SuspenseFallback = () => {
+      suspenseTriggered = true;
+      return <div>Loading...</div>;
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Suspense fallback={<SuspenseFallback />}>{children}</Suspense>
+    );
+
+    const { result } = renderHook(
+      () =>
+        useSuspenseAccount(MyAppAccount, {
+          resolve: {
+            profile: true,
+            root: {
+              projects: true,
+            },
+          },
+        }),
+      {
+        account,
+        wrapper,
+      },
+    );
+
+    // Wait for any async operations to complete
+    await waitFor(() => {
+      expect(result.current).toBeDefined();
+    });
+
+    // Verify Suspense was not triggered since data was immediately available
+    expect(suspenseTriggered).toBe(false);
+
+    // Verify the hook returns loaded data
+    assertLoaded(result.current);
+    expect(result.current.profile.name).toBe("John Doe");
+    expect(result.current.root.projects).toEqual([]);
+  });
+
+  it("should have Loaded<A> return type", async () => {
+    const AccountRoot = co.map({
+      value: z.string(),
+    });
+
+    const MyAppAccount = co
+      .account({
+        profile: co.profile({
+          name: z.string(),
+        }),
+        root: AccountRoot,
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.profile) {
+          account.$jazz.set("profile", {
+            name: creationProps?.name || "Test User",
+          });
+        }
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", {
+            value: "test",
+          });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema: MyAppAccount,
+      isCurrentActiveAccount: true,
+    });
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+    );
+
+    const { result } = renderHook(() => useSuspenseAccount(MyAppAccount), {
+      account,
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBeDefined();
+    });
+
+    // Verify the return type is Loaded<typeof MyAppAccount>
+    expectTypeOf(result.current).toEqualTypeOf<Loaded<typeof MyAppAccount>>();
+  });
+
+  it("should suspend when account data is not immediately available", async () => {
+    const Project = co.map({
+      name: z.string(),
+      description: z.string(),
+    });
+
+    const AccountRoot = co.map({
+      projects: co.list(Project),
+    });
+
+    const root = AccountRoot.create(
+      {
+        projects: [
+          {
+            name: "My Project",
+            description: "A test project",
+          },
+        ],
+      },
+      Group.create().makePublic(),
+    );
+
+    const MyAppAccount = co.account({
+      profile: co.profile({
+        name: z.string(),
+      }),
+      root: AccountRoot,
+    });
+
+    const account = await createJazzTestAccount({
+      AccountSchema: MyAppAccount,
+      isCurrentActiveAccount: true,
+      creationProps: {
+        name: "John Doe",
+      },
+    });
+
+    account.$jazz.set("root", root);
+
+    let suspenseTriggered = false;
+
+    const SuspenseFallback = () => {
+      suspenseTriggered = true;
+      return <div>Loading...</div>;
+    };
+
+    const TestComponent = () => {
+      const account = useSuspenseAccount(MyAppAccount, {
+        resolve: {
+          root: {
+            projects: {
+              $each: true,
+            },
+          },
+        },
+      });
+      return <div>{account.root.projects[0]?.name || "No project"}</div>;
+    };
+
+    const { container } = await act(async () => {
+      return render(
+        <Suspense fallback={<SuspenseFallback />}>
+          <TestComponent />
+        </Suspense>,
+        {
+          account,
+        },
+      );
+    });
+
+    expect(suspenseTriggered).toBe(true);
+
+    // Wait for data to load - the subscription should update and resolve
+    await waitFor(() => {
+      expect(container.textContent).toContain("My Project");
+      expect(container.textContent).not.toContain("Loading...");
+    });
+  });
+
+  it("should throw error for anonymous agent", async () => {
+    const MyAppAccount = co.account({
+      profile: co.profile({
+        name: z.string(),
+      }),
+      root: co.map({
+        value: z.string(),
+      }),
+    });
+
+    const guestAccount = await createJazzTestGuest();
+
+    const TestComponent = () => {
+      useSuspenseAccount(MyAppAccount);
+      return <div>Should not render</div>;
+    };
+
+    const { container } = await act(async () => {
+      return render(
+        <ErrorBoundary fallback={<div>Error!</div>}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <TestComponent />
+          </Suspense>
+        </ErrorBoundary>,
+        {
+          account: guestAccount,
+        },
+      );
+    });
+
+    // Verify error is displayed in error boundary
+    await waitFor(
+      () => {
+        expect(container.textContent).toContain("Error!");
+      },
+      { timeout: 1000 },
+    );
+  });
+
+  it("should handle account logout", async () => {
+    const MyAppAccount = co
+      .account({
+        profile: co.profile({
+          name: z.string(),
+        }),
+        root: co.map({
+          value: z.string(),
+        }),
+      })
+      .withMigration((account, creationProps) => {
+        if (!account.$jazz.refs.profile) {
+          account.$jazz.set("profile", {
+            name: creationProps?.name || "John Doe",
+          });
+        }
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", {
+            value: "test",
+          });
+        }
+      });
+
+    const account = await createJazzTestAccount({
+      AccountSchema: MyAppAccount,
+      isCurrentActiveAccount: true,
+      creationProps: {
+        name: "John Doe",
+      },
+    });
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Suspense fallback={<div>Loading...</div>}>
+        <ErrorBoundary fallback={<div>Error!</div>}>{children}</ErrorBoundary>
+      </Suspense>
+    );
+
+    const { result } = renderHook(
+      () => {
+        const account = useSuspenseAccount(MyAppAccount);
+        const logOut = useLogOut();
+        return { account, logOut };
+      },
+      {
+        account,
+        wrapper,
+      },
+    );
+
+    // Wait for account to load
+    await waitFor(() => {
+      expect(result.current.account).toBeDefined();
+    });
+
+    // Verify initial account data
+    assertLoaded(result.current.account);
+    const initialAccountId = result.current.account.$jazz.id;
+
+    // Logout should cause an error since useSuspenseAccount requires authentication
+    await act(async () => {
+      result.current.logOut();
+    });
+
+    expect(result.current.account.$jazz.id).not.toBe(initialAccountId);
+  });
+});