From 5cd79af42537e00000369a2420377df0cfcb843e Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Thu, 23 May 2024 12:03:51 +0200
Subject: [PATCH 01/12] feat: add test for the section challenge

---
 __mocks__/bounty.ts                           |  10 ++
 __mocks__/challenge.ts                        | 145 ++++++++++++++++++
 __mocks__/community.ts                        |  57 +++++++
 __mocks__/course.ts                           | 134 ++++++++++++++++
 __mocks__/referrals.ts                        |  37 +++++
 __mocks__/reward.ts                           |   8 +-
 .../sections/challenges/Header.test.tsx       |  22 +++
 .../sections/challenges/Learning.test.tsx     |  36 +++++
 .../sections/challenges/Objectives.test.tsx   |  46 ++++++
 .../sections/challenges/Rewards.test.tsx      |  32 ++++
 .../sections/challenges/Rubric.test.tsx       |  38 +++++
 .../challenges/SetupTeamChallenge.test.tsx    |  32 ++++
 .../sections/challenges/Submission.test.tsx   |  63 ++++++++
 .../_partials/HackathonPrize.test.tsx         |  32 ++++
 .../challenges/_partials/RewardsList.test.tsx |  16 ++
 src/components/sections/challenges/Header.tsx |   4 +-
 .../sections/challenges/Learning.tsx          |   4 +-
 .../sections/challenges/Objectives.tsx        |   4 +-
 .../sections/challenges/Rewards.tsx           |   4 +-
 src/components/sections/challenges/Rubric.tsx |   5 +-
 .../challenges/SetupTeamChallenge.tsx         |   4 +-
 .../sections/challenges/Submission.tsx        |   6 +-
 .../challenges/_partials/HackathonPrize.tsx   |   4 +-
 .../challenges/_partials/RewardsList.tsx      |   6 +-
 src/components/ui/Certificate.tsx             |   2 +-
 src/types/bounty.d.ts                         |   2 +-
 src/types/community.d.ts                      |   4 +-
 27 files changed, 732 insertions(+), 25 deletions(-)
 create mode 100644 __mocks__/bounty.ts
 create mode 100644 __mocks__/challenge.ts
 create mode 100644 __mocks__/community.ts
 create mode 100644 __mocks__/course.ts
 create mode 100644 __mocks__/referrals.ts
 create mode 100644 __tests__/components/sections/challenges/Header.test.tsx
 create mode 100644 __tests__/components/sections/challenges/Learning.test.tsx
 create mode 100644 __tests__/components/sections/challenges/Objectives.test.tsx
 create mode 100644 __tests__/components/sections/challenges/Rewards.test.tsx
 create mode 100644 __tests__/components/sections/challenges/Rubric.test.tsx
 create mode 100644 __tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
 create mode 100644 __tests__/components/sections/challenges/Submission.test.tsx
 create mode 100644 __tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx
 create mode 100644 __tests__/components/sections/challenges/_partials/RewardsList.test.tsx

