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