feat: add missing test for the homepage

Author: Samantha-KY

__mocks__/community.ts

@@ -0,0 +1,45 @@
+import { Community } from "@/types/community";
+import { reward } from "./reward";
+import { colors } from "./colors";
+
+
+export const metadata = {
+    invite_id: "abc123",
+    submissions: 5,
+    bestSubmissions: ["submission1", "submission2"],
+    feedbacks: 10,
+    name: "Project XYZ",
+    issuedOn: "2024-01-29T12:00:00Z",
+    image: "image_url",
+    title: "Title of the project",
+    description: "Description of the project",
+    narrative: "Narrative of the project",
+    recipientName: "John Doe",
+    issuerName: "Jane Smith",
+    comment: "This is a comment",
+    linkToWork: "link_to_work",
+    submission: "submission_details",
+  };
+
+export const community: Community = {
+    id: "ew-43",
+    ref: "community/ref",
+    created_at: new Date("2022-05-01T12:00:00Z"),
+    updated_at: new Date("2022-05-01T12:00:00Z"),
+    summary: "this is the summary",
+    icon: "public/img/communities/aeternity.svg",
+    name: "aeternity",
+    image: "public/img/communities/aeternity.svg",
+    colors: colors,
+    slug: "ae",
+    active: true,
+    description: "this is a aeternity community",
+    metadata,
+    timestamp: 182044800000,
+    rewards: [reward],
+    reward,
+    courses: 3,
+    duration: 4,
+    can_mint_certificates: true,
+    challenges: 3
+  };

__tests__/components/sections/homepage/Communities.test.tsx

@@ -0,0 +1,21 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import CommunitiesSection from "@/components/sections/homepage/Communities";
+import { community } from "../../../../__mocks__/community";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+
+describe("Communities Section", () => {
+  it("should render community section", () => {
+    renderWithRedux(<CommunitiesSection communities={[community]} testId="communitiesSectionId" />);
+    expect(screen.getByTestId("communitiesSectionId")).toBeInTheDocument();
+    [community].forEach((community) => {
+      expect(screen.getByText(community.name)).toBeInTheDocument();
+      expect(screen.getByText(community.name).textContent).toBe("aeternity");
+    });
+    expect(screen.getByText("page.index.communities.partnering.title")).toBeInTheDocument();
+  });
+});

__tests__/components/sections/homepage/Main.test.tsx

@@ -0,0 +1,24 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import MainSection, { cards } from "@/components/sections/homepage/Main";
+
+describe("Main Section", () => {
+  it("should render the main section", () => {
+    renderWithRedux(<MainSection testId="mainSectionId" />);
+    expect(screen.getByTestId("mainSectionId")).toBeInTheDocument();
+    const linkElements = screen.getAllByText("page.index.main.button");
+    const linkElement = linkElements.find((el) => el.closest("a") !== null);
+    expect(linkElement?.closest("a")).toHaveAttribute("href", "/communities");
+    const lastLink = linkElements[linkElements.length - 1];
+    expect(lastLink.closest("a")).toHaveAttribute("href", "/communities");
+  });
+
+  it("should display cards", () => {
+    renderWithRedux(<MainSection testId="mainSectionId" />);
+    cards.forEach((card) => {
+      expect(screen.getByText(card.title)).toBeInTheDocument();
+      expect(screen.getByText(card.body)).toBeInTheDocument();
+    });
+  });
+});

__tests__/components/sections/homepage/OpenSource.test.tsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import OpenSource from "@/components/sections/homepage/OpenSource";
+
+describe("OpenSource", () => {
+    it("should render Open Source", () => {
+        renderWithRedux(<OpenSource testId="openSourceId"/>)
+        expect(screen.getByTestId("openSourceId")).toBeInTheDocument()
+        expect(screen.getByRole("link")).toBeInTheDocument()
+        expect(screen.getByRole("link").hasAttribute("href")).toBeTruthy()
+        expect(screen.getByRole("link").getAttribute("href")).toBe("https://github.com/dacadeorg/dacade-frontend-app")
+    })
+  });

