[CORL-443] Add user drawer to the community section of the moderation area (#2401)

* Move the user history drawer into shared location that all admin routes access CORL-443 * Move the moderate card to the shared components for admin CORL-443 * Add a user drawer to the community area of the admin section CORL-443 * Touch up missing tabs in UserRow.css CORL-443 * Create unit tests around the user drawer CORL-443 * Move toxicity label to new shared component location to fix rebase CORL-443 * Update comment fixture generation to include reason metadata, action counts CORL-443 * Rename userDrawerID to userDrawerUserID CORL-443 * Clean up imports on user drawer unit tests CORL-443 * Add coral-test to the jest config paths CORL-443 * Add todo around creating predictable date times for test fixtures CORL-443 * Move testRenderer construction outside of act() operations CORL-443
2026-09-12 13:01:11 +08:00 · 2019-07-16 14:53:55 -06:00
parent bdb57aef7f
commit d73bdc7eec
72 changed files with 674 additions and 87 deletions
@@ -359,7 +359,18 @@ exports[`renders community 1`] = `
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
-              Markus
+              <button
+                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Markus
+              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
@@ -421,7 +432,18 @@ exports[`renders community 1`] = `
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
-              Lukas
+              <button
+                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Lukas
+              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
@@ -514,7 +536,18 @@ exports[`renders community 1`] = `
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
-              Huy
+              <button
+                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Huy
+              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
@@ -607,7 +640,18 @@ exports[`renders community 1`] = `
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
-              Isabelle
+              <button
+                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Isabelle
+              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
@@ -0,0 +1,109 @@
+import {
+  createSettings,
+  createStory,
+  createUser,
+} from "coral-test/helpers/fixture";
+
+import { pureMerge } from "coral-common/utils";
+import { GQLResolver, GQLUser, GQLUSER_ROLE } from "coral-framework/schema";
+import {
+  act,
+  createResolversStub,
+  CreateTestRendererParams,
+  waitForElement,
+  within,
+} from "coral-framework/testHelpers";
+
+import create from "./create";
+
+const viewer = createUser();
+viewer.role = GQLUSER_ROLE.ADMIN;
+const settings = createSettings();
+
+async function createTestRenderer(
+  user: GQLUser,
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context, subscriptionHandler } = create(
+    {
+      ...params,
+      resolvers: pureMerge(
+        createResolversStub<GQLResolver>({
+          Query: {
+            settings: () => settings,
+            viewer: () => viewer,
+            user: () => user,
+          },
+        }),
+        params.resolvers
+      ),
+      initLocalState: (localRecord, source, environment) => {
+        localRecord.setValue(true, "loggedIn");
+        if (params.initLocalState) {
+          params.initLocalState(localRecord, source, environment);
+        }
+      },
+    },
+    user
+  );
+
+  return { testRenderer, context, subscriptionHandler };
+}
+
+it("User drawer is open for user, user name is visible", async () => {
+  const story = createStory();
+  const user = story.comments.edges[0].node.author!;
+  const { testRenderer } = await createTestRenderer(user);
+
+  await act(async () => {
+    const { getByText } = within(testRenderer.root);
+    await waitForElement(() => getByText(user.id, { exact: false }));
+  });
+});
+
+it("User drawer is open for user, user name is visible", async () => {
+  const story = createStory();
+  const user = story.comments.edges[0].node.author!;
+  const { testRenderer } = await createTestRenderer(user);
+
+  await act(async () => {
+    const { getByText } = within(testRenderer.root);
+    await waitForElement(() => getByText(user.username!, { exact: false }));
+  });
+});
+
+it("All comments selected, comment is visible in all comments", async () => {
+  const story = createStory();
+  const user = story.comments.edges[0].node.author!;
+  const comment = user.allComments.edges[0].node;
+  const { testRenderer } = await createTestRenderer(user);
+
+  await act(async () => {
+    const { getByText } = within(testRenderer.root);
+
+    await waitForElement(() => getByText(comment.body!, { exact: false }));
+  });
+});
+
+it("Select rejected comments, rejected comment is visible.", async () => {
+  const story = createStory();
+  const user = story.comments.edges[0].node.author!;
+  const rejectedComment = user.rejectedComments.edges[0].node;
+  const { testRenderer } = await createTestRenderer(user);
+
+  await act(async () => {
+    const { getByText } = within(testRenderer.root);
+    const rejectedTab = await waitForElement(() =>
+      getByText("rejected", {
+        selector: "button",
+        exact: false,
+      })
+    );
+
+    rejectedTab.props.onClick();
+
+    await waitForElement(() =>
+      getByText(rejectedComment.body!, { exact: false })
+    );
+  });
+});
@@ -0,0 +1,32 @@
+import React from "react";
+
+import UserHistoryDrawerContainer from "coral-admin/components/UserHistoryDrawer/UserHistoryDrawerContainer";
+import { GQLUser } from "coral-framework/schema";
+import {
+  createTestRenderer as createTestRendererGeneric,
+  CreateTestRendererParams,
+} from "coral-framework/testHelpers";
+
+export default function create(
+  params: CreateTestRendererParams,
+  user: GQLUser
+) {
+  return createTestRendererGeneric(
+    "userDrawer",
+    <UserHistoryDrawerContainer
+      userID={user.id}
+      open
+      onClose={() => {
+        return;
+      }}
+    />,
+    {
+      ...params,
+      initLocalState: (localRecord, source, environment) => {
+        if (params.initLocalState) {
+          params.initLocalState(localRecord, source, environment);
+        }
+      },
+    }
+  );
+}