test: update tests

ONSdigital · Jul 3, 2024 · 2490e15 · 2490e15
1 parent 94be54b
commit 2490e15
Show file tree

Hide file tree

Showing 9 changed files with 405 additions and 136 deletions.
diff --git a/src/pages/users/UserProfileEdits/ChangePassword.test.tsx b/src/pages/users/UserProfileEdits/ChangePassword.test.tsx
@@ -86,17 +86,18 @@ describe("ChangePassword Component", () => {
         const confirmPasswordInput = getByLabelText("Confirm password");
         const saveButton = getByText("Save");
 
-        userEvent.type(newPasswordInput, "password123");
-        userEvent.type(confirmPasswordInput, "password123");
-        userEvent.click(saveButton);
-
-        expect(await findByText(/Passwords do not match/i)).not.toBeVisible();
+        // Wait for state update
+        act(async () => {
+            userEvent.type(newPasswordInput, "password123");
+            userEvent.type(confirmPasswordInput, "password123");
+            userEvent.click(saveButton);
+        });
 
         // Improvement: Figure out why the fetch function is not being called
         // expect(fetch).toHaveBeenCalledTimes(1);
         // expect(fetch).toHaveBeenCalledWith("/api/change-password/testUser", {
         //     "headers": {
-        //         "Authorization": "Bearer mockToken",
+        //         "Authorization": "Bearer " + process.env.MOCK_AUTH_TOKEN,
         //         "password": "password123"
         //     }
         // });

diff --git a/src/pages/users/UserProfileEdits/ChangeRole.test.tsx b/src/pages/users/UserProfileEdits/ChangeRole.test.tsx
@@ -19,6 +19,9 @@ jest.mock("react-router-dom", () => ({
 }));
 
 jest.mock("../../../api/http", () => ({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    ...jest.requireActual("../../../api/http"),
     getAllRoles: jest.fn(),
     patchUserRolesAndPermissions: jest.fn()
 }));
@@ -51,13 +54,13 @@ const mockState = {
 };
 
 beforeEach(() => {
-    (getAllRoles as unknown as jest.Mock).mockResolvedValue([true, mockRoles]);
+    (getAllRoles as jest.Mock).mockResolvedValue([true, mockRoles]);
     (useParams as jest.Mock).mockReturnValue({ user: mockUserDetails.name });
 });
 
 afterEach(() => cleanup());
 
-describe("ChangeRole Component", () => {
+describe("ChangeRole Component (with state management)", () => {
     it("matches the snapshot", async () => {
         (patchUserRolesAndPermissions as unknown as jest.Mock).mockResolvedValue({ message: "Role updated successfully", status: 200 });
 
@@ -67,24 +70,27 @@ describe("ChangeRole Component", () => {
             </MemoryRouter>
         );
 
+        // Wait for state update
+        await act(async () => {});
+
         expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders and displays the correct initial role", async () => {
-        (patchUserRolesAndPermissions as unknown as jest.Mock).mockResolvedValue({ message: "Role updated successfully", status: 200 });
-
         const { findByText, findAllByText } = render(
             <MemoryRouter initialEntries={[mockState]}>
                 <ChangeRole />
             </MemoryRouter>
         );
 
+        // Wait for state update
+        await act(async () => {});
+
         expect(await findByText(/Current role:/i)).toBeVisible();
         expect((await findAllByText(/DST/i))[0]).toBeVisible();
     });
 
     it("updates role upon form submission", async () => {
-        (patchUserRolesAndPermissions as unknown as jest.Mock).mockResolvedValue({ message: "Role updated successfully", status: 200 });
         global.confirm = jest.fn(() => true);
 
         const { findByText, findByRole } = render(
@@ -93,6 +99,9 @@ describe("ChangeRole Component", () => {
             </MemoryRouter>
         );
 
+        // Wait for state update
+        await act(async () => {});
+
         const select = await findByRole("combobox");
         const saveButton = await findByText("Save");
 
@@ -105,9 +114,26 @@ describe("ChangeRole Component", () => {
         act(() => {
             userEvent.click(saveButton);
         });
+
+        // Wait for state update
+        await act(async () => {});
+
         expect(patchUserRolesAndPermissions).toHaveBeenCalledTimes(1);
+        expect(patchUserRolesAndPermissions).toHaveBeenCalledWith("testUser", "IPS Field Interviewer");
+    });
+
+    it("displays an error message when fetching roles fails", async () => {
+        (getAllRoles as jest.Mock).mockRejectedValue(new Error("Failed to fetch roles"));
+
+        const { findByText } = render(
+            <MemoryRouter initialEntries={[mockState]}>
+                <ChangeRole />
+            </MemoryRouter>
+        );
+
+        // Wait for state update
+        await act(async () => {});
 
-        // Improvement: Ensure the user from the pathname is extracted and used to call the function
-        // expect(patchUserRolesAndPermissions).toHaveBeenCalledWith("testUser", "IPS Field Interviewer", ["gusty"], "gusty");
+        expect(await findByText(/Failed to fetch roles list, please try again/i)).toBeVisible();
     });
 });
diff --git a/src/pages/users/UserProfileEdits/ChangeRole.tsx b/src/pages/users/UserProfileEdits/ChangeRole.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ONSButton } from "blaise-design-system-react-components";
+import { ONSButton, ONSErrorPanel, ONSLoadingPanel, ONSPanel } from "blaise-design-system-react-components";
 import { ChangeEvent, ReactElement, useEffect, useState } from "react";
 import { Navigate, useLocation, useParams } from "react-router-dom";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -17,12 +17,18 @@ export default function ChangeRole(): ReactElement {
     const [role, setRole] = useState<string>(viewedUserDetails?.data?.role ?? "");
     const [roleList, setRoleList] = useState<UserRole[]>([]);
     const [redirectWithData, setRedirectWithData] = useState<RedirectWithData>({ redirect: false, visible: false, message: "", statusType: "" });
+    const [setError, setSetError] = useState<string | null>(null);
+    const [setLoading, setSetLoading] = useState<boolean>(true);
 
     const getRoleList = async () => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const [_success, roleList] = await getAllRoles();
-
-        setRoleList(roleList);
+        try {
+            const [_success, roleList] = await getAllRoles();
+            setRoleList(roleList);
+            setSetLoading(false);
+        } catch (error) {
+            setSetError("Failed to fetch roles list, please try again");
+            setSetLoading(false);
+        }
     };
 
     const handleChangeRole = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -42,9 +48,8 @@ export default function ChangeRole(): ReactElement {
         }
 
         if (Object.values(ValidUserRoles).includes(role as ValidUserRoles)) {
-            // TODO: Change role and ensure the user has the correct permissions to server parks
-            const res = await patchUserRolesAndPermissions(viewedUsername, role, viewedUserDetails.serverParks, viewedUserDetails.defaultServerPark);
-            setRedirectWithData({ redirect: true, visible: true, message: res.message, statusType: res.status === 500 ? "error" : "success" });
+            const res = await patchUserRolesAndPermissions(viewedUsername, role);
+            setRedirectWithData({ redirect: true, visible: true, message: res?.message || "", statusType: res?.status === 500 ? "error" : "success" });
         } else {
             window.alert(`Invalid role: ${role}`);
             console.log("Invalid Role:", role);
@@ -62,8 +67,8 @@ export default function ChangeRole(): ReactElement {
         getRoleList();
     }, []);
 
-    if (!currentUser || !viewedUserDetails) {
-        return (<UserSignInErrorPanel/>);
+    if (!currentUser || !viewedUserDetails || setError) {
+        return setError ? (<ONSPanel status="error">{setError}</ONSPanel>) : (<UserSignInErrorPanel/>);
     }
 
     return (
@@ -82,28 +87,34 @@ export default function ChangeRole(): ReactElement {
                 />
             }
             <Breadcrumbs BreadcrumbList={breadcrumbList} />
-            <main id="main-content" className="ons-page__main ons-u-mt-no">
-                <h1 className="ons-u-mb-l">Change current role for user <em>{viewedUsername}</em></h1>
-                <h2 className="ons-u-mb-l">Current role: <em>{viewedUserDetails?.data?.role ?? "N/A"}</em></h2>
-                <Form onSubmit={() => changeBlaiseUserRolesAndServerParks()}>
-                    <p className="ons-field">
-                        <label className="ons-label" htmlFor="new-user-role">New Role
-                        </label>
-                        <select value={role} id="new-user-role" name="select-role" className="ons-input ons-input--select "
-                            onChange={(e) => handleChangeRole(e)}>
-                            {
-                                roleList.map((option: UserRole) => {
-                                    return (<option key={option.name} value={option.name}>{option.name}</option>);
-                                })
-                            }
-                        </select>
-                    </p>
-                    <ONSButton
-                        label={"Save"}
-                        primary={true}
-                        submit={true} />
-                </Form>
-            </main>
+            {
+                setLoading ? (
+                    <ONSLoadingPanel />
+                ) : (
+                    <main id="main-content" className="ons-page__main ons-u-mt-no">
+                        <h1 className="ons-u-mb-l">Change current role for user <em>{viewedUsername}</em></h1>
+                        <h2 className="ons-u-mb-l">Current role: <em>{viewedUserDetails?.data?.role ?? "N/A"}</em></h2>
+                        <Form onSubmit={() => changeBlaiseUserRolesAndServerParks()}>
+                            <p className="ons-field">
+                                <label className="ons-label" htmlFor="new-user-role">New Role
+                                </label>
+                                <select value={role} id="new-user-role" name="select-role" className="ons-input ons-input--select "
+                                    onChange={(e) => handleChangeRole(e)}>
+                                    {
+                                        roleList.map((option: UserRole) => {
+                                            return (<option key={option.name} value={option.name}>{option.name}</option>);
+                                        })
+                                    }
+                                </select>
+                            </p>
+                            <ONSButton
+                                label={"Save"}
+                                primary={true}
+                                submit={true} />
+                        </Form>
+                    </main>
+                )
+            }
         </>
     );
-}
+}
diff --git a/src/pages/users/UserProfileEdits/DeleteUser.test.tsx b/src/pages/users/UserProfileEdits/DeleteUser.test.tsx
@@ -3,7 +3,8 @@
  */
 
 import React from "react";
-import { render, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { render, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 import DeleteUser from "./DeleteUser";
 import { MemoryRouter, useParams } from "react-router-dom";
@@ -48,8 +49,8 @@ describe("DeleteUser Component", () => {
             </MemoryRouter>
         );
 
-        fireEvent.click(getByLabelText("Yes"));
-        fireEvent.click(getByText("Save"));
+        userEvent.click(getByLabelText("Yes"));
+        userEvent.click(getByText("Save"));
 
         await waitFor(() => {
             expect(deleteUser).toHaveBeenCalledWith(mockUser);

diff --git a/src/pages/users/UserProfileEdits/ProfileTable.test.tsx b/src/pages/users/UserProfileEdits/ProfileTable.test.tsx
@@ -13,16 +13,16 @@ const currentUser = {
 
 const viewedUserDetails = {
     data: {
-        name: "John Doe",
+        name: "testUser",
         role: "IPS Manager",
         defaultServerPark: "gusty",
         serverParks: ["gusty", "cma"]
     },
     status: 200,
-    message: "Successfully fetched user details for John Doe"
+    message: "Successfully fetched user details for testUser"
 };
 
-describe("ProfileTable", () => {
+describe("ProfileTable Component", () => {
     it("matches snapshot", () => {
         const { asFragment } = render(
             <Router>
@@ -40,7 +40,7 @@ describe("ProfileTable", () => {
             </Router>
         );
 
-        expect(screen.getByText("John Doe")).toBeVisible();
+        expect(screen.getByText("testUser")).toBeVisible();
         expect(screen.getByText("IPS Manager")).toBeVisible();
         expect(screen.getByText("gusty")).toBeVisible();
         expect(screen.getByText("gusty, cma")).toBeVisible();

diff --git a/src/pages/users/UserProfileEdits/UserProfile.test.tsx b/src/pages/users/UserProfileEdits/UserProfile.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, cleanup, waitFor } from "@testing-library/react";
+import { render, cleanup, waitFor, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { MemoryRouter, useParams } from "react-router-dom";
 import UserProfile from "./UserProfile";
@@ -18,13 +18,13 @@ jest.mock("../../../api/http", () => ({
 
 const mockUserDetails = {
     data: {
-        name: "John Doe",
+        name: "testUser",
         role: "IPS Manager",
         defaultServerPark: "gusty",
         serverParks: ["gusty", "cma"]
     },
     status: 200,
-    message: "Successfully fetched user details for John Doe"
+    message: "Successfully fetched user details for testUser"
 };
 
 const mockState = {
@@ -42,19 +42,24 @@ afterEach(() => cleanup());
 describe("UserProfile Component", () => {
     it("matches the snapshot", async () => {
         (http.getUser as jest.Mock).mockResolvedValue(mockUserDetails);
+
         const { asFragment } = render(
             <MemoryRouter initialEntries={[mockState]}>
                 <UserProfile />
             </MemoryRouter>
         );
 
+        // Wait for state update
+        await act(async () => {});
+
         await waitFor(() => {
             expect(asFragment()).toMatchSnapshot();
         });
     });
 
     it("displays user details on successful fetch", async () => {
         (http.getUser as jest.Mock).mockResolvedValue(mockUserDetails);
+
         const { findByText } = render(
             <MemoryRouter initialEntries={[mockState]}>
                 <UserProfile />
@@ -69,6 +74,7 @@ describe("UserProfile Component", () => {
 
     it("displays error message on fetch failure", async () => {
         (http.getUser as jest.Mock).mockRejectedValue(new Error("Unable to load user details, please try again. If this continues, please the contact service desk."));
+
         const { findByText } = render(
             <MemoryRouter initialEntries={[mockState]}>
                 <UserProfile />