diff --git a/__mocks__/bounty.ts b/__mocks__/bounty.ts
new file mode 100644
index 000000000..5a283f580
--- /dev/null
+++ b/__mocks__/bounty.ts
@@ -0,0 +1,10 @@
+export const mockTrailer = {
+    summary: "trailer summary",
+    description: "trailer description",
+    video: "trailer video",
+    duration: 4,
+    info: {
+      items: ["item 1", "item 2"],
+      title: "info title",
+    },
+  };
\ No newline at end of file
diff --git a/__mocks__/challenge.ts b/__mocks__/challenge.ts
new file mode 100644
index 000000000..72b98d05d
--- /dev/null
+++ b/__mocks__/challenge.ts
@@ -0,0 +1,145 @@
+import { TEAM_FORMATION } from "@/constants/challengeInfo";
+import { metadata, mockCommunity } from "./community";
+import { mockFormat, mockCertificateData, mockCourse, mockLearningModule, mockRatingCriteria } from "./course";
+import { reward } from "./reward";
+import { Submission, User } from "@/types/bounty";
+import { KYCSTATUS } from "@/store/feature/kyc.slice";
+import { Team, TeamMember } from "@/types/challenge";
+
+export const mockUser = (): User => ({
+    id: "user_id",
+    ref: "ref",
+    created_at: new Date("2022-05-01T12:00:00Z"),
+    firstName: "John Doe",
+    displayName: "John Doe",
+    uid: "uuid-uuido-232-dex0232-2331",
+    joined: "14 days ago",
+    disabled: false,
+    reputation: 0,
+    username: "",
+    lastName: "",
+    emailVerified: false,
+    email: "",
+    kycStatus: KYCSTATUS.PENDING,
+  });
+
+export const challenge = () => ({
+  id: "challenge",
+  ref: "challenge ref",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  hint: "Hint",
+  name: "challenge name",
+  format: mockFormat,
+  description: "challenge description",
+  course: mockCourse,
+  type: "course",
+  isTeamChallenge: false,
+  objectives: ["objectives 1", "Objectives 2", "Objectives 3", "Objectives 4"],
+  threshold: 8,
+  community: mockCommunity,
+  reviewTime: 9,
+  metadata: metadata,
+  level: 58,
+  courses: [mockCourse],
+  learningModules: [mockLearningModule],
+  expiresAt: "2025",
+  reward: reward,
+  certificateIcon: "certificate",
+  certificateData: mockCertificateData,
+  ratingCriteria: [mockRatingCriteria],
+  timestamp: 6,
+  maxPoints: 299,
+  minPoints: 9,
+  rewards: [reward],
+  feedbacks: {},
+  feedbackInfo: [{}],
+  bestSubmissions: [{}],
+  teamLimit: 5,
+  isHackathon: false,
+  additionalInfo: {
+    [TEAM_FORMATION]: {
+      type: "teamFormation",
+      text: "Form your team details here",
+    },
+  },
+});
+
+export const submission = (): Submission => ({
+  length: 0,
+  id: "submission_id",
+  ref: "reference",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  link: "/submissions/reference",
+  community: mockCommunity,
+  user_id: "user_id",
+  challenge: challenge(),
+  text: "Submission",
+  reviewDeadline: new Date(),
+  metadata: {
+    evaluation: "",
+    applicableReward: {
+      ref: "",
+      amount: 0,
+      updated_at: "",
+      challenge: "",
+      created_at: "",
+      id: "",
+      type: "",
+      community: "",
+      timestamp: 0,
+      token: "",
+    },
+    reviewed: false,
+    feedbacks: 0,
+    language: "",
+  },
+  timestamp: 0,
+  user: mockUser(),
+  reviewable: false,
+  status: "",
+  reward: reward,
+  map: function () {
+    throw new Error("Function not implemented.");
+  },
+});
+
+export const mockInvite = {
+    created_at: "tuesday",
+    id: "invite",
+    ref: "invitation ref",
+    status: "invitation status",
+    team_ref: "team reference",
+    timestamp: 3,
+    updated_at: "wednesday",
+    user: mockUser(),
+    user_id: "user id",
+  }
+
+  export const mockTeamMember: TeamMember = {
+    created_at: "created_at",
+    id: "id",
+    joined_on: "joined_on",
+    ref: "ref",
+    team_ref: "team reference",
+    timestamp: 3,
+    updated_at: "wednesday",
+    user: mockUser(),
+  }
+
+  export const mockTeam: Team = {
+    challenge: challenge(),
+    challenge_ref: "challenge ref",
+    created_at: "created at",
+    id: "id",
+    locked: true,
+    name: "Master",
+    organizer: mockUser(),
+    organizer_id: "organizer id",
+    invites: [mockInvite],
+    members: [mockTeamMember],
+    ref: "",
+    timestamp: "",
+    updated_at: ""
+  }
\ No newline at end of file
diff --git a/__mocks__/community.ts b/__mocks__/community.ts
new file mode 100644
index 000000000..48a4db2fa
--- /dev/null
+++ b/__mocks__/community.ts
@@ -0,0 +1,57 @@
+import { Community } from "@/types/community";
+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",
+};
+
+const reward = {
+  id: "123456789",
+  ref: "ref123",
+  created_at: new Date("2024-01-29T08:00:00Z"),
+  updated_at: new Date("2024-01-29T08:30:00Z"),
+  challenge: "Challenge Name",
+  type: "SUBMISSION",
+  community: "Community Name",
+  token: "Token ID",
+  stable: true,
+  amount: 100,
+  timestamp: 1643424000,
+};
+
+export const mockCommunity: 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,
+};
\ No newline at end of file
diff --git a/__mocks__/course.ts b/__mocks__/course.ts
new file mode 100644
index 000000000..cac961e82
--- /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__/referrals.ts b/__mocks__/referrals.ts
new file mode 100644
index 000000000..f41dca810
--- /dev/null
+++ b/__mocks__/referrals.ts
@@ -0,0 +1,37 @@
+import { Referral, UserReferral } from "@/types/community";
+import { mockCommunity } from "./community";
+import { challenge, mockUser, submission as getMockSubmission } from "./challenge";
+
+
+const referralSubmission = () => Object.assign(getMockSubmission(), { challengeData: challenge(), link: "referral-link" });
+const userReferral: UserReferral = Object.assign(mockUser(), { submissions: [referralSubmission()] });
+
+export const mockReferral = (): Referral => ({
+  id: "",
+  name: "",
+  ref: "",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  title: "",
+  community: mockCommunity,
+  timestamp: 0,
+  reward: {
+    id: "",
+    ref: "",
+    created_at: new Date("2022-05-01T12:00:00Z"),
+    updated_at: new Date("2022-05-01T12:00:00Z"),
+    challenge: "",
+    type: "",
+    community: "",
+    token: "",
+    stable: false,
+    fiatCurrency: undefined,
+    amount: 0,
+    timestamp: 0,
+    distribution: undefined,
+  },
+  challenge: challenge(),
+  submissions: [getMockSubmission()],
+  rewarded: false,
+  user: userReferral,
+});
\ No newline at end of file
diff --git a/__mocks__/reward.ts b/__mocks__/reward.ts
index 20aab5b57..22043d92f 100644
--- a/__mocks__/reward.ts
+++ b/__mocks__/reward.ts
@@ -8,6 +8,12 @@ export const reward = {
   community: "community",
   token: "token",
   stable: false,
+  fiatCurrency: "USD",
   amount: 10,
   timestamp: 10,
-};
+  distribution: {
+      first: 1,
+      second: 2,
+      third: 3
+  }
+}
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Header.test.tsx b/__tests__/components/sections/challenges/Header.test.tsx
new file mode 100644
index 000000000..58fa3c734
--- /dev/null
+++ b/__tests__/components/sections/challenges/Header.test.tsx
@@ -0,0 +1,22 @@
+import ChallengeHeader from "@/components/sections/challenges/Header";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { challenge, submission } from "../../../../__mocks__/challenge";
+
+
+describe("ChallengeHeader", () => {
+  it("should render the ChallengeHeader", () => {
+    renderWithRedux(<ChallengeHeader testId="challengeHeaderId" />);
+    const challengeheader = screen.getByTestId("challengeHeaderId");
+    expect(challengeheader).toBeInTheDocument();
+  });
+
+  it("should render the challenge header with section", () => {
+    renderWithRedux(<ChallengeHeader />, { challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() } });
+    const challenges = challenge();
+    expect(screen.getByText("communities.challenge.title")).toBeInTheDocument();
+    expect(screen.getByText(challenges.name)).toBeInTheDocument();
+    expect(screen.getByText(challenges.description)).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Learning.test.tsx b/__tests__/components/sections/challenges/Learning.test.tsx
new file mode 100644
index 000000000..93a3d3022
--- /dev/null
+++ b/__tests__/components/sections/challenges/Learning.test.tsx
@@ -0,0 +1,36 @@
+import Learning from "@/components/sections/challenges/Learning";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { mockCommunity } from "../../../../__mocks__/community";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { mockCourse, mockLearningModule } from "../../../../__mocks__/course";
+import { challenge, submission } from "../../../../__mocks__/challenge";
+
+describe("Learning", () => {
+  it("should render Learning", () => {
+    renderWithRedux(<Learning testId="learningId" courses={[]} learningModules={[]} community={mockCommunity} />);
+    const learning = screen.getByTestId("learningId");
+    expect(learning).toBeInTheDocument();
+    expect(screen.getByText("communities.overview.challenge.learning.title")).toBeInTheDocument();
+  });
+
+  it("should render with courses", () => {
+    const coursesArray = [mockCourse];
+    renderWithRedux(<Learning courses={[mockCourse]} learningModules={[mockLearningModule]} community={mockCommunity} />, {
+      challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() },
+    });
+    coursesArray.forEach((course) => {
+      expect(screen.getByText(course.name)).toBeInTheDocument();
+      expect(screen.getByText(course.description)).toBeInTheDocument();
+    });
+  });
+
+  it("should render with learning", () => {
+    const learningArray = [mockLearningModule];
+    renderWithRedux(<Learning courses={[mockCourse]} learningModules={[mockLearningModule]} community={mockCommunity} />);
+    learningArray.forEach((learningModule) => {
+      expect(screen.getByText(learningModule.title)).toBeInTheDocument();
+      expect(screen.getByText(learningModule.description)).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Objectives.test.tsx b/__tests__/components/sections/challenges/Objectives.test.tsx
new file mode 100644
index 000000000..b3ec5bd18
--- /dev/null
+++ b/__tests__/components/sections/challenges/Objectives.test.tsx
@@ -0,0 +1,46 @@
+import Objectives from "@/components/sections/challenges/Objectives";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { challenge as mockChallenge, submission } from "../../../../__mocks__/challenge";
+import DateManager from "@/utilities/DateManager";
+
+describe("Objectives", () => {
+  const challenge = mockChallenge();
+  it("should render objectives", () => {
+    renderWithRedux(<Objectives testId="objectiveId" />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    const objectives = screen.getByTestId("objectiveId");
+    expect(objectives).toBeInTheDocument();
+    expect(screen.getByText("communities.overview.challenge.objective.title")).toBeInTheDocument();
+  });
+
+  it("should render the objective list", () => {
+    renderWithRedux(<Objectives />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    const objectiveValue = challenge.objectives.find((objective) => objective);
+    expect(screen.getByText(objectiveValue || "objectives 1")).toBeInTheDocument();
+  });
+
+  it("should display expiry date", () => {
+    renderWithRedux(<Objectives />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    const expirationDate = challenge.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
+    if (expirationDate) {
+      expect(screen.getByText(expirationDate)).toBeInTheDocument();
+    }
+  });
+
+  it("should display challenge hint", () => {
+    renderWithRedux(<Objectives />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    const containsLink = new RegExp(/<a.*?>.*?<\/a>/g);
+    expect(containsLink.test('<a href="http://example.com">Example</a>')).toBe(true); 
+    expect(containsLink.test('This is a test string without a link.')).toBe(false);  
+    expect(containsLink.test('<a href="http://example.com">Example')).toBe(false);  
+    expect(containsLink.test('<a href="http://example.com"><a>Nested</a></a>')).toBe(true); 
+    
+    expect(containsLink.test('<div>Not a link</div>')).toBe(false);
+    if (containsLink.test(challenge.hint as string)) {
+        expect(screen.getByText(challenge.hint as string)).toBeInTheDocument();
+    } else {
+      expect(screen.getByText(challenge.hint)).toBeInTheDocument();
+    }
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Rewards.test.tsx b/__tests__/components/sections/challenges/Rewards.test.tsx
new file mode 100644
index 000000000..cd7c209a9
--- /dev/null
+++ b/__tests__/components/sections/challenges/Rewards.test.tsx
@@ -0,0 +1,32 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { OverviewRewards } from "@/components/sections/challenges/Rewards";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { challenge as mockChallenge, submission } from "../../../../__mocks__/challenge";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    query: "",
+  }),
+}));
+
+describe("Reward", () => {
+  it("should render a reward", () => {
+    const challenge = mockChallenge();
+    renderWithRedux(<OverviewRewards testId="overviewRewardId" />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() } });
+    const OverviewReward = screen.getByTestId("overviewRewardId");
+    expect(OverviewReward).toBeInTheDocument();
+    expect(OverviewReward.textContent).toBe("course.challenge.reward.certificate.description")
+    if(challenge.rewards){
+        challenge.rewards.forEach((reward)=> {
+            expect(screen.getByText(reward.amount + (" ") + reward.token)).toBeInTheDocument()
+            expect(screen.getByText(reward.amount + (" ") + reward.token).textContent).toBe("10 token")
+        })
+    }
+    if (challenge.isHackathon) {
+      const challengeCertificate = screen.getByText("communities.overview.challenge.participate");
+      expect(challengeCertificate).toBeInTheDocument();
+      expect(challengeCertificate.textContent).toContain(challenge.reward.token || challenge?.rewards[0]?.token || "")
+    }
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Rubric.test.tsx b/__tests__/components/sections/challenges/Rubric.test.tsx
new file mode 100644
index 000000000..08de99c74
--- /dev/null
+++ b/__tests__/components/sections/challenges/Rubric.test.tsx
@@ -0,0 +1,38 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import RubricHeader from "@/components/sections/challenges/Rubric";
+import { Rubric, mockRatingCriteria } from "../../../../__mocks__/course";
+import { challenge as mockChallenge, submission } from "../../../../__mocks__/challenge";
+
+describe("Rubric", () => {
+  const challenge = mockChallenge();
+  it("should render the Rubric header", () => {
+    renderWithRedux(<RubricHeader testId="rubricId" ratingCriteria={[]} selected={[]} />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() } });
+    const rubricHeader = screen.getByTestId("rubricId");
+    expect(rubricHeader).toBeInTheDocument();
+  });
+
+  it("should render the Rubric with ratings", () => {
+    renderWithRedux(<RubricHeader ratingCriteria={[mockRatingCriteria]} selected={[Rubric]} />, {
+      challenges: { current: challenge, list: [challenge], loading: false, submission: submission() },
+    });
+    const rubricHeaderName = screen.getByText(mockRatingCriteria.name);
+    expect(rubricHeaderName).toBeInTheDocument();
+
+    const selectedRubric = (id: string) => [Rubric].find((rubric) => rubric.id === id);
+
+    [mockRatingCriteria].forEach((criteria) => {
+      expect(screen.getByText(criteria.name)).toBeInTheDocument();
+      criteria.rubric.forEach((rubric) => {
+        if (selectedRubric(rubric.id)) {
+          const rubricPoints = selectedRubric(rubric.id)?.points;
+          expect(screen.getByText(rubricPoints || "id")).toBeInTheDocument();
+        } else {
+          expect(screen.getByText(rubric.points)).toBeInTheDocument();
+        }
+        expect(screen.getByText(rubric.text)).toBeInTheDocument();
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
new file mode 100644
index 000000000..40a525c25
--- /dev/null
+++ b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
@@ -0,0 +1,32 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { challenge as mockChallenge, mockInvite, submission } from "../../../../__mocks__/challenge";
+import SetupTeamChallenge from "@/components/sections/challenges/SetupTeamChallenge";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+
+describe('', () => {
+    const challenge = mockChallenge();
+  it("renders without crashing", () => {
+    renderWithRedux(<SetupTeamChallenge testid="challengeId" />);
+    expect(screen.getByTestId("challengeId")).toBeInTheDocument()
+  });
+
+  it("renders content correctly", () => {
+    renderWithRedux(<SetupTeamChallenge />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() }, invites: { data: mockInvite } });
+    expect(screen.getByText("Submission")).toBeInTheDocument();
+    expect(screen.getByText("communities.overview.challenge.team.setup.info")).toBeInTheDocument();
+    expect(screen.getByText("Form your team")).toBeInTheDocument();
+    expect(screen.getByText(challenge.additionalInfo.TEAM_FORMATION.text) || "communities.overview.challenge.team.organization").toBeInTheDocument();
+  });
+  
+  it("renders CreateTeamCard when there is no invitation or comfirmTeamInvitation when there is invitation", () => {
+    renderWithRedux(<SetupTeamChallenge />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() }, invites: { data: mockInvite } });
+    if (!mockInvite) {
+      expect(screen.getByText("communities.overview.challenge.team.setup.submit-title")).toBeInTheDocument();
+      expect(screen.getByText("communities.overview.challenge.team.setup.description")).toBeInTheDocument();
+    } else {
+      expect(screen.getByText("Submit your team")).toBeInTheDocument();
+      expect(screen.getByText(`The maximum team members for this challenge is ${challenge?.teamLimit} people`)).toBeInTheDocument();
+    }
+  });
+ })
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Submission.test.tsx b/__tests__/components/sections/challenges/Submission.test.tsx
new file mode 100644
index 000000000..8b1739ec1
--- /dev/null
+++ b/__tests__/components/sections/challenges/Submission.test.tsx
@@ -0,0 +1,63 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import Submission, { FormValues } from "@/components/sections/challenges/Submission";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { challenge as mockChallenge, mockTeam, mockUser, submission } from "../../../../__mocks__/challenge";
+import { FieldErrors } from "react-hook-form";
+import { mockReferral } from "../../../../__mocks__/referrals";
+
+describe("Submission", () => {
+  let errors: FieldErrors<FormValues>;
+  const challenge = mockChallenge();
+
+  it("renders the submission section", async () => {
+    renderWithRedux(<Submission />, {
+      challenges: { current: challenge, list: [challenge], loading: false, submission: submission() },
+      teams: { current: mockTeam, loading: true },
+    });
+    const submissionsClosed = challenge?.expiresAt ? Date.parse(challenge?.expiresAt) < Date.now() : false;
+    if (submissionsClosed) {
+      expect(screen.getByText("communities.overview.challenge.submissions-closed")).toBeInTheDocument();
+    } else if (challenge.isTeamChallenge) {
+      expect(screen.getByText("communities.overview.challenge.submission.description")).toBeInTheDocument();
+    }
+  });
+
+  it("validates submission form and displays necessary elements", () => {
+    const user = mockUser();
+    const canSubmit = () => {
+      if (!challenge?.isTeamChallenge) return true;
+      return Boolean(!!mockTeam?.organizer);
+    };
+
+    renderWithRedux(<Submission testId="submission-form" />, {
+      challenges: { current: challenge, list: [challenge], loading: false, submission: submission() },
+      teams: { current: mockTeam, loading: true },
+      user: {
+        data: user,
+        fetchingUserLoading: true,
+        filteredUsers: [user],
+        token: "",
+        userBalance: "User balance",
+        balance: "cusd",
+        walletAddresses: "walletAddress",
+        referrals: [mockReferral()],
+      },
+    });
+    if (!canSubmit) {
+      expect(screen.getByText("communities.challenge.submission.hint")).toBeInTheDocument();
+    } else {
+      expect(screen.getByTestId("submission-form")).toBeInTheDocument();
+      if (challenge.format && user && user.avatar && challenge.format.githubLink && errors) {
+        expect(screen.getByText(mockTeam.organizer?.displayName || user.displayName)).toBeInTheDocument();
+        expect(screen.getByText(errors.text?.message as string)).toBeInTheDocument();
+        expect(screen.getByText(errors.githubLink?.message as string)).toBeInTheDocument();
+      }
+      expect(screen.getByText("Markdown")).toBeInTheDocument();
+      if (challenge?.format.disclaimer) {
+        expect(screen.getByRole("checkbox")).toBeInTheDocument();
+      }
+      expect(screen.getByText("submit")).toBeInTheDocument();
+    }
+  });
+});
diff --git a/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx b/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx
new file mode 100644
index 000000000..aa9299f75
--- /dev/null
+++ b/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx
@@ -0,0 +1,32 @@
+import HackathonPrize from "@/components/sections/challenges/_partials/HackathonPrize";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { reward } from "../../../../../__mocks__/reward";
+import { Distribution } from "@/types/course";
+
+describe("HackathonPrize", () => {
+  it("should render the hackathon prize", () => {
+    render(<HackathonPrize reward={reward} description={"Prize"} testId="hackathonPrizeId" />);
+
+    const { first, second, third } = reward?.distribution || ({} as Distribution);
+
+    const hackathonPrize = screen.getByTestId("hackathonPrizeId");
+    expect(hackathonPrize).toBeInTheDocument();
+    if (reward.fiatCurrency) {
+      const currency = screen.getByText("communities.overview.reward.fiat.prize.pool");
+      expect(currency).toBeInTheDocument();
+      expect(currency.textContent).toBe("communities.overview.reward.fiat.prize.pool");
+    } else {
+      const currency = screen.getByText("communities.overview.reward.crypto.prize.pool");
+      expect(currency).toBeInTheDocument();
+      expect(currency.textContent).toBe("communities.overview.reward.crypto.prize.pool");
+    }
+    
+    const descriptionText = screen.getByText("Prize");
+    expect(descriptionText).toBeInTheDocument();
+    expect(descriptionText.textContent).toBe("Prize");
+
+    const distributionText = screen.getByText(`1st Place ${first}; 2nd Place ${second}; 3rd Place ${third}`);
+    expect(distributionText).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/components/sections/challenges/_partials/RewardsList.test.tsx b/__tests__/components/sections/challenges/_partials/RewardsList.test.tsx
new file mode 100644
index 000000000..a99efffb0
--- /dev/null
+++ b/__tests__/components/sections/challenges/_partials/RewardsList.test.tsx
@@ -0,0 +1,16 @@
+import RewardsList from "@/components/sections/challenges/_partials/RewardsList";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { reward } from "../../../../../__mocks__/reward";
+
+describe("RewardsList", () => {
+  it("should render the reward list", () => {
+    render(<RewardsList rewards={[reward]} testId="rewardListId" />);
+    const rewardList = screen.getByTestId("rewardListId");
+    expect(rewardList).toBeInTheDocument();
+    [reward].forEach((reward) => {
+      expect(screen.getByText(reward.token)).toBeInTheDocument();
+      expect(screen.getByText(reward.token).textContent).toBe("token");
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/sections/challenges/Header.tsx b/src/components/sections/challenges/Header.tsx
index e91b3f2e6..ca9965fda 100644
--- a/src/components/sections/challenges/Header.tsx
+++ b/src/components/sections/challenges/Header.tsx
@@ -11,12 +11,12 @@ import { ReactElement } from "react";
  * @export
  * @returns {ReactElement}
  */
-export default function ChallengeHeader(): ReactElement {
+export default function ChallengeHeader({testId}: {testId?: string}): ReactElement {
   const { t } = useTranslation();
   const challenge = useSelector((state) => state.challenges.current);
 
   return (
-    <div>
+    <div data-testid={testId}>
       <Header isTeamChallenge={challenge?.isTeamChallenge} title={challenge?.name} subtitle={t("communities.challenge.title")} isHackathon={challenge?.isHackathon} />
       <Section subtitle={challenge?.description} />
     </div>
diff --git a/src/components/sections/challenges/Learning.tsx b/src/components/sections/challenges/Learning.tsx
index 67c950742..7ebcff14f 100644
--- a/src/components/sections/challenges/Learning.tsx
+++ b/src/components/sections/challenges/Learning.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "next-i18next";
  *
  * @returns {JSX.Element} The Learning component JSX element.
  */
-export default function Learning({ courses, learningModules, community }: { courses: Course[]; learningModules: LearningModule[]; community: Community }): JSX.Element {
+export default function Learning({ courses, learningModules, community, testId }: { courses: Course[]; learningModules: LearningModule[]; community: Community, testId?: string }): JSX.Element {
   const challenge = useSelector((state) => state.challenges.current);
   const { t } = useTranslation();
   return (
@@ -24,7 +24,7 @@ export default function Learning({ courses, learningModules, community }: { cour
         isExpanded
         content={
           <>
-            <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.learning.title")}</div>
+            <div data-testid={testId} className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.learning.title")}</div>
             <div className="md:grid grid-cols-2 gap-3">
               {courses?.map((course) => (
                 <LearningCard
diff --git a/src/components/sections/challenges/Objectives.tsx b/src/components/sections/challenges/Objectives.tsx
index 4c04459a2..91df198f7 100644
--- a/src/components/sections/challenges/Objectives.tsx
+++ b/src/components/sections/challenges/Objectives.tsx
@@ -14,7 +14,7 @@ import { ReactElement } from "react";
  * @export
  * @returns {ReactElement}
  */
-export default function Objectives(): ReactElement {
+export default function Objectives({testId}: {testId?: string}): ReactElement {
   // check for a link in the hint
   const containsLink = new RegExp(/<a.*?>.*?<\/a>/g);
 
@@ -23,7 +23,7 @@ export default function Objectives(): ReactElement {
   const expirationDate = challenge?.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
   return (
     <Section title={`${t("communities.overview.challenge.objective.title")}`}>
-      <div className="space-y-5">
+      <div data-testid={testId} className="space-y-5">
         <ObjectiveList objectives={challenge?.objectives} />
         {expirationDate && <ExpiryDate expiresAt={expirationDate} />}
         <Hint>
diff --git a/src/components/sections/challenges/Rewards.tsx b/src/components/sections/challenges/Rewards.tsx
index 8607ea4ea..f0413050a 100644
--- a/src/components/sections/challenges/Rewards.tsx
+++ b/src/components/sections/challenges/Rewards.tsx
@@ -13,7 +13,7 @@ import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
  * @export
  * @returns {ReactElement}
  */
-export function OverviewRewards(): ReactElement {
+export function OverviewRewards({testId}: {testId?: string}): ReactElement {
   const { t } = useTranslation();
   const  challenge = useSelector((state)=>state.challenges.current)
   const router = useRouter();
@@ -21,7 +21,7 @@ export function OverviewRewards(): ReactElement {
 
   return (
     <Section title={`${t("communities.overview.reward.title")}`}>
-      <p className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
+      <p data-testid={testId} className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
       <div className="text-sm mt-6 flex gap-8 w-full md:w-2/3 items-center">
         <div>
           <Certificate size="medium" name={router.query?.slug as string} />
diff --git a/src/components/sections/challenges/Rubric.tsx b/src/components/sections/challenges/Rubric.tsx
index eab43cd6e..dcd2dcbb5 100644
--- a/src/components/sections/challenges/Rubric.tsx
+++ b/src/components/sections/challenges/Rubric.tsx
@@ -22,6 +22,7 @@ interface RubricHeaderProps {
   ratingCriteria: RatingCriteria[];
   selected: Rubric[];
   hideTitle?: boolean;
+  testId?: string;
 }
 
 /**
@@ -36,7 +37,7 @@ interface RubricHeaderProps {
 }
  * @returns {ReactElement}
  */
-export default function RubricHeader({ ratingCriteria, selected, hideTitle = false }: RubricHeaderProps): ReactElement {
+export default function RubricHeader({ ratingCriteria, selected, hideTitle = false, testId }: RubricHeaderProps): ReactElement {
   const { t } = useTranslation();
   const { challenge, colors } = useMultiSelector<unknown, { challenge: Challenge; colors: Colors }>({
     challenge: (state: IRootState) => state.challenges.current,
@@ -57,7 +58,7 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
     const hackatonPassingScore = t("communities.challenge.hackathon.passing.score", { threshold: challenge?.threshold, prizePool: `USD ${reward?.amount}` });
 
     return (
-      <div className="text-base font-normal text-slate-700 pt-8 md:w-182.5 inline-flex flex-wrap items-center gap-1">
+      <div data-testid={testId} className="text-base font-normal text-slate-700 pt-8 md:w-182.5 inline-flex flex-wrap items-center gap-1">
         {challenge?.isHackathon ? (
           <div dangerouslySetInnerHTML={{ __html: challenge?.additionalInfo?.[GRADING_CRITERIA].text || hackatonPassingScore }} />
         ) : (
diff --git a/src/components/sections/challenges/SetupTeamChallenge.tsx b/src/components/sections/challenges/SetupTeamChallenge.tsx
index da4d11d8f..34eb49355 100644
--- a/src/components/sections/challenges/SetupTeamChallenge.tsx
+++ b/src/components/sections/challenges/SetupTeamChallenge.tsx
@@ -18,14 +18,14 @@ interface Props {
  *
  * @returns {JSX.Element} The SetupTeamChallenge component JSX element.
  */
-export default function SetupTeamChallenge(): JSX.Element {
+export default function SetupTeamChallenge({testid}: {testid?: string}): JSX.Element {
   const { invite, challenge } = useMultiSelector<unknown, Props>({ invite: (state: IRootState) => state.invites.data, challenge: (state: IRootState) => state.challenges.current });
 
   const { t } = useTranslation();
 
   return (
     <Section title="Submission">
-      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
+      <div data-testid={testid} className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
       <div className="md:flex flex-row gap-5">
         <FormTeamCard index={1} title="Form your team" description={challenge?.additionalInfo?.[TEAM_FORMATION].text || t("communities.overview.challenge.team.organization")} />
         {invite && !invite.team?.locked ? (
diff --git a/src/components/sections/challenges/Submission.tsx b/src/components/sections/challenges/Submission.tsx
index fe4548a31..eb8908e9a 100644
--- a/src/components/sections/challenges/Submission.tsx
+++ b/src/components/sections/challenges/Submission.tsx
@@ -35,7 +35,7 @@ interface SubmissionMultiSelector {
   currentSubmission: TSubmission;
 }
 
-interface FormValues {
+export interface FormValues {
   text: string;
   githubLink: string;
 }
@@ -51,7 +51,7 @@ const isValid = (form: FormValues, challenge: Challenge | null) => {
   return challenge?.format.githubLink ? form.text.length > 0 && form.githubLink.length > 0 : form.text.length > 0;
 };
 
-export default function Submission(): ReactElement {
+export default function Submission({testId}: {testId?: string}): ReactElement {
   const {
     watch,
     register,
@@ -139,7 +139,7 @@ export default function Submission(): ReactElement {
           {!canSubmit ? (
             <Hint className="mb-8">{t("communities.challenge.submission.hint")}</Hint>
           ) : (
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form data-testid={testId} onSubmit={handleSubmit(onSubmit)}>
               {challenge?.format && (
                 <div className="relative w-full md:pl-7.5 my-6">
                   <div className="absolute z-50 left-3 md:left-0 top-3">
diff --git a/src/components/sections/challenges/_partials/HackathonPrize.tsx b/src/components/sections/challenges/_partials/HackathonPrize.tsx
index b2a7ce33c..67cb43e76 100644
--- a/src/components/sections/challenges/_partials/HackathonPrize.tsx
+++ b/src/components/sections/challenges/_partials/HackathonPrize.tsx
@@ -2,13 +2,13 @@ import { Distribution, Reward } from "@/types/course";
 import { shortenNumber } from "@/utilities";
 import { useTranslation } from "react-i18next";
 
-export default function HackathonPrize({ reward, description }: { reward: Reward; description: string }) {
+export default function HackathonPrize({ reward, description, testId }: { reward: Reward; description: string, testId?: string }) {
   const { t } = useTranslation()
   const { first, second, third } = reward?.distribution || ({} as Distribution);
   const amount = shortenNumber(reward?.amount);
   return (
     <>
-      <div className="flex gap-1 text-gray-700 font-medium">
+      <div data-testid={testId} className="flex gap-1 text-gray-700 font-medium">
         <span>
           {reward?.fiatCurrency ?
             t('communities.overview.reward.fiat.prize.pool', { amount, currency: reward.fiatCurrency, token: reward?.token }) :
diff --git a/src/components/sections/challenges/_partials/RewardsList.tsx b/src/components/sections/challenges/_partials/RewardsList.tsx
index c7dd17063..e27dfffde 100644
--- a/src/components/sections/challenges/_partials/RewardsList.tsx
+++ b/src/components/sections/challenges/_partials/RewardsList.tsx
@@ -1,14 +1,14 @@
 import Reward from "@/components/cards/challenge/_partials/Reward";
 import { Reward as TReward } from "@/types/course";
 
-export default function RewardsList({ rewards }: { rewards?: TReward[] }) {
+export default function RewardsList({ rewards, testId }: { rewards?: TReward[], testId: string }) {
   return (
-    <>
+    <div data-testid={testId}>
       {rewards?.map((reward, i) => (
         <div key={`reward-list-${i}`}>
           <Reward reward={reward} size="medium" />
         </div>
       ))}
-    </>
+    </div>
   );
 }
diff --git a/src/components/ui/Certificate.tsx b/src/components/ui/Certificate.tsx
index c38679334..ffe1019af 100644
--- a/src/components/ui/Certificate.tsx
+++ b/src/components/ui/Certificate.tsx
@@ -30,7 +30,7 @@ interface CertificateProps {
  *
  * @type {[]}
  */
-const certificates = [
+export const certificates = [
   {
     name: "Celo",
     icon: <CeloIcon />,
diff --git a/src/types/bounty.d.ts b/src/types/bounty.d.ts
index 8d08459ab..ef5dc41bc 100644
--- a/src/types/bounty.d.ts
+++ b/src/types/bounty.d.ts
@@ -154,7 +154,7 @@ export interface User {
     connected?: boolean;
   };
   kycStatus: KYCSTATUS;
-  referrals: Referral;
+  referrals?: Referral;
 }
 
 export interface UserMetadata {
diff --git a/src/types/community.d.ts b/src/types/community.d.ts
index 00e756ca1..8ddedfd1e 100644
--- a/src/types/community.d.ts
+++ b/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;
 }
 

From 44978160c8f120310091827a0b10e4353ab79ad4 Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 28 May 2024 10:37:52 +0200
Subject: [PATCH 02/12] feat: add test for the rubric rating component

---
 .../sections/challenges/Rating.test.tsx       | 46 +++++++++++++++++++
 src/components/sections/challenges/Rating.tsx |  6 ++-
 2 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 __tests__/components/sections/challenges/Rating.test.tsx

diff --git a/__tests__/components/sections/challenges/Rating.test.tsx b/__tests__/components/sections/challenges/Rating.test.tsx
new file mode 100644
index 000000000..2e99ad8ae
--- /dev/null
+++ b/__tests__/components/sections/challenges/Rating.test.tsx
@@ -0,0 +1,46 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import RubricRating, { RubricRatingProps } from "@/components/sections/challenges/Rating";
+import { mockCommunity } from "../../../../__mocks__/community";
+import { mockCourse } from "../../../../__mocks__/course";
+
+type MockRubricRating = Pick<RubricRatingProps, "rubricRating">;
+
+const fixtureRubricRating: MockRubricRating = {
+  rubricRating: {
+    relevance: 2,
+    originality: 2,
+    quality: 8,
+    total: 12,
+    available: 2,
+    reward: 6,
+    rewardCoin: "ICP",
+  },
+};
+describe("RubricRating", () => {
+  const rubricRatings = fixtureRubricRating.rubricRating;
+  it("should render ratings", () => {
+    renderWithRedux(<RubricRating testId="rubricRatingId" hideTitle={false} rubricRating={rubricRatings} />, {
+      community: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "error message" },
+    });
+    expect(screen.getByTestId("rubricRatingId")).toBeInTheDocument();
+    expect(screen.getByTestId("coin")).toBeInTheDocument();
+    expect(screen.getByText("communities.challenge.criteria.title")).toBeInTheDocument();
+
+    mockCommunity.challenge?.ratingCriteria.forEach((criteria) => {
+      expect(screen.getByText(criteria.name)).toBeInTheDocument();
+      expect(screen.getByText(criteria.name).textContent).toBe("rating criteria");
+      criteria.rubric.forEach((rubric) => {
+        if (rubricRatings) {
+          if (rubricRatings[criteria.name] === rubric.points) {
+            expect(screen.getByText(rubric.points)).toBeInTheDocument();
+            expect(screen.getByText(rubric.points).textContent).toBe("90");
+            expect(screen.getByText(rubric.text)).toBeInTheDocument();
+            expect(screen.getByText(rubric.text).textContent).toBe("Challenge text");
+          }
+        }
+      });
+    });
+  });
+});
diff --git a/src/components/sections/challenges/Rating.tsx b/src/components/sections/challenges/Rating.tsx
index 8a62981a2..beb2bd168 100644
--- a/src/components/sections/challenges/Rating.tsx
+++ b/src/components/sections/challenges/Rating.tsx
@@ -20,7 +20,7 @@ interface RubricRatingMultiSelector {
   community: Community | null;
   colors: Colors;
 }
-interface RubricRatingProps {
+export interface RubricRatingProps {
   rubricRating?: {
     relevance: number;
     originality: number;
@@ -32,6 +32,7 @@ interface RubricRatingProps {
     [key: string]: string | number;
   };
   hideTitle?: boolean;
+  testId?: string
 }
 
 /**
@@ -64,6 +65,7 @@ export default function RubricRating({
     rewardCoin: "CGLD",
   },
   hideTitle = false,
+  testId
 }: RubricRatingProps): ReactElement {
   const { t } = useTranslation();
 
@@ -108,7 +110,7 @@ export default function RubricRating({
             </div>
           </div>
         ))}
-        <div className="md:flex space-y-3 md:space-y-0 md:space-x-10 mt-7 font-medium">
+        <div data-testid={testId} className="md:flex space-y-3 md:space-y-0 md:space-x-10 mt-7 font-medium">
           <div>
             <div className="text-sm leading-loose text-gray-900">{t("communities.challenge.rating.total")}</div>
             <div className="text-theme-accent">

From af05de7b5fb9b076d3e18a94fdc10c81aab251be Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 28 May 2024 10:57:23 +0200
Subject: [PATCH 03/12] feat: add team challenge test

---
 .../sections/challenges/Rating.test.tsx       | 36 +++++-----
 .../challenges/SetupTeamChallenge.test.tsx    |  2 +-
 .../challenges/TeamChallenge.test.tsx         | 67 +++++++++++++++++++
 3 files changed, 88 insertions(+), 17 deletions(-)
 create mode 100644 __tests__/components/sections/challenges/TeamChallenge.test.tsx

diff --git a/__tests__/components/sections/challenges/Rating.test.tsx b/__tests__/components/sections/challenges/Rating.test.tsx
index 2e99ad8ae..5b2b39556 100644
--- a/__tests__/components/sections/challenges/Rating.test.tsx
+++ b/__tests__/components/sections/challenges/Rating.test.tsx
@@ -20,27 +20,31 @@ const fixtureRubricRating: MockRubricRating = {
 };
 describe("RubricRating", () => {
   const rubricRatings = fixtureRubricRating.rubricRating;
-  it("should render ratings", () => {
-    renderWithRedux(<RubricRating testId="rubricRatingId" hideTitle={false} rubricRating={rubricRatings} />, {
-      community: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "error message" },
-    });
+  it("should render ratings with title", () => {
+    renderWithRedux(<RubricRating testId="rubricRatingId" hideTitle={false} />);
     expect(screen.getByTestId("rubricRatingId")).toBeInTheDocument();
     expect(screen.getByTestId("coin")).toBeInTheDocument();
     expect(screen.getByText("communities.challenge.criteria.title")).toBeInTheDocument();
+  });
+
+  it("should render ratings with rating criterias", () => {
+    renderWithRedux(<RubricRating rubricRating={rubricRatings} />, {
+        community: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "error message" },
+      });
 
     mockCommunity.challenge?.ratingCriteria.forEach((criteria) => {
-      expect(screen.getByText(criteria.name)).toBeInTheDocument();
-      expect(screen.getByText(criteria.name).textContent).toBe("rating criteria");
-      criteria.rubric.forEach((rubric) => {
-        if (rubricRatings) {
-          if (rubricRatings[criteria.name] === rubric.points) {
-            expect(screen.getByText(rubric.points)).toBeInTheDocument();
-            expect(screen.getByText(rubric.points).textContent).toBe("90");
-            expect(screen.getByText(rubric.text)).toBeInTheDocument();
-            expect(screen.getByText(rubric.text).textContent).toBe("Challenge text");
+        expect(screen.getByText(criteria.name)).toBeInTheDocument();
+        expect(screen.getByText(criteria.name).textContent).toBe("rating criteria");
+        criteria.rubric.forEach((rubric) => {
+          if (rubricRatings) {
+            if (rubricRatings[criteria.name] === rubric.points) {
+              expect(screen.getByText(rubric.points)).toBeInTheDocument();
+              expect(screen.getByText(rubric.points).textContent).toBe("90");
+              expect(screen.getByText(rubric.text)).toBeInTheDocument();
+              expect(screen.getByText(rubric.text).textContent).toBe("Challenge text");
+            }
           }
-        }
+        });
       });
-    });
-  });
+  })
 });
diff --git a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
index 40a525c25..22b30e4e9 100644
--- a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
+++ b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
@@ -4,7 +4,7 @@ import { challenge as mockChallenge, mockInvite, submission } from "../../../../
 import SetupTeamChallenge from "@/components/sections/challenges/SetupTeamChallenge";
 import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
 
-describe('', () => {
+describe('SetUpTeamChallenge', () => {
     const challenge = mockChallenge();
   it("renders without crashing", () => {
     renderWithRedux(<SetupTeamChallenge testid="challengeId" />);
diff --git a/__tests__/components/sections/challenges/TeamChallenge.test.tsx b/__tests__/components/sections/challenges/TeamChallenge.test.tsx
new file mode 100644
index 000000000..16a907b18
--- /dev/null
+++ b/__tests__/components/sections/challenges/TeamChallenge.test.tsx
@@ -0,0 +1,67 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import TeamChallenge from "@/components/sections/challenges/TeamChallenge";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { challenge, submission } from "../../../../__mocks__/challenge";
+
+interface CardData {
+  index: number;
+  title: string;
+  text: string;
+}
+
+describe("TeamChallenge", () => {
+  const hackathonChallengeSteps: CardData[] = [
+    {
+      index: 1,
+      title: "Form your team",
+      text: "Open Telegram group and find your teammates to complete the challenge with you",
+    },
+    {
+      index: 2,
+      title: "Confirm your team",
+      text: "Make sure your teammates accept notification to confirm your team",
+    },
+    {
+      index: 3,
+      title: "Submit!",
+      text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
+    },
+  ];
+  const teamChallengeSteps: CardData[] = [
+    {
+      index: 1,
+      title: "Form your team",
+      text: "Open discord channel #teams and find your teammates to complete the challenge with you",
+    },
+    {
+      index: 2,
+      title: "Confirm your team",
+      text: "Make sure your teammates accept notification to confirm your team",
+    },
+    {
+      index: 3,
+      title: "Submit!",
+      text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
+    },
+  ];
+  it("should render the team challenge section", () => {
+    renderWithRedux(<TeamChallenge />, { challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() } });
+    expect(screen.getByText("Team Challenge")).toBeInTheDocument();
+    expect(screen.getByText("To complete the team challenge, you need to follow these steps:")).toBeInTheDocument();
+  });
+
+  it("should render all team challenge steps", () => {
+    renderWithRedux(<TeamChallenge />, { challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() } });
+    const challenges = challenge();
+    let teamChallengeArray: CardData[] = [];
+    if (challenges.isHackathon) {
+      teamChallengeArray = hackathonChallengeSteps;
+    } else teamChallengeArray = teamChallengeSteps;
+
+    teamChallengeArray.forEach((step) => {
+      expect(screen.getByText(step.text)).toBeInTheDocument();
+      expect(screen.getByText(step.title)).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file

From 74f4e3ddcd57159abc92a50d65b27b703d0a9ebc Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 28 May 2024 14:02:57 +0200
Subject: [PATCH 04/12] feat: implement coderabbit review

---
 __tests__/components/sections/challenges/Rating.test.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/__tests__/components/sections/challenges/Rating.test.tsx b/__tests__/components/sections/challenges/Rating.test.tsx
index 5b2b39556..7e016c410 100644
--- a/__tests__/components/sections/challenges/Rating.test.tsx
+++ b/__tests__/components/sections/challenges/Rating.test.tsx
@@ -1,7 +1,8 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
-import RubricRating, { RubricRatingProps } from "@/components/sections/challenges/Rating";
+import RubricRating from "@/components/sections/challenges/Rating";
+import type { RubricRatingProps } from "@/components/sections/challenges/Rating";  
 import { mockCommunity } from "../../../../__mocks__/community";
 import { mockCourse } from "../../../../__mocks__/course";
 

From 2738796a2191f5070e4acb6754d024097a2f422b Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 28 May 2024 16:27:03 +0200
Subject: [PATCH 05/12] feat: format files

---
 .../sections/challenges/Objectives.test.tsx   |  5 ++--
 .../sections/challenges/Rewards.test.tsx      | 24 ++++++++++---------
 .../sections/challenges/Rubric.test.tsx       |  5 ++--
 .../_partials/HackathonPrize.test.tsx         | 11 +++++----
 4 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/__tests__/components/sections/challenges/Objectives.test.tsx b/__tests__/components/sections/challenges/Objectives.test.tsx
index b3ec5bd18..f7a466118 100644
--- a/__tests__/components/sections/challenges/Objectives.test.tsx
+++ b/__tests__/components/sections/challenges/Objectives.test.tsx
@@ -8,9 +8,8 @@ import DateManager from "@/utilities/DateManager";
 describe("Objectives", () => {
   const challenge = mockChallenge();
   it("should render objectives", () => {
-    renderWithRedux(<Objectives testId="objectiveId" />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
-    const objectives = screen.getByTestId("objectiveId");
-    expect(objectives).toBeInTheDocument();
+    renderWithRedux(<Objectives testId="objectiveId" />);
+    expect(screen.getByTestId("objectiveId")).toBeInTheDocument();
     expect(screen.getByText("communities.overview.challenge.objective.title")).toBeInTheDocument();
   });
 
diff --git a/__tests__/components/sections/challenges/Rewards.test.tsx b/__tests__/components/sections/challenges/Rewards.test.tsx
index cd7c209a9..b5ebabb7b 100644
--- a/__tests__/components/sections/challenges/Rewards.test.tsx
+++ b/__tests__/components/sections/challenges/Rewards.test.tsx
@@ -6,27 +6,29 @@ import { challenge as mockChallenge, submission } from "../../../../__mocks__/ch
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
-    query: "",
+    query: "query",
   }),
 }));
 
 describe("Reward", () => {
   it("should render a reward", () => {
+    renderWithRedux(<OverviewRewards testId="overviewRewardId" />);
+    expect(screen.getByTestId("overviewRewardId")).toBeInTheDocument();
+  });
+
+  it("should render reward with the challenge", () => {
     const challenge = mockChallenge();
     renderWithRedux(<OverviewRewards testId="overviewRewardId" />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() } });
-    const OverviewReward = screen.getByTestId("overviewRewardId");
-    expect(OverviewReward).toBeInTheDocument();
-    expect(OverviewReward.textContent).toBe("course.challenge.reward.certificate.description")
-    if(challenge.rewards){
-        challenge.rewards.forEach((reward)=> {
-            expect(screen.getByText(reward.amount + (" ") + reward.token)).toBeInTheDocument()
-            expect(screen.getByText(reward.amount + (" ") + reward.token).textContent).toBe("10 token")
-        })
+    if (challenge.rewards) {
+      challenge.rewards.forEach((reward) => {
+        expect(screen.getByText(reward.amount + " " + reward.token)).toBeInTheDocument();
+        expect(screen.getByText(reward.amount + " " + reward.token).textContent).toBe("10 token");
+      });
     }
     if (challenge.isHackathon) {
       const challengeCertificate = screen.getByText("communities.overview.challenge.participate");
       expect(challengeCertificate).toBeInTheDocument();
-      expect(challengeCertificate.textContent).toContain(challenge.reward.token || challenge?.rewards[0]?.token || "")
+      expect(challengeCertificate.textContent).toContain(challenge.reward.token || challenge?.rewards[0]?.token || "");
     }
   });
-});
\ No newline at end of file
+});
diff --git a/__tests__/components/sections/challenges/Rubric.test.tsx b/__tests__/components/sections/challenges/Rubric.test.tsx
index 08de99c74..cd273dcce 100644
--- a/__tests__/components/sections/challenges/Rubric.test.tsx
+++ b/__tests__/components/sections/challenges/Rubric.test.tsx
@@ -8,9 +8,8 @@ import { challenge as mockChallenge, submission } from "../../../../__mocks__/ch
 describe("Rubric", () => {
   const challenge = mockChallenge();
   it("should render the Rubric header", () => {
-    renderWithRedux(<RubricHeader testId="rubricId" ratingCriteria={[]} selected={[]} />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() } });
-    const rubricHeader = screen.getByTestId("rubricId");
-    expect(rubricHeader).toBeInTheDocument();
+    renderWithRedux(<RubricHeader testId="rubricId" ratingCriteria={[]} selected={[]} />);
+    expect(screen.getByTestId("rubricId")).toBeInTheDocument();
   });
 
   it("should render the Rubric with ratings", () => {
diff --git a/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx b/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx
index aa9299f75..688e7918f 100644
--- a/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx
+++ b/__tests__/components/sections/challenges/_partials/HackathonPrize.test.tsx
@@ -5,13 +5,14 @@ import { reward } from "../../../../../__mocks__/reward";
 import { Distribution } from "@/types/course";
 
 describe("HackathonPrize", () => {
+  const { first, second, third } = reward?.distribution || ({} as Distribution);
   it("should render the hackathon prize", () => {
     render(<HackathonPrize reward={reward} description={"Prize"} testId="hackathonPrizeId" />);
+    expect(screen.getByTestId("hackathonPrizeId")).toBeInTheDocument();
+  });
 
-    const { first, second, third } = reward?.distribution || ({} as Distribution);
-
-    const hackathonPrize = screen.getByTestId("hackathonPrizeId");
-    expect(hackathonPrize).toBeInTheDocument();
+  it("should render hackathon prize with reward and description", () => {
+    render(<HackathonPrize reward={reward} description={"Prize"} testId="hackathonPrizeId" />);
     if (reward.fiatCurrency) {
       const currency = screen.getByText("communities.overview.reward.fiat.prize.pool");
       expect(currency).toBeInTheDocument();
@@ -21,7 +22,7 @@ describe("HackathonPrize", () => {
       expect(currency).toBeInTheDocument();
       expect(currency.textContent).toBe("communities.overview.reward.crypto.prize.pool");
     }
-    
+
     const descriptionText = screen.getByText("Prize");
     expect(descriptionText).toBeInTheDocument();
     expect(descriptionText.textContent).toBe("Prize");

From f244726bc344c7d23f1013188b57858eb76b6b14 Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Wed, 29 May 2024 16:15:12 +0200
Subject: [PATCH 06/12] feat: implement coderabbit review

---
 __tests__/components/sections/challenges/Rewards.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/sections/challenges/Rewards.test.tsx b/__tests__/components/sections/challenges/Rewards.test.tsx
index b5ebabb7b..ecee56b4e 100644
--- a/__tests__/components/sections/challenges/Rewards.test.tsx
+++ b/__tests__/components/sections/challenges/Rewards.test.tsx
@@ -21,8 +21,8 @@ describe("Reward", () => {
     renderWithRedux(<OverviewRewards testId="overviewRewardId" />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() } });
     if (challenge.rewards) {
       challenge.rewards.forEach((reward) => {
-        expect(screen.getByText(reward.amount + " " + reward.token)).toBeInTheDocument();
-        expect(screen.getByText(reward.amount + " " + reward.token).textContent).toBe("10 token");
+        expect(screen.getByText(`${reward.amount} ${reward.token}`)).toBeInTheDocument();
+        expect(screen.getByText(`${reward.amount} ${reward.token}`).textContent).toBe("10 token");
       });
     }
     if (challenge.isHackathon) {

From da463de9f7442ded409158110d42d3981bb79cfc Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Mon, 3 Jun 2024 15:41:23 +0200
Subject: [PATCH 07/12] feat: mock the state object

---
 .../sections/challenges/Objectives.test.tsx   | 24 ++++++++++---------
 .../challenges/SetupTeamChallenge.test.tsx    | 19 +++++++++------
 .../challenges/TeamChallenge.test.tsx         |  9 +++++--
 src/components/sections/challenges/Rubric.tsx |  2 +-
 .../challenges/SetupTeamChallenge.tsx         |  4 ++--
 5 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/__tests__/components/sections/challenges/Objectives.test.tsx b/__tests__/components/sections/challenges/Objectives.test.tsx
index f7a466118..d8a7ea8d4 100644
--- a/__tests__/components/sections/challenges/Objectives.test.tsx
+++ b/__tests__/components/sections/challenges/Objectives.test.tsx
@@ -7,6 +7,8 @@ import DateManager from "@/utilities/DateManager";
 
 describe("Objectives", () => {
   const challenge = mockChallenge();
+  const mockSubmission = submission();
+  const mockObjectivesStates = { challenges: { current: challenge, list: [challenge], loading: false, submission: mockSubmission } };
   it("should render objectives", () => {
     renderWithRedux(<Objectives testId="objectiveId" />);
     expect(screen.getByTestId("objectiveId")).toBeInTheDocument();
@@ -14,13 +16,13 @@ describe("Objectives", () => {
   });
 
   it("should render the objective list", () => {
-    renderWithRedux(<Objectives />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    renderWithRedux(<Objectives />, mockObjectivesStates);
     const objectiveValue = challenge.objectives.find((objective) => objective);
     expect(screen.getByText(objectiveValue || "objectives 1")).toBeInTheDocument();
   });
 
   it("should display expiry date", () => {
-    renderWithRedux(<Objectives />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    renderWithRedux(<Objectives />, mockObjectivesStates);
     const expirationDate = challenge.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
     if (expirationDate) {
       expect(screen.getByText(expirationDate)).toBeInTheDocument();
@@ -28,18 +30,18 @@ describe("Objectives", () => {
   });
 
   it("should display challenge hint", () => {
-    renderWithRedux(<Objectives />, { challenges: { current: mockChallenge(), list: [mockChallenge()], loading: false, submission: submission() } });
+    renderWithRedux(<Objectives />, { challenges: { current: challenge, list: [challenge], loading: false, submission: mockSubmission } });
     const containsLink = new RegExp(/<a.*?>.*?<\/a>/g);
-    expect(containsLink.test('<a href="http://example.com">Example</a>')).toBe(true); 
-    expect(containsLink.test('This is a test string without a link.')).toBe(false);  
-    expect(containsLink.test('<a href="http://example.com">Example')).toBe(false);  
-    expect(containsLink.test('<a href="http://example.com"><a>Nested</a></a>')).toBe(true); 
-    
-    expect(containsLink.test('<div>Not a link</div>')).toBe(false);
+    expect(containsLink.test('<a href="http://example.com">Example</a>')).toBe(true);
+    expect(containsLink.test("This is a test string without a link.")).toBe(false);
+    expect(containsLink.test('<a href="http://example.com">Example')).toBe(false);
+    expect(containsLink.test('<a href="http://example.com"><a>Nested</a></a>')).toBe(true);
+
+    expect(containsLink.test("<div>Not a link</div>")).toBe(false);
     if (containsLink.test(challenge.hint as string)) {
-        expect(screen.getByText(challenge.hint as string)).toBeInTheDocument();
+      expect(screen.getByText(challenge.hint as string)).toBeInTheDocument();
     } else {
       expect(screen.getByText(challenge.hint)).toBeInTheDocument();
     }
   });
-});
\ No newline at end of file
+});
diff --git a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
index 22b30e4e9..ede258537 100644
--- a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
+++ b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
@@ -4,23 +4,28 @@ import { challenge as mockChallenge, mockInvite, submission } from "../../../../
 import SetupTeamChallenge from "@/components/sections/challenges/SetupTeamChallenge";
 import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
 
-describe('SetUpTeamChallenge', () => {
-    const challenge = mockChallenge();
+describe("SetUpTeamChallenge", () => {
+  const challenge = mockChallenge();
+  const mockSubmission = submission();
+  const mockTeamChallengeStates = {
+    challenges: { current: challenge, list: [challenge], loading: false, submission: mockSubmission },
+    invites: { data: mockInvite },
+  };
   it("renders without crashing", () => {
     renderWithRedux(<SetupTeamChallenge testid="challengeId" />);
-    expect(screen.getByTestId("challengeId")).toBeInTheDocument()
+    expect(screen.getByTestId("challengeId")).toBeInTheDocument();
   });
 
   it("renders content correctly", () => {
-    renderWithRedux(<SetupTeamChallenge />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() }, invites: { data: mockInvite } });
+    renderWithRedux(<SetupTeamChallenge />, mockTeamChallengeStates);
     expect(screen.getByText("Submission")).toBeInTheDocument();
     expect(screen.getByText("communities.overview.challenge.team.setup.info")).toBeInTheDocument();
     expect(screen.getByText("Form your team")).toBeInTheDocument();
     expect(screen.getByText(challenge.additionalInfo.TEAM_FORMATION.text) || "communities.overview.challenge.team.organization").toBeInTheDocument();
   });
-  
+
   it("renders CreateTeamCard when there is no invitation or comfirmTeamInvitation when there is invitation", () => {
-    renderWithRedux(<SetupTeamChallenge />, { challenges: { current: challenge, list: [challenge], loading: false, submission: submission() }, invites: { data: mockInvite } });
+    renderWithRedux(<SetupTeamChallenge />, mockTeamChallengeStates);
     if (!mockInvite) {
       expect(screen.getByText("communities.overview.challenge.team.setup.submit-title")).toBeInTheDocument();
       expect(screen.getByText("communities.overview.challenge.team.setup.description")).toBeInTheDocument();
@@ -29,4 +34,4 @@ describe('SetUpTeamChallenge', () => {
       expect(screen.getByText(`The maximum team members for this challenge is ${challenge?.teamLimit} people`)).toBeInTheDocument();
     }
   });
- })
\ No newline at end of file
+});
diff --git a/__tests__/components/sections/challenges/TeamChallenge.test.tsx b/__tests__/components/sections/challenges/TeamChallenge.test.tsx
index 16a907b18..0fb11fccf 100644
--- a/__tests__/components/sections/challenges/TeamChallenge.test.tsx
+++ b/__tests__/components/sections/challenges/TeamChallenge.test.tsx
@@ -45,14 +45,19 @@ describe("TeamChallenge", () => {
       text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
     },
   ];
+  const mockChallenge = challenge();
+  const mockSubmission = submission();
+  const mockTeamChallengeStates = {
+    challenges: { current: mockChallenge, list: [mockChallenge], loading: false, submission: mockSubmission },
+  };
   it("should render the team challenge section", () => {
-    renderWithRedux(<TeamChallenge />, { challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() } });
+    renderWithRedux(<TeamChallenge />, mockTeamChallengeStates);
     expect(screen.getByText("Team Challenge")).toBeInTheDocument();
     expect(screen.getByText("To complete the team challenge, you need to follow these steps:")).toBeInTheDocument();
   });
 
   it("should render all team challenge steps", () => {
-    renderWithRedux(<TeamChallenge />, { challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() } });
+    renderWithRedux(<TeamChallenge />, mockTeamChallengeStates);
     const challenges = challenge();
     let teamChallengeArray: CardData[] = [];
     if (challenges.isHackathon) {
diff --git a/src/components/sections/challenges/Rubric.tsx b/src/components/sections/challenges/Rubric.tsx
index 1b7bf9a3f..6c8ae2306 100644
--- a/src/components/sections/challenges/Rubric.tsx
+++ b/src/components/sections/challenges/Rubric.tsx
@@ -58,7 +58,7 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
     const hackatonPassingScore = t("communities.challenge.hackathon.passing.score", { threshold: challenge?.threshold, prizePool: `USD ${reward?.amount}` });
 
     return (
-      <div data-testid={testId} className="text-base font-normal text-slate-700 pt-8 md:w-182.5 inline-flex flex-wrap items-center gap-1">
+      <div data-testid={testId} className="text-base font-normal text-slate-700 pt-6 inline-flex flex-wrap items-center gap-1">
         {challenge?.isHackathon ? (
           <div dangerouslySetInnerHTML={{ __html: challenge?.additionalInfo?.[GRADING_CRITERIA].text || hackatonPassingScore }} />
         ) : (
diff --git a/src/components/sections/challenges/SetupTeamChallenge.tsx b/src/components/sections/challenges/SetupTeamChallenge.tsx
index 34eb49355..b085b15de 100644
--- a/src/components/sections/challenges/SetupTeamChallenge.tsx
+++ b/src/components/sections/challenges/SetupTeamChallenge.tsx
@@ -25,8 +25,8 @@ export default function SetupTeamChallenge({testid}: {testid?: string}): JSX.Ele
 
   return (
     <Section title="Submission">
-      <div data-testid={testid} className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
-      <div className="md:flex flex-row gap-5">
+      <div data-testid={testid} className="text-base font-normal text-slate-700 py-6 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
+      <div className="flex flex-col md:flex-row gap-6">
         <FormTeamCard index={1} title="Form your team" description={challenge?.additionalInfo?.[TEAM_FORMATION].text || t("communities.overview.challenge.team.organization")} />
         {invite && !invite.team?.locked ? (
           <ConfirmTeamInvitation index={2} title="Submit your team" text={`The maximum team members for this challenge is ${challenge?.teamLimit || "3"} people`} invite={invite} />

From 04991ecec0c000188f0c94860071545739f7d2e9 Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 4 Jun 2024 16:23:07 +0200
Subject: [PATCH 08/12] feat: add missing test and refactor style changes

---
 .../sections/challenges/Learning.test.tsx        | 16 ++++++++++++----
 .../sections/challenges/Objectives.test.tsx      |  4 +++-
 src/components/sections/challenges/Learning.tsx  |  2 +-
 src/components/sections/challenges/Rewards.tsx   |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/__tests__/components/sections/challenges/Learning.test.tsx b/__tests__/components/sections/challenges/Learning.test.tsx
index 93a3d3022..f3c1eaf6c 100644
--- a/__tests__/components/sections/challenges/Learning.test.tsx
+++ b/__tests__/components/sections/challenges/Learning.test.tsx
@@ -20,8 +20,12 @@ describe("Learning", () => {
       challenges: { current: challenge(), list: [challenge()], loading: false, submission: submission() },
     });
     coursesArray.forEach((course) => {
-      expect(screen.getByText(course.name)).toBeInTheDocument();
-      expect(screen.getByText(course.description)).toBeInTheDocument();
+      const courseNameElement = screen.getByText(course.name);
+	      const courseDescriptionElement  = screen.getByText(course.description)
+	      expect(courseNameElement).toBeInTheDocument();
+	      expect(courseNameElement).toHaveTextContent(course.name);
+	      expect(courseDescriptionElement).toBeInTheDocument();
+	      expect(courseDescriptionElement).toHaveTextContent(course.description);
     });
   });
 
@@ -29,8 +33,12 @@ describe("Learning", () => {
     const learningArray = [mockLearningModule];
     renderWithRedux(<Learning courses={[mockCourse]} learningModules={[mockLearningModule]} community={mockCommunity} />);
     learningArray.forEach((learningModule) => {
-      expect(screen.getByText(learningModule.title)).toBeInTheDocument();
-      expect(screen.getByText(learningModule.description)).toBeInTheDocument();
+      const learningTitleElement = screen.getByText(learningModule.title);
+	      const learningDescriptionElement  = screen.getByText(learningModule.description)
+	      expect(learningTitleElement).toBeInTheDocument();
+	      expect(learningTitleElement).toHaveTextContent(learningModule.title);
+	      expect(learningDescriptionElement).toBeInTheDocument();
+	      expect(learningDescriptionElement).toHaveTextContent(learningModule.description);
     });
   });
 });
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Objectives.test.tsx b/__tests__/components/sections/challenges/Objectives.test.tsx
index d8a7ea8d4..ba4c7bc21 100644
--- a/__tests__/components/sections/challenges/Objectives.test.tsx
+++ b/__tests__/components/sections/challenges/Objectives.test.tsx
@@ -25,7 +25,9 @@ describe("Objectives", () => {
     renderWithRedux(<Objectives />, mockObjectivesStates);
     const expirationDate = challenge.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
     if (expirationDate) {
-      expect(screen.getByText(expirationDate)).toBeInTheDocument();
+      const expirationDateElement = screen.getByText(expirationDate)
+      expect(expirationDateElement).toBeInTheDocument();
+      expect(expirationDateElement).toHaveTextContent(expirationDate)
     }
   });
 
diff --git a/src/components/sections/challenges/Learning.tsx b/src/components/sections/challenges/Learning.tsx
index 74ae30049..9e5f4931a 100644
--- a/src/components/sections/challenges/Learning.tsx
+++ b/src/components/sections/challenges/Learning.tsx
@@ -24,7 +24,7 @@ export default function Learning({ courses, learningModules, community, testId }
         isExpanded
         content={
           <>
-            <div data-testid={testId} className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.learning.title")}</div>
+            <div data-testid={testId} className="text-base font-normal text-slate-700 py-6">{t("communities.overview.challenge.learning.title")}</div>
             <div className="md:grid grid-cols-2 gap-3">
               {courses?.map((course) => (
                 <LearningCard
diff --git a/src/components/sections/challenges/Rewards.tsx b/src/components/sections/challenges/Rewards.tsx
index 6f7898e46..9944af0ff 100644
--- a/src/components/sections/challenges/Rewards.tsx
+++ b/src/components/sections/challenges/Rewards.tsx
@@ -21,7 +21,7 @@ export function OverviewRewards({testId}: {testId?: string}): ReactElement {
 
   return (
     <Section title={`${t("communities.overview.reward.title")}`}>
-      <p data-testid={testId} className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
+      <p data-testid={testId} className="my-6 text-lg">{t("course.challenge.reward.certificate.description")}</p>
       <div className="text-sm mt-6 flex gap-8 w-full md:w-2/3 items-center">
         <div>
           <Certificate size="medium" name={router.query?.slug as string} />

From d67f9c6348f8b381bb4630ffe592bab568d60e35 Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Mon, 8 Jul 2024 14:35:54 +0200
Subject: [PATCH 09/12] fix: submission test error

---
 .../sections/challenges/Submission.test.tsx   | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/__tests__/components/sections/challenges/Submission.test.tsx b/__tests__/components/sections/challenges/Submission.test.tsx
index 04f2f4b87..776ccf8f5 100644
--- a/__tests__/components/sections/challenges/Submission.test.tsx
+++ b/__tests__/components/sections/challenges/Submission.test.tsx
@@ -5,10 +5,13 @@ import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
 import { FieldErrors } from "react-hook-form";
 import { challenge, mockTeam, submission } from "@__mocks__/fixtures/challenge";
 import { mockUser } from "@__mocks__/fixtures/user";
-import { mockReferral } from "@__mocks__/fixtures/referrals";
 
 describe("Submission", () => {
   let errors: FieldErrors<FormValues>;
+  const canSubmit = () => {
+    if (!challenge?.isTeamChallenge) return true;
+    return Boolean(!!mockTeam?.organizer);
+  };
   it("renders the submission section", async () => {
     renderWithRedux(<Submission />, {
       challenges: { current: challenge, list: [challenge], loading: false, submission: submission },
@@ -23,26 +26,11 @@ describe("Submission", () => {
   });
 
   it("validates submission form and displays necessary elements", () => {
-    const canSubmit = () => {
-      if (!challenge?.isTeamChallenge) return true;
-      return Boolean(!!mockTeam?.organizer);
-    };
-
     renderWithRedux(<Submission testId="submission-form" />, {
       challenges: { current: challenge, list: [challenge], loading: false, submission: submission },
       teams: { current: mockTeam, loading: true },
-      user: {
-        data: mockUser,
-        fetchingUserLoading: true,
-        filteredUsers: [mockUser],
-        token: "",
-        userBalance: "User balance",
-        balance: "cusd",
-        walletAddresses: "walletAddress",
-        referrals: [mockReferral],
-      },
     });
-    if (!canSubmit) {
+    if (!canSubmit()) {
       expect(screen.getByText("communities.challenge.submission.hint")).toBeInTheDocument();
     } else {
       expect(screen.getByTestId("submission-form")).toBeInTheDocument();

From e9f58b3e86c7620602277455e3e1c3563d6ccbf8 Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Mon, 8 Jul 2024 16:37:11 +0200
Subject: [PATCH 10/12] refactor: remove unused mock

---
 __mocks__/bounty.ts                           |  10 --
 __mocks__/challenge.ts                        | 145 ------------------
 __mocks__/community.ts                        |  57 -------
 __mocks__/course.ts                           | 134 ----------------
 __mocks__/referrals.ts                        |  37 -----
 .../sections/challenges/Rubric.test.tsx       |   2 +-
 __tests__/components/ui/Avatar.test.tsx       |   2 +-
 __tests__/components/ui/Reward.test.tsx       |   2 +-
 8 files changed, 3 insertions(+), 386 deletions(-)
 delete mode 100644 __mocks__/bounty.ts
 delete mode 100644 __mocks__/challenge.ts
 delete mode 100644 __mocks__/community.ts
 delete mode 100644 __mocks__/course.ts
 delete mode 100644 __mocks__/referrals.ts

diff --git a/__mocks__/bounty.ts b/__mocks__/bounty.ts
deleted file mode 100644
index 5a283f580..000000000
--- a/__mocks__/bounty.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const mockTrailer = {
-    summary: "trailer summary",
-    description: "trailer description",
-    video: "trailer video",
-    duration: 4,
-    info: {
-      items: ["item 1", "item 2"],
-      title: "info title",
-    },
-  };
\ No newline at end of file
diff --git a/__mocks__/challenge.ts b/__mocks__/challenge.ts
deleted file mode 100644
index 72b98d05d..000000000
--- a/__mocks__/challenge.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { TEAM_FORMATION } from "@/constants/challengeInfo";
-import { metadata, mockCommunity } from "./community";
-import { mockFormat, mockCertificateData, mockCourse, mockLearningModule, mockRatingCriteria } from "./course";
-import { reward } from "./reward";
-import { Submission, User } from "@/types/bounty";
-import { KYCSTATUS } from "@/store/feature/kyc.slice";
-import { Team, TeamMember } from "@/types/challenge";
-
-export const mockUser = (): User => ({
-    id: "user_id",
-    ref: "ref",
-    created_at: new Date("2022-05-01T12:00:00Z"),
-    firstName: "John Doe",
-    displayName: "John Doe",
-    uid: "uuid-uuido-232-dex0232-2331",
-    joined: "14 days ago",
-    disabled: false,
-    reputation: 0,
-    username: "",
-    lastName: "",
-    emailVerified: false,
-    email: "",
-    kycStatus: KYCSTATUS.PENDING,
-  });
-
-export const challenge = () => ({
-  id: "challenge",
-  ref: "challenge ref",
-  created_at: new Date("2022-05-01T12:00:00Z"),
-  updated_at: new Date("2022-05-01T12:00:00Z"),
-  hint: "Hint",
-  name: "challenge name",
-  format: mockFormat,
-  description: "challenge description",
-  course: mockCourse,
-  type: "course",
-  isTeamChallenge: false,
-  objectives: ["objectives 1", "Objectives 2", "Objectives 3", "Objectives 4"],
-  threshold: 8,
-  community: mockCommunity,
-  reviewTime: 9,
-  metadata: metadata,
-  level: 58,
-  courses: [mockCourse],
-  learningModules: [mockLearningModule],
-  expiresAt: "2025",
-  reward: reward,
-  certificateIcon: "certificate",
-  certificateData: mockCertificateData,
-  ratingCriteria: [mockRatingCriteria],
-  timestamp: 6,
-  maxPoints: 299,
-  minPoints: 9,
-  rewards: [reward],
-  feedbacks: {},
-  feedbackInfo: [{}],
-  bestSubmissions: [{}],
-  teamLimit: 5,
-  isHackathon: false,
-  additionalInfo: {
-    [TEAM_FORMATION]: {
-      type: "teamFormation",
-      text: "Form your team details here",
-    },
-  },
-});
-
-export const submission = (): Submission => ({
-  length: 0,
-  id: "submission_id",
-  ref: "reference",
-  created_at: new Date("2022-05-01T12:00:00Z"),
-  updated_at: new Date("2022-05-01T12:00:00Z"),
-  link: "/submissions/reference",
-  community: mockCommunity,
-  user_id: "user_id",
-  challenge: challenge(),
-  text: "Submission",
-  reviewDeadline: new Date(),
-  metadata: {
-    evaluation: "",
-    applicableReward: {
-      ref: "",
-      amount: 0,
-      updated_at: "",
-      challenge: "",
-      created_at: "",
-      id: "",
-      type: "",
-      community: "",
-      timestamp: 0,
-      token: "",
-    },
-    reviewed: false,
-    feedbacks: 0,
-    language: "",
-  },
-  timestamp: 0,
-  user: mockUser(),
-  reviewable: false,
-  status: "",
-  reward: reward,
-  map: function () {
-    throw new Error("Function not implemented.");
-  },
-});
-
-export const mockInvite = {
-    created_at: "tuesday",
-    id: "invite",
-    ref: "invitation ref",
-    status: "invitation status",
-    team_ref: "team reference",
-    timestamp: 3,
-    updated_at: "wednesday",
-    user: mockUser(),
-    user_id: "user id",
-  }
-
-  export const mockTeamMember: TeamMember = {
-    created_at: "created_at",
-    id: "id",
-    joined_on: "joined_on",
-    ref: "ref",
-    team_ref: "team reference",
-    timestamp: 3,
-    updated_at: "wednesday",
-    user: mockUser(),
-  }
-
-  export const mockTeam: Team = {
-    challenge: challenge(),
-    challenge_ref: "challenge ref",
-    created_at: "created at",
-    id: "id",
-    locked: true,
-    name: "Master",
-    organizer: mockUser(),
-    organizer_id: "organizer id",
-    invites: [mockInvite],
-    members: [mockTeamMember],
-    ref: "",
-    timestamp: "",
-    updated_at: ""
-  }
\ No newline at end of file
diff --git a/__mocks__/community.ts b/__mocks__/community.ts
deleted file mode 100644
index 48a4db2fa..000000000
--- a/__mocks__/community.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Community } from "@/types/community";
-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",
-};
-
-const reward = {
-  id: "123456789",
-  ref: "ref123",
-  created_at: new Date("2024-01-29T08:00:00Z"),
-  updated_at: new Date("2024-01-29T08:30:00Z"),
-  challenge: "Challenge Name",
-  type: "SUBMISSION",
-  community: "Community Name",
-  token: "Token ID",
-  stable: true,
-  amount: 100,
-  timestamp: 1643424000,
-};
-
-export const mockCommunity: 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,
-};
\ No newline at end of file
diff --git a/__mocks__/course.ts b/__mocks__/course.ts
deleted file mode 100644
index cac961e82..000000000
--- a/__mocks__/course.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-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__/referrals.ts b/__mocks__/referrals.ts
deleted file mode 100644
index f41dca810..000000000
--- a/__mocks__/referrals.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Referral, UserReferral } from "@/types/community";
-import { mockCommunity } from "./community";
-import { challenge, mockUser, submission as getMockSubmission } from "./challenge";
-
-
-const referralSubmission = () => Object.assign(getMockSubmission(), { challengeData: challenge(), link: "referral-link" });
-const userReferral: UserReferral = Object.assign(mockUser(), { submissions: [referralSubmission()] });
-
-export const mockReferral = (): Referral => ({
-  id: "",
-  name: "",
-  ref: "",
-  created_at: new Date("2022-05-01T12:00:00Z"),
-  updated_at: new Date("2022-05-01T12:00:00Z"),
-  title: "",
-  community: mockCommunity,
-  timestamp: 0,
-  reward: {
-    id: "",
-    ref: "",
-    created_at: new Date("2022-05-01T12:00:00Z"),
-    updated_at: new Date("2022-05-01T12:00:00Z"),
-    challenge: "",
-    type: "",
-    community: "",
-    token: "",
-    stable: false,
-    fiatCurrency: undefined,
-    amount: 0,
-    timestamp: 0,
-    distribution: undefined,
-  },
-  challenge: challenge(),
-  submissions: [getMockSubmission()],
-  rewarded: false,
-  user: userReferral,
-});
\ No newline at end of file
diff --git a/__tests__/components/sections/challenges/Rubric.test.tsx b/__tests__/components/sections/challenges/Rubric.test.tsx
index bebfeb8b2..d61c84cf8 100644
--- a/__tests__/components/sections/challenges/Rubric.test.tsx
+++ b/__tests__/components/sections/challenges/Rubric.test.tsx
@@ -2,8 +2,8 @@ import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
 import RubricHeader from "@/components/sections/challenges/Rubric";
-import { Rubric, mockRatingCriteria } from "../../../../__mocks__/course";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
+import { mockRatingCriteria, Rubric } from "@__mocks__/fixtures/course";
 
 describe("Rubric", () => {
   it("should render the Rubric header", () => {
diff --git a/__tests__/components/ui/Avatar.test.tsx b/__tests__/components/ui/Avatar.test.tsx
index 0037cd852..5a6f0011b 100644
--- a/__tests__/components/ui/Avatar.test.tsx
+++ b/__tests__/components/ui/Avatar.test.tsx
@@ -1,7 +1,7 @@
 import Avatar from "@/components/ui/Avatar";
+import { mockProfile, userIcon } from "@__mocks__/fixtures/profile";
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
-import { userIcon, mockProfile } from "../../../__mocks__/fixtures/profile";
 
 describe("Avatar", () => {
   it("Should render the avatar", () => {
diff --git a/__tests__/components/ui/Reward.test.tsx b/__tests__/components/ui/Reward.test.tsx
index d60311de2..b34f1d9f3 100644
--- a/__tests__/components/ui/Reward.test.tsx
+++ b/__tests__/components/ui/Reward.test.tsx
@@ -1,7 +1,7 @@
 import OverviewRewards from "@/components/ui/Reward";
+import { reward } from "@__mocks__/fixtures/reward";
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
-import { reward } from "../../../__mocks__/fixtures/reward";
 
 describe("OverviewRewards", () => {
   it("Should render reward", () => {

From 2f35e1b1c965d99335c41990ee91cc7175dd405d Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 9 Jul 2024 11:04:57 +0200
Subject: [PATCH 11/12] feat: implement reviews

---
 .../sections/bounties/Navigation.test.tsx     |  2 +-
 .../sections/challenges/Header.test.tsx       |  2 +-
 .../sections/challenges/Learning.test.tsx     |  7 +-
 .../sections/challenges/Objectives.test.tsx   |  4 +-
 .../sections/challenges/Rating.test.tsx       |  4 +-
 .../sections/challenges/Rewards.test.tsx      |  3 +-
 .../sections/challenges/Rubric.test.tsx       |  2 +-
 .../challenges/SetupTeamChallenge.test.tsx    |  2 +-
 .../sections/challenges/Submission.test.tsx   |  2 +-
 .../challenges/TeamChallenge.test.tsx         | 38 +---------
 .../submissions/BestSubmission.test.tsx       |  2 +-
 __tests__/components/ui/Loader.test.tsx       |  4 +-
 .../_partials/SideNavLink.test.tsx            |  5 +-
 .../ui/SideNavigation/index.test.tsx          |  8 +--
 __tests__/components/ui/SocialLink.test.tsx   |  2 +-
 __tests__/components/ui/Video.test.tsx        |  2 +-
 __tests__/components/ui/button/Arrow.test.tsx |  2 +-
 __tests__/components/ui/button/index.test.tsx |  2 +-
 src/components/sections/challenges/Rating.tsx |  4 +-
 .../sections/challenges/TeamChallenge.tsx     | 70 +++++++++----------
 20 files changed, 64 insertions(+), 103 deletions(-)

diff --git a/__tests__/components/sections/bounties/Navigation.test.tsx b/__tests__/components/sections/bounties/Navigation.test.tsx
index 9d457caec..18d12e61c 100644
--- a/__tests__/components/sections/bounties/Navigation.test.tsx
+++ b/__tests__/components/sections/bounties/Navigation.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import BountiesNavigation from "@/components/sections/bounties/Navigation";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { List } from "@/utilities/CommunityNavigation";
 
 jest.mock("next/router", () => ({
diff --git a/__tests__/components/sections/challenges/Header.test.tsx b/__tests__/components/sections/challenges/Header.test.tsx
index 191752c0b..f25d3a7f2 100644
--- a/__tests__/components/sections/challenges/Header.test.tsx
+++ b/__tests__/components/sections/challenges/Header.test.tsx
@@ -1,7 +1,7 @@
 import ChallengeHeader from "@/components/sections/challenges/Header";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
 
 describe("ChallengeHeader", () => {
diff --git a/__tests__/components/sections/challenges/Learning.test.tsx b/__tests__/components/sections/challenges/Learning.test.tsx
index 32769db65..044180e99 100644
--- a/__tests__/components/sections/challenges/Learning.test.tsx
+++ b/__tests__/components/sections/challenges/Learning.test.tsx
@@ -1,7 +1,7 @@
 import Learning from "@/components/sections/challenges/Learning";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
 import { mockCourse, mockLearningModule } from "@__mocks__/fixtures/course";
 import { mockCommunity } from "@__mocks__/fixtures/community";
@@ -14,7 +14,7 @@ describe("Learning", () => {
     expect(screen.getByText("communities.overview.challenge.learning.title")).toBeInTheDocument();
   });
 
-  it("should render with courses", () => {
+  it("should render with course cards when they the challenge has them", () => {
     const coursesArray = [mockCourse];
     renderWithRedux(<Learning courses={[mockCourse]} learningModules={[mockLearningModule]} community={mockCommunity} />, {
       challenges: { current: challenge, list: [challenge], loading: false, submission: submission },
@@ -23,13 +23,12 @@ describe("Learning", () => {
       const courseNameElement = screen.getByText(course.name);
       const courseDescriptionElement = screen.getByText(course.description);
       expect(courseNameElement).toBeInTheDocument();
-      expect(courseNameElement).toHaveTextContent(course.name);
       expect(courseDescriptionElement).toBeInTheDocument();
       expect(courseDescriptionElement).toHaveTextContent(course.description);
     });
   });
 
-  it("should render with learning", () => {
+  it("should render with learning module card", () => {
     const learningArray = [mockLearningModule];
     renderWithRedux(<Learning courses={[mockCourse]} learningModules={[mockLearningModule]} community={mockCommunity} />);
     learningArray.forEach((learningModule) => {
diff --git a/__tests__/components/sections/challenges/Objectives.test.tsx b/__tests__/components/sections/challenges/Objectives.test.tsx
index 6f0c647d1..e73c775c2 100644
--- a/__tests__/components/sections/challenges/Objectives.test.tsx
+++ b/__tests__/components/sections/challenges/Objectives.test.tsx
@@ -1,7 +1,7 @@
 import Objectives from "@/components/sections/challenges/Objectives";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import DateManager from "@/utilities/DateManager";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
 
@@ -21,7 +21,7 @@ describe("Objectives", () => {
     expect(screen.getByText(objectiveValue || "objectives 1")).toBeInTheDocument();
   });
 
-  it("should display expiry date", () => {
+  it("should display challenge expiry date, when applicable", () => {
     renderWithRedux(<Objectives />, mockObjectivesStates);
     const expirationDate = challenge.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
     if (expirationDate) {
diff --git a/__tests__/components/sections/challenges/Rating.test.tsx b/__tests__/components/sections/challenges/Rating.test.tsx
index c58a38e60..846dc9cdc 100644
--- a/__tests__/components/sections/challenges/Rating.test.tsx
+++ b/__tests__/components/sections/challenges/Rating.test.tsx
@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import RubricRating from "@/components/sections/challenges/Rating";
 import type { RubricRatingProps } from "@/components/sections/challenges/Rating";
 import { mockCommunity } from "@__mocks__/fixtures/community";
@@ -39,9 +39,7 @@ describe("RubricRating", () => {
         if (rubricRatings) {
           if (rubricRatings[criteria.name] === rubric.points) {
             expect(screen.getByText(rubric.points)).toBeInTheDocument();
-            expect(screen.getByText(rubric.points).textContent).toBe("90");
             expect(screen.getByText(rubric.text)).toBeInTheDocument();
-            expect(screen.getByText(rubric.text).textContent).toBe("Challenge text");
           }
         }
       });
diff --git a/__tests__/components/sections/challenges/Rewards.test.tsx b/__tests__/components/sections/challenges/Rewards.test.tsx
index 35af7b6cd..fc793efbc 100644
--- a/__tests__/components/sections/challenges/Rewards.test.tsx
+++ b/__tests__/components/sections/challenges/Rewards.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import { OverviewRewards } from "@/components/sections/challenges/Rewards";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
 
 jest.mock("next/router", () => ({
@@ -21,7 +21,6 @@ describe("Reward", () => {
     if (challenge.rewards) {
       challenge.rewards.forEach((reward) => {
         expect(screen.getByText(`${reward.amount} ${reward.token}`)).toBeInTheDocument();
-        expect(screen.getByText(`${reward.amount} ${reward.token}`).textContent).toBe("10 token");
       });
     }
     if (challenge.isHackathon) {
diff --git a/__tests__/components/sections/challenges/Rubric.test.tsx b/__tests__/components/sections/challenges/Rubric.test.tsx
index d61c84cf8..79b1c19c3 100644
--- a/__tests__/components/sections/challenges/Rubric.test.tsx
+++ b/__tests__/components/sections/challenges/Rubric.test.tsx
@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import RubricHeader from "@/components/sections/challenges/Rubric";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
 import { mockRatingCriteria, Rubric } from "@__mocks__/fixtures/course";
diff --git a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
index f1bd3e3c3..41c884068 100644
--- a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
+++ b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import SetupTeamChallenge from "@/components/sections/challenges/SetupTeamChallenge";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { challenge, mockInvite, submission } from "@__mocks__/fixtures/challenge";
 
 describe("SetUpTeamChallenge", () => {
diff --git a/__tests__/components/sections/challenges/Submission.test.tsx b/__tests__/components/sections/challenges/Submission.test.tsx
index 776ccf8f5..66736e16c 100644
--- a/__tests__/components/sections/challenges/Submission.test.tsx
+++ b/__tests__/components/sections/challenges/Submission.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import Submission, { FormValues } from "@/components/sections/challenges/Submission";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { FieldErrors } from "react-hook-form";
 import { challenge, mockTeam, submission } from "@__mocks__/fixtures/challenge";
 import { mockUser } from "@__mocks__/fixtures/user";
diff --git a/__tests__/components/sections/challenges/TeamChallenge.test.tsx b/__tests__/components/sections/challenges/TeamChallenge.test.tsx
index 756abac33..c52e6bb3b 100644
--- a/__tests__/components/sections/challenges/TeamChallenge.test.tsx
+++ b/__tests__/components/sections/challenges/TeamChallenge.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import TeamChallenge from "@/components/sections/challenges/TeamChallenge";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import TeamChallenge, { hackathonChallengeSteps, teamChallengeSteps } from "@/components/sections/challenges/TeamChallenge";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
 
 interface CardData {
@@ -11,40 +11,6 @@ interface CardData {
 }
 
 describe("TeamChallenge", () => {
-  const hackathonChallengeSteps: CardData[] = [
-    {
-      index: 1,
-      title: "Form your team",
-      text: "Open Telegram group and find your teammates to complete the challenge with you",
-    },
-    {
-      index: 2,
-      title: "Confirm your team",
-      text: "Make sure your teammates accept notification to confirm your team",
-    },
-    {
-      index: 3,
-      title: "Submit!",
-      text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
-    },
-  ];
-  const teamChallengeSteps: CardData[] = [
-    {
-      index: 1,
-      title: "Form your team",
-      text: "Open discord channel #teams and find your teammates to complete the challenge with you",
-    },
-    {
-      index: 2,
-      title: "Confirm your team",
-      text: "Make sure your teammates accept notification to confirm your team",
-    },
-    {
-      index: 3,
-      title: "Submit!",
-      text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
-    },
-  ];
   const mockTeamChallengeStates = {
     challenges: { current: challenge, list: [challenge], loading: false, submission: submission },
   };
diff --git a/__tests__/components/sections/submissions/BestSubmission.test.tsx b/__tests__/components/sections/submissions/BestSubmission.test.tsx
index 172ebfd43..a6d2047e0 100644
--- a/__tests__/components/sections/submissions/BestSubmission.test.tsx
+++ b/__tests__/components/sections/submissions/BestSubmission.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import { challenge, submission } from "@__mocks__/fixtures/challenge";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import BestSubmissions from "@/components/sections/submissions/BestSubmissions";
 
 jest.mock("next/router", () => ({
diff --git a/__tests__/components/ui/Loader.test.tsx b/__tests__/components/ui/Loader.test.tsx
index a0d5a15d7..0a53fb3eb 100644
--- a/__tests__/components/ui/Loader.test.tsx
+++ b/__tests__/components/ui/Loader.test.tsx
@@ -1,8 +1,8 @@
 import Loader from "@/components/ui/Loader";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { colors } from "../../../__mocks__/fixtures/colors";
-import { renderWithRedux } from "../../../__mocks__/renderWithRedux";
+import { colors } from "@__mocks__/fixtures/colors";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
diff --git a/__tests__/components/ui/SideNavigation/_partials/SideNavLink.test.tsx b/__tests__/components/ui/SideNavigation/_partials/SideNavLink.test.tsx
index c669c1af9..a4ad96f4d 100644
--- a/__tests__/components/ui/SideNavigation/_partials/SideNavLink.test.tsx
+++ b/__tests__/components/ui/SideNavigation/_partials/SideNavLink.test.tsx
@@ -1,8 +1,8 @@
 import CourseLink from "@/components/ui/SideNavigation/_partials/SideNavLink";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../../__mocks__/renderWithRedux";
-import { colors } from "../../../../../__mocks__/fixtures/colors";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { colors } from "@__mocks__/fixtures/colors";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
@@ -29,6 +29,7 @@ describe("SideNavLink", () => {
         colors: colors,
         locked: false,
         showReferralPopup: false,
+        showJobOffersPopup: false,
       },
     });
     const courseLink = screen.getByTestId("courseLinkId");
diff --git a/__tests__/components/ui/SideNavigation/index.test.tsx b/__tests__/components/ui/SideNavigation/index.test.tsx
index f68e1c53e..c3d5d2a39 100644
--- a/__tests__/components/ui/SideNavigation/index.test.tsx
+++ b/__tests__/components/ui/SideNavigation/index.test.tsx
@@ -1,10 +1,10 @@
 import SideNavigation from "@/components/ui/SideNavigation";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { colors } from "../../../../__mocks__/fixtures/colors";
+import { colors } from "@__mocks__/fixtures/colors";
 import { Items } from "@/store/feature/communities/navigation.slice";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
-import { mockItems } from "../../../../__mocks__/fixtures/menu";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { mockItems } from "@__mocks__/fixtures/menu";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
@@ -27,8 +27,6 @@ const renderSideNavigation = (items: Items[] = []) => {
 };
 
 describe("SideNavigation", () => {
-
-
   it("should render side navigation", () => {
     renderSideNavigation();
     const sideNav = screen.getByTestId("sideNavId");
diff --git a/__tests__/components/ui/SocialLink.test.tsx b/__tests__/components/ui/SocialLink.test.tsx
index 16c7bea49..ca178b340 100644
--- a/__tests__/components/ui/SocialLink.test.tsx
+++ b/__tests__/components/ui/SocialLink.test.tsx
@@ -1,7 +1,7 @@
 import SocialLink from "@/components/ui/SocialLink";
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
-import { link } from "../../../__mocks__/fixtures/link";
+import { link } from "@__mocks__/fixtures/link";
 
 type LinkType = {
   url: string;
diff --git a/__tests__/components/ui/Video.test.tsx b/__tests__/components/ui/Video.test.tsx
index 05bc1947f..0a0969ae7 100644
--- a/__tests__/components/ui/Video.test.tsx
+++ b/__tests__/components/ui/Video.test.tsx
@@ -1,7 +1,7 @@
 import Video from "@/components/ui/Video";
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
-import { video } from "../../../__mocks__/fixtures/video";
+import { video } from "@__mocks__/fixtures/video";
 
 describe("Video", () => {
   it("should render the video", () => {
diff --git a/__tests__/components/ui/button/Arrow.test.tsx b/__tests__/components/ui/button/Arrow.test.tsx
index 5414b5931..9656de380 100644
--- a/__tests__/components/ui/button/Arrow.test.tsx
+++ b/__tests__/components/ui/button/Arrow.test.tsx
@@ -1,7 +1,7 @@
 import ArrowButton from "@/components/ui/button/Arrow";
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
diff --git a/__tests__/components/ui/button/index.test.tsx b/__tests__/components/ui/button/index.test.tsx
index 7601048e2..09dad4eeb 100644
--- a/__tests__/components/ui/button/index.test.tsx
+++ b/__tests__/components/ui/button/index.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { fireEvent, screen } from "@testing-library/react";
 import Button, { ButtonProps } from "@/components/ui/button";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 
 jest.mock("next/router", () => ({
   useRouter: () => ({
diff --git a/src/components/sections/challenges/Rating.tsx b/src/components/sections/challenges/Rating.tsx
index beb2bd168..e7327a019 100644
--- a/src/components/sections/challenges/Rating.tsx
+++ b/src/components/sections/challenges/Rating.tsx
@@ -32,7 +32,7 @@ export interface RubricRatingProps {
     [key: string]: string | number;
   };
   hideTitle?: boolean;
-  testId?: string
+  testId?: string;
 }
 
 /**
@@ -65,7 +65,7 @@ export default function RubricRating({
     rewardCoin: "CGLD",
   },
   hideTitle = false,
-  testId
+  testId,
 }: RubricRatingProps): ReactElement {
   const { t } = useTranslation();
 
diff --git a/src/components/sections/challenges/TeamChallenge.tsx b/src/components/sections/challenges/TeamChallenge.tsx
index 9699cffef..d86463061 100644
--- a/src/components/sections/challenges/TeamChallenge.tsx
+++ b/src/components/sections/challenges/TeamChallenge.tsx
@@ -19,44 +19,44 @@ interface CardData {
  *  * @interface TeamChallengeCard
  */
 
+export const hackathonChallengeSteps: CardData[] = [
+  {
+    index: 1,
+    title: "Form your team",
+    text: "Open Telegram group and find your teammates to complete the challenge with you",
+  },
+  {
+    index: 2,
+    title: "Confirm your team",
+    text: "Make sure your teammates accept notification to confirm your team",
+  },
+  {
+    index: 3,
+    title: "Submit!",
+    text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
+  },
+];
+export const teamChallengeSteps: CardData[] = [
+  {
+    index: 1,
+    title: "Form your team",
+    text: "Open discord channel #teams and find your teammates to complete the challenge with you",
+  },
+  {
+    index: 2,
+    title: "Confirm your team",
+    text: "Make sure your teammates accept notification to confirm your team",
+  },
+  {
+    index: 3,
+    title: "Submit!",
+    text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
+  },
+];
+
 export default function TeamChallenge(): JSX.Element {
   const challenge = useSelector((state) => state.challenges.current);
 
-  const hackathonChallengeSteps: CardData[] = [
-    {
-      index: 1,
-      title: "Form your team",
-      text: "Open Telegram group and find your teammates to complete the challenge with you",
-    },
-    {
-      index: 2,
-      title: "Confirm your team",
-      text: "Make sure your teammates accept notification to confirm your team",
-    },
-    {
-      index: 3,
-      title: "Submit!",
-      text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
-    },
-  ];
-  const teamChallengeSteps: CardData[] = [
-    {
-      index: 1,
-      title: "Form your team",
-      text: "Open discord channel #teams and find your teammates to complete the challenge with you",
-    },
-    {
-      index: 2,
-      title: "Confirm your team",
-      text: "Make sure your teammates accept notification to confirm your team",
-    },
-    {
-      index: 3,
-      title: "Submit!",
-      text: "Once you have completed the challenge, only one person needs to submit it at the end of this page",
-    },
-  ];
-
   const steps: CardData[] = useMemo(() => {
     return challenge?.isHackathon ? hackathonChallengeSteps : teamChallengeSteps;
   }, [challenge?.isTeamChallenge]);

From 4246476d2a8977094fbd2117eb442f81ecf92fbb Mon Sep 17 00:00:00 2001
From: Samantha-KY <mureraksamantha@gmail.com>
Date: Tue, 23 Jul 2024 12:57:57 +0200
Subject: [PATCH 12/12] feat: set the testId with a default string

---
 __mocks__/fixtures/challenge.ts               | 26 +++++++++----------
 .../sections/challenges/Learning.test.tsx     |  2 +-
 .../challenges/SetupTeamChallenge.test.tsx    | 10 +++----
 src/components/sections/challenges/Header.tsx |  6 ++++-
 .../sections/challenges/Learning.tsx          | 19 ++++++--------
 .../sections/challenges/Rewards.tsx           |  6 ++++-
 .../challenges/SetupTeamChallenge.tsx         |  6 +++--
 .../challenges/_partials/RewardsList.tsx      |  7 ++++-
 8 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/__mocks__/fixtures/challenge.ts b/__mocks__/fixtures/challenge.ts
index 9e3dd301d..6eede1843 100644
--- a/__mocks__/fixtures/challenge.ts
+++ b/__mocks__/fixtures/challenge.ts
@@ -116,18 +116,6 @@ export const submission: Submission = {
   },
 };
 
-export const mockInvite = {
-  created_at: new Date().toISOString(),
-  id: "invite",
-  ref: "invitation ref",
-  status: "invitation status",
-  team_ref: "team reference",
-  timestamp: 3,
-  updated_at: new Date().toISOString(),
-  user: mockUser,
-  user_id: "user id",
-};
-
 export const mockTeamMember: TeamMember = {
   created_at: new Date().toISOString(),
   id: "id",
@@ -148,13 +136,25 @@ export const mockTeam: Team = {
   name: "Master",
   organizer: mockUser,
   organizer_id: "organizer id",
-  invites: [mockInvite],
   members: [mockTeamMember],
   ref: "",
   timestamp: "",
   updated_at: new Date().toISOString(),
 };
 
+export const mockInvite = {
+  created_at: new Date().toISOString(),
+  id: "invite",
+  ref: "invitation ref",
+  status: "invitation status",
+  team_ref: "team reference",
+  timestamp: 3,
+  updated_at: new Date().toISOString(),
+  user: mockUser,
+  user_id: "user id",
+  team: mockTeam,
+};
+
 export const mockFeedback: Feedback = {
   submission: submission,
   id: "234-4231243",
diff --git a/__tests__/components/sections/challenges/Learning.test.tsx b/__tests__/components/sections/challenges/Learning.test.tsx
index 044180e99..922e938b9 100644
--- a/__tests__/components/sections/challenges/Learning.test.tsx
+++ b/__tests__/components/sections/challenges/Learning.test.tsx
@@ -14,7 +14,7 @@ describe("Learning", () => {
     expect(screen.getByText("communities.overview.challenge.learning.title")).toBeInTheDocument();
   });
 
-  it("should render with course cards when they the challenge has them", () => {
+  it("should render with course cards when the challenge has them", () => {
     const coursesArray = [mockCourse];
     renderWithRedux(<Learning courses={[mockCourse]} learningModules={[mockLearningModule]} community={mockCommunity} />, {
       challenges: { current: challenge, list: [challenge], loading: false, submission: submission },
diff --git a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
index 41c884068..9780628b8 100644
--- a/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
+++ b/__tests__/components/sections/challenges/SetupTeamChallenge.test.tsx
@@ -22,14 +22,14 @@ describe("SetUpTeamChallenge", () => {
     expect(screen.getByText(challenge?.additionalInfo?.TEAM_FORMATION.text || " ") || "communities.overview.challenge.team.organization").toBeInTheDocument();
   });
 
-  it("renders CreateTeamCard when there is no invitation or comfirmTeamInvitation when there is invitation", () => {
+  it("renders the confirmation of the team invitation when there is an invite", () => {
     renderWithRedux(<SetupTeamChallenge />, mockTeamChallengeStates);
-    if (!mockInvite) {
-      expect(screen.getByText("communities.overview.challenge.team.setup.submit-title")).toBeInTheDocument();
-      expect(screen.getByText("communities.overview.challenge.team.setup.description")).toBeInTheDocument();
-    } else {
+    if (!mockInvite.team.locked && mockInvite) {
       expect(screen.getByText("Submit your team")).toBeInTheDocument();
       expect(screen.getByText(`The maximum team members for this challenge is ${challenge?.teamLimit} people`)).toBeInTheDocument();
+    } else {
+      expect(screen.getByText("communities.overview.challenge.team.setup.submit-title")).toBeInTheDocument();
+      expect(screen.getByText("communities.overview.challenge.team.setup.description")).toBeInTheDocument();
     }
   });
 });
diff --git a/src/components/sections/challenges/Header.tsx b/src/components/sections/challenges/Header.tsx
index ca9965fda..bc9a7b808 100644
--- a/src/components/sections/challenges/Header.tsx
+++ b/src/components/sections/challenges/Header.tsx
@@ -4,6 +4,10 @@ import { useSelector } from "@/hooks/useTypedSelector";
 import { useTranslation } from "next-i18next";
 import { ReactElement } from "react";
 
+interface challengeHeaderProp {
+  testId?: string;
+}
+
 /**
  * Challenge header component
  * @date 4/18/2023 - 12:08:02 PM
@@ -11,7 +15,7 @@ import { ReactElement } from "react";
  * @export
  * @returns {ReactElement}
  */
-export default function ChallengeHeader({testId}: {testId?: string}): ReactElement {
+export default function ChallengeHeader({ testId = "challengeHeaderId" }: challengeHeaderProp): ReactElement {
   const { t } = useTranslation();
   const challenge = useSelector((state) => state.challenges.current);
 
diff --git a/src/components/sections/challenges/Learning.tsx b/src/components/sections/challenges/Learning.tsx
index 99b6fd6c4..b3edc6b05 100644
--- a/src/components/sections/challenges/Learning.tsx
+++ b/src/components/sections/challenges/Learning.tsx
@@ -8,22 +8,19 @@ import { Community } from "@/types/community";
 import { useSelector } from "@/hooks/useTypedSelector";
 import { useTranslation } from "next-i18next";
 
+interface learningProps {
+  courses: Course[];
+  learningModules: LearningModule[];
+  community: Community;
+  testId?: string;
+}
+
 /**
  * Learning component.
  *
  * @returns {JSX.Element} The Learning component JSX element.
  */
-export default function Learning({
-  courses,
-  learningModules,
-  community,
-  testId,
-}: {
-  courses: Course[];
-  learningModules: LearningModule[];
-  community: Community;
-  testId?: string;
-}): JSX.Element {
+export default function Learning({ courses, learningModules, community, testId = "learningId" }: learningProps): JSX.Element {
   const challenge = useSelector((state) => state.challenges.current);
   const { t } = useTranslation();
   return (
diff --git a/src/components/sections/challenges/Rewards.tsx b/src/components/sections/challenges/Rewards.tsx
index cf56ef128..458f23a91 100644
--- a/src/components/sections/challenges/Rewards.tsx
+++ b/src/components/sections/challenges/Rewards.tsx
@@ -6,6 +6,10 @@ import Certificate from "@/components/ui/Certificate";
 import { useRouter } from "next/router";
 import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
 
+interface OverviewRewardsProps {
+  testId?: string;
+}
+
 /**
  * Overview reward section component
  * @date 4/18/2023 - 1:44:34 PM
@@ -13,7 +17,7 @@ import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
  * @export
  * @returns {ReactElement}
  */
-export function OverviewRewards({ testId }: { testId?: string }): ReactElement {
+export function OverviewRewards({ testId = "overviewRewardId" }: OverviewRewardsProps): ReactElement {
   const { t } = useTranslation();
   const challenge = useSelector((state) => state.challenges.current);
   const router = useRouter();
diff --git a/src/components/sections/challenges/SetupTeamChallenge.tsx b/src/components/sections/challenges/SetupTeamChallenge.tsx
index b085b15de..a34c8f851 100644
--- a/src/components/sections/challenges/SetupTeamChallenge.tsx
+++ b/src/components/sections/challenges/SetupTeamChallenge.tsx
@@ -18,14 +18,16 @@ interface Props {
  *
  * @returns {JSX.Element} The SetupTeamChallenge component JSX element.
  */
-export default function SetupTeamChallenge({testid}: {testid?: string}): JSX.Element {
+export default function SetupTeamChallenge({ testid }: { testid?: string }): JSX.Element {
   const { invite, challenge } = useMultiSelector<unknown, Props>({ invite: (state: IRootState) => state.invites.data, challenge: (state: IRootState) => state.challenges.current });
 
   const { t } = useTranslation();
 
   return (
     <Section title="Submission">
-      <div data-testid={testid} className="text-base font-normal text-slate-700 py-6 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
+      <div data-testid={testid} className="text-base font-normal text-slate-700 py-6 md:w-182.5">
+        {t("communities.overview.challenge.team.setup.info")}
+      </div>
       <div className="flex flex-col md:flex-row gap-6">
         <FormTeamCard index={1} title="Form your team" description={challenge?.additionalInfo?.[TEAM_FORMATION].text || t("communities.overview.challenge.team.organization")} />
         {invite && !invite.team?.locked ? (
diff --git a/src/components/sections/challenges/_partials/RewardsList.tsx b/src/components/sections/challenges/_partials/RewardsList.tsx
index e27dfffde..baacf0794 100644
--- a/src/components/sections/challenges/_partials/RewardsList.tsx
+++ b/src/components/sections/challenges/_partials/RewardsList.tsx
@@ -1,7 +1,12 @@
 import Reward from "@/components/cards/challenge/_partials/Reward";
 import { Reward as TReward } from "@/types/course";
 
-export default function RewardsList({ rewards, testId }: { rewards?: TReward[], testId: string }) {
+interface RewardListProps {
+  rewards?: TReward[];
+  testId?: string;
+}
+
+export default function RewardsList({ rewards, testId = "rewardListId" }: RewardListProps) {
   return (
     <div data-testid={testId}>
       {rewards?.map((reward, i) => (