community-jazz-vue 0.15.4

package/src/tests/proxyBehavior.test.ts

@@ -0,0 +1,267 @@
+// @vitest-environment happy-dom
+
+import { Group, co, z } from "jazz-tools";
+import { beforeAll, describe, expect, it } from "vitest";
+import { isProxy, nextTick, toRaw } from "vue";
+import { useAccount, useCoState } from "../composables.js";
+import { createJazzTestAccount } from "../testing.js";
+import { withJazzTestSetup } from "./testUtils.js";
+
+const TestMap = co.map({
+  content: z.string(),
+  get nested() {
+    return co.optional(TestMap);
+  },
+});
+
+const AccountRoot = co.map({
+  value: z.string(),
+  testMap: co.optional(TestMap),
+});
+
+const AccountProfile = co.map({
+  name: z.string(),
+});
+
+const AccountSchema = co
+  .account({
+    root: AccountRoot,
+    profile: AccountProfile,
+  })
+  .withMigration((account) => {
+    if (!account.root) {
+      account.root = AccountRoot.create({ value: "test" }, { owner: account });
+    }
+    if (!account.profile) {
+      // Profile must be owned by a Group, not the account itself
+      const group = Group.create();
+      account.profile = AccountProfile.create(
+        { name: "Test User" },
+        { owner: group },
+      );
+    }
+  });
+
+describe("Proxy Behavior Verification", () => {
+  // Create a single account for all tests to avoid parallel account creation
+  let sharedAccount: any;
+  let sharedAccountWithSchema: any;
+
+  beforeAll(async () => {
+    try {
+      sharedAccount = await createJazzTestAccount();
+      sharedAccountWithSchema = await createJazzTestAccount({ AccountSchema });
+    } catch (error) {
+      console.warn("Failed to create test account:", error);
+    }
+  });
+
+  it("should not expose Vue proxies to Jazz objects in useCoState", async () => {
+    const testMap = TestMap.create(
+      {
+        content: "test content",
+      },
+      { owner: sharedAccount },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, testMap.id), {
+      account: sharedAccount,
+    });
+
+    // The returned value should not be a Vue proxy
+    expect(isProxy(result.value)).toBe(false);
+
+    // Properties should also not be proxies
+    if (result.value) {
+      expect(isProxy(result.value.content)).toBe(false);
+    }
+  });
+
+  it("should handle nested object access without proxy issues", async () => {
+    const nestedMap = TestMap.create(
+      {
+        content: "nested content",
+      },
+      { owner: sharedAccountWithSchema },
+    );
+
+    const rootMap = AccountRoot.create(
+      {
+        value: "root value",
+        testMap: nestedMap,
+      },
+      { owner: sharedAccountWithSchema },
+    );
+
+    // Update account root
+    sharedAccountWithSchema.root = rootMap;
+
+    const [accountResult] = withJazzTestSetup(
+      () => useAccount(AccountSchema, { resolve: { root: { testMap: true } } }),
+      { account: sharedAccountWithSchema },
+    );
+
+    await nextTick();
+
+    // Should be able to access deeply nested properties without proxy issues
+    const me = accountResult.me.value;
+    expect(me).toBeDefined();
+    expect(me?.root).toBeDefined();
+    expect(me?.root?.testMap).toBeDefined();
+    expect(me?.root?.testMap?.content).toBe("nested content");
+
+    // None of these should be Vue proxies
+    expect(isProxy(me)).toBe(false);
+    expect(isProxy(me?.root)).toBe(false);
+    expect(isProxy(me?.root?.testMap)).toBe(false);
+  });
+
+  it("should handle reactivity updates without breaking Jazz object integrity", async () => {
+    const account = await createJazzTestAccount();
+
+    const testMap = TestMap.create(
+      {
+        content: "initial content",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, testMap.id), {
+      account,
+    });
+
+    // Initial state
+    expect(result.value?.content).toBe("initial content");
+    expect(isProxy(result.value)).toBe(false);
+
+    // Update the Jazz object
+    testMap.content = "updated content";
+    await nextTick();
+
+    // Should reactively update
+    expect(result.value?.content).toBe("updated content");
+
+    // Should still not be a proxy after update
+    expect(isProxy(result.value)).toBe(false);
+  });
+
+  it("should not require toRaw() calls in user code", async () => {
+    const account = await createJazzTestAccount();
+
+    const testMap = TestMap.create(
+      {
+        content: "test content",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, testMap.id), {
+      account,
+    });
+
+    // User should be able to use the object directly without toRaw()
+    const jazzObject = result.value;
+    expect(jazzObject).toBeDefined();
+
+    // Should be able to call Jazz methods directly
+    expect(() => {
+      jazzObject?.content; // Access property
+      // In a real scenario, user might call other Jazz methods here
+    }).not.toThrow();
+
+    // Should not need toRaw() to access properties
+    expect(jazzObject?.content).toBe("test content");
+  });
+
+  it("should handle context manager objects without proxy issues", async () => {
+    const account = await createJazzTestAccount();
+
+    const [result] = withJazzTestSetup(() => useAccount(), {
+      account,
+    });
+
+    // The account object should not be a proxy
+    expect(isProxy(result.me.value)).toBe(false);
+
+    // The agent should be accessible and usable without toRaw() calls
+    expect(result.agent).toBeDefined();
+    expect(typeof result.agent).toBe("object");
+
+    // Should be able to access agent properties without proxy issues
+    expect(() => {
+      const agentType = result.agent._type; // Access agent property
+      expect(agentType).toBeDefined();
+    }).not.toThrow();
+
+    // LogOut function should work without proxy issues
+    expect(typeof result.logOut).toBe("function");
+    expect(() => {
+      // Should be able to call without toRaw()
+      result.logOut.toString(); // Safe way to test function access
+    }).not.toThrow();
+  });
+
+  it("should maintain object identity across reactive updates", async () => {
+    const account = await createJazzTestAccount();
+
+    const testMap = TestMap.create(
+      {
+        content: "initial",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, testMap.id), {
+      account,
+    });
+
+    const initialObject = result.value;
+    const initialId = initialObject?.id;
+
+    // Update content
+    testMap.content = "updated";
+    await nextTick();
+
+    const updatedObject = result.value;
+
+    // Object identity should be maintained (same Jazz object)
+    expect(updatedObject?.id).toBe(initialId);
+    expect(isProxy(updatedObject)).toBe(false);
+  });
+
+  it("should handle sign-up and project creation scenarios without refresh", async () => {
+    // This test simulates the scenario mentioned in memories where proxy issues
+    // recur after sign-up and project creation without refresh
+
+    const account = await createJazzTestAccount({ AccountSchema });
+
+    const [accountResult] = withJazzTestSetup(() => useAccount(AccountSchema), {
+      account,
+    });
+
+    // Simulate project creation
+    const newProject = TestMap.create(
+      {
+        content: "new project",
+      },
+      { owner: account },
+    );
+
+    const [projectResult] = withJazzTestSetup(
+      () => useCoState(TestMap, newProject.id),
+      {
+        account,
+      },
+    );
+
+    await nextTick();
+
+    // Both account and project should work without proxy issues
+    expect(isProxy(accountResult.me.value)).toBe(false);
+    expect(isProxy(projectResult.value)).toBe(false);
+
+    // Should be able to access properties without toRaw()
+    expect(accountResult.me.value?.id).toBeDefined();
+    expect(projectResult.value?.content).toBe("new project");
+  });
+});

