Fixes #236: (test) add unit and e2e tests to about us page components (#250)

* feat: add data-testid to About us hero

* feat(test): write test for successful render of About us page

* fix(test): rename hero section component test case

* feat(test): define data-testid for mission section

* feat(test): write test case for mission section

* feat(test): define data-testid for leadership section

* feat(test): write test case for leadership section

* feat(test): define data-testid for reports section

* feat(test): write test case for reports section

* chore: rename test elements for clarity

* feat(test): define data-testid for leadership carousel and elements

* feat(test): write test case for carousel display

* feat(test): define data-testid for partnership btn and modal

* feat(test): write test case for partner with us modal in /about

Author: alvyynm

src/components/Caroussel.jsx

@@ -13,7 +13,10 @@ function Caroussel({ CarousselData }) {
   };
 
   return (
-    <section className="pt-4 sm:pt-16 pb-10 mx-auto w-full max-w-screen-2xl">
+    <section
+      className="pt-4 sm:pt-16 pb-10 mx-auto w-full max-w-screen-2xl"
+      data-testid="carousel"
+    >
       <div
         ref={carouselRef}
         className="py-6 grid grid-cols-1 md:grid-cols-2 gap-8 overflow-x-auto scrollbar-hide"
@@ -74,13 +77,15 @@ function Caroussel({ CarousselData }) {
           type="button"
           aria-label="back button"
           onClick={() => scroll(-400)}
+          data-testid="previous"
         >
           <PiArrowCircleLeft className="text-green-header size-16" />
         </button>
         <button
           type="button"
           aria-label="forward button"
           onClick={() => scroll(400)}
+          data-testid="next"
         >
           <PiArrowCircleRight className="text-green-header size-16" />
         </button>

src/pages/aboutUs/sections/HeroSection.jsx

@@ -6,7 +6,10 @@ function HeroSection() {
     <div className="px-4 sm:px-14 xl:px-28 sm:m-auto max-w-screen-2xl">
       <div className="flex flex-col md:flex-row items-center pt-10 gap-4">
         <div className="md:w-1/2">
-          <h1 className="mb-2 md:text-[40px] leading-tight text-2xl font-medium text-gray-900">
+          <h1
+            className="mb-2 md:text-[40px] leading-tight text-2xl font-medium text-gray-900"
+            data-testid="title"
+          >
             Empowering <span className="text-primary">innovation</span> in the{" "}
             <span className="text-primary">African tech space</span>
           </h1>

src/pages/aboutUs/sections/LeadershipSection.jsx

@@ -75,7 +75,10 @@ function LeadershipSection() {
     <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl sm:mt-24 px-4 md:px-0">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-6">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2
+          className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase"
+          data-testid="leadership"
+        >
           Our leadership
         </h2>
         <div className="w-full h-0.5 bg-gray-300" />
@@ -119,6 +122,7 @@ function LeadershipSection() {
               aria-label="Partner with us"
               onClick={openModal}
               className="text-white bg-gradient-to-b to-primary from-green-dark border-0 py-3 px-4 md:px-8 focus:outline-none rounded-lg text-sm md:text-base w-fit text-center"
+              data-testid="partner-with-us"
             >
               Partner with us
             </button>
@@ -139,7 +143,10 @@ function LeadershipSection() {
                   leaveFrom="opacity-100"
                   leaveTo="opacity-0"
                 >
-                  <div className="fixed inset-0 bg-black/25" />
+                  <div
+                    className="fixed inset-0 bg-black/25"
+                    data-testid="partner-popup"
+                  />
                 </Transition.Child>
 
                 <div className="fixed inset-0 overflow-y-auto">

src/pages/aboutUs/sections/MissionVisionSection.jsx

@@ -5,7 +5,10 @@ function MissionVisionSection() {
     <div className="max-w-screen-xl mx-auto mt-24 px-4 md:px-0">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2
+          className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase"
+          data-testid="mission"
+        >
           A bit more about us
         </h2>
         <div className="w-full h-0.5 bg-gray-300" />

src/pages/aboutUs/sections/PartnerCTA.jsx

@@ -5,7 +5,12 @@ function PartnerCTA() {
     <section className="pt-16 pb-10 mx-auto w-full max-w-screen-2xl">
       <div className="flex flex-col sm:flex-row justify-between px-4 sm:px-28">
         <div className="space-y-4 mb-8 sm:mb-0">
-          <h3 className="font-semibold text-md sm:text-xl">Our Reports</h3>
+          <h3
+            className="font-semibold text-md sm:text-xl"
+            data-testid="reports"
+          >
+            Our Reports
+          </h3>
           <p>
             <a
               href={Report}

tests/pages/About.test.jsx

@@ -0,0 +1,89 @@
+import { render, screen } from "@testing-library/react";
+import { HelmetProvider } from "react-helmet-async";
+import { BrowserRouter } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+
+import placeholder from "../../src/assets/images/sytLogo.png";
+import Caroussel from "../../src/components/Caroussel";
+import AboutUs from "../../src/pages/aboutUs/AboutUs";
+
+const LeadershipData = [
+  {
+    name: "First User",
+    title: "Founder",
+    image: placeholder,
+    linkedin: {
+      href: "https://www.linkedin.com/",
+      username: "First User",
+    },
+    twitter: {
+      href: "https://twitter.com/x",
+      username: "First User",
+    },
+  },
+  {
+    name: "Second User",
+    title: "Dev Relations & Opensource Programs",
+    image: placeholder,
+    linkedin: {
+      href: "https://www.linkedin.com",
+      username: "Second User",
+    },
+    twitter: {
+      href: "",
+      username: "",
+    },
+  },
+  {
+    name: "Third User",
+    title: "Community Manager",
+    image: placeholder,
+    linkedin: {
+      href: "https://www.linkedin.com",
+      username: "Third User",
+    },
+    twitter: {
+      href: "",
+      username: "",
+    },
+  },
+];
+
+describe("About us page unit tests", () => {
+  const renderWithRouter = (ui) =>
+    render(
+      <HelmetProvider>
+        <BrowserRouter>{ui}</BrowserRouter>
+      </HelmetProvider>
+    );
+
+  it("should render Hero Section successfully", () => {
+    renderWithRouter(<AboutUs />);
+    const titleElement = screen.getByTestId("title");
+    expect(titleElement).toBeTruthy();
+  });
+
+  it("should render Mission/Vision Section successfully", () => {
+    renderWithRouter(<AboutUs />);
+    const testElement = screen.getByTestId("mission");
+    expect(testElement).toBeTruthy();
+  });
+
+  it("should render Leadership Section successfully", () => {
+    renderWithRouter(<AboutUs />);
+    const testElement = screen.getByTestId("leadership");
+    expect(testElement).toBeTruthy();
+  });
+
+  it("should render Reports Section successfully", () => {
+    renderWithRouter(<AboutUs />);
+    const testElement = screen.getByTestId("reports");
+    expect(testElement).toBeTruthy();
+  });
+
+  it("should render leadership carousel successfully", () => {
+    renderWithRouter(<Caroussel CarousselData={LeadershipData} />);
+    const carouselElement = screen.getByTestId("carousel");
+    expect(carouselElement).toBeTruthy();
+  });
+});

tests/pages/about-page.spec.js

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://localhost:5173/about-us");
+});
+
+test("should render partnership modal when partner with us btn is clicked", async ({
+  page,
+}) => {
+  const testId = "partner-with-us";
+  // click Partner with us button
+  await page.click(`button[data-testid="${testId}"]`);
+
+  // Check if the popup is visible
+  const popupTestId = "partner-popup";
+  const popup = await page.locator(`div[data-testid="${popupTestId}"]`);
+  await expect(popup).toBeVisible();
+});