From 7a1f67103677f0df9782a0e9d54f6064db365d8c Mon Sep 17 00:00:00 2001 From: samueljazzjohn Date: Wed, 22 Feb 2023 01:35:51 +0530 Subject: [PATCH] jest unit test added --- package-lock.json | 28 +++++++++++++++++ package.json | 2 ++ src/components/LoginForm/LoginForm.test.js | 10 ------ src/components/LoginForm/index.js | 34 +++++++++++++++++--- src/components/LoginForm/validation.js | 34 ++++++++++++++++++++ src/components/LoginForm/validation.test.js | 35 +++++++++++++++++++++ 6 files changed, 129 insertions(+), 14 deletions(-) delete mode 100644 src/components/LoginForm/LoginForm.test.js create mode 100644 src/components/LoginForm/validation.js create mode 100644 src/components/LoginForm/validation.test.js diff --git a/package-lock.json b/package-lock.json index b7c7e3d..cc5c3c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,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" } }, @@ -6506,6 +6508,14 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.46.tgz", "integrity": "sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ==" }, + "node_modules/email-validator": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz", + "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==", + "engines": { + "node": ">4.0" + } + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -15317,6 +15327,14 @@ "node": ">= 8" } }, + "node_modules/validator": { + "version": "13.9.0", + "resolved": "https://registry.npmjs.org/validator/-/validator-13.9.0.tgz", + "integrity": "sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -20901,6 +20919,11 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.46.tgz", "integrity": "sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ==" }, + "email-validator": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz", + "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==" + }, "emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -27176,6 +27199,11 @@ } } }, + "validator": { + "version": "13.9.0", + "resolved": "https://registry.npmjs.org/validator/-/validator-13.9.0.tgz", + "integrity": "sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index e43f16a..2deee56 100644 --- a/package.json +++ b/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": { diff --git a/src/components/LoginForm/LoginForm.test.js b/src/components/LoginForm/LoginForm.test.js deleted file mode 100644 index 95c9925..0000000 --- a/src/components/LoginForm/LoginForm.test.js +++ /dev/null @@ -1,10 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import LoginForm from '.'; - -test('renders sign in page', () => { - render(); - const signInText = screen.getByText("Sign in"); - expect(signInText).toBeInTheDocument(); -}); - -// Add more unit test here \ No newline at end of file diff --git a/src/components/LoginForm/index.js b/src/components/LoginForm/index.js index 7cd1254..8188e46 100644 --- a/src/components/LoginForm/index.js +++ b/src/components/LoginForm/index.js @@ -8,11 +8,14 @@ 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'); @@ -20,6 +23,24 @@ export default function LoginForm() { // 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() { { + 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, +} \ No newline at end of file diff --git a/src/components/LoginForm/validation.test.js b/src/components/LoginForm/validation.test.js new file mode 100644 index 0000000..1ee2eda --- /dev/null +++ b/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("aaa@gmail.c")).toBe(false); +}); + +test("Valid email should pass validation", () => { + expect(validateEmail("aaa@gmail.com")).toBe(true); +});