From 7f53145dba287fe6bfdb926f6d1e6e4969bf4159 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Wed, 22 May 2024 14:33:48 +0200
Subject: [PATCH 01/11] fix: setup components anew

---
 __mocks__/course.ts                           | 134 ++++++++++++++++++
 __mocks__/provider/ReduxProvider.tsx          |  11 ++
 .../courses/CommunityNavigation.test.tsx      |  28 ++++
 .../sections/courses/MobileNav.test.tsx       |  26 ++++
 .../sections/courses/Navigation.test.tsx      |  28 ++++
 .../courses/Overview/Challenge.test.tsx       |  35 +++++
 .../courses/Overview/Description.test.tsx     |  29 ++++
 .../courses/Overview/Disclaimer.test.tsx      |  34 +++++
 .../courses/Overview/LearningModules.test.tsx |  40 ++++++
 .../courses/Overview/Objectives.test.tsx      |  33 +++++
 .../courses/Overview/Prerequisite.test.tsx    |  29 ++++
 .../courses/Overview/Rewards.test.tsx         |  30 ++++
 .../courses/Overview/Trailer.test.tsx         |  30 ++++
 .../sections/courses/Overview/index.test.tsx  |  29 ++++
 .../sections/courses/PageNavigation.test.tsx  |  29 ++++
 .../sections/courses/Wrapper.test.tsx         |  47 ++++++
 16 files changed, 592 insertions(+)
 create mode 100644 __mocks__/course.ts
 create mode 100644 __mocks__/provider/ReduxProvider.tsx
 create mode 100644 __tests__/components/sections/courses/CommunityNavigation.test.tsx
 create mode 100644 __tests__/components/sections/courses/MobileNav.test.tsx
 create mode 100644 __tests__/components/sections/courses/Navigation.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Challenge.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Description.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Disclaimer.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/LearningModules.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Objectives.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Prerequisite.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Rewards.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/Trailer.test.tsx
 create mode 100644 __tests__/components/sections/courses/Overview/index.test.tsx
 create mode 100644 __tests__/components/sections/courses/PageNavigation.test.tsx
 create mode 100644 __tests__/components/sections/courses/Wrapper.test.tsx

