test: add partial challenge tests

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "21.0.0"
+          node-version: "20.0.0"
           cache: "yarn"
 
       - name: Install dependencies

__mocks__/fixtures/challengcard.ts

@@ -0,0 +1,88 @@
+import { ChallengeCardProps } from "@/components/cards/challenge/Challenge";
+import { mockCertificateData, mockCourse, mockFormat, mockLearningModule, mockRatingCriteria } from "./course";
+import { mockCommunity, mockMetadata } from "./community";
+import { reward } from "./reward";
+import { GRADING_CRITERIA, TEAM_FORMATION } from "@/constants/challengeInfo";
+import { colors } from "./colors";
+
+const mockReward = {
+  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 mockChallengeCardProps: ChallengeCardProps = {
+  data: {
+    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: mockMetadata,
+    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",
+      },
+      [GRADING_CRITERIA]: { type: "teamFormation", text: "Sample grading criteria text" },
+    },
+  },
+  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/fav-icons/favicon-16x16.png",
+    name: "aeternity",
+    image: "/public/img/Ape_Unit_Logo_White.png",
+    colors: colors,
+    slug: "ae",
+    active: true,
+    description: "this is a aeternity community",
+    metadata: mockMetadata,
+    timestamp: 182044800000,
+    rewards: [mockReward],
+    reward: mockReward,
+    courses: 3,
+    duration: 4,
+    can_mint_certificates: true,
+    challenges: 3,
+  },
+  isCourseEnd: true,
+};

__mocks__/fixtures/confirmTeamInvitation.ts

@@ -0,0 +1,128 @@
+import { ConfirmTeamInvitationProps } from "@/components/cards/challenge/ConfirmTeamInvitation";
+import { KYCSTATUS } from "@/store/feature/kyc.slice";
+
+
+export const mockConfirmTeamInvitation : ConfirmTeamInvitationProps = {
+    index: 1,
+    title: "ConfirmTeamInvitation",
+    text: "welcome to our team",
+    invite: {
+        created_at: "2023-20",
+        id : "2",
+        ref: "ref-2",
+        status: "pending",
+        team_ref: "team-blue",
+        timestamp:2300,
+        updated_at: "23h39",
+        user:  {
+            id: 'user123',
+            ref: 'ref456',
+            created_at: new Date('2024-01-01'),
+            firstName: 'John',
+            displayName: 'JohnnyDoe',
+            uid: 'uid789',
+            joined: '2024-02-14',
+            disabled: false,
+            reputation: 100,
+            username: 'john_doe',
+            lastName: 'Doe',
+            emailVerified: true,
+            email: '[email protected]',
+            avatar: 'http://example.com/avatar.jpg',
+            metadata: {
+              reputation: {
+                id: 'reputation123',
+                total: 150,
+                list: ['communityA', 'communityB'],
+                community: {
+                    id: 'community123',
+                    ref: 'ref456',
+                    created_at: new Date('2024-01-01'),
+                    updated_at: new Date('2024-01-02'),
+                    summary: 'A brief summary of the community.',
+                    icon: 'http://example.com/icon.png',
+                    name: 'Example Community',
+                    image: 'http://example.com/community-image.jpg',
+                    colors: {
+                        textAccent:"#green",
+                        text:"#green",
+                        accent:"#green",
+                        primary:"#green",
+                        secondary:"#green",
+                        highlight:"#green",
+                        muted:"#green",
+                      cover: {
+                        text: "#red",
+                        accent: "#red",
+                        primary: "#red",
+                        background: "#red",
+                      }
+                    },
+                    slug: 'example-community',
+                    active: true,
+                    description: 'A detailed description of the community.',
+                    metadata: {
+                        invite_id: 'invite123',
+                        submissions: 5,
+                        bestSubmissions: ['submission1', 'submission2'],
+                        feedbacks: 10,
+                        name: 'Example Certificate',
+                        issuedOn: '2024-01-01',
+                        image: 'http://example.com/certificate-image.jpg',
+                        title: 'Certificate of Achievement',
+                        description: 'A detailed description of the certificate.',
+                        narrative: 'Narrative about the achievement.',
+                        recipientName: 'John Doe',
+                        issuerName: 'Example Organization',
+                        comment: 'Congratulations on your achievement!',
+                        linkToWork: 'http://example.com/work',
+                        team: {
+                          members: ['John Doe', 'Jane Doe'],
+                          name: 'Team Example',
+                        },
+                    reward: {
+                      id: 'reward123',
+                      name: 'Special Reward',
+                      description: 'A special reward for community members.',
+                    },
+                    courses: 5,
+                    challenges: 10,
+                    duration: 30, // Duration in days
+                    items: ['item1', 'item2'], // Assuming items can be represented as strings
+                    challenge: {
+                      id: 'challenge1',
+                      title: 'First Challenge',
+                      description: 'Description of the first challenge.',
+                    },
+                    submission: {
+                      id: 'submission1',
+                      title: 'First Submission',
+                      content: 'Content of the first submission.',
+                    },
+                    can_mint_certificates: true,
+                  },    
+                score: 75,
+              },
+            },
+            discordConnected: true,
+            isKycVerified: false,
+            feedbacks: {
+              score: 5,
+              comment: 'Great service!',
+            },
+            discord: {
+              connected: true,
+            },
+            kycStatus: KYCSTATUS.PENDING,
+            referrals: [
+              {
+                referrerId: 'ref123',
+                referredId: 'ref456',
+                reward: 50,
+              },
+            ],
+          },
+        user_id: "45",
+        }
+    }
+}

