2021csb1167/sof 100 login and signup page testing

client/.eslintrc.js

@@ -32,7 +32,7 @@ module.exports = {
         "no-unused-vars": "off",
         "react/jsx-indent": ["error", 4],
         "react/jsx-indent-props": ["error", 4],
-        "max-len": ["error", 120],
+        "max-len": ["error", 150],
         "react/prop-types": "off",
         "prettier/prettier": [
             "error",

client/src/__tests__/login_signup.test.js

@@ -0,0 +1,100 @@
+import React from "react";
+import {
+    cleanup,
+    fireEvent,
+    render,
+    screen,
+    waitFor,
+} from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import SignUp from "../pages/SignUp";
+import { login, Register } from "../https/index"; // Import login and Register functions
+import { Provider } from "react-redux";
+import { store, persistor } from "../redux/store";
+import { PersistGate } from "redux-persist/integration/react";
+
+afterEach(cleanup);
+
+jest.mock("axios", () => ({
+    create: jest.fn(() => ({
+        interceptors: {
+            request: {
+                use: jest.fn(),
+            },
+            response: {
+                use: jest.fn(),
+            },
+        },
+    })),
+}));
+
+jest.mock("../https/index", () => ({
+    ...jest.requireActual("../https/index"),
+    Register: jest.fn(),
+    login: jest.fn(),
+}));
+
+test("Renders sign up form and submits it", async () => {
+    render(
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <SignUp />
+            </PersistGate>
+        </Provider>,
+    );
+
+    Register.mockResolvedValue({
+        status: 200,
+    });
+
+    fireEvent.click(screen.getByTestId("Register-header-test"));
+
+    // Fill out the form fields
+    fireEvent.change(screen.getByTestId("email-test"), {
+        target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByTestId("username-test"), {
+        target: { value: "testuser" },
+    });
+    fireEvent.change(screen.getByTestId("password-test"), {
+        target: { value: "test123" },
+    });
+    fireEvent.change(screen.getByTestId("confirmpassword-test"), {
+        target: { value: "test123" },
+    });
+
+    // Click the sign up button
+    fireEvent.click(screen.getByRole("button", { name: "Sign Up" }));
+
+    // Wait for API call to complete
+    await waitFor(() => expect(Register).toHaveBeenCalled());
+});
+
+test("Renders login form and submits it", async () => {
+    render(
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <SignUp />
+            </PersistGate>
+        </Provider>,
+    );
+
+    login.mockResolvedValue({ status: 200 });
+
+    console.log("reg.mock", login.mock); // Check if login is mocked
+    console.log("reg.mockResolvedValueOnce", login.mockResolvedValueOnce); // Check if mockResolvedValueOnce is properly set up
+
+    // Fill out the form fields
+    fireEvent.change(screen.getByTestId("email-test2"), {
+        target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByTestId("password-test2"), {
+        target: { value: "test123" },
+    });
+
+    // Click the login button
+    fireEvent.click(screen.getByRole("button", { name: "Login" }));
+
+    // Wait for API call to complete
+    await waitFor(() => expect(login).toHaveBeenCalled());
+});

client/src/pages/SignUp.jsx

@@ -100,8 +100,8 @@ const SignUp = () => {
       setName("");
     } catch (error) {
       // errorMessage = "Failed to create an account.";
-      const { user, accessToken, refreshToken } = response.data;
-      dispatch(setUserSlice({ user, accessToken, refreshToken }));
+      // const { user, accessToken, refreshToken } = response.data;
+      // dispatch(setUserSlice({ user, accessToken, refreshToken }));
       toast.error(error, toastOptions);
     }
     setIsLoading(false);
@@ -216,6 +216,7 @@ const SignUp = () => {
                   toggle ? "border-gray-200" : "border-black"
                 } cursor-pointer`}
                 onClick={() => setToggle(false)}
+                data-testid = "Login-header-test"
               >
                 Login
               </div>
@@ -224,6 +225,7 @@ const SignUp = () => {
                   toggle ? "border-black" : "border-gray-200"
                 } cursor-pointer`}
                 onClick={() => setToggle(true)}
+                data-testid = "Register-header-test"
               >
                 Register
               </div>
@@ -245,6 +247,7 @@ const SignUp = () => {
                     value={email}
                     onChange={handleEmailChange}
                     placeholder=""
+                    data-testid = "email-test"
                     required
                   />
                 </div>
@@ -262,6 +265,7 @@ const SignUp = () => {
                     value={name}
                     onChange={(e) => setName(e.target.value)}
                     placeholder=""
+                    data-testid = "username-test"
                     required
                   />
                 </div>
@@ -279,6 +283,7 @@ const SignUp = () => {
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     placeholder=""
+                    data-testid = "password-test"
                     required
                   />
                 </div>
@@ -296,6 +301,7 @@ const SignUp = () => {
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
                     placeholder=""
+                    data-testid = "confirmpassword-test"
                     required
                   />
                 </div>
@@ -326,6 +332,7 @@ const SignUp = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder=""
+                    data-testid = "email-test2"
                     required
                   />
                 </div>
@@ -343,6 +350,7 @@ const SignUp = () => {
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     placeholder=""
+                    data-testid = "password-test2"
                     required
                   />
                 </div>