Feat: Add unit testing initial parts

README.md

@@ -14,6 +14,7 @@ A simple portfolio starter theme built with React and Tailwind CSS. This is the
 -   [Tailwind CSS v3](https://tailwindcss.com)
 -   Context API For State Management
 -   Custom Hooks
+-   Unit Testing
 -   Framer Motion transitions & animations
 -   Reusable components
 -   Dark mode
@@ -68,6 +69,12 @@ npm install --global yarn
 yarn start
 ```
 
+6. ##### Run tests:
+
+```
+yarn test
+```
+
 ## Notes
 
 -   Always run `yarn install` after pulling new changes

package.json

@@ -3,10 +3,11 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-		"@testing-library/jest-dom": "^5.11.4",
-		"@testing-library/react": "^11.1.0",
-		"@testing-library/user-event": "^12.1.10",
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
 		"framer-motion": "4.1.17",
+		"postcss-cli": "^10.1.0",
 		"react": "^18.1.0",
 		"react-countup": "^6.1.1",
 		"react-dom": "^18.1.0",
@@ -18,7 +19,7 @@
 		"web-vitals": "^1.0.1"
 	},
 	"scripts": {
-		"start": "yarn run build:css && react-scripts start",
+		"start": "react-scripts --openssl-legacy-provider start",
 		"build": "yarn run react-scripts build",
 		"test": "react-scripts test",
 		"eject": "react-scripts eject",
@@ -44,8 +45,9 @@
 	},
 	"devDependencies": {
 		"@tailwindcss/forms": "^0.5.2",
+		"@testing-library/dom": "^8.20.0",
 		"autoprefixer": "^10.4.7",
-		"postcss": "^8.4.14",
+		"postcss": "^8.4.21",
 		"tailwindcss": "^3.0.24"
 	}
 }

src/App.js

@@ -4,10 +4,10 @@ import AppFooter from './components/shared/AppFooter';
 import AppHeader from './components/shared/AppHeader';
 import './css/App.css';
 import About from './pages/AboutMe';
-import Contact from './pages/Contact';
+import Contact from './pages/Contact.jsx';
 import Home from './pages/Home';
 import Projects from './pages/Projects';
-import ProjectSingle from './pages/ProjectSingle';
+import ProjectSingle from './pages/ProjectSingle.jsx';
 import { AnimatePresence } from 'framer-motion';
 import UseScrollToTop from './hooks/useScrollToTop';
 

src/__tests__/Banner.test.js

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import AppBanner from '../components/shared/AppBanner';
+import userEvent from '@testing-library/user-event';
+
+// This runs before each test. This is good instead of having the component render in each test case
+const setup = () => render(<AppBanner />);
+
+// Get user event
+function setupUserEvent(jsx) {
+	return {
+		user: userEvent.setup(),
+		...render(jsx),
+	};
+}
+
+test('it shows the title in the banner', () => {
+	setup();
+	// We expect that the title 'Hi, Iam Stoman' is in the banner component
+	expect(screen.getByText(/Hi, Iam Stoman/i)).toBeInTheDocument();
+});
+
+test('can download cv when clicked on download cv button', async () => {
+	const { user } = setupUserEvent(<AppBanner />);
+
+	const downloadCV = screen.getByText(/Download CV/i);
+
+	expect(downloadCV).toBeInTheDocument();
+
+	const downloadCVButton = downloadCV.parentElement.parentElement;
+
+	expect(downloadCVButton).toBeInTheDocument();
+
+	await user.click(downloadCVButton);
+
+	// const downloadLink = {
+	// 	click: await user.click(downloadCVButton),
+	// };
+	// jest.spyOn(document, 'createElement').mockImplementation(
+	// 	() => downloadLink
+	// );
+
+	// expect(downloadLink.download).toEqual('Stoman-Resume.pdf');
+	// expect(downloadLink.href).toEqual('/files/Stoman-Resume.pdf');
+	// expect(downloadLink.click).toHaveBeenCalledTimes(1);
+});

src/__tests__/Modal.test.js

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import HireMeModal from '../components/HireMeModal';
+
+// Get user event
+function setupUserEvent(jsx) {
+	return {
+		user: userEvent.setup(),
+		...render(jsx),
+	};
+}
+
+test('modal shows the children and a close button', async () => {
+	const { user } = setupUserEvent(<HireMeModal />);
+
+	expect(
+		screen.getByText(/What project are you looking for?/i)
+	).toBeInTheDocument();
+
+	const closeModal = screen.getByText(/Close/i);
+	expect(closeModal).toBeInTheDocument();
+
+	const closeModalButton = closeModal.parentElement;
+	expect(closeModalButton).toBeInTheDocument();
+});

src/components/about/AboutCounter.jsx

@@ -0,0 +1,41 @@
+import { useCountUp } from 'react-countup';
+import CounterItem from './CounterItem';
+
+const AboutCounter = () => {
+	useCountUp({ ref: 'experienceCounter', end: 12, duration: 2 });
+	useCountUp({ ref: 'githubStarsCounter', end: 20, duration: 2 });
+	useCountUp({ ref: 'feedbackCounter', end: 92, duration: 2 });
+	useCountUp({ ref: 'projectsCounter', end: 77, duration: 2 });
+
+	return (
+		<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
+			<div className="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between items-center">
+				<CounterItem
+					title="Years of experience"
+					counter={<span id="experienceCounter" />}
+					measurement=""
+				/>
+
+				<CounterItem
+					title="Stars on GitHub"
+					counter={<span id="githubStarsCounter" />}
+					measurement="k+"
+				/>
+
+				<CounterItem
+					title="Positive feedback"
+					counter={<span id="feedbackCounter" />}
+					measurement="%"
+				/>
+
+				<CounterItem
+					title="Projects completed"
+					counter={<span id="projectsCounter" />}
+					measurement="%"
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default AboutCounter;

src/components/about/CounterItem.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CounterItem = ({ title, counter, measurement }) => {
+	return (
+		<div className="mb-20 sm:mb-0">
+			<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
+				{counter} {measurement}
+			</h2>
+			<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
+				{title}
+			</span>
+		</div>
+	);
+};
+
+export default CounterItem;