test: add partial challenge tests

__mocks__/fixtures/course.ts

@@ -9,7 +9,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,40 @@
+import { screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Badges from "@/components/badges";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { challenge } from "@__mocks__/fixtures/challenge";
+
+describe("Badge-card", () => {
+  it("should render the challenge level in challenge card", () => {
+    renderWithRedux(<Badges />);
+    const challengeLevel = screen.getByTestId("badge");
+    expect(challengeLevel).toBeInTheDocument();
+  });
+  it("should render the team challenge badge", () => {
+    const teamChallenge = { ...challenge, level: 1, isTeamChallenge: true, isHackathon: false };
+    renderWithRedux(<Badges challenge={teamChallenge} />);
+    const teamChallengeValue = screen.getByText("Team challenge");
+    expect(teamChallengeValue).toBeInTheDocument();
+    expect(teamChallengeValue).toHaveTextContent("Team challenge");
+  });
+
+  it("should render the Hackathon badge", () => {
+    const hackathonChallenge = { ...challenge, level: 0, isTeamChallenge: true, isHackathon: true };
+    renderWithRedux(<Badges challenge={hackathonChallenge} />);
+    const teamChallengeValue = screen.getByText("Hackathon challenge");
+    expect(teamChallengeValue).toBeInTheDocument();
+    expect(teamChallengeValue).toHaveTextContent("Hackathon challenge");
+  });
+  it('should display BEGINNER when the challenge level 0', () => {
+    renderWithRedux(<Badges courseLevel={1} />);
+    const beginnerTag = screen.getByText('course.challenge.level-0');
+    expect(beginnerTag).toBeInTheDocument();
+    expect(beginnerTag).toHaveTextContent('course.challenge.level-0')
+  });
+it('should display INTERMEDIATE when the challenge lever is 2',()=> {
+  renderWithRedux(<Badges courseLevel={2} />);
+    const intermediateTag = screen.getByText('course.challenge.level-2');
+    expect(intermediateTag).toBeInTheDocument();
+    expect(intermediateTag).toHaveTextContent('course.challenge.level-2')
+})
+});

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

@@ -0,0 +1,73 @@
+import ChallengeCard, { ChallengeCardProps } from "@/components/cards/challenge/Challenge";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { challenge } from "@__mocks__/fixtures/challenge";
+import { mockCommunity } from "@__mocks__/fixtures/community";
+
+
+const mockChallengeCardProps: ChallengeCardProps = {
+  data: {
+    ...challenge,
+    isHackathon: true,
+  },
+  community: mockCommunity,
+  isCourseEnd: true,
+};
+
+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("communities.overview.challenge.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}`);
+  });
+  it("should render the challenge image", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const challengeImage = screen.getByAltText("achievement");
+    expect(challengeImage).toBeInTheDocument();
+  });
+
+  it("should display the reward certificate component with proper rewards", () => {
+    renderWithRedux(<ChallengeCard {...mockChallengeCardProps} />);
+    const rewardCertificateText = screen.getByText("communities.overview.challenge.unlock.certificate");
+    expect(rewardCertificateText).toBeInTheDocument();
+  });
+  it('should indicate if you participate in challenge hackathon',()=> {
+    renderWithRedux(<ChallengeCard  {...mockChallengeCardProps}/>)
+    const hackathonText = screen.getByText('communities.overview.challenge.participate')
+    expect(hackathonText).toBeInTheDocument()
+  })
+
+  });

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

@@ -0,0 +1,39 @@
+import ConfirmTeamInvitation, { ConfirmTeamInvitationProps } 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 { mockInvite } from "@__mocks__/fixtures/challenge";
+
+
+const mockConfirmTeamInvitation : ConfirmTeamInvitationProps = {
+  index: 1,
+  title: "ConfirmTeamInvitation",
+  text: "welcome to our team",
+  invite: mockInvite,
+}
+
+jest.mock("@/hooks/useTypedDispatch.ts", () => ({
+  useDispatch: jest.fn(),
+}));
+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,47 @@
+import Button from "@/components/cards/challenge/_partials/Button";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen, fireEvent } from "@testing-library/react";
+import { ButtonProps } from "@/components/cards/challenge/_partials/Button";
+
+const buttonProps: ButtonProps = {
+  text: "Test Button",
+  onClick: jest.fn(),
+  loading: true,
+  buttonTestId: "button",
+};
+
+function RenderButton(props: ButtonProps = buttonProps) {
+  renderWithRedux(<Button text={props.text} onClick={props.onClick} loading={props.loading} buttonTestId={props.buttonTestId} />);
+  return screen.getByTestId(buttonProps.buttonTestId!);
+}
+
+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(buttonProps.buttonTestId!));
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it("should display text when loading is false and isTextVisible is true", () => {
+    renderWithRedux(<Button {...buttonProps} loading={false} />);
+    fireEvent.mouseEnter(screen.getByTestId(buttonProps.buttonTestId!));
+    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' });
+        expect(linkElement).toHaveAttribute('href', 'https://t.me/+0oJye8IwAuxkMDY0');
+        expect(linkElement).toHaveAttribute('target', '_blank');
+    });
+});

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

