Add modal initial test

Author: realstoman

package.json

@@ -5,7 +5,7 @@
 	"dependencies": {
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^13.4.0",
-		"@testing-library/user-event": "^12.1.10",
+		"@testing-library/user-event": "^14.4.3",
 		"framer-motion": "4.1.17",
 		"postcss-cli": "^10.1.0",
 		"react": "^18.1.0",
@@ -45,6 +45,7 @@
 	},
 	"devDependencies": {
 		"@tailwindcss/forms": "^0.5.2",
+		"@testing-library/dom": "^8.20.0",
 		"autoprefixer": "^10.4.7",
 		"postcss": "^8.4.21",
 		"tailwindcss": "^3.0.24"

src/__tests__/Banner.test.js

@@ -13,8 +13,33 @@ function setupUserEvent(jsx) {
 	};
 }
 
-test('it shows the name in banner', () => {
+test('it shows the title in the banner', () => {
 	setup();
-	const titleElement = screen.getByText(/Hi, Iam Stoman/i);
-	expect(titleElement).toBeInTheDocument();
+	// 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();
+});

yarn.lock

@@ -1714,7 +1714,7 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
-"@testing-library/dom@^8.5.0":
+"@testing-library/dom@^8.20.0", "@testing-library/dom@^8.5.0":
   version "8.20.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
   integrity sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==
@@ -1752,12 +1752,10 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^12.1.10":
-  version "12.8.3"
-  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz"
-  integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@^14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
 
 "@tootallnate/once@1":
   version "1.1.2"