package/src/tests/testUtils.ts

@@ -0,0 +1,75 @@
+import type { Account, AnonymousJazzAgent } from "jazz-tools";
+import { createApp, defineComponent, h } from "vue";
+import { JazzTestProvider } from "../testing";
+
+// biome-ignore lint/suspicious/noExplicitAny: Complex generic typing with Jazz framework internals
+export const withJazzTestSetup = <C extends (...args: any[]) => any>(
+  composable: C,
+  {
+    account,
+    isAuthenticated,
+  }: {
+    account?: Account | { guest: AnonymousJazzAgent };
+    isAuthenticated?: boolean;
+  } = {},
+) => {
+  // biome-ignore lint/suspicious/noImplicitAnyLet: Not sure what the type is
+  let result;
+
+  const wrapper = defineComponent({
+    setup() {
+      result = composable();
+      // suppress missing template warning
+      return () => {};
+    },
+  });
+
+  const app = createApp({
+    setup() {
+      return () =>
+        h(
+          JazzTestProvider,
+          {
+            account,
+            isAuthenticated,
+          },
+          {
+            default: () => h(wrapper),
+          },
+        );
+    },
+  });
+
+  app.mount(document.createElement("div"));
+  // return the result and the app instance
+  // for testing provide/unmount
+  return [result, app] as [ReturnType<C>, ReturnType<typeof createApp>];
+};
+
+export function waitFor(callback: () => void) {
+  return new Promise<void>((resolve, reject) => {
+    const checkPassed = () => {
+      try {
+        return { ok: callback(), error: null };
+      } catch (error) {
+        return { ok: false, error };
+      }
+    };
+
+    let retries = 0;
+
+    const interval = setInterval(() => {
+      const { ok, error } = checkPassed();
+
+      if (ok !== false) {
+        clearInterval(interval);
+        resolve();
+      }
+
+      if (++retries > 10) {
+        clearInterval(interval);
+        reject(error);
+      }
+    }, 100);
+  });
+}