__mocks__/fixtures/course.ts

@@ -8,7 +8,7 @@ export const Introduction = {
 
 export const mockCertificateData = {
     narrative: "course certificate",
-    icon: "certificate icon",
+    icon: "/public/fav-icons/favicon-32x32.png",
 };
 
 export const Rubric = {

__tests__/components/cards/challenge/Badges.test.tsx

@@ -0,0 +1,51 @@
+import { screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Badges from "@/components/cards/challenge/Badges";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { challenge } from "@__mocks__/fixtures/challenge";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    isFallback: false,
+    pathname: "mocked-pathname",
+  }),
+}));
+
+describe("Badge-card", () => {
+  it("should render the level badge in cards", () => {
+    const levelChallenge = { ...challenge, level: 2, isTeamChallenge: false };
+    renderWithRedux(<Badges challenge={levelChallenge} />);
+    const badges = screen.getAllByTestId('tag');
+    expect(badges.length).toBe(1);
+    expect(badges[0]).toHaveTextContent('course.challenge.level-2');
+  });
+
+  it("should render the team challenge badge", () => {
+    const teamChallenge = { ...challenge, level: 0, isTeamChallenge: true, isHackathon: false };
+    renderWithRedux(<Badges challenge={teamChallenge} />);
+    const badges = screen.getAllByTestId('tag');
+    expect(badges.length).toBe(1);
+    expect(badges[0]).toHaveTextContent('Team challenge');
+  });
+
+  it("should render the Hackathon badge", () => {
+    const hackathonChallenge = { ...challenge, level: 0, isTeamChallenge: true, isHackathon: true };
+    renderWithRedux(<Badges challenge={hackathonChallenge} />);
+    const badges = screen.getAllByTestId('tag');
+    expect(badges.length).toBe(1);
+    expect(badges[0]).toHaveTextContent('Hackathon challenge');
+  });
+
+  it("should render nothing when there is no level or team challenge", () => {
+    const noChallenge = { ...challenge, level: 0, isTeamChallenge: false };
+    renderWithRedux(<Badges challenge={noChallenge} />);
+    const badges = screen.queryByTestId('tag');
+    expect(badges).toBeNull();
+  });
+});

__tests__/components/cards/challenge/Challenge.test.tsx

@@ -0,0 +1,73 @@
+import ChallengeCard from "@/components/cards/challenge/Challenge";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { mockChallengeCardProps } from "@__mocks__/fixtures/challengcard";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    isFallback: false,
+    pathname: "mocked-pathname",
+  }),
+}));
+
+jest.mock("next-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: { [key: string]: string } = {
+        "communities.overview.challenge.deadline": "Deadline:",
+        "communities.overview.challenge.take.challenge": "Take Challenge",
+        "communities.overview.challenge.see.challenge": "See Challenge",
+        "communities.overview.challenge.unlock.certificate": "Unlock Certificate",
+        "communities.overview.challenge.participate": "Participate",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe("ChallengeCard", () => {
+  it("should render the ChallengeCard", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const challengeCard = screen.getByTestId("challenge-card");
+    expect(challengeCard).toBeInTheDocument();
+  });
+
+  it("should display the challenge name", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const challengeName = screen.getByText(mockChallengeCardProps.data.name);
+    expect(challengeName).toBeInTheDocument();
+  });
+
+  it("should display the challenge description", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const description = screen.getByText(mockChallengeCardProps.data.description);
+    expect(description).toBeInTheDocument();
+  });
+
+  it("should display the correct number of learning materials", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const learningMaterialsText = screen.getByText(
+      `${mockChallengeCardProps.data.learningModules.length + mockChallengeCardProps.data.courses.length} Learning materials included`
+    );
+    expect(learningMaterialsText).toBeInTheDocument();
+  });
+
+  it("should display the reward certificate", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const rewardCertificate = screen.getByText("Unlock Certificate");
+    expect(rewardCertificate).toBeInTheDocument();
+  });
+
+  it("should link to the correct challenge page", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', `/communities/${mockChallengeCardProps.community.slug}/challenges/${mockChallengeCardProps.data.id}`);
+  });
+});