tkhang1999 · tkhang1999 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 3, 2024
diff --git a/package.json b/package.json
@@ -4,15 +4,12 @@
   "private": true,
   "homepage": "https://tkhang1999.github.io/about-me/",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-reveal": "^1.2.2",
+    "react": "^18.3.1",
+    "react-awesome-reveal": "^4.2.14",
+    "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",
     "react-toggle": "^4.1.2",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^4.2.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -44,23 +41,24 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "gh-pages": "^5.0.0",
-    "prettier": "2.4.1",
-    "react-test-renderer": "^16.14.0",
-    "cheerio": "=1.0.0-rc.3"
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "babel-jest": "^29.7.0",
+    "gh-pages": "^6.2.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "3.4.1",
+    "react-test-renderer": "^18.3.1"
   },
   "jest": {
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/fileMock.js",
       "\\.(css|less)$": "<rootDir>/src/tests/styleMock.js"
     },
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/tests/setup-jest.js",
-      "<rootDir>/src/tests/setupTests.js"
-    ],
     "testEnvironment": "jsdom"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/components/About.js b/src/components/About.js
@@ -2,7 +2,7 @@ import aboutImg from "../images/about.png";
 
 const About = () => {
   return (
-    <section className="about section" id="about">
+    <section className="about section" id="about" data-testid="about">
       <h2 className="section-title">About</h2>
 
       <div className="about__container bd-container bd-grid">

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <footer className="footer">
+    <footer className="footer" data-testid="footer">
       <p className="footer__title">Khang Le</p>
       <div className="footer__social">
         <a href="mailto:tkhang1999@gmail.com" className="footer__icon">

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,28 +1,27 @@
-import Slide from "react-reveal/Slide";
-
+import { Slide } from "react-awesome-reveal";
 import homeImg from "../images/home.png";
 
 const Home = () => {
   return (
-    <section className="home bd-container bd-grid" id="home">
+    <section className="home bd-container bd-grid" id="home" data-testid="home">
       <div>
         <div className="home__data">
-          <div className="home__intro">
-            <Slide top>
-              <h1 className="home__title">
-                Hi, I'm <span className="home__title-color">Khang</span>
-              </h1>
-              <p className="home__content">A Computer Science Enthusiast</p>
-            </Slide>
-          </div>
-          <Slide top>
+          <Slide direction="down" cascade triggerOnce>
+            <div className="home__intro">
+              <Slide direction="down" cascade triggerOnce>
+                <h1 className="home__title">
+                  Hi, I'm <span className="home__title-color">Khang</span>
+                </h1>
+                <p className="home__content">A Computer Science Enthusiast</p>
+              </Slide>
+            </div>
             <a href="mailto:tkhang1999@gmail.com" className="home__button">
               Contact
             </a>
           </Slide>
         </div>
-        <Slide top cascade>
-          <div className="home__social">
+        <div className="home__social">
+          <Slide direction="down" cascade triggerOnce>
             <a
               href="https://www.linkedin.com/in/tan-khang-le/"
               className="home__social-icon"
@@ -35,8 +34,8 @@ const Home = () => {
             >
               <i className="bx bxl-github"></i>
             </a>
-          </div>
-        </Slide>
+          </Slide>
+        </div>
       </div>
 
       <div className="home__img">

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -4,20 +4,21 @@ const NavBar = (props) => {
   const menuClassName = props.isMenuOpen ? "nav__menu show" : "nav__menu";
 
   return (
-    <nav className="nav bd-container bd-grid">
+    <nav className="nav bd-container bd-grid" data-testid="nav-bar">
       <div>
         <a href="." className="nav__logo">
           Khang Le
         </a>
       </div>
 
-      <div className={menuClassName} id="nav-menu">
+      <div className={menuClassName} data-testid="nav-list">
         <NavList />
       </div>
 
       <div
         className="nav__toggle"
         id="nav-toggle"
+        data-testid="nav-toggle"
         onClick={() => props.setIsMenuOpen(!props.isMenuOpen)}
       >
         <i className="bx bx-menu"></i>

diff --git a/src/components/Projects.js b/src/components/Projects.js
@@ -1,6 +1,6 @@
 const Projects = () => {
   return (
-    <section className="projects section" id="projects">
+    <section className="projects section" id="projects" data-testid="projects">
       <h2 className="section-title">Projects</h2>
       <div className="project__list">
         <div className="project__container bd-container">

diff --git a/src/components/Skills.js b/src/components/Skills.js
@@ -1,6 +1,6 @@
 const Skills = () => {
   return (
-    <section className="skills section" id="skills">
+    <section className="skills section" id="skills" data-testid="skills">
       <h2 className="section-title">Skills</h2>
 
       <div className="skills__container bd-container bd-grid">

diff --git a/src/components/Work.js b/src/components/Work.js
@@ -6,7 +6,7 @@ import ackcioImg from "../images/ackcio.png";
 
 const Work = () => {
   return (
-    <section className="work section" id="work">
+    <section className="work section" id="work" data-testid="work">
       <h2 className="section-title">Work Experience</h2>
       <div className="work__list bd-container">
         <div className="work__container">

diff --git a/src/index.js b/src/index.js
@@ -8,7 +8,7 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/src/tests/About.test.js b/src/tests/About.test.js
@@ -1,14 +1,12 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import About from "../components/About";
 
 describe("test About component", () => {
   test("renders About correctly", () => {
-    const wrapper = shallow(<About />);
+    render(<About />);
 
-    expect(wrapper.find("#about").exists()).toBeTruthy();
-    expect(wrapper.find(".about__container").length).toEqual(1);
-    expect(wrapper.find(".about__img").length).toEqual(1);
-    expect(wrapper.find(".about__subtitle").length).toEqual(1);
-    expect(wrapper.find(".about__text").length).toEqual(1);
+    expect(screen.getByTestId("about")).toBeTruthy();
+    expect(screen.getAllByRole("img").length).toEqual(1);
+    expect(screen.getAllByRole("paragraph").length).toEqual(1);
   });
 });
diff --git a/src/tests/App.test.js b/src/tests/App.test.js
@@ -1,47 +1,47 @@
-import { shallow } from "enzyme";
-import React from "react";
+import "react-intersection-observer/test-utils";
 
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import App from "../App";
-import About from "../components/About";
-import Footer from "../components/Footer";
-import Home from "../components/Home";
-import NavBar from "../components/NavBar";
-import Projects from "../components/Projects";
-import Skills from "../components/Skills";
-import Work from "../components/Work";
 
 describe("test App component", () => {
   test("renders App correctly", () => {
-    const wrapper = shallow(<App />);
-
-    expect(wrapper.find(NavBar).exists()).toBeTruthy();
-    expect(wrapper.find(Home).exists()).toBeTruthy();
-    expect(wrapper.find(About).exists()).toBeTruthy();
-    expect(wrapper.find(Skills).exists()).toBeTruthy();
-    expect(wrapper.find(Projects).exists()).toBeTruthy();
-    expect(wrapper.find(Work).exists()).toBeTruthy();
-    expect(wrapper.find(Footer).exists()).toBeTruthy();
+    render(<App />);
+
+    expect(screen.getByRole("main")).toBeTruthy();
+    expect(screen.getByTestId("nav-bar")).toBeTruthy();
+    expect(screen.getByTestId("home")).toBeTruthy();
+    expect(screen.getByTestId("about")).toBeTruthy();
+    expect(screen.getByTestId("skills")).toBeTruthy();
+    expect(screen.getByTestId("projects")).toBeTruthy();
+    expect(screen.getByTestId("work")).toBeTruthy();
+    expect(screen.getByTestId("footer")).toBeTruthy();
   });
 
   test("clicks main should close the nav menu if it is open", () => {
     const mockSetIsMenuOpen = jest.fn();
     jest
       .spyOn(React, "useState")
-      .mockImplementation(() => [true, mockSetIsMenuOpen]);
-    const wrapper = shallow(<App />);
-    wrapper.find("main").simulate("click");
+      .mockImplementation((_) => [true, mockSetIsMenuOpen]);
 
+    render(<App />);
+    mockSetIsMenuOpen.mockClear();
+
+    fireEvent.click(screen.getByRole("main"));
+    expect(mockSetIsMenuOpen).toHaveBeenCalledTimes(1);
     expect(mockSetIsMenuOpen).toHaveBeenCalledWith(false);
   });
 
   test("clicks main should do nothing if nav menu is closed", () => {
     const mockSetIsMenuOpen = jest.fn();
     jest
       .spyOn(React, "useState")
-      .mockImplementation(() => [false, mockSetIsMenuOpen]);
-    const wrapper = shallow(<App />);
-    wrapper.find("main").simulate("click");
+      .mockImplementation((_) => [false, mockSetIsMenuOpen]);
+
+    render(<App />);
+    mockSetIsMenuOpen.mockClear();
 
+    fireEvent.click(screen.getByRole("main"));
     expect(mockSetIsMenuOpen).toHaveBeenCalledTimes(0);
   });
 });
diff --git a/src/tests/Footer.test.js b/src/tests/Footer.test.js
@@ -1,13 +1,12 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import Footer from "../components/Footer";
 
 describe("test Footer component", () => {
   test("renders Footer correctly", () => {
-    const wrapper = shallow(<Footer />);
+    render(<Footer />);
 
-    expect(wrapper.find("footer").exists()).toBeTruthy();
-    expect(wrapper.find(".footer__title").length).toEqual(1);
-    expect(wrapper.find(".footer__social").length).toEqual(1);
-    expect(wrapper.find(".footer__icon").length).toEqual(3);
+    expect(screen.getByTestId("footer")).toBeTruthy();
+    expect(screen.getAllByRole("paragraph").length).toEqual(2);
+    expect(screen.getAllByRole("link").length).toEqual(3);
   });
 });
diff --git a/src/tests/Home.test.js b/src/tests/Home.test.js
@@ -1,18 +1,16 @@
-import { shallow } from "enzyme";
+import "react-intersection-observer/test-utils";
+
+import { render, screen } from "@testing-library/react";
 import Home from "../components/Home";
 
 describe("test Home component", () => {
   test("renders Home correctly", () => {
-    const wrapper = shallow(<Home />);
+    render(<Home />);
 
-    expect(wrapper.find("#home").exists()).toBeTruthy();
-    expect(wrapper.find(".home__data").length).toEqual(1);
-    expect(wrapper.find(".home__intro").length).toEqual(1);
-    expect(wrapper.find(".home__title").length).toEqual(1);
-    expect(wrapper.find(".home__content").length).toEqual(1);
-    expect(wrapper.find(".home__button").length).toEqual(1);
-    expect(wrapper.find(".home__social").length).toEqual(1);
-    expect(wrapper.find(".home__social-icon").length).toEqual(2);
-    expect(wrapper.find(".home__img").length).toEqual(1);
+    expect(screen.getByTestId("home")).toBeTruthy();
+    expect(screen.getAllByRole("heading").length).toEqual(1);
+    expect(screen.getAllByRole("paragraph").length).toEqual(1);
+    expect(screen.getAllByRole("link").length).toEqual(3);
+    expect(screen.getAllByRole("presentation").length).toEqual(1);
   });
 });
diff --git a/src/tests/NavBar.test.js b/src/tests/NavBar.test.js
@@ -1,49 +1,42 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 import NavBar from "../components/NavBar";
-import NavList from "../components/NavList";
 
 describe("test NavBar component", () => {
-  let mockIsMenuOpen;
   let mockSetIsMenuOpen;
 
   beforeEach(() => {
-    mockIsMenuOpen = false;
     mockSetIsMenuOpen = jest.fn();
   });
 
   test("renders NavBar correctly", () => {
-    const wrapper = shallow(
-      <NavBar isMenuOpen={mockIsMenuOpen} setIsMenuOpen={mockSetIsMenuOpen} />
-    );
-
-    expect(wrapper.find("nav").exists()).toBeTruthy();
-    expect(wrapper.find(".nav__menu").exists()).toBeTruthy();
-    expect(wrapper.find(".show").exists()).toBeFalsy();
-    expect(wrapper.find(NavList).exists()).toBeTruthy();
-    expect(wrapper.find(".nav__logo").length).toEqual(1);
-    expect(wrapper.find(".nav__toggle").length).toEqual(1);
+    render(<NavBar isMenuOpen={false} setIsMenuOpen={mockSetIsMenuOpen} />);
+
+    expect(screen.getByTestId("nav-bar")).toBeTruthy();
+    expect(screen.getByTestId("nav-list")).toBeTruthy();
+    expect(screen.getByTestId("nav-toggle")).toBeTruthy();
+
+    expect(
+      !screen.getByTestId("nav-list").classList.contains("show"),
+    ).toBeTruthy();
   });
 
   test("renders NavBar correctly with open menu", () => {
-    mockIsMenuOpen = true;
-    const wrapper = shallow(
-      <NavBar isMenuOpen={mockIsMenuOpen} setIsMenuOpen={mockSetIsMenuOpen} />
-    );
-
-    expect(wrapper.find("nav").exists()).toBeTruthy();
-    expect(wrapper.find(".nav__menu").exists()).toBeTruthy();
-    expect(wrapper.find(".show").exists()).toBeTruthy();
-    expect(wrapper.find(NavList).exists()).toBeTruthy();
+    render(<NavBar isMenuOpen={true} setIsMenuOpen={mockSetIsMenuOpen} />);
+
+    expect(screen.getByTestId("nav-bar")).toBeTruthy();
+    expect(screen.getByTestId("nav-list")).toBeTruthy();
+    expect(screen.getByTestId("nav-toggle")).toBeTruthy();
+    expect(
+      screen.getByTestId("nav-list").classList.contains("show"),
+    ).toBeTruthy();
   });
 
   test("clicks nav toggle", () => {
-    const wrapper = shallow(
-      <NavBar isMenuOpen={mockIsMenuOpen} setIsMenuOpen={mockSetIsMenuOpen} />
-    );
-    wrapper.find("#nav-toggle").simulate("click");
+    render(<NavBar isMenuOpen={false} setIsMenuOpen={mockSetIsMenuOpen} />);
 
-    expect(mockSetIsMenuOpen).toHaveBeenCalledWith(!mockIsMenuOpen);
+    fireEvent.click(screen.getByTestId("nav-toggle"));
+    expect(mockSetIsMenuOpen).toHaveBeenCalledWith(true);
   });
 });