package/src/tests/useAcceptInvite.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment happy-dom
+
+import { Group, type ID, co, z } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import { createInviteLink, useAcceptInvite } from "../index.js";
+import { createJazzTestAccount, linkAccounts } from "../testing.js";
+import { waitFor, withJazzTestSetup } from "./testUtils.js";
+
+describe("useAcceptInvite", () => {
+  it("should accept the invite", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const account = await createJazzTestAccount();
+    const inviteSender = await createJazzTestAccount();
+
+    await linkAccounts(account, inviteSender);
+
+    let acceptedId: ID<co.loaded<typeof TestMap>> | undefined;
+
+    const invitelink = createInviteLink(
+      TestMap.create(
+        { value: "hello" },
+        { owner: Group.create({ owner: inviteSender }) },
+      ),
+      "reader",
+    );
+
+    location.href = invitelink;
+
+    withJazzTestSetup(
+      () =>
+        useAcceptInvite({
+          invitedObjectSchema: TestMap,
+          onAccept: (id) => {
+            acceptedId = id;
+          },
+        }),
+      {
+        account,
+      },
+    );
+
+    await waitFor(() => {
+      expect(acceptedId).toBeDefined();
+    });
+
+    const accepted = await TestMap.load(acceptedId!, {
+      loadAs: account,
+    });
+
+    expect(accepted?.value).toEqual("hello");
+  });
+});

package/src/tests/useAccount.test.ts

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+
+import { Group, co, z } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import { useAccount } from "../composables.js";
+import { createJazzTestAccount, createJazzTestGuest } from "../testing.js";
+import { withJazzTestSetup } from "./testUtils.js";
+
+const AccountRoot = co.map({
+  value: z.string(),
+});
+
+const AccountProfile = co.map({
+  name: z.string(),
+});
+
+const AccountSchema = co
+  .account({
+    root: AccountRoot,
+    profile: AccountProfile,
+  })
+  .withMigration((account) => {
+    if (!account.root) {
+      account.root = AccountRoot.create({ value: "123" }, { owner: account });
+    }
+    if (!account.profile) {
+      // Profile must be owned by a Group, not the account itself
+      const group = Group.create();
+      account.profile = AccountProfile.create(
+        { name: "Test User" },
+        { owner: group },
+      );
+    }
+  });
+
+describe("useAccount", () => {
+  it("should return the correct value", async () => {
+    const account = await createJazzTestAccount();
+
+    const [result] = withJazzTestSetup(() => useAccount(), {
+      account,
+    });
+
+    expect(result.me.value).toEqual(account);
+  });
+
+  it("should handle guest mode correctly", async () => {
+    const guestAccount = await createJazzTestGuest();
+
+    const [result] = withJazzTestSetup(() => useAccount(), {
+      account: guestAccount,
+    });
+
+    // In guest mode, me should be null and agent should be the guest
+    expect(result.me.value).toBe(null);
+    expect(result.agent._type).toBe("Anonymous");
+    expect(typeof result.logOut).toBe("function");
+  });
+});

package/src/tests/useCoState.test.ts