__tests__/components/sections/homepage/Testimonials.test.tsx

@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import TestimonialsSection from "@/components/sections/homepage/Testimonials";
+
+describe("OpenSource", () => {
+    it("should render Open Source", () => {
+        renderWithRedux(<TestimonialsSection/>)
+        expect(screen.getByText("testimonials.community.title")).toBeInTheDocument()
+        expect(screen.getByText("footer.open.source")).toBeInTheDocument()
+     })
+  });

__tests__/components/sections/homepage/_partials/Stories.test.tsx

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import _ from "lodash";
 
-const fixtureTestimonials = {
+export const fixtureTestimonials = {
   content: "testimonials content",
   icon: "/testimonials-icon",
 };

src/components/sections/homepage/Communities.tsx

@@ -18,12 +18,12 @@ import { Community } from "@/types/community";
  * @returns {ReactElement}
  */
 
-export default function CommunitiesSection({ communities }: { communities: Community[] }): ReactElement {
+export default function CommunitiesSection({ communities, testId }: { communities: Community[], testId?: string }): ReactElement {
   const { t } = useTranslation();
 
   return (
     <Section type="default" padding="pt-20 lg:pb-24 md:pb-24">
-      <div id="communities" className="md:flex relative items-end">
+      <div data-testid={testId} id="communities" className="md:flex relative items-end">
         <div className="pr-5">
           <p className="uppercase font-semibold leading-none text-base">{t("page.index.communities.title")}</p>
         </div>

src/components/sections/homepage/Main.tsx

@@ -12,7 +12,7 @@ import Link from "next/link";
  *
  * @type {{title: string; body: string}[]}
  */
-const cards: { title: string; body: string }[] = [
+export const cards: { title: string; body: string }[] = [
   {
     title: "page.index.main.cards.first.title",
     body: "page.index.main.cards.first.body",
@@ -34,12 +34,12 @@ const cards: { title: string; body: string }[] = [
  * @export
  * @returns {ReactElement}
  */
-export default function MainSection(): ReactElement {
+export default function MainSection({testId}: {testId?: string}): ReactElement {
   const { t } = useTranslation();
 
   return (
     <Section type="default" padding="p-0">
-      <div className="w-full lg:py-24 pt-24 pb-8">
+      <div data-testid={testId} className="w-full lg:py-24 pt-24 pb-8">
         <h1 className="lg:text-8xl md:text-6xl text-5xl leading-none tracking-tighter">{t("page.index.main.title")}</h1>
         <p className="lg:text-8xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 tracking-tighter leading-none">{t("page.index.main.subtitle")}</p>
       </div>

src/components/sections/homepage/OpenSource.tsx

@@ -10,11 +10,11 @@ import { useTranslation } from "next-i18next";
  * @returns {ReactElement}
  */
 
-export default function OpenSource() {
+export default function OpenSource({testId}: {testId?: string}) {
   const { t } = useTranslation();
   return (
-    <div className="text-4xl lg:text-5xl pt-24 flex flex-col text-wrap space-y-2">
-      <p >
+    <div data-testid={testId} className="text-4xl lg:text-5xl pt-24 flex flex-col text-wrap space-y-2">
+      <p>
         {t("footer.open.source")}
         <br className="block md:hidden lg:block" />
         <Link href="https://github.com/dacadeorg/dacade-frontend-app" target="_blank" className="text-primary items-center space-x-2">

src/types/community.d.ts

@@ -22,8 +22,8 @@ export interface Community {
   challenges: number;
   duration: number;
   items?: any[];
-  challenge: Challenge;
-  submission: Submission;
+  challenge?: Challenge;
+  submission?: Submission;
   can_mint_certificates: boolean;
 }