diff --git a/__mocks__/course.ts b/__mocks__/course.ts
new file mode 100644
index 00000000..d0d41f8f
--- /dev/null
+++ b/__mocks__/course.ts
@@ -0,0 +1,134 @@
+import { Course, Format, LearningModule, Material } from "@/types/course";
+import { mockTrailer } from "./bounty";
+
+
+export const Introduction = {
+  text: "course intro",
+};
+
+export const mockCertificateData = {
+  narrative: "course certificate",
+  icon: "certificate icon",
+};
+
+export const Rubric = {
+  id: "id",
+  ref: "rubric references",
+  created_at: "Wednesday",
+  updated_at: "Thursday",
+  challenge: "Challenge",
+  text: "Challenge text",
+  type: "challenge type",
+  order: 89,
+  points: 90,
+  timestamp: 73,
+  typeSlug: "slug",
+};
+
+export const mockRatingCriteria = {
+  name: "rating criteria",
+  order: 4,
+  rubric: [Rubric],
+  maxPoints: 78,
+};
+
+enum MaterialType {
+  ADDITIONAL = "ADDITIONAL",
+  MARKDOWN = "MARKDOWN",
+  TEXT = "TEXT",
+  ARTICLE = "ARTICLE",
+  "EMBEDDED-VIDEO" = "EMBEDDED-VIDEO",
+}
+export const mockMaterial: Material = {
+  duration: 3,
+  subtitle: "material subtitle",
+  link: "material link",
+  description: "material description",
+  title: "material title",
+  type: MaterialType.ADDITIONAL,
+  list: [{ link: "Link 1" }],
+};
+
+export const InteractiveModule = {
+  ref: "interactive module ref",
+  title: "interactive module title",
+  text: "interative text",
+  closing: {
+    text: "closing",
+    title: "title",
+  },
+  items: [
+    {
+      text: "text",
+      title: "title",
+      options: {
+        text: "text",
+        isCorrect: true,
+      },
+      question: {
+        title: "question title",
+        answers: ["answer 1", "answer 2"],
+        correct: 2,
+      },
+    },
+  ],
+};
+
+export const mockLearningModule: LearningModule = {
+  id: "learningModule id",
+  ref: "learning module reference",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  duration: 4,
+  description: "learning module description",
+  objectives: ["objective 1, objective 2"],
+  title: "learning module title",
+  community: "learning module community",
+  materials: [mockMaterial],
+  timestamp: 3,
+  order: 4,
+  course: "Learning module course",
+  interactiveModules: [InteractiveModule],
+};
+
+export const mockCourse: Course = {
+  id: "course",
+  ref: "course ref",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  duration: 3,
+  summary: "Course description",
+  level: 3,
+  name: "course name",
+  description: "Course description",
+  objectives: ["course description", "course objectives"],
+  locale: "English",
+  community: "community",
+  slug: "course description slug",
+  introduction: Introduction,
+  active: true,
+  certificateIcon: "certificate",
+  certificateData: mockCertificateData,
+  timestamp: 0,
+  learningModules: [mockLearningModule],
+  trailer: mockTrailer,
+  disclaimer: "Course",
+  items: ["item 1", "item 2"],
+  faq: [
+    {
+      description: "faq description",
+      title: "faq title",
+    },
+  ],
+  prerequisite: {
+    items: ["item 1", "item 2"],
+    hint: "prerequisite hint",
+  },
+  translations: []
+};
+
+export const mockFormat: Format = {
+  githubLink: true,
+  text: true,
+  disclaimer: true,
+};
\ No newline at end of file
diff --git a/__mocks__/provider/ReduxProvider.tsx b/__mocks__/provider/ReduxProvider.tsx
new file mode 100644
index 00000000..c8d0b610
--- /dev/null
+++ b/__mocks__/provider/ReduxProvider.tsx
@@ -0,0 +1,11 @@
+import { wrapper } from "@/store";
+import { ReactNode } from "react";
+import { Provider } from "react-redux";
+
+const ReduxProvider = ({ children }: { children: ReactNode }) => {
+  const { store } = wrapper.useWrappedStore(children);
+
+  return <Provider store={store}>{children}</Provider>;
+};
+
+export default ReduxProvider;
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/CommunityNavigation.test.tsx b/__tests__/components/sections/courses/CommunityNavigation.test.tsx
new file mode 100644
index 00000000..46acbb59
--- /dev/null
+++ b/__tests__/components/sections/courses/CommunityNavigation.test.tsx
@@ -0,0 +1,28 @@
+import "@testing-library/jest-dom";
+import CommunityNavigation from "@/components/sections/courses/CommunityNavigation";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderCommunityNavigation = () => {
+  render(
+    <ReduxProvider>
+      <CommunityNavigation />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("community-navigation-show");
+}
+
+describe("CommunityNavigation", () => {
+  it("should render the Learning Modules", () => {
+    const communityNavigation = RenderCommunityNavigation();
+    expect(communityNavigation).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/MobileNav.test.tsx b/__tests__/components/sections/courses/MobileNav.test.tsx
new file mode 100644
index 00000000..106b75d4
--- /dev/null
+++ b/__tests__/components/sections/courses/MobileNav.test.tsx
@@ -0,0 +1,26 @@
+import "@testing-library/jest-dom";
+import MobileNav from "@/components/sections/courses/MobileNav";
+import { render, screen } from "@testing-library/react";
+import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+const RenderMobileNav = () => {
+  render(
+    <ReduxProvider>
+      <MobileNav />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("mobile-nav-show");
+}
+
+describe("MobileNav", () => {
+  it("should render the Mobile Nav", () => {
+    const mobileNav = RenderMobileNav();
+    expect(mobileNav).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx
new file mode 100644
index 00000000..dcc14689
--- /dev/null
+++ b/__tests__/components/sections/courses/Navigation.test.tsx
@@ -0,0 +1,28 @@
+import "@testing-library/jest-dom";
+import Navigation from "@/components/sections/courses/Navigation";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderNavigation = () => {
+  render(
+    <ReduxProvider>
+      <Navigation />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("navigation-show");
+}
+
+describe("LearningModules", () => {
+  it("should render the Learning Modules", () => {
+    const navigation = RenderNavigation();
+    expect(navigation).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Challenge.test.tsx b/__tests__/components/sections/courses/Overview/Challenge.test.tsx
new file mode 100644
index 00000000..10042a69
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Challenge.test.tsx
@@ -0,0 +1,35 @@
+import "@testing-library/jest-dom";
+import Challenge from "@/components/sections/courses/overview/Challenge";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderChallenge = () => {
+  render(
+    <ReduxProvider>
+      <Challenge />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("challenge-show");
+}
+
+describe("Challenge", () => {
+  it("should render the Challenge", () => {
+    const challenge = RenderChallenge();
+    expect(challenge).toBeInTheDocument();
+  });
+
+  it("should show", () => {
+    RenderChallenge();
+    const challengeDescription = screen.getByTestId("challenge-description");
+    expect(challengeDescription).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Description.test.tsx b/__tests__/components/sections/courses/Overview/Description.test.tsx
new file mode 100644
index 00000000..7a6d2643
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Description.test.tsx
@@ -0,0 +1,29 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Description from "@/components/sections/courses/overview/Description";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+const RenderDescription = () => {
+  render(
+    <ReduxProvider>
+      <Description />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("description-show");
+}
+
+describe("Description", () => {
+  it("should render the Description", () => {
+    const description = RenderDescription();
+    expect(description).toBeInTheDocument();
+  });
+
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
new file mode 100644
index 00000000..c3779955
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
@@ -0,0 +1,34 @@
+import "@testing-library/jest-dom";
+import Disclaimer from "@/components/sections/courses/overview/Disclaimer";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderDisclaimer = () => {
+  render(
+    <ReduxProvider>
+      <Disclaimer />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("disclaimer-show");
+}
+
+describe("Disclaimer", () => {
+  it("should render the Disclaimer", () => {
+    const disclaimerComponent = RenderDisclaimer();
+    expect(disclaimerComponent).toBeInTheDocument();
+  });
+
+  it("should show disclaimer HTML", () => {
+    RenderDisclaimer();
+    const courseDisclaimer = screen.getByTestId("disclaimer");
+    expect(courseDisclaimer).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
new file mode 100644
index 00000000..9c5d1de4
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
@@ -0,0 +1,40 @@
+import "@testing-library/jest-dom";
+import LearningModules from "@/components/sections/courses/overview/LearningModules";
+// import LearningModulesCard from "@/components/cards/Learning";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../../../../__mocks__/course;";
+// import { learningModule } from "../../__mocks__/learningModule.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+// const learningModulesProps = {
+//     course: course,
+    
+// }
+
+const RenderLearningModules = () => {
+  render(
+    <ReduxProvider>
+      <LearningModules/>
+    </ReduxProvider>
+  );
+  return screen.getByTestId("-show");
+}
+
+describe("LearningModules", () => {
+  it("should render the Learning Modules", () => {
+    const learningModules = RenderLearningModules();
+    expect(learningModules).toBeInTheDocument();
+  });
+  
+  it("should show Learning Modules List", () => {
+    const learningModulesCard = screen.getByTestId("learning-modules-card");
+    expect(learningModulesCard).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Objectives.test.tsx b/__tests__/components/sections/courses/Overview/Objectives.test.tsx
new file mode 100644
index 00000000..5e2824e3
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Objectives.test.tsx
@@ -0,0 +1,33 @@
+import "@testing-library/jest-dom";
+import Objectives from "@/components/sections/courses/overview/Objectives";
+import { render, screen } from "@testing-library/react";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderObjectives = () => {
+  render(
+    <ReduxProvider>
+      <Objectives/>
+    </ReduxProvider>
+  );
+  return screen.getByTestId("objectives-show");
+}
+
+describe("Objectives", () => {
+  it("should render the Objectives", () => {
+    const objectives = RenderObjectives();
+    expect(objectives).toBeInTheDocument();
+  });
+
+  it("should show Objective List", () => {
+    const objectivesList = screen.getByTestId("objectives-list-show");
+    expect(objectivesList).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
new file mode 100644
index 00000000..05a80e0b
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
@@ -0,0 +1,29 @@
+import "@testing-library/jest-dom";
+import Prerequisite from "@/components/sections/courses/overview/Prerequisite";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderPrerequisite = () => {
+  render(
+    <ReduxProvider>
+      <Prerequisite />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("prerequisite-show");
+}
+
+describe("Prerequisite", () => {
+  it("should render the Prerequisite", () => {
+    const prerequisite = RenderPrerequisite();
+    expect(prerequisite).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
new file mode 100644
index 00000000..e97a690c
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
@@ -0,0 +1,30 @@
+
+import "@testing-library/jest-dom";
+import Rewards from "@/components/sections/courses/overview/Rewards";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderRewards = () => {
+  render(
+    <ReduxProvider>
+      <Rewards />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("rewards-show");
+}
+
+describe("Rewards", () => {
+  it("should render the Rewards", () => {
+    const rewards = RenderRewards();
+    expect(rewards).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
new file mode 100644
index 00000000..4343cd4a
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
@@ -0,0 +1,30 @@
+
+import "@testing-library/jest-dom";
+import Trailer from "@/components/sections/courses/overview/Trailer";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderTrailer = () => {
+  render(
+    <ReduxProvider>
+      <Trailer />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("trailer-show");
+}
+
+describe("Trailer", () => {
+  it("should render the Trailer", () => {
+    const trailer = RenderTrailer();
+    expect(trailer).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx
new file mode 100644
index 00000000..b83178ab
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/index.test.tsx
@@ -0,0 +1,29 @@
+import "@testing-library/jest-dom";
+import AllComponents from "@/components/sections/courses/overview/index";
+import { render, screen } from "@testing-library/react";
+// import { course } from "../../__mocks__/course.ts";
+import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderAllComponents = () => {
+  render(
+    <ReduxProvider>
+      <AllComponents />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("all-components-show");
+}
+
+describe("All Components", () => {
+  it("should render all the components from the index component", () => {
+    const allComponents = RenderAllComponents();
+    expect(allComponents).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/PageNavigation.test.tsx b/__tests__/components/sections/courses/PageNavigation.test.tsx
new file mode 100644
index 00000000..46c10f60
--- /dev/null
+++ b/__tests__/components/sections/courses/PageNavigation.test.tsx
@@ -0,0 +1,29 @@
+import "@testing-library/jest-dom";
+import PageNavigation from "@/components/sections/courses/PageNavigation";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+  }),
+}));
+
+
+
+
+describe("PageNavigation", () => {
+  it("should render the Page Navigation", () => {
+
+    renderWithRedux( <PageNavigation /> );
+
+    const pageNavigation = screen.getByTestId("pageNavId");
+    expect(pageNavigation).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/components/sections/courses/Wrapper.test.tsx b/__tests__/components/sections/courses/Wrapper.test.tsx
new file mode 100644
index 00000000..1e5c0458
--- /dev/null
+++ b/__tests__/components/sections/courses/Wrapper.test.tsx
@@ -0,0 +1,47 @@
+import "@testing-library/jest-dom";
+import Wrapper from "@/components/sections/courses/Wrapper";
+import Navigation from "@/components/sections/courses/Navigation";
+import MobileNav from "@/components/sections/courses/MobileNav";
+import CommunityNavigation from "@/components/sections/courses/CommunityNavigation";
+import { render, screen } from "@testing-library/react";
+// import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+
+
+describe("Wrapper", () => {
+
+  it("should render the Wrapper", () => {
+    // eslint-disable-next-line react/no-children-prop
+    render( <Wrapper children={undefined} />);
+    const wrapper = screen.getByTestId("wrapperId");
+    expect(wrapper).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("wrapperSectionId")).toBeInTheDocument();
+  });
+
+
+  it("Should render Navigation component", () => {
+    render(<Navigation />);
+    const navigation = screen.getByTestId("NavId");
+    expect(navigation).toBeInTheDocument();
+  });
+
+
+  it("Should render Navigation component", () => {
+    render(<MobileNav />);
+    const inputElement = screen.getByPlaceholderText("showTopBorder");
+    expect(inputElement).toBeInTheDocument();    
+    const mobileNav = screen.getByText("MobileNavId");
+    expect(mobileNav).toBeInTheDocument();
+  });
+
+
+  it("Should render Navigation component", () => {
+    render(<CommunityNavigation />);
+    const inputElement = screen.getByPlaceholderText("paths");
+    expect(inputElement).toBeInTheDocument();
+    const communityNav = screen.getByTestId("communityNavId");
+    expect(communityNav).toBeInTheDocument();
+  });
+
+});
+
+

From 1872d1f61f3973ea48e5fdead898bcb70e907334 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 14:04:30 +0200
Subject: [PATCH 02/11] fix: description component test

---
 __mocks__/bounty.ts                           | 11 ++++
 .../courses/CommunityNavigation.test.tsx      | 19 +++++-
 .../sections/courses/MobileNav.test.tsx       | 16 +++++
 .../sections/courses/Navigation.test.tsx      |  2 +-
 .../courses/Overview/Challenge.test.tsx       | 43 ++++++--------
 .../courses/Overview/LearningModules.test.tsx | 45 ++++++--------
 .../sections/courses/PageNavigation.test.tsx  | 59 ++++++++++++++++++-
 .../sections/courses/Wrapper.test.tsx         |  1 -
 .../sections/courses/CommunityNavigation.tsx  |  8 ++-
 .../sections/courses/PageNavigation.tsx       |  6 +-
 src/components/sections/courses/Wrapper.tsx   |  8 +--
 .../sections/courses/overview/Challenge.tsx   |  4 +-
 .../courses/overview/LearningModules.tsx      |  4 +-
 13 files changed, 155 insertions(+), 71 deletions(-)
 create mode 100644 __mocks__/bounty.ts

diff --git a/__mocks__/bounty.ts b/__mocks__/bounty.ts
new file mode 100644
index 00000000..782d9535
--- /dev/null
+++ b/__mocks__/bounty.ts
@@ -0,0 +1,11 @@
+export const mockTrailer = {
+    summary: "trailer summary",
+    description: "trailer descriptio",
+    video: "trailer video",
+    duration: 4,
+    info: {
+      items: ["item 1", "item 2"],
+      title: "info title",
+    },
+  };
+  
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/CommunityNavigation.test.tsx b/__tests__/components/sections/courses/CommunityNavigation.test.tsx
index 46acbb59..827bb8e8 100644
--- a/__tests__/components/sections/courses/CommunityNavigation.test.tsx
+++ b/__tests__/components/sections/courses/CommunityNavigation.test.tsx
@@ -1,8 +1,11 @@
 import "@testing-library/jest-dom";
 import CommunityNavigation from "@/components/sections/courses/CommunityNavigation";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
+import ChevronRightIcon from "@/icons/chevron-right.svg";
 import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+import Link from "next/link";
+
+
 jest.mock("next/router", () => ({
   useRouter: () => ({
     push: jest.fn(),
@@ -17,7 +20,7 @@ const RenderCommunityNavigation = () => {
       <CommunityNavigation />
     </ReduxProvider>
   );
-  return screen.getByTestId("community-navigation-show");
+  return screen.getByTestId("communityNavigationShow");
 }
 
 describe("CommunityNavigation", () => {
@@ -25,4 +28,16 @@ describe("CommunityNavigation", () => {
     const communityNavigation = RenderCommunityNavigation();
     expect(communityNavigation).toBeInTheDocument();
   });
+});
+
+it("should render the Chevron Right Icon", () => {
+  render( <ChevronRightIcon /> );
+  const communityNavigationChevIcon = screen.getByTestId("communityNavId");
+  expect(communityNavigationChevIcon).toBeInTheDocument();
+});
+
+it("should render the Link", () => {
+  render( <Link href={""} >link</Link> );
+  const communityNavigationLink = screen.getByTestId("communityNavLink");
+  expect(communityNavigationLink).toBeInTheDocument();
 });
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/MobileNav.test.tsx b/__tests__/components/sections/courses/MobileNav.test.tsx
index 106b75d4..2876a487 100644
--- a/__tests__/components/sections/courses/MobileNav.test.tsx
+++ b/__tests__/components/sections/courses/MobileNav.test.tsx
@@ -2,6 +2,10 @@ import "@testing-library/jest-dom";
 import MobileNav from "@/components/sections/courses/MobileNav";
 import { render, screen } from "@testing-library/react";
 import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+import ChevronBottomIcon from "@/icons/chevron-bottom.svg";
+import Navigation from "@/components/sections/courses/Navigation";
+
+
 jest.mock("next/router", () => ({
   useRouter: () => ({
     push: jest.fn(),
@@ -23,4 +27,16 @@ describe("MobileNav", () => {
     const mobileNav = RenderMobileNav();
     expect(mobileNav).toBeInTheDocument();
   });
+});
+
+it("should render the Chevron Bottom Icon Component", () => {
+  render( <ChevronBottomIcon /> );
+  const mobileNavChevIcon = screen.getByTestId("mobileNavChevIconId");
+  expect(mobileNavChevIcon).toBeInTheDocument();
+});
+
+it("should render the Component", () => {
+  render( <Navigation /> );
+  const mobileNavNav = screen.getByTestId("navId");
+  expect(mobileNavNav).toBeInTheDocument();
 });
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx
index dcc14689..cf8ab8d2 100644
--- a/__tests__/components/sections/courses/Navigation.test.tsx
+++ b/__tests__/components/sections/courses/Navigation.test.tsx
@@ -21,7 +21,7 @@ const RenderNavigation = () => {
 }
 
 describe("LearningModules", () => {
-  it("should render the Learning Modules", () => {
+  it("should render the Navidation component", () => {
     const navigation = RenderNavigation();
     expect(navigation).toBeInTheDocument();
   });
diff --git a/__tests__/components/sections/courses/Overview/Challenge.test.tsx b/__tests__/components/sections/courses/Overview/Challenge.test.tsx
index 10042a69..27c89e12 100644
--- a/__tests__/components/sections/courses/Overview/Challenge.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Challenge.test.tsx
@@ -1,35 +1,30 @@
 import "@testing-library/jest-dom";
 import Challenge from "@/components/sections/courses/overview/Challenge";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
-
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
-
-
-const RenderChallenge = () => {
-  render(
-    <ReduxProvider>
-      <Challenge />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("challenge-show");
-}
+import { mockCourse } from "../../../../../__mocks__/course";
+
+
 
 describe("Challenge", () => {
   it("should render the Challenge", () => {
-    const challenge = RenderChallenge();
+    render(<Challenge />);
+    const challenge = screen.getByTestId("challengeDescriptionId");;
     expect(challenge).toBeInTheDocument();
   });
 
-  it("should show", () => {
-    RenderChallenge();
-    const challengeDescription = screen.getByTestId("challenge-description");
+  it("should show content", () => {
+    const challengeDescription = screen.getByTestId("challengeDescription");
     expect(challengeDescription).toBeInTheDocument();
   });
-});
\ No newline at end of file
+
+  it("should show text content", () => {
+    const challengeText = screen.getByTestId("challengeDescription");
+    expect(challengeText).toBeInTheDocument();
+    expect(challengeText).toBe( mockCourse.challenge?.description);
+  });
+
+
+
+});
+
+
diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
index 9c5d1de4..ee06b637 100644
--- a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
+++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
@@ -1,40 +1,31 @@
 import "@testing-library/jest-dom";
 import LearningModules from "@/components/sections/courses/overview/LearningModules";
-// import LearningModulesCard from "@/components/cards/Learning";
+import LearningModulesCard from "@/components/cards/Learning";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../../../../__mocks__/course;";
-// import { learningModule } from "../../__mocks__/learningModule.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+import { mockCourse } from "../../../../../__mocks__/course";
+import { LearningModule } from "@/types/course";
 
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
-
-// const learningModulesProps = {
-//     course: course,
-    
-// }
-
-const RenderLearningModules = () => {
-  render(
-    <ReduxProvider>
-      <LearningModules/>
-    </ReduxProvider>
-  );
-  return screen.getByTestId("-show");
+interface LearningModuleProps {
+  key: number;
+  learningModule: LearningModule[];
 }
 
+const RenderLearningModule = (props?: LearningModuleProps) => {
+  render(<LearningModulesCard {...props} key={1} learningModule={[mockCourse.learningModules]}/>);
+  return screen.getByTestId("learningModulesCardId");
+};
+
 describe("LearningModules", () => {
   it("should render the Learning Modules", () => {
-    const learningModules = RenderLearningModules();
+    render(<LearningModules />);
+    const learningModules = screen.getByTestId("learningModulesId");
     expect(learningModules).toBeInTheDocument();
+    expect(learningModules).toHaveTextContent("0");
   });
   
   it("should show Learning Modules List", () => {
-    const learningModulesCard = screen.getByTestId("learning-modules-card");
-    expect(learningModulesCard).toBeInTheDocument();
+      const learningModulesCard = RenderLearningModule();
+      expect(learningModulesCard).toBeInTheDocument();
+  
   });
-});
\ No newline at end of file
+});
diff --git a/__tests__/components/sections/courses/PageNavigation.test.tsx b/__tests__/components/sections/courses/PageNavigation.test.tsx
index 46c10f60..5b6f2e62 100644
--- a/__tests__/components/sections/courses/PageNavigation.test.tsx
+++ b/__tests__/components/sections/courses/PageNavigation.test.tsx
@@ -2,6 +2,8 @@ import "@testing-library/jest-dom";
 import PageNavigation from "@/components/sections/courses/PageNavigation";
 import { screen } from "@testing-library/react";
 import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import ArrowButton from "@/components/ui/button/Arrow";
+import Link from "next/link";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
@@ -16,14 +18,67 @@ jest.mock("next/router", () => ({
 }));
 
 
+const arrowButtonProps = {
+  customStyle: {},
+  minWidthClass: "",
+  className: "",
+  children: "Arrow button",
 
+};
+
+
+const linkPrev = "/"
+
+const linkNext = "/"
+
+const RenderArrowButton = (props = arrowButtonProps) => {
+  const { customStyle, minWidthClass, className } =
+    props;
+
+  renderWithRedux(
+    <ArrowButton
+      customStyle={customStyle}
+      minWidthClass={minWidthClass}
+      className={className}
+  
+    >
+      {props.children}
+    </ArrowButton>
+  );
+
+  return screen.getByText(arrowButtonProps.children);
+};
 
 describe("PageNavigation", () => {
-  it("should render the Page Navigation", () => {
 
+  it("Should render the arrow button", () => {
+    const arrowButton = RenderArrowButton();
+    expect(arrowButton).toBeInTheDocument();
+  });
+  
+  it("should render the Page Navigation", () => {
     renderWithRedux( <PageNavigation /> );
-
     const pageNavigation = screen.getByTestId("pageNavId");
     expect(pageNavigation).toBeInTheDocument();
   });
+
+
+  it("should render page nav link with previous link", () => {
+    renderWithRedux(<Link href={linkNext}/>);
+    const pageNavLink = screen.getByTestId("pageNavLinkId");
+    expect(pageNavLink).toBeInTheDocument();
+    expect(pageNavLink).toHaveAttribute("href", "/");
+  });
+
+
+  it("should render page nav link with next link", () => {
+    renderWithRedux(<Link href={linkPrev}/>);
+    const pageNavLink = screen.getByTestId("pageNavLinkId");
+    expect(pageNavLink).toBeInTheDocument();
+    expect(pageNavLink).toHaveAttribute("href", "/");
+  });
+
+
+
+
 });
diff --git a/__tests__/components/sections/courses/Wrapper.test.tsx b/__tests__/components/sections/courses/Wrapper.test.tsx
index 1e5c0458..8669d618 100644
--- a/__tests__/components/sections/courses/Wrapper.test.tsx
+++ b/__tests__/components/sections/courses/Wrapper.test.tsx
@@ -4,7 +4,6 @@ import Navigation from "@/components/sections/courses/Navigation";
 import MobileNav from "@/components/sections/courses/MobileNav";
 import CommunityNavigation from "@/components/sections/courses/CommunityNavigation";
 import { render, screen } from "@testing-library/react";
-// import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
 
 
 describe("Wrapper", () => {
diff --git a/src/components/sections/courses/CommunityNavigation.tsx b/src/components/sections/courses/CommunityNavigation.tsx
index 357c1218..3870d408 100644
--- a/src/components/sections/courses/CommunityNavigation.tsx
+++ b/src/components/sections/courses/CommunityNavigation.tsx
@@ -15,15 +15,15 @@ export default function CommunityNavigation({ paths }: { paths?: string[] }): Re
   const path = useMemo(() => (community ? `/communities/${community.slug}` : ""), [community]);
 
   return community ? (
-    <div>
+    <div data-testid="communityNavigationShow">
       <div className="relative flex items-center py-4 pt-4 text-sm border-b-2 md:pt-7 lg:border-0">
-        <div className="leading-none text-gray-500">
+        <div className="leading-none text-gray-500" data-testid="communityNavLink">
           <Link href={path}>{community.name}</Link>
         </div>
         {paths?.map((path, index) => (
           <Fragment key={`path-${index}`}>
             <div className="px-0.5">
-              <ChevronRightIcon viewBox="0 0 20 20" className="w-3 h-3" />
+              <ChevronRightIcon viewBox="0 0 20 20" className="w-3 h-3" data-testid="communityNavId"/>
             </div>
             <div className="font-medium leading-none">{path}</div>
           </Fragment>
@@ -34,3 +34,5 @@ export default function CommunityNavigation({ paths }: { paths?: string[] }): Re
     <></>
   );
 }
+
+
diff --git a/src/components/sections/courses/PageNavigation.tsx b/src/components/sections/courses/PageNavigation.tsx
index d95c049d..f26eff28 100644
--- a/src/components/sections/courses/PageNavigation.tsx
+++ b/src/components/sections/courses/PageNavigation.tsx
@@ -106,16 +106,16 @@ export default function PageNavigation(): ReactElement {
   if (show)
     return (
       <Section>
-        <div className={classNames("text-center justify-center space-x-10 pt-3", { flex: prevUrl, "w-full sm:flex": !prevUrl })}>
+        <div data-testid="pageNavId" className={classNames("text-center justify-center space-x-10 pt-3", { flex: prevUrl, "w-full sm:flex": !prevUrl })}>
           {prevUrl && (
-            <Link href={prevUrl}>
+            <Link href={prevUrl} data-testId="pageNavLinkId">
               <ArrowButton customStyle={buttonStyle} direction="left" minWidthClass="null">
                 {t("nav.page.prev")}
               </ArrowButton>
             </Link>
           )}
           {nextUrl && (
-            <Link href={nextUrl}>
+            <Link href={nextUrl} data-testId="pageNavLinkId">
               <ArrowButton
                 className={classNames({
                   "text-.5xl py-4.5 pl-6 pr-5.5": !prevUrl,
diff --git a/src/components/sections/courses/Wrapper.tsx b/src/components/sections/courses/Wrapper.tsx
index 7953dd94..afd0934c 100644
--- a/src/components/sections/courses/Wrapper.tsx
+++ b/src/components/sections/courses/Wrapper.tsx
@@ -26,15 +26,15 @@ interface WrapperProps {
  */
 export default function Wrapper({ children, paths }: WrapperProps): ReactElement {
   return (
-    <Section type="default">
+    <Section type="default" data-testid="wrapperId">
       <div className="h-auto lg:flex">
-        <div className="sticky top-0 self-start hidden w-1/4 py-3 lg:block pr-9 lg:py-14">
+        <div className="sticky top-0 self-start hidden w-1/4 py-3 lg:block pr-9 lg:py-14" data-testid="NavId">
           <Navigation />
         </div>
-        <div className="w-full pt-6 lg:hidden">
+        <div className="w-full pt-6 lg:hidden" data-testid="MobileNavId">
           <MobileNav showTopBorder />
         </div>
-        <div className="w-full lg:w-3/4">
+        <div className="w-full lg:w-3/4"  data-testid="communityNavId">
           <CommunityNavigation paths={paths} />
           {children}
         </div>
diff --git a/src/components/sections/courses/overview/Challenge.tsx b/src/components/sections/courses/overview/Challenge.tsx
index d9a3ee44..8a513b77 100644
--- a/src/components/sections/courses/overview/Challenge.tsx
+++ b/src/components/sections/courses/overview/Challenge.tsx
@@ -15,8 +15,8 @@ export default function Challenge(): ReactElement {
 
   const { t } = useTranslation();
   return course && course.challenge ? (
-    <Section title={t("communities.overview.challenge")}>
-      <span className="block mt-3 text-base font-normal md:text-lg">{course.challenge.description}</span>
+    <Section data-testid="challengeDescriptionId" title={t("communities.overview.challenge")}>
+      <span data-testid="challengeDescription" className="block mt-3 text-base font-normal md:text-lg">{course.challenge.description}</span>
     </Section>
   ) : (
     <></>
diff --git a/src/components/sections/courses/overview/LearningModules.tsx b/src/components/sections/courses/overview/LearningModules.tsx
index 19d51446..bdbbf532 100644
--- a/src/components/sections/courses/overview/LearningModules.tsx
+++ b/src/components/sections/courses/overview/LearningModules.tsx
@@ -18,7 +18,7 @@ export default function LearningModules(): ReactElement {
   return (
     <>
       {course ? (
-        <Section>
+        <Section data-testid="learningModulesId">
           <div className="grid flex-wrap grid-cols-1 gap-5 sm:grid-cols-2">
             <div className="flex flex-col w-full mt-0 mr-4 md:pt-4">
               <h4 className="font-medium inline-block text-.5xl">{t("communities.overview.learning-modules")}</h4>
@@ -26,7 +26,7 @@ export default function LearningModules(): ReactElement {
             </div>
             {course.learningModules &&
               course.learningModules.map((learningModule, index) => {
-                return <LearningModuleCard key={`module-${index}`} learningModule={learningModule} />;
+                return <LearningModuleCard data-testid="learningModulesCardId" key={`module-${index}`} learningModule={learningModule} />;
               })}
           </div>
         </Section>

From 25124255ddae4d0bf04737889bb40d3d56ef1a01 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 14:10:06 +0200
Subject: [PATCH 03/11] fix: description component test

---
 .../courses/Overview/Description.test.tsx     | 28 ++++---------------
 .../sections/courses/overview/Description.tsx |  2 +-
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/Description.test.tsx b/__tests__/components/sections/courses/Overview/Description.test.tsx
index 7a6d2643..64d2d905 100644
--- a/__tests__/components/sections/courses/Overview/Description.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Description.test.tsx
@@ -1,29 +1,11 @@
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import Description from "@/components/sections/courses/overview/Description";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
 
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
 
-const RenderDescription = () => {
-  render(
-    <ReduxProvider>
-      <Description />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("description-show");
-}
+it("should render the Description", () => {
+  render( <Description />);
+  const description = screen.getByTestId("descriptionId");;
+  expect(description).toBeInTheDocument();
+});
 
-describe("Description", () => {
-  it("should render the Description", () => {
-    const description = RenderDescription();
-    expect(description).toBeInTheDocument();
-  });
-
-});
\ No newline at end of file
diff --git a/src/components/sections/courses/overview/Description.tsx b/src/components/sections/courses/overview/Description.tsx
index 751dcb1c..5cd63519 100644
--- a/src/components/sections/courses/overview/Description.tsx
+++ b/src/components/sections/courses/overview/Description.tsx
@@ -16,7 +16,7 @@ export default function Description(): ReactElement {
   const course = useSelector((state) => state.courses.current);
 
   return course ? (
-    <div className="px-0 py-2 pb-8 mb-0 text-lg leading-snug border-b-2 pt-9 md:hidden tracking-onepercent md:border-b-0">
+    <div data-testid="descriptionId" className="px-0 py-2 pb-8 mb-0 text-lg leading-snug border-b-2 pt-9 md:hidden tracking-onepercent md:border-b-0">
       {htmlTagsCleanup(course.description || course.summary || "")}
     </div>
   ) : (

From 99c1b43fdffa2ca97ae86b62b77e15258ff50f99 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 14:19:36 +0200
Subject: [PATCH 04/11] fix: disclaimer component test

---
 .../courses/Overview/Disclaimer.test.tsx      | 25 +++----------------
 .../sections/courses/overview/Disclaimer.tsx  |  4 +--
 2 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
index c3779955..5d65e171 100644
--- a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
@@ -1,34 +1,15 @@
 import "@testing-library/jest-dom";
 import Disclaimer from "@/components/sections/courses/overview/Disclaimer";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
 
 
-const RenderDisclaimer = () => {
-  render(
-    <ReduxProvider>
-      <Disclaimer />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("disclaimer-show");
-}
-
-describe("Disclaimer", () => {
   it("should render the Disclaimer", () => {
-    const disclaimerComponent = RenderDisclaimer();
+    render(  <Disclaimer />);
+    const disclaimerComponent = screen.getByTestId("disclaimerId");;
     expect(disclaimerComponent).toBeInTheDocument();
   });
 
   it("should show disclaimer HTML", () => {
-    RenderDisclaimer();
-    const courseDisclaimer = screen.getByTestId("disclaimer");
+    const courseDisclaimer = screen.getByTestId("disclaimerSpanId");
     expect(courseDisclaimer).toBeInTheDocument();
   });
-});
\ No newline at end of file
diff --git a/src/components/sections/courses/overview/Disclaimer.tsx b/src/components/sections/courses/overview/Disclaimer.tsx
index e712dfbd..8b772048 100644
--- a/src/components/sections/courses/overview/Disclaimer.tsx
+++ b/src/components/sections/courses/overview/Disclaimer.tsx
@@ -18,10 +18,10 @@ export default function Disclaimer(): ReactElement {
 
   if (course && !course.disclaimer) return <></>;
   return (
-    <Section className="!pb-12 !pt-0">
+    <Section data-testid="disclaimerId" className="!pb-12 !pt-0">
       <Hint>
         <strong>{t("communities.overview.info.disclaimer.title")}: </strong>
-        <span dangerouslySetInnerHTML={{ __html: course?.disclaimer as string }} />
+        <span data-testid="disclaimerSpanId" dangerouslySetInnerHTML={{ __html: course?.disclaimer as string }} />
       </Hint>
     </Section>
   );

From 7f2cd8abca22b5737b107e7886b97d699a08b4a8 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 14:48:23 +0200
Subject: [PATCH 05/11] fix: index component test

---
 .../sections/courses/Overview/index.test.tsx  | 86 ++++++++++++++-----
 .../sections/courses/overview/index.tsx       | 16 ++--
 2 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx
index b83178ab..6427a8e2 100644
--- a/__tests__/components/sections/courses/Overview/index.test.tsx
+++ b/__tests__/components/sections/courses/Overview/index.test.tsx
@@ -1,29 +1,71 @@
 import "@testing-library/jest-dom";
 import AllComponents from "@/components/sections/courses/overview/index";
+import RewardsSection from "@/components/sections/courses/overview/index";
+import ObjectivesSection from "@/components/sections/courses/overview/index";
+import PrerequisiteSection from "@/components/sections/courses/overview/index";
+import DisclaimerSection from "@/components/sections/courses/overview/index";
+import TrailerSection from "@/components/sections/courses/overview/index";
+import LearningModulesSection from "@/components/sections/courses/overview/index";
+import ChallengeSection from "@/components/sections/courses/overview/index";
+import PageNavigation from "@/components/sections/courses/overview/index";
+
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
-
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
-
-
-const RenderAllComponents = () => {
-  render(
-    <ReduxProvider>
-      <AllComponents />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("all-components-show");
-}
+
+
+it("should render the Disclaimer", () => {
+  render( <AllComponents />);
+  const disclaimerComponent = screen.getByTestId("disclaimerId");
+  expect(disclaimerComponent).toBeInTheDocument();
+});
 
 describe("All Components", () => {
-  it("should render all the components from the index component", () => {
-    const allComponents = RenderAllComponents();
-    expect(allComponents).toBeInTheDocument();
+
+  it("should render RewardsSection in the index component", () => {
+    render( <RewardsSection />);
+    const rewardsSection = screen.getByTestId("rewardsSectionId");
+    expect(rewardsSection).toBeInTheDocument();
+  });
+
+
+  it("should render ObjectivesSection in the index component", () => {
+    render( <ObjectivesSection />);
+    const objectivesSection = screen.getByTestId("objectivesSectionId");
+    expect(objectivesSection).toBeInTheDocument();
+  });
+
+  it("should render PrerequisiteSection in the index component", () => {
+    render( <PrerequisiteSection />);
+    const prerequisiteSection = screen.getByTestId("prerequisiteSectionId");
+    expect(prerequisiteSection).toBeInTheDocument();
+  });
+
+  it("should render DisclaimerSection in the index component", () => {
+    render( <DisclaimerSection />);
+    const disclaimerSection = screen.getByTestId("disclaimerSectionId");
+    expect(disclaimerSection).toBeInTheDocument();
+  });
+
+  it("should render TrailerSection in the index component", () => {
+    render( <TrailerSection />);
+    const trailerSection = screen.getByTestId("trailerSectionId");
+    expect(trailerSection).toBeInTheDocument();
+  });
+
+  it("should render LearningModulesSection in the index component", () => {
+    render( <LearningModulesSection />);
+    const learningModulesSection = screen.getByTestId("");
+    expect(learningModulesSection ).toBeInTheDocument();
+  });
+
+  it("should render ChallengeSection in the index component", () => {
+    render( <ChallengeSection />);
+    const challengeSection = screen.getByTestId("challengeSectionId");
+    expect(challengeSection).toBeInTheDocument();
+  });
+
+  it("should render PageNavigation in the index component", () => {
+    render( <PageNavigation />);
+    const pageNavigation = screen.getByTestId("pageNavigationId");
+    expect(pageNavigation).toBeInTheDocument();
   });
 });
\ No newline at end of file
diff --git a/src/components/sections/courses/overview/index.tsx b/src/components/sections/courses/overview/index.tsx
index 5a5a71cc..58b0f95b 100644
--- a/src/components/sections/courses/overview/index.tsx
+++ b/src/components/sections/courses/overview/index.tsx
@@ -24,14 +24,14 @@ export default function Overview(): ReactElement {
   return (
     <div className="flex flex-col divide-y divide-solid divide-gray-200 lg:py-5 text-gray-700">
       <Header title={course.name} description={course.description} />
-      <RewardsSection />
-      <ObjectivesSection />
-      <PrerequisiteSection />
-      <DisclaimerSection />
-      <TrailerSection />
-      <LearningModulesSection />
-      <ChallengeSection />
-      <PageNavigation />
+      <RewardsSection data-testid=""/>
+      <ObjectivesSection data-testid=""/>
+      <PrerequisiteSection data-testid=""/>
+      <DisclaimerSection data-testid="disclaimerSectionId"/>
+      <TrailerSection data-testid="trailerSectionId"/>
+      <LearningModulesSection data-testid="learningModulesSection" />
+      <ChallengeSection data-testid="challengeSectionId"/>
+      <PageNavigation data-testid="pageNavigationId"/>
     </div>
   );
 }

From 8d2a60f73db66902ea4ccac70cc08c225b3e7aa4 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 15:01:42 +0200
Subject: [PATCH 06/11] fix: index component test

---
 .../sections/courses/Navigation.test.tsx      | 20 ++---------
 .../sections/courses/Overview/index.test.tsx  | 33 ++++++++++++++++---
 .../sections/courses/overview/index.tsx       |  2 +-
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx
index cf8ab8d2..3223f409 100644
--- a/__tests__/components/sections/courses/Navigation.test.tsx
+++ b/__tests__/components/sections/courses/Navigation.test.tsx
@@ -1,28 +1,12 @@
 import "@testing-library/jest-dom";
 import Navigation from "@/components/sections/courses/Navigation";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
 
 
-const RenderNavigation = () => {
-  render(
-    <ReduxProvider>
-      <Navigation />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("navigation-show");
-}
-
 describe("LearningModules", () => {
   it("should render the Navidation component", () => {
-    const navigation = RenderNavigation();
+    render( <Navigation />);
+    const navigation = screen.getByTestId("navigation-show");
     expect(navigation).toBeInTheDocument();
   });
 });
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx
index 6427a8e2..25e92014 100644
--- a/__tests__/components/sections/courses/Overview/index.test.tsx
+++ b/__tests__/components/sections/courses/Overview/index.test.tsx
@@ -8,18 +8,41 @@ import TrailerSection from "@/components/sections/courses/overview/index";
 import LearningModulesSection from "@/components/sections/courses/overview/index";
 import ChallengeSection from "@/components/sections/courses/overview/index";
 import PageNavigation from "@/components/sections/courses/overview/index";
+import Header from "@/components/sections/courses/overview/index";
+
+import { mockCourse } from "../../../../../__mocks__/course";
 
 import { render, screen } from "@testing-library/react";
 
 
-it("should render the Disclaimer", () => {
-  render( <AllComponents />);
-  const disclaimerComponent = screen.getByTestId("disclaimerId");
-  expect(disclaimerComponent).toBeInTheDocument();
-});
+interface HeaderProps {
+  title: "string";
+  description: "string";
+}
+
+const RenderHeader = (props?: HeaderProps) => {
+  render(<Header {...props} title={[mockCourse.name]} description={[mockCourse.description]}/>);
+  return screen.getByTestId("headerId");
+};
+
 
 describe("All Components", () => {
 
+  it("should render the Disclaimer", () => {
+    render( <AllComponents />);
+    const disclaimerComponent = screen.getByTestId("disclaimerId");
+    expect(disclaimerComponent).toBeInTheDocument();
+  });
+
+
+  it("should render Header with title and description", () => {
+    const headerContent = RenderHeader();
+    expect(headerContent).toBeInTheDocument();
+    expect(headerContent).toBeInTheDocument();
+
+    
+  });
+
   it("should render RewardsSection in the index component", () => {
     render( <RewardsSection />);
     const rewardsSection = screen.getByTestId("rewardsSectionId");
diff --git a/src/components/sections/courses/overview/index.tsx b/src/components/sections/courses/overview/index.tsx
index 58b0f95b..d2e9f3f1 100644
--- a/src/components/sections/courses/overview/index.tsx
+++ b/src/components/sections/courses/overview/index.tsx
@@ -23,7 +23,7 @@ export default function Overview(): ReactElement {
   if (!course) return <></>;
   return (
     <div className="flex flex-col divide-y divide-solid divide-gray-200 lg:py-5 text-gray-700">
-      <Header title={course.name} description={course.description} />
+      <Header data-testid="headerId" title={course.name} description={course.description} />
       <RewardsSection data-testid=""/>
       <ObjectivesSection data-testid=""/>
       <PrerequisiteSection data-testid=""/>

From e5eaabf2d91c83ae196cc63960776b6d35ec4b67 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 15:31:57 +0200
Subject: [PATCH 07/11] fix: prerequisite component test

---
 .../courses/Overview/LearningModules.test.tsx |  1 -
 .../courses/Overview/Objectives.test.tsx      | 31 +++++++++----------
 .../courses/Overview/Prerequisite.test.tsx    | 30 +++++++++++-------
 .../sections/courses/Overview/index.test.tsx  |  3 --
 .../sections/courses/overview/Objectives.tsx  |  4 +--
 .../courses/overview/Prerequisite.tsx         |  4 +--
 6 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
index ee06b637..e7343719 100644
--- a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
+++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
@@ -26,6 +26,5 @@ describe("LearningModules", () => {
   it("should show Learning Modules List", () => {
       const learningModulesCard = RenderLearningModule();
       expect(learningModulesCard).toBeInTheDocument();
-  
   });
 });
diff --git a/__tests__/components/sections/courses/Overview/Objectives.test.tsx b/__tests__/components/sections/courses/Overview/Objectives.test.tsx
index 5e2824e3..f68b33cf 100644
--- a/__tests__/components/sections/courses/Overview/Objectives.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Objectives.test.tsx
@@ -1,33 +1,30 @@
 import "@testing-library/jest-dom";
 import Objectives from "@/components/sections/courses/overview/Objectives";
+import ObjectiveList from "@/components/sections/courses/overview/Objectives";
 import { render, screen } from "@testing-library/react";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+import { mockCourse } from "../../../../../__mocks__/course";
 
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
+interface ObjectiveListProps {
+  objectives: [];
+}
 
 
-const RenderObjectives = () => {
-  render(
-    <ReduxProvider>
-      <Objectives/>
-    </ReduxProvider>
-  );
-  return screen.getByTestId("objectives-show");
-}
+const RenderObjectiveList = (props?: ObjectiveListProps) => {
+  render(<ObjectiveList {...props} objectives={mockCourse.objectives}/>);
+  return screen.getByTestId("objectivesListShow");
+};
+
 
 describe("Objectives", () => {
+
   it("should render the Objectives", () => {
-    const objectives = RenderObjectives();
+    render(<Objectives/>)
+    const objectives = screen.getByTestId("objectivesShow");
     expect(objectives).toBeInTheDocument();
   });
 
   it("should show Objective List", () => {
-    const objectivesList = screen.getByTestId("objectives-list-show");
+    const objectivesList = RenderObjectiveList();
     expect(objectivesList).toBeInTheDocument();
   });
 });
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
index 05a80e0b..67cfa43e 100644
--- a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
@@ -1,8 +1,8 @@
 import "@testing-library/jest-dom";
 import Prerequisite from "@/components/sections/courses/overview/Prerequisite";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
+import { mockCourse } from "../../../../../__mocks__/course";
+import ObjectiveList from "@/components/list/Objectives";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
@@ -11,19 +11,27 @@ jest.mock("next/router", () => ({
   }),
 }));
 
-
-const RenderPrerequisite = () => {
-  render(
-    <ReduxProvider>
-      <Prerequisite />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("prerequisite-show");
+interface ObjectiveListProps {
+  objectives: [];
 }
 
+
+const RenderObjectiveList = (props?: ObjectiveListProps) => {
+  render(<ObjectiveList {...props} objectives={mockCourse.prerequisite.items}/>);
+  return screen.getByTestId("objectivesListShow");
+};
+
 describe("Prerequisite", () => {
   it("should render the Prerequisite", () => {
-    const prerequisite = RenderPrerequisite();
+    render( <Prerequisite />)
+    const prerequisite =  screen.getByTestId("prerequisiteId");
     expect(prerequisite).toBeInTheDocument();
   });
+
+  it("should render the ObjectiveList", () => {
+    const objectiveList =  RenderObjectiveList();
+    expect(objectiveList).toBeInTheDocument();
+  });
+ 
+
 });
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx
index 25e92014..0c662127 100644
--- a/__tests__/components/sections/courses/Overview/index.test.tsx
+++ b/__tests__/components/sections/courses/Overview/index.test.tsx
@@ -38,9 +38,6 @@ describe("All Components", () => {
   it("should render Header with title and description", () => {
     const headerContent = RenderHeader();
     expect(headerContent).toBeInTheDocument();
-    expect(headerContent).toBeInTheDocument();
-
-    
   });
 
   it("should render RewardsSection in the index component", () => {
diff --git a/src/components/sections/courses/overview/Objectives.tsx b/src/components/sections/courses/overview/Objectives.tsx
index e1404600..ab310099 100644
--- a/src/components/sections/courses/overview/Objectives.tsx
+++ b/src/components/sections/courses/overview/Objectives.tsx
@@ -17,8 +17,8 @@ export default function Objectives(): ReactElement {
   const course = useSelector((state) => state.courses.current);
 
   return course ? (
-    <Section title={t("communities.overview.objective.title")} subtitle={t("communities.overview.objective.subtitle")}>
-      <ObjectiveList objectives={course.objectives} />
+    <Section data-testid="objectivesShow" title={t("communities.overview.objective.title")} subtitle={t("communities.overview.objective.subtitle")}>
+      <ObjectiveList data-testid="objectiveListShow" objectives={course.objectives} />
     </Section>
   ) : (
     <></>
diff --git a/src/components/sections/courses/overview/Prerequisite.tsx b/src/components/sections/courses/overview/Prerequisite.tsx
index 198c0ca5..84d418fc 100644
--- a/src/components/sections/courses/overview/Prerequisite.tsx
+++ b/src/components/sections/courses/overview/Prerequisite.tsx
@@ -18,9 +18,9 @@ export default function Prerequisite(): ReactElement {
 
   if (course && !course.prerequisite) return <></>;
   return (
-    <Section title={t("communities.overview.info.prerequisite.title")} subtitle={t("communities.overview.info.prerequisite.subtitle")}>
+    <Section data-testid="prerequisiteId" title={t("communities.overview.info.prerequisite.title")} subtitle={t("communities.overview.info.prerequisite.subtitle")}>
       <div className="mb-5">
-        <ObjectiveList objectives={course?.prerequisite.items} />
+        <ObjectiveList data-testid="objectivesListShow" objectives={course?.prerequisite.items} />
       </div>
       {course?.prerequisite.hint && (
         <Hint>

From a6fc86f6683a0857bbeb89e3155935acd8d29107 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 15:43:50 +0200
Subject: [PATCH 08/11] fix: trailer component test

---
 .../courses/Overview/Trailer.test.tsx         | 67 +++++++++++++------
 .../sections/courses/overview/Trailer.tsx     | 10 +--
 2 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
index 4343cd4a..8bb0516f 100644
--- a/__tests__/components/sections/courses/Overview/Trailer.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
@@ -2,29 +2,58 @@
 import "@testing-library/jest-dom";
 import Trailer from "@/components/sections/courses/overview/Trailer";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
-
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
-
-
-const RenderTrailer = () => {
-  render(
-    <ReduxProvider>
-      <Trailer />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("trailer-show");
+import { mockCourse } from "../../../../../__mocks__/course";
+import ObjectiveList from "@/components/sections/courses/overview/Trailer";
+import Video from "@/components/sections/courses/overview/Trailer";
+import Duration from "@/components/sections/courses/overview/Trailer";
+
+
+
+interface ObjectiveListProps {
+  objectives: [];
 }
 
+
+const RenderObjectiveList = (props?: ObjectiveListProps) => {
+  render(<ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/>);
+  return screen.getByTestId("objectivesListShow");
+};
+
+
 describe("Trailer", () => {
   it("should render the Trailer", () => {
-    const trailer = RenderTrailer();
+    render(<Trailer />)
+    const trailer = screen.getByTestId("trailerId");
     expect(trailer).toBeInTheDocument();
   });
+
+  it("should render the Video", () => {
+    render(<Video />)
+    const trailerVideo = screen.getByTestId("trailerVideoId");
+    expect(trailerVideo).toBeInTheDocument();
+  });
+
+  it("should render the Duration", () => {
+    render(<Duration />)
+    const trailerDuration = screen.getByTestId("trailerDurationId");
+    expect(trailerDuration).toBeInTheDocument();
+  });
+
+  it("should render the Video Summary", () => {
+    const trailerVideoSummary = screen.getByTestId("trailerVideoSummary");
+    expect(trailerVideoSummary).toBeInTheDocument();
+    expect(trailerVideoSummary).toBe(mockCourse.trailer.description);
+  });
+
+  it("should render the Objective List", () => {
+    const objectiveList = RenderObjectiveList();
+    expect(objectiveList).toBeInTheDocument();
+  });
+
+  it("should render course trailer description", () => {
+    const trailerText = screen.getByTestId("trailerTextId");
+    expect(trailerText).toBeInTheDocument();
+    expect(trailerText).toBe(mockCourse.trailer.description);
+  });
+
 });
\ No newline at end of file
diff --git a/src/components/sections/courses/overview/Trailer.tsx b/src/components/sections/courses/overview/Trailer.tsx
index 39bd1484..35602902 100644
--- a/src/components/sections/courses/overview/Trailer.tsx
+++ b/src/components/sections/courses/overview/Trailer.tsx
@@ -20,13 +20,13 @@ export default function Trailer(): ReactElement {
   return (
     <>
       {course && course.trailer && course.trailer.video ? (
-        <Section title={t("communities.overview.trailer")}>
-          <Duration text={t("communities.overview.trailer.video")} value={course.trailer.duration} />
-          <div className="block text-lg mt-3 mb-4.5">{course.trailer.summary}</div>
-          <Video className="-mx-0 md:w-full md:mx-auto" url={course.trailer.video} />
+        <Section data-testid="trailerId" title={t("communities.overview.trailer")}>
+          <Duration data-testid="trailerDurationId" text={t("communities.overview.trailer.video")} value={course.trailer.duration} />
+          <div data-testid="trailerVideoSummary" className="block text-lg mt-3 mb-4.5">{course.trailer.summary}</div>
+          <Video data-testid="trailerVideoId" className="-mx-0 md:w-full md:mx-auto" url={course.trailer.video} />
 
           {course.trailer.description && (
-            <div
+            <div data-testid="trailerTextId"
               dangerouslySetInnerHTML={{
                 __html: course.trailer.description,
               }}

From 92146a50dfceed31c15f04888d7ea38b5a8b05f5 Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Tue, 11 Jun 2024 15:55:00 +0200
Subject: [PATCH 09/11] fix: reward component test

---
 .../courses/Overview/Rewards.test.tsx         | 44 ++++++++++---------
 .../sections/courses/overview/Rewards.tsx     |  4 +-
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
index e97a690c..5be3d8b5 100644
--- a/__tests__/components/sections/courses/Overview/Rewards.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
@@ -2,29 +2,33 @@
 import "@testing-library/jest-dom";
 import Rewards from "@/components/sections/courses/overview/Rewards";
 import { render, screen } from "@testing-library/react";
-// import { course } from "../../__mocks__/course.ts";
-import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider";
-
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    isFallback: false,
-  }),
-}));
-
-
-const RenderRewards = () => {
-  render(
-    <ReduxProvider>
-      <Rewards />
-    </ReduxProvider>
-  );
-  return screen.getByTestId("rewards-show");
+import Reward from "@/components/sections/courses/overview/Rewards";
+
+
+
+
+interface RewardProps {
+  objectives: [];
 }
 
+
+const RewardComponnent = (props?: RewardProps) => {
+  render(<Reward {...props} key={2} reward={""} size="" category=""/>);
+  return screen.getByTestId("rewardId");
+};
+
+ 
+
 describe("Rewards", () => {
-  it("should render the Rewards", () => {
-    const rewards = RenderRewards();
+  it("should render the Rewards component", () => {
+    render( <Rewards />)
+    const rewards = screen.getByTestId("rewardsId");
     expect(rewards).toBeInTheDocument();
   });
+
+  it("should render the Reward component", () => {
+    const reward = RewardComponnent();
+    expect(reward).toBeInTheDocument();
+  });
+
 });
\ No newline at end of file
diff --git a/src/components/sections/courses/overview/Rewards.tsx b/src/components/sections/courses/overview/Rewards.tsx
index 1254ce80..18ddfe6f 100644
--- a/src/components/sections/courses/overview/Rewards.tsx
+++ b/src/components/sections/courses/overview/Rewards.tsx
@@ -19,10 +19,10 @@ export default function Rewards(): ReactElement {
   return (
     <>
       {course && course.challenge ? (
-        <Section title={t("communities.overview.reward.title")} subtitle={t("communities.overview.reward.subtitle")}>
+        <Section data-testid="rewardsId" title={t("communities.overview.reward.title")} subtitle={t("communities.overview.reward.subtitle")}>
           <div className="grid grid-cols-2 pt-4 lg:grid-cols-3">
             {course.challenge.rewards.map((reward: RewardType, i: number) => {
-              return <Reward key={`reward-${i}`} reward={reward} size="medium" category={reward.type.toLowerCase()} />;
+              return <Reward data-testid="rewardId" key={`reward-${i}`} reward={reward} size="medium" category={reward.type.toLowerCase()} />;
             })}
           </div>
         </Section>

From 6cf72640e7e664cf48041bcfdcda1efbf13385fe Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Mon, 17 Jun 2024 12:46:01 +0200
Subject: [PATCH 10/11] fix: reward component test

---
 .../sections/courses/Overview/Rewards.test.tsx     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
index 5be3d8b5..afdf88c7 100644
--- a/__tests__/components/sections/courses/Overview/Rewards.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
@@ -3,17 +3,23 @@ import "@testing-library/jest-dom";
 import Rewards from "@/components/sections/courses/overview/Rewards";
 import { render, screen } from "@testing-library/react";
 import Reward from "@/components/sections/courses/overview/Rewards";
+import { mockCourse } from "../../../../../__mocks__/course";
+import { RewardType } from "@/components/cards/Bounty";
 
 
+interface RewardProps {
+  reward: RewardType, 
+  i: number;
+}
 
 
-interface RewardProps {
-  objectives: [];
+const rewardList = (props?: RewardProps) => {
+  mockCourse.challenge?.rewards.forEach(reward => <Reward {...props} key={2} reward={reward} size="medium" category="category"/>)
 }
 
 
-const RewardComponnent = (props?: RewardProps) => {
-  render(<Reward {...props} key={2} reward={""} size="" category=""/>);
+const RewardComponnent = () => {
+  render({rewardList});
   return screen.getByTestId("rewardId");
 };
 

From 3ccb28e55ba103c227e8b7197467849d0da25ebe Mon Sep 17 00:00:00 2001
From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com>
Date: Mon, 17 Jun 2024 12:57:19 +0200
Subject: [PATCH 11/11] fix: trailer component test

---
 .../components/sections/courses/Overview/Trailer.test.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
index 8bb0516f..4cc8f940 100644
--- a/__tests__/components/sections/courses/Overview/Trailer.test.tsx
+++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
@@ -13,9 +13,13 @@ interface ObjectiveListProps {
   objectives: [];
 }
 
+const objectiveList = (props?: ObjectiveListProps) => {
+  return  <ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/>
+}
+
 
-const RenderObjectiveList = (props?: ObjectiveListProps) => {
-  render(<ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/>);
+const RenderObjectiveList = () => {
+  render({objectiveList});
   return screen.getByTestId("objectivesListShow");
 };