@@ -0,0 +1,175 @@
+// @vitest-environment happy-dom
+
+import { type CoValue, type ID, co, cojsonInternals, z } from "jazz-tools";
+import { createJazzTestAccount, setupJazzTestSync } from "jazz-tools/testing";
+import { beforeEach, describe, expect, expectTypeOf, it } from "vitest";
+import type { ComputedRef, Ref, ShallowRef } from "vue";
+import { useCoState } from "../index.js";
+import { waitFor, withJazzTestSetup } from "./testUtils.js";
+
+beforeEach(async () => {
+  await setupJazzTestSync();
+});
+
+cojsonInternals.setCoValueLoadingRetryDelay(300);
+
+describe("useCoState", () => {
+  it("should return the correct value", async () => {
+    const TestMap = co.map({
+      content: z.string(),
+    });
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, map.id, {}), {
+      account,
+    });
+
+    expect(result.value?.content).toBe("123");
+  });
+
+  it("should update the value when the coValue changes", async () => {
+    const TestMap = co.map({
+      content: z.string(),
+    });
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, map.id, {}), {
+      account,
+    });
+
+    expect(result.value?.content).toBe("123");
+
+    map.content = "456";
+
+    expect(result.value?.content).toBe("456");
+  });
+
+  it("should load nested values if requested", async () => {
+    const TestNestedMap = co.map({
+      content: z.string(),
+    });
+
+    const TestMap = co.map({
+      content: z.string(),
+      nested: TestNestedMap,
+    });
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+        nested: TestNestedMap.create(
+          {
+            content: "456",
+          },
+          { owner: account },
+        ),
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(
+      () =>
+        useCoState(TestMap, map.id, {
+          resolve: {
+            nested: true,
+          },
+        }),
+      {
+        account,
+      },
+    );
+
+    expect(result.value?.content).toBe("123");
+    expect(result.value?.nested?.content).toBe("456");
+  });
+
+  it("should load nested values on access even if not requested", async () => {
+    const TestNestedMap = co.map({
+      content: z.string(),
+    });
+
+    const TestMap = co.map({
+      content: z.string(),
+      nested: TestNestedMap,
+    });
+
+    const account = await createJazzTestAccount();
+
+    const map = TestMap.create(
+      {
+        content: "123",
+        nested: TestNestedMap.create(
+          {
+            content: "456",
+          },
+          { owner: account },
+        ),
+      },
+      { owner: account },
+    );
+
+    const [result] = withJazzTestSetup(() => useCoState(TestMap, map.id, {}), {
+      account,
+    });
+
+    expect(result.value?.content).toBe("123");
+    expect(result.value?.nested?.content).toBe("456");
+  });
+
+  it("should return null if the coValue is not found", async () => {
+    const TestMap = co.map({
+      content: z.string(),
+    });
+
+    await createJazzTestAccount({
+      isCurrentActiveAccount: true,
+    });
+
+    const [result] = withJazzTestSetup(() =>
+      useCoState(TestMap, "co_z123" as ID<co.loaded<typeof TestMap>>, {}),
+    );
+
+    expect(result.value).toBeUndefined();
+
+    await waitFor(() => {
+      expect(result.value).toBeNull();
+    });
+  });
+
+  it("should return the same type as Schema", () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const map = TestMap.create({
+      value: "123",
+    });
+
+    const [result] = withJazzTestSetup(() =>
+      useCoState(TestMap, map.id as ID<CoValue>, {
+        resolve: true,
+      }),
+    );
+    expectTypeOf(result).toEqualTypeOf<
+      Ref<co.loaded<typeof TestMap> | null | undefined>
+    >();
+  });
+});

package/src/tests/useInboxSender.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment happy-dom
+
+import { CoMap, Group, Inbox, type Loaded, co, z } from "jazz-tools";
+import { describe, expect, it } from "vitest";
+import { experimental_useInboxSender } from "../composables.js";
+import { createJazzTestAccount, linkAccounts } from "../testing.js";
+import { withJazzTestSetup } from "./testUtils.js";
+
+describe("useInboxSender", () => {
+  it("should send the message to the inbox", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const account = await createJazzTestAccount();
+    const inboxReceiver = await createJazzTestAccount();
+
+    await linkAccounts(account, inboxReceiver);
+
+    const [result] = withJazzTestSetup(
+      () =>
+        experimental_useInboxSender<
+          Loaded<typeof TestMap>,
+          Loaded<typeof TestMap>
+        >(inboxReceiver.id),
+      {
+        account,
+      },
+    );
+
+    const sendMessage = result;
+
+    const promise = sendMessage(
+      TestMap.create(
+        { value: "hello" },
+        { owner: Group.create({ owner: account }) },
+      ),
+    );
+
+    const inbox = await Inbox.load(inboxReceiver);
+
+    const incoming = await new Promise<Loaded<typeof TestMap>>((resolve) => {
+      inbox.subscribe(TestMap, async (message) => {
+        resolve(message);
+
+        return TestMap.create({ value: "got it" }, { owner: message._owner });
+      });
+    });
+
+    expect(incoming.value).toEqual("hello");
+    const response = await promise;
+    const responseMap = await TestMap.load(response, {
+      loadAs: account,
+    });
+
+    expect(responseMap!.value).toEqual("got it");
+  });
+});