jazz-tools 0.19.20 → 0.19.22

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

@@ -1,12 +1,12 @@
 // @vitest-environment happy-dom
 
 import { cojsonInternals } from "cojson";
-import { Account, co, Loaded, z } from "jazz-tools";
+import { Account, co, z } from "jazz-tools";
 import { beforeEach, describe, expect, expectTypeOf, it } from "vitest";
-import { useCoState } from "../index.js";
+import { useCoState, useCoStates, useSuspenseCoStates } from "../index.js";
 import { createJazzTestAccount, setupJazzTestSync } from "../testing.js";
-import { renderHook, waitFor } from "./testUtils.js";
-import { useRef } from "react";
+import { act, renderHook, waitFor } from "./testUtils.js";
+import React, { Suspense, useRef } from "react";
 
 beforeEach(async () => {
   await setupJazzTestSync();
@@ -28,15 +28,15 @@ const useRenderCount = <T>(hook: () => T) => {
   };
 };
 
+const TestMap = co.map({
+  value: z.string(),
+  get nested() {
+    return TestMap.optional();
+  },
+});
+
 describe("useCoState", () => {
   it("should not re-render when a nested coValue is updated and not selected", async () => {
-    const TestMap = co.map({
-      value: z.string(),
-      get nested() {
-        return TestMap.optional();
-      },
-    });
-
     const map = TestMap.create({
       value: "1",
       nested: TestMap.create({
@@ -74,13 +74,6 @@ describe("useCoState", () => {
   });
 
   it("should re-render when a nested coValue is updated and selected", async () => {
-    const TestMap = co.map({
-      value: z.string(),
-      get nested() {
-        return TestMap.optional();
-      },
-    });
-
     const map = TestMap.create({
       value: "1",
       nested: TestMap.create({
@@ -122,6 +115,42 @@ describe("useCoState", () => {
   });
 
   it("should not re-render when equalityFn always returns true", async () => {
+    const map = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+
+    const { result } = renderHook(() =>
+      useRenderCount(() =>
+        useCoState(TestMap, map.$jazz.id, {
+          resolve: {
+            nested: true,
+          },
+          select: (v) => {
+            if (!v.$isLoaded) {
+              return undefined;
+            }
+            return v.nested?.value;
+          },
+          equalityFn: () => true,
+        }),
+      ),
+    );
+
+    for (let i = 1; i <= 100; i++) {
+      map.nested!.$jazz.set("value", `${i}`);
+      await Account.getMe().$jazz.waitForAllCoValuesSync();
+    }
+
+    expect(result.current.result).toEqual("1");
+    expect(result.current.renderCount).toEqual(1);
+  });
+});
+
+describe("useCoStates", () => {
+  it("should not re-render when a nested coValue is updated and not selected", async () => {
     const TestMap = co.map({
       value: z.string(),
       get nested() {
@@ -129,16 +158,114 @@ describe("useCoState", () => {
       },
     });
 
-    const map = TestMap.create({
+    const map1 = TestMap.create({
       value: "1",
       nested: TestMap.create({
         value: "1",
       }),
     });
+    const map2 = TestMap.create({
+      value: "2",
+      nested: TestMap.create({
+        value: "2",
+      }),
+    });
 
     const { result } = renderHook(() =>
       useRenderCount(() =>
-        useCoState(TestMap, map.$jazz.id, {
+        useCoStates(TestMap, [map1.$jazz.id, map2.$jazz.id], {
+          resolve: {
+            nested: true,
+          },
+          select: (v) => {
+            if (!v.$isLoaded) {
+              return undefined;
+            }
+            return v.value;
+          },
+        }),
+      ),
+    );
+
+    await waitFor(() => {
+      expect(result.current.result).not.toBeUndefined();
+    });
+
+    for (let i = 1; i <= 100; i++) {
+      map1.nested!.$jazz.set("value", `${i}`);
+      map2.nested!.$jazz.set("value", `${i}`);
+      await Account.getMe().$jazz.waitForAllCoValuesSync();
+    }
+
+    expect(result.current.result).toEqual(["1", "2"]);
+    expect(result.current.renderCount).toEqual(1);
+  });
+
+  it("should re-render when a nested coValue is updated and selected", async () => {
+    const map1 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+    const map2 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+
+    const { result } = renderHook(() =>
+      useRenderCount(() =>
+        useCoStates(TestMap, [map1.$jazz.id, map2.$jazz.id], {
+          resolve: {
+            nested: true,
+          },
+          select: (v) => {
+            if (!v.$isLoaded) {
+              return undefined;
+            }
+            return v.nested?.value;
+          },
+        }),
+      ),
+    );
+
+    await waitFor(() => {
+      expect(result.current.result).not.toBeUndefined();
+    });
+
+    for (let i = 1; i <= 100; i++) {
+      map1.nested!.$jazz.set("value", `${i}`);
+      map2.nested!.$jazz.set("value", `${i}`);
+      await Account.getMe().$jazz.waitForAllCoValuesSync();
+    }
+
+    expect(result.current.result).toEqual(["100", "100"]);
+
+    // skips re-render on i = 1, only re-renders on i = [2,100], so initial render + 99 renders = 100
+    expect(result.current.renderCount).toEqual(100);
+
+    expectTypeOf(result.current.result).toEqualTypeOf<(string | undefined)[]>();
+  });
+
+  it("should not re-render when equalityFn always returns true", async () => {
+    const map1 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+    const map2 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+
+    const { result } = renderHook(() =>
+      useRenderCount(() =>
+        useCoStates(TestMap, [map1.$jazz.id, map2.$jazz.id], {
           resolve: {
             nested: true,
           },
@@ -154,11 +281,171 @@ describe("useCoState", () => {
     );
 
     for (let i = 1; i <= 100; i++) {
-      map.nested!.$jazz.set("value", `${i}`);
+      map1.nested!.$jazz.set("value", `${i}`);
+      map2.nested!.$jazz.set("value", `${i}`);
       await Account.getMe().$jazz.waitForAllCoValuesSync();
     }
 
-    expect(result.current.result).toEqual("1");
+    expect(result.current.result).toEqual(["1", "1"]);
+    expect(result.current.renderCount).toEqual(1);
+  });
+});
+
+describe("useSuspenseCoStates", () => {
+  it("should not re-render when a nested coValue is updated and not selected", async () => {
+    const map1 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+    const map2 = TestMap.create({
+      value: "2",
+      nested: TestMap.create({
+        value: "2",
+      }),
+    });
+
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(
+        Suspense,
+        { fallback: React.createElement("div", null, "Loading...") },
+        children,
+      );
+
+    const { result } = await act(async () => {
+      return renderHook(
+        () =>
+          useRenderCount(() =>
+            useSuspenseCoStates(TestMap, [map1.$jazz.id, map2.$jazz.id], {
+              resolve: {
+                nested: true,
+              },
+              select: (v) => v.value,
+            }),
+          ),
+        {
+          wrapper,
+        },
+      );
+    });
+
+    await waitFor(() => {
+      expect(result.current.result).not.toBeUndefined();
+    });
+
+    for (let i = 1; i <= 100; i++) {
+      map1.nested!.$jazz.set("value", `${i}`);
+      map2.nested!.$jazz.set("value", `${i}`);
+      await Account.getMe().$jazz.waitForAllCoValuesSync();
+    }
+
+    expect(result.current.result).toEqual(["1", "2"]);
+    expect(result.current.renderCount).toEqual(1);
+  });
+
+  it("should re-render when a nested coValue is updated and selected", async () => {
+    const map1 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+    const map2 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(
+        Suspense,
+        { fallback: React.createElement("div", null, "Loading...") },
+        children,
+      );
+
+    const { result } = await act(async () => {
+      return renderHook(
+        () =>
+          useRenderCount(() =>
+            useSuspenseCoStates(TestMap, [map1.$jazz.id, map2.$jazz.id], {
+              resolve: {
+                nested: true,
+              },
+              select: (v) => v.nested?.value,
+            }),
+          ),
+        {
+          wrapper,
+        },
+      );
+    });
+
+    await waitFor(() => {
+      expect(result.current.result).not.toBeUndefined();
+    });
+
+    for (let i = 1; i <= 100; i++) {
+      map1.nested!.$jazz.set("value", `${i}`);
+      map2.nested!.$jazz.set("value", `${i}`);
+      await Account.getMe().$jazz.waitForAllCoValuesSync();
+    }
+
+    expect(result.current.result).toEqual(["100", "100"]);
+
+    // skips re-render on i = 1, only re-renders on i = [2,100], so initial render + 99 renders = 100
+    expect(result.current.renderCount).toEqual(100);
+
+    expectTypeOf(result.current.result).toEqualTypeOf<(string | undefined)[]>();
+  });
+
+  it("should not re-render when equalityFn always returns true", async () => {
+    const map1 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+    const map2 = TestMap.create({
+      value: "1",
+      nested: TestMap.create({
+        value: "1",
+      }),
+    });
+
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(
+        Suspense,
+        { fallback: React.createElement("div", null, "Loading...") },
+        children,
+      );
+
+    const { result } = await act(async () => {
+      return renderHook(
+        () =>
+          useRenderCount(() =>
+            useSuspenseCoStates(TestMap, [map1.$jazz.id, map2.$jazz.id], {
+              resolve: {
+                nested: true,
+              },
+              select: (v) => v.nested?.value,
+              equalityFn: () => true,
+            }),
+          ),
+        {
+          wrapper,
+        },
+      );
+    });
+
+    for (let i = 1; i <= 100; i++) {
+      map1.nested!.$jazz.set("value", `${i}`);
+      map2.nested!.$jazz.set("value", `${i}`);
+      await Account.getMe().$jazz.waitForAllCoValuesSync();
+    }
+
+    expect(result.current.result).toEqual(["1", "1"]);
     expect(result.current.renderCount).toEqual(1);
   });
 });