Merge pull request #91 from OudomMunint/dev

PR: Dev => Main

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 <a href="https://nodejs.org/en/download/" target="_blank">`Node Js`</a> and <a href="https://git-scm.com/downloads" target="_blank">`Git`</a> 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).
+- 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).

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",

src/components/Contact.js

@@ -73,7 +73,10 @@ function ContactForm() {
               <label className="form-label" htmlFor="email"></label>
               <input className="form-control input" type="email" id="email" name="email" value={email} onChange={(e) => 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"
+              />
             </div>
 
             {/* Message */}

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);
-  });
+  });
+}