@@ -0,0 +1,48 @@
+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(),
+  invitationButtonTestId: "invitation-button",
+};
+
+const invitationButtonPropsDecline: InvitationButtonProps = {
+  text: "decline",
+  confirmInvitation: jest.fn(),
+  invitationButtonTestId: "invitation-button",
+};
+
+function RenderInvitationButton(props: InvitationButtonProps) {
+  renderWithRedux(<InvitationButton text={props.text} confirmInvitation={props.confirmInvitation} invitationButtonTestId={props.invitationButtonTestId} />);
+}
+
+describe("InvitationButton", () => {
+  it("should render the accept button", () => {
+    RenderInvitationButton(invitationButtonPropsAccept);
+    expect(screen.getByTestId(invitationButtonPropsAccept.invitationButtonTestId!)).toBeInTheDocument();
+    expect(screen.getByText("accept")).toBeInTheDocument();
+  });
+
+  it("should render the decline button", () => {
+    RenderInvitationButton(invitationButtonPropsDecline);
+    expect(screen.getByTestId(invitationButtonPropsDecline.invitationButtonTestId!)).toBeInTheDocument();
+    expect(screen.getByText("decline")).toBeInTheDocument();
+  });
+
+  it('should call confirmInvitation with "accept" when accept button is clicked', () => {
+    RenderInvitationButton(invitationButtonPropsAccept);
+    const button = screen.getByTestId(invitationButtonPropsAccept.invitationButtonTestId!);
+    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(invitationButtonPropsDecline.invitationButtonTestId!);
+    fireEvent.click(button);
+    expect(invitationButtonPropsDecline.confirmInvitation).toHaveBeenCalledWith("decline");
+  });
+});

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

@@ -0,0 +1,78 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { useDispatch } from "@/hooks/useTypedDispatch";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
+import ReplyToInvitation, { InvitationProps } from "@/components/cards/challenge/_partials/ReplyToInvitation";
+import { acceptInvitation, declineInvitation } from "@/store/feature/communities/challenges/invites.slice";
+jest.mock("@/hooks/useTypedDispatch");
+jest.mock("@/hooks/useTypedSelector");
+jest.mock("@/store/services/teams.service");
+jest.mock("@/store/feature/communities/challenges/invites.slice");
+const mockDispatch = jest.fn();
+
+(useDispatch as jest.Mock).mockReturnValue(mockDispatch);
+(useMultiSelector as jest.Mock).mockReturnValue({
+  challenge: { id: "challenge-id" },
+  team: { invites: [{ id: "invite-id", status: "PENDING" }] },
+});
+
+const invitationProps: InvitationProps = {
+  invite_id: "invite-id",
+  team_ref: "team/1",
+};
+
+describe("ReplyToInvitation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render the ReplyToInvitation component", () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    expect(screen.getByTestId("reply-to-invitation")).toBeInTheDocument();
+  });
+
+  it("should render accept button and decline button in component", () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    const acceptButton = screen.getByTestId("reply-to-invitation");
+    const declineButton = screen.getByTestId("reply-to-invitation");
+    expect(acceptButton).toBeInTheDocument();
+    expect(declineButton).toBeInTheDocument();
+  });
+
+  it("should display loader when loading", async () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    expect(screen.getByTestId("loader")).toBeInTheDocument();
+    expect(await screen.findByTestId("loader")).not.toBeInTheDocument();
+  });
+
+  it("should call acceptInvitation when accept button is clicked", async () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    expect(await screen.findByTestId("loader")).not.toBeInTheDocument();
+
+    const acceptButton = screen.getByText("accept");
+    fireEvent.click(acceptButton);
+    expect(await mockDispatch).toHaveBeenCalledWith(acceptInvitation("invite-id"));
+  });
+
+  it("should call declineInvitation when decline button is clicked", async () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    expect(await screen.findByTestId("loader")).not.toBeInTheDocument();
+
+    const declineButton = screen.getByText("decline");
+    fireEvent.click(declineButton);
+    expect(await mockDispatch).toHaveBeenCalledWith(declineInvitation("invite-id"));
+  });
+
+  it("should not allow replies if the team is locked", async () => {
+    (useMultiSelector as jest.Mock).mockReturnValueOnce({
+      challenge: { id: "challenge-id" },
+      team: { invites: [{ id: "invite-id", status: "PENDING" }], locked: true },
+    });
+
+    render(<ReplyToInvitation {...invitationProps} />);
+
+    expect(await screen.findByTestId("loader")).not.toBeInTheDocument();
+    const invitationButtons = screen.queryAllByText("accept|decline");
+    expect(invitationButtons).toHaveLength(0);
+  });
+});