diff --git a/README.md b/README.md
index 79bc75c..5a81460 100644
--- a/README.md
+++ b/README.md
@@ -27,12 +27,13 @@ This project was built using these technologies.
- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
-- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
-- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
-- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)
+- ![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
- ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)
+- ![ESLint](https://img.shields.io/badge/eslint-%234B32C3.svg?style=for-the-badge&logo=eslint&logoColor=white)
- ![Bootstrap](https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white)
- [![Webpack](https://img.shields.io/badge/Webpack-2ea44f?style=for-the-badge&logo=webpack&logoColor=light+blue)](https://)
+- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
## Getting Started
- Install `Node Js` and `Git` globally on ur machine.
@@ -57,15 +58,23 @@ This project was built using these technologies.
- Testing setup can be found in `setupTests.js` & all tests are in `App.test.js`.
- Tests are written using Jest & React Testing Library.
- All 5 Tests are currently integrated into the `CI/CD` pipeline.
-- Example of when all tests pass:
+- Example of test output:
```bash
- PASS src/App.test.js
- ✓ Test home page content (50 ms)
- ✓ Find contact form (69 ms)
- ✓ Find form submit button (11 ms)
- ✓ Test web vitals (1 ms)
- ✓ Test AboutPage (15 ms)
+ PASS src/App.test.js
+ √ Test home page content (525 ms)
+ √ Find contact form (156 ms)
+ √ Find form submit button (38 ms)
+ √ Test web vitals (2 ms)
+ √ Test AboutPage (30 ms)
+
+Test Suites: 1 passed, 1 total
+Tests: 5 passed, 5 total
+Snapshots: 0 total
+Time: 4.137 s
```
+## Forms
+- The implementation of the contact form is integrated with `Netlify forms`.
+- Learn how to set up `Netlify forms` [here](https://docs.netlify.com/forms/setup/).
## Known Issues
-- Security issues found in dependencies but are low risk to this project, See dependabot alert [#26](https://github.com/OudomMunint/StudioZed-ReactJS/security/dependabot/26), alert [#12](https://github.com/OudomMunint/StudioZed-ReactJS/security/dependabot/12) and [#27](https://github.com/OudomMunint/StudioZed-ReactJS/security/dependabot/27).
\ No newline at end of file
+- Security issues found in dependencies but are low risk to this project, See dependabot alert [#26](https://github.com/OudomMunint/StudioZed-ReactJS/security/dependabot/26), alert [#12](https://github.com/OudomMunint/StudioZed-ReactJS/security/dependabot/12).
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a629587..fcf6ee3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
- "axios": "^1.6.0",
+ "axios": "^1.7.4",
"bootstrap": "^5.1.3",
"css-select": "^5.1.0",
"glob": "^10.3.1",
@@ -6217,9 +6217,9 @@
}
},
"node_modules/axios": {
- "version": "1.6.8",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
- "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+ "version": "1.7.4",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+ "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
diff --git a/package.json b/package.json
index 6ac8fed..3ff92d2 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
- "axios": "^1.6.0",
+ "axios": "^1.7.4",
"bootstrap": "^5.1.3",
"css-select": "^5.1.0",
"glob": "^10.3.1",
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 06f9372..c6b0663 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -73,7 +73,10 @@ function ContactForm() {
setEmail(e.target.value)}
placeholder="Email"
- required />
+ required
+ pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
+ title="Please enter a valid email address"
+ />
{/* Message */}
diff --git a/src/index.js b/src/index.js
index 820580d..10ecc33 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,6 +29,11 @@ const isDevelopment = process.env.NODE_ENV === "development";
// }
// Web Vitals
+if (isDevelopment) {
+ reportWebVitals(console.log);
+}
+else {
reportWebVitals(metric => {
console.log('Web Vitals metric:', metric);
- });
\ No newline at end of file
+ });
+}
\ No newline at end of file