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,9 @@
+import { ChallengeCardProps } from "@/components/cards/challenge/Challenge";
+import { challenge } from "./challenge";
+import { mockCommunity } from "./community";
+
+export const mockChallengeCardProps: ChallengeCardProps = {
+  data: challenge,
+  community: mockCommunity,
+  isCourseEnd: true,
+};

__mocks__/fixtures/confirmTeamInvitation.ts

@@ -0,0 +1,11 @@
+import { ConfirmTeamInvitationProps } from "@/components/cards/challenge/ConfirmTeamInvitation";
+import { mockInvite } from "./challenge";
+
+
+
+export const mockConfirmTeamInvitation : ConfirmTeamInvitationProps = {
+    index: 1,
+    title: "ConfirmTeamInvitation",
+    text: "welcome to our team",
+    invite: mockInvite
+}

__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 challengeWithLevel = { ...challenge, level: 2, isTeamChallenge: false };
+    renderWithRedux(<Badges challenge={challengeWithLevel} />);
+    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}`);
+  });
+});

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

@@ -0,0 +1,45 @@
+import ConfirmTeamInvitation from "@/components/cards/challenge/ConfirmTeamInvitation";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { useDispatch, AppDispatch } from "@/hooks/useTypedDispatch";
+import { mockConfirmTeamInvitation } from "@__mocks__/fixtures/confirmTeamInvitation";
+
+jest.mock("@/hooks/useTypedDispatch.ts", () => ({
+  useDispatch: jest.fn(),
+}));
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    isFallback: false,
+    pathname: "mocked-pathname",
+  }),
+}));
+
+const dispatchMock = jest.fn() as jest.MockedFunction<AppDispatch>;
+const useDispatchMock = useDispatch as jest.MockedFunction<typeof useDispatch>;
+
+describe("ConfirmTeamInvitation", () => {
+  beforeEach(() => {
+    dispatchMock.mockClear();
+    useDispatchMock.mockReturnValue(dispatchMock);
+  });
+
+  it("should render the ConfirmTeamInvitation component", () => {
+    renderWithRedux(<ConfirmTeamInvitation {...mockConfirmTeamInvitation} />);
+    const confirmTeamInvitation = screen.getByTestId("confirmTeamInvitation");
+    expect(confirmTeamInvitation).toBeInTheDocument();
+  });
+
+  it("should render the ReplyToInvitation component within ConfirmTeamInvitation", () => {
+    renderWithRedux(<ConfirmTeamInvitation {...mockConfirmTeamInvitation} />);
+    const replyToInvitation = screen.getByTestId("reply-to-invitation");
+    expect(replyToInvitation).toBeInTheDocument();
+  });
+});

__tests__/components/cards/challenge/_partials/Button.test.tsx

@@ -0,0 +1,68 @@
+import Button, { ButtonProps } from "@/components/cards/challenge/_partials/Button";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen, fireEvent } from '@testing-library/react';
+import { useRouter } from 'next/router';
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+
+const mockPush = jest.fn();
+
+(useRouter as jest.Mock).mockReturnValue({
+  push: mockPush,
+  events: {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+  },
+  isFallback: false,
+});
+
+const buttonProps: ButtonProps = {
+  text: "Test Button",
+  onClick: jest.fn(),
+  loading: true,
+};
+
+function RenderButton(props: ButtonProps = buttonProps) {
+  renderWithRedux(
+    <Button
+      text={props.text}
+      onClick={props.onClick}
+      loading={props.loading}
+    />
+  );
+  return screen.getByTestId("button");
+}
+
+describe("Button", () => {
+  it("should render the button", () => {
+    const button = RenderButton();
+    expect(button).toBeInTheDocument();
+  });
+
+  it("should show loader when loading is true", () => {
+    RenderButton({ ...buttonProps, loading: true });
+    expect(screen.getByTestId("loader")).toBeInTheDocument();
+  });
+
+  it("should not show loader when loading is false", () => {
+    RenderButton({ ...buttonProps, loading: false });
+    expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+  });
+
+  it("should call onClick when clicked", () => {
+    const onClickMock = jest.fn();
+    RenderButton({ ...buttonProps, onClick: onClickMock, loading: false });
+    fireEvent.click(screen.getByTestId("button"));
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it("should display text when loading is false and isTextVisible is true", () => {
+    renderWithRedux(<Button {...buttonProps} loading={false} />);
+    fireEvent.mouseEnter(screen.getByTestId("button"));
+    expect(screen.getByTestId("button-text")).toHaveTextContent(buttonProps.text);
+  });
+});

__tests__/components/cards/challenge/_partials/FormTeam.test.tsx

@@ -0,0 +1,36 @@
+import FormTeamCard, { FormTeamCardProps } from "@/components/cards/challenge/_partials/FormTeam";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen } from '@testing-library/react';
+
+const formTeamCardProps: FormTeamCardProps = {
+  title: "FormTeamCardProps",
+  description: "this is FormTeamCardProps description",
+  index: 1,
+};
+
+function RenderFormTeamCard(props: FormTeamCardProps = formTeamCardProps) {
+    renderWithRedux(
+        <FormTeamCard
+            title={props.title}
+            description={props.description}
+            index={props.index}
+        />
+    );
+}
+
+describe("FormTeamCard", () => {
+    it('should render the FormTeamCard', () => {
+        RenderFormTeamCard();
+        expect(screen.getByText(formTeamCardProps.title)).toBeInTheDocument();
+        expect(screen.getByText(formTeamCardProps.description)).toBeInTheDocument();
+        expect(screen.getByText(`${formTeamCardProps.index}.`)).toBeInTheDocument();
+    });
+
+    it('should have a link to the correct URL', () => {
+        RenderFormTeamCard();
+        const linkElement = screen.getByRole('link', { name: /Start now/i });
+        expect(linkElement).toHaveAttribute('href', 'https://t.me/+0oJye8IwAuxkMDY0');
+        expect(linkElement).toHaveAttribute('target', '_blank');
+    });
+});

__tests__/components/cards/challenge/_partials/InvitationButtom.test.tsx

@@ -0,0 +1,51 @@
+import InvitationButton, { InvitationButtonProps } from "@/components/cards/challenge/_partials/InvitationButton";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen, fireEvent } from "@testing-library/react";
+
+const invitationButtonPropsAccept: InvitationButtonProps = {
+  text: "accept",
+  confirmInvitation: jest.fn(),
+};
+
+const invitationButtonPropsDecline: InvitationButtonProps = {
+  text: "decline",
+  confirmInvitation: jest.fn(),
+};
+
+function RenderInvitationButton(props: InvitationButtonProps) {
+  renderWithRedux(
+    <InvitationButton
+      text={props.text}
+      confirmInvitation={props.confirmInvitation}
+    />
+  );
+}
+
+describe('InvitationButton', () => {
+  it('should render the accept button', () => {
+    RenderInvitationButton(invitationButtonPropsAccept);
+    expect(screen.getByTestId('invitation-button')).toBeInTheDocument();
+    expect(screen.getByText('accept')).toBeInTheDocument();
+  });
+
+  it('should render the decline button', () => {
+    RenderInvitationButton(invitationButtonPropsDecline);
+    expect(screen.getByTestId('invitation-button')).toBeInTheDocument();
+    expect(screen.getByText('decline')).toBeInTheDocument();
+  });
+
+  it('should call confirmInvitation with "accept" when accept button is clicked', () => {
+    RenderInvitationButton(invitationButtonPropsAccept);
+    const button = screen.getByTestId('invitation-button');
+    fireEvent.click(button);
+    expect(invitationButtonPropsAccept.confirmInvitation).toHaveBeenCalledWith('accept');
+  });
+
+  it('should call confirmInvitation with "decline" when decline button is clicked', () => {
+    RenderInvitationButton(invitationButtonPropsDecline);
+    const button = screen.getByTestId('invitation-button');
+    fireEvent.click(button);
+    expect(invitationButtonPropsDecline.confirmInvitation).toHaveBeenCalledWith('decline');
+  });
+});