test: trim whitespace in text user inputs; allow custom IDs for ONSPa…

…sswordInputs
ONSdigital · Nov 4, 2024 · 54e8685 · 54e8685
1 parent f2791cc
commit 54e8685
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 16 deletions.
diff --git a/src/pages/users/UserProfileEdits/ChangePassword.test.tsx b/src/pages/users/UserProfileEdits/ChangePassword.test.tsx
@@ -16,7 +16,7 @@ jest.mock("react-router-dom", () => ({
 jest.mock("blaise-login-react/blaise-login-react-client", () => ({
     AuthManager: jest.fn().mockImplementation(() => ({
         authHeader: () => ({
-            Authorization: "Bearer " + process.env.MOCK_AUTH_TOKEN
+            Authorization: process.env.MOCK_AUTH_TOKEN
         })
     }))
 }));
@@ -42,7 +42,10 @@ beforeEach(() => {
     (useParams as jest.Mock).mockReturnValue({ user: mockUserDetails.name });
 });
 
-afterEach(() => cleanup());
+afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+});
 
 describe("ChangePassword Component", () => {
     it("matches the snapshot", async () => {
@@ -55,6 +58,26 @@ describe("ChangePassword Component", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    it("displays error message when passwords are empty", async () => {
+        const { findByText, getByLabelText, getByText } = render(
+            <MemoryRouter initialEntries={[mockState]}>
+                <ChangePassword />
+            </MemoryRouter>
+        );
+
+        const newPasswordInput = getByLabelText("New password");
+        const confirmPasswordInput = getByLabelText("Confirm password");
+        const saveButton = getByText("Save");
+
+        act(() => {
+            userEvent.type(newPasswordInput, "");
+            userEvent.type(confirmPasswordInput, "");
+            userEvent.click(saveButton);
+        });
+
+        expect(await findByText(/Passwords cannot be blank/i)).toBeVisible();
+    });
+
     it("displays error message when passwords do not match", async () => {
         const { findByText, getByLabelText, getByText } = render(
             <MemoryRouter initialEntries={[mockState]}>
@@ -68,13 +91,39 @@ describe("ChangePassword Component", () => {
 
         act(() => {
             userEvent.type(newPasswordInput, "password123");
-            userEvent.type(confirmPasswordInput, "password321");
+            userEvent.type(confirmPasswordInput, "password321333");
             userEvent.click(saveButton);
         });
 
         expect(await findByText(/Passwords do not match/i)).toBeVisible();
     });
 
+    it("calls fetch with correct parameters upon form submission with matching passwords that remove any trailing whitespaces", async () => {
+        const { getByLabelText, getByText, findByText } = render(
+            <MemoryRouter initialEntries={[mockState]}>
+                <ChangePassword />
+            </MemoryRouter>
+        );
+
+        const newPasswordInput = getByLabelText("New password");
+        const confirmPasswordInput = getByLabelText("Confirm password");
+        const saveButton = getByText("Save");
+
+        // Wait for state update
+        act(() => {
+            userEvent.type(newPasswordInput, "password123  ");
+            userEvent.type(confirmPasswordInput, "password123       ");
+            userEvent.click(saveButton);
+        });
+
+        expect(fetch).toHaveBeenCalledWith("/api/change-password/testUser", {
+            headers: {
+                Authorization: process.env.MOCK_AUTH_TOKEN,
+                password: "password123"
+            }
+        });
+    });
+
     it("calls fetch with correct parameters upon form submission with matching passwords", async () => {
         const { getByLabelText, getByText, findByText } = render(
             <MemoryRouter initialEntries={[mockState]}>
@@ -87,19 +136,17 @@ describe("ChangePassword Component", () => {
         const saveButton = getByText("Save");
 
         // Wait for state update
-        act(async () => {
+        act(() => {
             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 " + process.env.MOCK_AUTH_TOKEN,
-        //         "password": "password123"
-        //     }
-        // });
+        expect(fetch).toHaveBeenCalledWith("/api/change-password/testUser", {
+            headers: {
+                Authorization: process.env.MOCK_AUTH_TOKEN,
+                password: "password123"
+            }
+        });
     });
 });
diff --git a/src/pages/users/UserProfileEdits/__snapshots__/ChangePassword.test.tsx.snap b/src/pages/users/UserProfileEdits/__snapshots__/ChangePassword.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`ChangePassword Component matches the snapshot 1`] = `
       >
         <label
           class="ons-label"
-          for="password"
+          for="new-password"
         >
           New password
         </label>
@@ -128,7 +128,7 @@ exports[`ChangePassword Component matches the snapshot 1`] = `
         <input
           class="ons-input ons-input--text ons-input-type__input ons-u-mt-xs"
           data-testid="login-password-input"
-          id="password"
+          id="new-password"
           type="password"
           value=""
         />
@@ -138,7 +138,7 @@ exports[`ChangePassword Component matches the snapshot 1`] = `
       >
         <label
           class="ons-label"
-          for="password"
+          for="confirm-password"
         >
           Confirm password
         </label>
@@ -163,7 +163,7 @@ exports[`ChangePassword Component matches the snapshot 1`] = `
         <input
           class="ons-input ons-input--text ons-input-type__input ons-u-mt-xs"
           data-testid="login-password-input"
-          id="password"
+          id="confirm-password"
           type="password"
           value=""
         />