Feat: User profile testcases

Author: sahilphulwani

package.json

@@ -24,6 +24,7 @@
     "test:task4": "(react-scripts test test/task4/App.test.js --watchAll=false --env=jsdom --verbose --colors --testResultsProcessor=jest-junit); (mv junit.xml ./output/task4.xml)",
     "test:task5": "(react-scripts test test/task5/App.test.js --watchAll=false --env=jsdom --verbose --colors --testResultsProcessor=jest-junit); (mv junit.xml ./output/task5.xml)",
     "test:task6": "(react-scripts test test/task6/App.test.js --watchAll=false --env=jsdom --verbose --colors --testResultsProcessor=jest-junit); (mv junit.xml ./output/task6.xml)",
+    "test:task7": "(react-scripts test test/task7/App.test.js --watchAll=false --env=jsdom --verbose --colors --testResultsProcessor=jest-junit); (mv junit.xml ./output/task7.xml)",
     "eject": "react-scripts eject"
   },
   "devDependencies": {

src/components/Login.js

@@ -10,6 +10,21 @@ const Login = ({ setUser }) => {
   const navigate = useNavigate();
 
   const handleLogin = () => {
+    if (!email && !password) {
+      setError("Please enter both email and password");
+      return;
+    }
+
+    if (!email) {
+      setError("Please enter your email");
+      return;
+    }
+
+    if (!password) {
+      setError("Please enter your password");
+      return;
+    }
+
     const user = usersData.find(
       (u) => u.email === email && u.password === password
     );
@@ -22,7 +37,11 @@ const Login = ({ setUser }) => {
         navigate("/");
       }, 2000);
     } else {
-      setError("Invalid email or password");
+      if (!usersData.some((u) => u.email === email)) {
+        setError("Invalid email");
+      } else {
+        setError("Invalid password");
+      }
     }
   };
 
@@ -32,6 +51,7 @@ const Login = ({ setUser }) => {
         <h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
         <label className="block text-gray-700 mb-2" htmlFor="email">Email</label>
         <input
+          data-testid="email-input"  
           id="email"
           type="email"
           placeholder="Email"
@@ -41,15 +61,17 @@ const Login = ({ setUser }) => {
         />
         <label className="block text-gray-700 mb-2" htmlFor="password">Password</label>
         <input
+          data-testid="password-input"   
           id="password"
           type="password"
           placeholder="Password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           className="w-full mb-6 p-2 border rounded"
         />
-        {error && <p className="text-red-500 my-8">{error}</p>}
+        {error && <p data-testid="error" className="text-red-500 my-8">{error}</p>}
         <button
+          data-testid="login-button"   
           onClick={handleLogin}
           className="w-full bg-green-700 text-white p-2 mt-16 rounded"
         >

src/components/Modals/UserModal.js

@@ -4,8 +4,6 @@ import { useNavigate } from "react-router-dom";
 const UserModal = ({ onClose, user, setUser }) => {
   const navigate = useNavigate();
 
-  console.log("UserModal -1 user:", user);
-
   const handleLogout = () => {
     setUser(null);
     onClose();
@@ -18,6 +16,7 @@ const UserModal = ({ onClose, user, setUser }) => {
           {user ? (
             <>
               <button
+                data-testid="user-profile-btn"
                 className="w-full text-left py-1 px-2 rounded hover:bg-gray-100 transition"
                 onClick={() => {
                   navigate("/user-profile");
@@ -27,6 +26,7 @@ const UserModal = ({ onClose, user, setUser }) => {
                 User Profile
               </button>
               <button
+                data-testid="logout-btn"
                 className="w-full text-left py-1 px-2 rounded hover:bg-gray-100 transition"
                 onClick={handleLogout}
               >
@@ -35,6 +35,7 @@ const UserModal = ({ onClose, user, setUser }) => {
             </>
           ) : (
             <button
+              data-testid="login-btn"
               className="w-full text-left py-1 px-2 rounded hover:bg-gray-100 transition"
               onClick={() => {
                 navigate("/login");

src/components/UserProfile.js

@@ -1,10 +1,22 @@
 import React from "react";
+import { ArrowLeft } from "lucide-react";
 import placeholder from "../assests/user-placeholder.png";
+import { useNavigate } from "react-router-dom";
 
 const UserProfile = ({ user }) => {
+  const navigate = useNavigate();
+
   return (
-    <div className="min-h-screen flex flex-col">
-      <div className="flex-grow flex items-center justify-center">
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="flex flex-col items-start">
+        <button
+          data-testid="home-btn"
+          onClick={() => navigate("/")}
+          className="flex border border-gray-300 rounded-md p-2 mb-4"
+        >
+          <ArrowLeft className="h-12 w-16 mr-1" />
+          Back to Home
+        </button>
         <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
           <div className="flex flex-col items-center p-8">
             <img
@@ -13,10 +25,13 @@ const UserProfile = ({ user }) => {
               alt={user.name}
             />
             <div className="text-center">
-              <div className="text-2xl font-bold text-green-700 mb-14">
+              <div
+                data-testid="username"
+                className="text-2xl font-bold text-green-700 mb-14"
+              >
                 {user.name}
               </div>
-              <div className="text-left">
+              <div data-testid="user-details" className="text-left">
                 <p className="mt-2 text-gray-500">Email: {user.email}</p>
                 <p className="mt-2 text-gray-500">DOB: {user.dob}</p>
                 <p className="mt-2 text-gray-500">Address: {user.address}</p>
@@ -29,4 +44,4 @@ const UserProfile = ({ user }) => {
   );
 };
 
-export default UserProfile;
+export default UserProfile;

src/data/users.json

@@ -1,18 +1,42 @@
 [
     {
-      "id": 1,
-      "name": "John Doe",
-      "email": "john@example.com",
-      "password": "password123",
-      "dob": "1990-01-01",
-      "address": "123 Main St, Anytown, USA"
+        "id": 1,
+        "name": "Alex Taylor",
+        "email": "alex.taylor@example.com",
+        "password": "securePass123",
+        "dob": "1992-03-10",
+        "address": "101 Maple St, Springfield, USA"
     },
     {
-      "id": 2,
-      "name": "Jane Smith",
-      "email": "jane@example.com",
-      "password": "password456",
-      "dob": "1985-05-15",
-      "address": "456 Elm St, Othertown, USA"
+        "id": 2,
+        "name": "Casey Morgan",
+        "email": "casey.morgan@example.com",
+        "password": "myPassword456",
+        "dob": "1988-07-22",
+        "address": "202 Oak Ave, Rivertown, USA"
+    },
+    {
+        "id": 3,
+        "name": "Jordan Lee",
+        "email": "jordan.lee@example.com",
+        "password": "pass@789",
+        "dob": "1995-12-05",
+        "address": "303 Pine Ln, Brooksville, USA"
+    },
+    {
+        "id": 4,
+        "name": "Taylor Quinn",
+        "email": "taylor.quinn@example.com",
+        "password": "Taylor#1234",
+        "dob": "1990-11-18",
+        "address": "404 Birch Rd, Forestville, USA"
+    },
+    {
+        "id": 5,
+        "name": "Riley Blake",
+        "email": "riley.blake@example.com",
+        "password": "Riley$5678",
+        "dob": "1987-08-30",
+        "address": "505 Cedar Ct, Lakeside, USA"
     }
 ]