[CORL-409] Add tests around ignore button visibility on user popover cards (#2364)

* Add tests around ignore button visibility on user popover cards

Staff member -> ignore should not be present
Regular commenter -> ignore button should be present

CORL-409

* chore: simplify fixture

* chore: normalize naming in test and use type instead of any

src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx

@@ -1,5 +1,5 @@
 import { pureMerge } from "coral-common/utils";
-import { GQLResolver } from "coral-framework/schema";
+import { GQLResolver, GQLStory } from "coral-framework/schema";
 import {
   act,
   createResolversStub,
@@ -8,16 +8,21 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { settings, stories, viewerPassive } from "../../fixtures";
-import create from "./create";
+import {
+  commenters,
+  moderators,
+  settings,
+  stories,
+  storyWithOnlyStaffComments,
+  viewerPassive,
+} from "../../fixtures";
+import create from "../create";
 
-const story = stories[0];
-const firstComment = story.comments.edges[0].node;
-const firstCommentAuthor = story.comments.edges[0].node.author!;
 const viewer = viewerPassive;
 
 async function createTestRenderer(
-  params: CreateTestRendererParams<GQLResolver> = {}
+  params: CreateTestRendererParams<GQLResolver> = {},
+  story: GQLStory
 ) {
   const { testRenderer, context } = create({
     ...params,
@@ -52,18 +57,23 @@ async function createTestRenderer(
 }
 
 it("ignore user", async () => {
-  const { testRenderer, tabPane } = await createTestRenderer({
-    resolvers: createResolversStub<GQLResolver>({
-      Mutation: {
-        ignoreUser: ({ variables }) => {
-          expectAndFail(variables).toMatchObject({
-            userID: firstCommentAuthor.id,
-          });
-          return {};
+  const firstComment = stories[0].comments.edges[0].node;
+  const firstCommentAuthor = stories[0].comments.edges[0].node.author!;
+  const { testRenderer, tabPane } = await createTestRenderer(
+    {
+      resolvers: createResolversStub<GQLResolver>({
+        Mutation: {
+          ignoreUser: ({ variables }) => {
+            expectAndFail(variables).toMatchObject({
+              userID: firstCommentAuthor.id,
+            });
+            return {};
+          },
         },
-      },
-    }),
-  });
+      }),
+    },
+    stories[0]
+  );
   const comment = await waitForElement(() =>
     within(testRenderer.root).getByTestID(`comment-${firstComment.id}`)
   );
@@ -96,16 +106,21 @@ it("ignore user", async () => {
 });
 
 it("render stream with ignored user", async () => {
-  const { testRenderer, tabPane } = await createTestRenderer({
-    resolvers: createResolversStub<GQLResolver>({
-      Query: {
-        viewer: () =>
-          pureMerge<typeof viewer>(viewer, {
-            ignoredUsers: [firstCommentAuthor],
-          }),
-      },
-    }),
-  });
+  const firstComment = stories[0].comments.edges[0].node;
+  const firstCommentAuthor = stories[0].comments.edges[0].node.author!;
+  const { testRenderer, tabPane } = await createTestRenderer(
+    {
+      resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          viewer: () =>
+            pureMerge<typeof viewer>(viewer, {
+              ignoredUsers: [firstCommentAuthor],
+            }),
+        },
+      }),
+    },
+    stories[0]
+  );
   await waitForElement(() =>
     within(testRenderer.root).getByTestID("comments-stream-log")
   );
@@ -113,3 +128,69 @@ it("render stream with ignored user", async () => {
     within(tabPane).queryByTestID(`comment-${firstComment.id}`)
   ).toBeNull();
 });
+
+it("render stream with only staff comments, ignore user button should not be present", async () => {
+  const { testRenderer, tabPane } = await createTestRenderer(
+    {
+      resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          viewer: () =>
+            pureMerge<typeof viewer>(viewer, {
+              ignoredUsers: [],
+            }),
+        },
+      }),
+    },
+    storyWithOnlyStaffComments
+  );
+  await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  const moderator = moderators[0];
+  const username = within(tabPane).getByText(moderator!.username!, {
+    selector: "button",
+  });
+
+  // Click on the staff member's username to
+  // reveal the user pop over
+  act(() => {
+    username.props.onClick();
+  });
+
+  // Staff members cannot be ignored, expect the
+  // ignore button to be missing
+  expect(within(tabPane).queryByText("Ignore")).toBeNull();
+});
+
+it("render stream with regular comments, ignore user button should be present", async () => {
+  const { testRenderer, tabPane } = await createTestRenderer(
+    {
+      resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          viewer: () =>
+            pureMerge<typeof viewer>(viewer, {
+              ignoredUsers: [],
+            }),
+        },
+      }),
+    },
+    stories[0]
+  );
+  await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  const commenter = commenters[0];
+  const username = within(tabPane).getByText(commenter!.username!, {
+    selector: "button",
+  });
+
+  // Click on the user's name to
+  // reveal the user pop over
+  act(() => {
+    username.props.onClick();
+  });
+
+  // Regular members can be ignored, expect the
+  // ignore button to be present
+  expect(within(tabPane).queryByText("Ignore")).toBeDefined();
+});

src/core/client/stream/test/fixtures.ts

@@ -98,6 +98,7 @@ export const baseUser = createFixture<GQLUser>({
       hasNextPage: false,
     },
   },
+  ignoreable: true,
 });
 
 export const commenters = createFixtures<GQLUser>(
@@ -106,25 +107,21 @@ export const commenters = createFixtures<GQLUser>(
       id: "user-0",
       username: "Markus",
       role: GQLUSER_ROLE.COMMENTER,
-      ignoreable: true,
     },
     {
       id: "user-1",
       username: "Lukas",
       role: GQLUSER_ROLE.COMMENTER,
-      ignoreable: true,
     },
     {
       id: "user-2",
       username: "Isabelle",
       role: GQLUSER_ROLE.COMMENTER,
-      ignoreable: true,
     },
     {
       id: "user-3",
       username: "Markus",
       role: GQLUSER_ROLE.COMMENTER,
-      ignoreable: true,
     },
   ],
   baseUser
@@ -541,6 +538,27 @@ export const storyWithDeepestReplies = denormalizeStory(
   )
 );
 
+export const storyWithOnlyStaffComments = denormalizeStory(
+  createFixture<GQLStory>(
+    {
+      id: "story-with-only-staff-comments",
+      url: "http://localhost/stories/story-with-only-staff-comments",
+      comments: {
+        edges: [
+          {
+            node: commentsFromStaff[0],
+            cursor: commentsFromStaff[0].createdAt,
+          },
+        ],
+        pageInfo: {
+          hasNextPage: false,
+        },
+      },
+    },
+    baseStory
+  )
+);
+
 export const viewerWithComments = createFixture<GQLUser>(
   {
     id: "me-with-comments",