jest unit test added

package.json

@@ -9,9 +9,11 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "email-validator": "^2.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "validator": "^13.9.0",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/LoginForm/index.js

@@ -8,18 +8,39 @@ import Grid from '@mui/material/Grid';
 import Snackbar from '@mui/material/Snackbar';
 import Typography from '@mui/material/Typography';
 import logo from '../../assets/logo.svg';
-
+import { validateEmail, validatePassword } from './validation';
 
 export default function LoginForm() {
   const [showAlert, setShowAlert] = useState(false);
-  const validateForm = (event) => {
+  const [showErrorEmail, setShowErrorEmail] = useState(false);
+  const [showErrorPwd, setShowErrorPwd] = useState(false);
+
+  function validateForm(event) {
     event.preventDefault()
     const data = new FormData(event.currentTarget);
     const email = data.get('email');
     const password = data.get('password');
 
     // Add validation code here
 
+    const emailValidateResult = validateEmail(email)
+
+    if (!emailValidateResult) {
+      setShowErrorEmail("Please enter valid email address");
+    } else {
+      setShowErrorEmail(false);
+    }
+
+    const pwdValidateError = validatePassword(password)
+
+    if (pwdValidateError) {
+      setShowErrorPwd(pwdValidateError);
+    } else {
+      setShowErrorPwd(false);
+    }
+
+    return (emailValidateResult && !pwdValidateError)
+
   }
 
   const handleSubmit = (event) => {
@@ -29,8 +50,9 @@ export default function LoginForm() {
       email: data.get('email'),
       password: data.get('password'),
     });
-    validateForm(event);
-    setShowAlert("Login Successful");
+    if (validateForm(event)) {
+      setShowAlert("Login Successful");
+    }
   };
 
   return (
@@ -79,6 +101,8 @@ export default function LoginForm() {
           </Typography>
           <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
             <TextField
+              error={showErrorEmail}
+              helperText={showErrorEmail}
               margin="normal"
               required
               fullWidth
@@ -89,6 +113,8 @@ export default function LoginForm() {
               autoFocus
             />
             <TextField
+              error={showErrorPwd}
+              helperText={showErrorPwd}
               margin="normal"
               required
               fullWidth

src/components/LoginForm/validation.js

@@ -0,0 +1,34 @@
+import * as EmailValidator from 'email-validator';
+
+const hasSpecialChar = (str) => {
+    return /[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(str);
+}
+
+const hasNumber = (str) => {
+    return /\d/.test(str);
+}
+
+const hasLowerCase = (str) => {
+    return str.toUpperCase() !== str;
+}
+
+const hasUpperCase = (str) => {
+    return str.toLowerCase() !== str;
+}
+
+function validatePassword(text) {
+    if (text.length < 8) return "Password should be 8 or more characters";
+    if (!hasLowerCase(text) || !hasUpperCase(text)) return "Password should contains minimum 1 character for both uppercase and lowercase letter";
+    if (!hasNumber(text)) return "Password should contains minimum 1 digit of numeric value";
+    if (!hasSpecialChar(text)) return "Password should contains minimum 1 special character";
+    return "";
+}
+
+function validateEmail(email) {
+    return EmailValidator.validate(email);
+}
+
+export {
+    validatePassword,
+    validateEmail,
+}

src/components/LoginForm/validation.test.js

@@ -0,0 +1,35 @@
+import { validateEmail, validatePassword } from './validation';
+
+test("Password should be 8 or more characters", () => {
+    expect(validatePassword("aaa")).toBe("Password should be 8 or more characters");
+});
+
+test("Password should contains minimum 1 character for both uppercase and lowercase letter", () => {
+    expect(validatePassword("aaabbbcc")).toBe("Password should contains minimum 1 character for both uppercase and lowercase letter");
+    expect(validatePassword("AAABBBCC")).toBe("Password should contains minimum 1 character for both uppercase and lowercase letter");
+});
+
+test("Password should contains minimum 1 digit of numeric value", () => {
+    expect(validatePassword("Aaabbbcc")).toBe("Password should contains minimum 1 digit of numeric value");
+});
+
+test("Password should contains minimum 1 special character", () => {
+    expect(validatePassword("Aaabbbcc1")).toBe("Password should contains minimum 1 special character");
+});
+
+test("Password that meet all requirements should pass validation and return no error message", () => {
+    expect(validatePassword("Aaabbbcc1#")).toBe("");
+});
+
+
+test("Email should contain @ symbol", () => {
+    expect(validateEmail("aaa")).toBe(false);
+});
+
+test("Email should contain correct domain", () => {
+    expect(validateEmail("[email protected]")).toBe(false);
+});
+
+test("Valid email should pass validation", () => {
+    expect(validateEmail("[email protected]")).toBe(true);
+});