test(ui): write tests for Profile (#786)

* test: write tests for `Profile`

* chore: add test for `undefined` states

react-app/src/features/profile/index.tsx

@@ -4,26 +4,35 @@ import { RoleDescriptionStrings } from "shared-types";
 import { convertStateAbbrToFullName } from "@/utils";
 import config from "@/config";
 
-export const Profile = () => {
-  const { data } = useGetUser();
-  const stateAbbreviations = data?.user?.["custom:state"];
-  const fullStateNames = stateAbbreviations
-    ?.split(",")
-    .map((abbr) => convertStateAbbrToFullName(abbr))
+const getRoleDescriptionsFromUser = (roles: string | undefined) => {
+  if (roles === undefined) {
+    return "";
+  }
+
+  return roles
+    .split(",")
+    .map((role) => RoleDescriptionStrings[role])
     .join(", ");
+};
+
+const getFullStateNamesFromUser = (states: string | undefined) => {
+  if (states === undefined) {
+    return "";
+  }
 
-  // Returns comma-separated string of user role descriptions:
-  function rolesDescriptions(roles: string | undefined) {
-    const rolesArray: string[] | undefined = roles?.split(",");
+  return states.split(",").map(convertStateAbbrToFullName).join(", ");
+};
 
-    const descriptiveRolesArray = rolesArray?.map((role) => {
-      return RoleDescriptionStrings[role];
-    });
+export const Profile = () => {
+  const { data: userData } = useGetUser();
 
-    if (descriptiveRolesArray) {
-      return descriptiveRolesArray.join(", ");
-    }
-  }
+  const fullStateNames = getFullStateNamesFromUser(
+    userData.user["custom:state"],
+  );
+
+  const userRoles = getRoleDescriptionsFromUser(
+    userData.user["custom:cms-roles"],
+  );
 
   return (
     <>
@@ -32,7 +41,6 @@ export const Profile = () => {
       </SubNavHeader>
 
       <section className="block max-w-screen-xl m-auto px-4 lg:px-8 py-8 gap-10">
-        {/* using bg-sky-50 for a11y compliance */}
         <Alert className="mb-6 bg-sky-50 flex flex-row">
           <div className="py-1 mr-2 flex-none w-8">
             <svg
@@ -64,18 +72,18 @@ export const Profile = () => {
             <div className="leading-9">
               <h3 className="font-bold">Full Name</h3>
               <p>
-                {data?.user?.given_name} {data?.user?.family_name}
+                {userData?.user?.given_name} {userData?.user?.family_name}
               </p>
             </div>
 
             <div className="leading-9">
               <h3 className="font-bold">Role</h3>
-              <p>{rolesDescriptions(data?.user?.["custom:cms-roles"])}</p>
+              <p>{userRoles}</p>
             </div>
 
             <div className="leading-9">
               <h3 className="font-bold">Email</h3>
-              <p>{data?.user?.email}</p>
+              <p>{userData?.user?.email}</p>
             </div>
           </div>
 

react-app/src/features/profile/profile.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from "@testing-library/react";
+import { describe, vi, test, expect } from "vitest";
+import { Profile } from ".";
+import * as api from "@/api";
+
+vi.mock("@/api", async (importOriginals) => ({
+  ...((await importOriginals()) as object),
+  useGetUser: vi.fn(() => ({
+    data: {
+      user: {
+        "custom:state": "MD,OH,NY",
+        "custom:cms-roles": "onemac-micro-statesubmitter",
+        given_name: "George",
+        family_name: "Harrison",
+        email: "[email protected]",
+      },
+    },
+  })),
+}));
+
+describe("Profile", () => {
+  test("renders state names", () => {
+    render(<Profile />);
+
+    const states = screen.getByText("Maryland, Ohio, New York");
+
+    expect(states).toBeInTheDocument();
+  });
+
+  test("renders nothing if user has no states", () => {
+    vi.spyOn(api, "useGetUser").mockImplementationOnce(() => ({
+      data: {
+        // @ts-expect-error - avoid mocking whole user object for test
+        user: {
+          "custom:state": undefined,
+          "custom:cms-roles": "onemac-micro-statesubmitter",
+          given_name: "George",
+          family_name: "Harrison",
+          email: "[email protected]",
+        },
+      },
+    }));
+
+    render(<Profile />);
+
+    const accessGranted = screen.queryByText("Access Granted");
+
+    expect(accessGranted).not.toBeInTheDocument();
+  });
+
+  test("renders roles", () => {
+    render(<Profile />);
+
+    const states = screen.getByText("State Submitter");
+
+    expect(states).toBeInTheDocument();
+  });
+
+  test("renders full name", () => {
+    render(<Profile />);
+
+    const states = screen.getByText("George Harrison");
+
+    expect(states).toBeInTheDocument();
+  });
+
+  test("renders email", () => {
+    render(<Profile />);
+
+    const states = screen.getByText("[email protected]");
+
+    expect(states).toBeInTheDocument();
+  });
+});