From 41a4d3ebed2581034352a7188630d32f035089f3 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Tue, 17 Dec 2024 16:22:44 -0700
Subject: [PATCH] Add test to check for cache updates to masked fields

---
 .../__tests__/useSuspenseFragment.test.tsx    | 140 ++++++++++++++++++
 1 file changed, 140 insertions(+)

diff --git a/src/react/hooks/__tests__/useSuspenseFragment.test.tsx b/src/react/hooks/__tests__/useSuspenseFragment.test.tsx
index 13460e53e1..928e3e5387 100644
--- a/src/react/hooks/__tests__/useSuspenseFragment.test.tsx
+++ b/src/react/hooks/__tests__/useSuspenseFragment.test.tsx
@@ -4,8 +4,11 @@ import {
 } from "../useSuspenseFragment";
 import {
   ApolloClient,
+  FragmentType,
   gql,
   InMemoryCache,
+  Masked,
+  MaskedDocumentNode,
   MaybeMasked,
   TypedDocumentNode,
 } from "../../../core";
@@ -1073,3 +1076,140 @@ test("does not rerender for cache writes to masked fields", async () => {
 
   await expect(takeSnapshot).not.toRerender();
 });
+
+test("updates child fragments for cache updates to masked fields", async () => {
+  type Post = {
+    __typename: "Post";
+    id: number;
+    title: string;
+  } & { " $fragmentRefs"?: { PostFields: PostFields } };
+
+  type PostFields = {
+    __typename: "Post";
+    updatedAt: string;
+  } & { " $fragmentName"?: "PostFields" };
+
+  const client = new ApolloClient({
+    dataMasking: true,
+    cache: new InMemoryCache(),
+  });
+
+  const postFieldsFragment: MaskedDocumentNode<PostFields> = gql`
+    fragment PostFields on Post {
+      updatedAt
+    }
+  `;
+
+  const postFragment: MaskedDocumentNode<Post> = gql`
+    fragment PostFragment on Post {
+      id
+      title
+      ...PostFields
+    }
+
+    ${postFieldsFragment}
+  `;
+
+  client.writeFragment({
+    fragment: postFragment,
+    fragmentName: "PostFragment",
+    data: {
+      __typename: "Post",
+      id: 1,
+      title: "Blog post",
+      updatedAt: "2024-01-01",
+    },
+  });
+
+  const { render, mergeSnapshot, takeRender } = createRenderStream({
+    initialSnapshot: {
+      parent: null as UseSuspenseFragmentResult<Masked<Post>> | null,
+      child: null as UseSuspenseFragmentResult<Masked<PostFields>> | null,
+    },
+  });
+
+  function Parent() {
+    useTrackRenders();
+    const parent = useSuspenseFragment({
+      fragment: postFragment,
+      fragmentName: "PostFragment",
+      from: { __typename: "Post", id: 1 },
+    });
+
+    mergeSnapshot({ parent });
+
+    return <Child post={parent.data} />;
+  }
+
+  function Child({ post }: { post: FragmentType<PostFields> }) {
+    useTrackRenders();
+    const child = useSuspenseFragment({
+      fragment: postFieldsFragment,
+      from: post,
+    });
+
+    mergeSnapshot({ child });
+    return null;
+  }
+
+  using _disabledAct = disableActEnvironment();
+  await render(<Parent />, {
+    wrapper: ({ children }) => (
+      <ApolloProvider client={client}>{children}</ApolloProvider>
+    ),
+  });
+
+  {
+    const { snapshot } = await takeRender();
+
+    expect(snapshot).toEqual({
+      parent: {
+        data: {
+          __typename: "Post",
+          id: 1,
+          title: "Blog post",
+        },
+      },
+      child: {
+        data: {
+          __typename: "Post",
+          updatedAt: "2024-01-01",
+        },
+      },
+    });
+  }
+
+  client.writeFragment({
+    fragment: postFragment,
+    fragmentName: "PostFragment",
+    data: {
+      __typename: "Post",
+      id: 1,
+      title: "Blog post",
+      updatedAt: "2024-02-01",
+    },
+  });
+
+  {
+    const { snapshot, renderedComponents } = await takeRender();
+
+    expect(renderedComponents).toStrictEqual([Child]);
+    expect(snapshot).toEqual({
+      parent: {
+        data: {
+          __typename: "Post",
+          id: 1,
+          title: "Blog post",
+        },
+      },
+      child: {
+        data: {
+          __typename: "Post",
+          updatedAt: "2024-02-01",
+        },
+      },
+    });
+  }
+
+  await expect(takeRender).not.toRerender();
+});