test: add partial challenge tests

__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/InvatationButtom.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');
+  });
+});

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

@@ -0,0 +1,44 @@
+import Learning, { LearningProps } from "@/components/cards/challenge/_partials/Learning";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+
+jest.mock("next-i18next", () => ({
+  useTranslation: jest.fn().mockReturnValue({
+    t: (key: string) => key,
+  }),
+}));
+
+const learningProps: LearningProps = {
+  title: "Learning Title",
+  description: "This is the learning description.",
+  link: "/learning-link",
+};
+
+function RenderLearning(props: LearningProps = learningProps) {
+  renderWithRedux(<Learning {...props} />);
+}
+
+describe("Learning", () => {
+  it("should render the Learning component", () => {
+    RenderLearning();
+    expect(screen.getByTestId("learning-component")).toBeInTheDocument();
+  });
+
+  it("should display the title and description", () => {
+    RenderLearning();
+    expect(screen.getByTestId("learning-title")).toHaveTextContent(learningProps.title);
+    expect(screen.getByTestId("learning-description")).toHaveTextContent(learningProps.description);
+  });
+
+  it("should have a link with the correct URL", () => {
+    RenderLearning();
+    const linkElement = screen.getByRole("link", { name: /communities.overview.challenge.learning.start/i });
+    expect(linkElement).toHaveAttribute("href", learningProps.link);
+  });
+
+  it("should render the ArrowButton with the correct text", () => {
+    RenderLearning();
+    expect(screen.getByText("communities.overview.challenge.learning.start")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { useDispatch } from "../../../../../src/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("../../../../../src/hooks/useTypedDispatch");
+jest.mock("../../../../../src/hooks/useTypedSelector");
+jest.mock("../../../../../src/store/services/teams.service");
+jest.mock("../../../../../src/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 display loader when loading", async () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    expect(screen.getByTestId("loader")).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByTestId("loader")).not.toBeInTheDocument());
+  });
+
+  it("should call acceptInvitation when accept button is clicked", async () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    await waitFor(() => expect(screen.queryByTestId("loader")).not.toBeInTheDocument());
+
+    const acceptButton = screen.getByText("accept");
+    fireEvent.click(acceptButton);
+    await waitFor(() => expect(mockDispatch).toHaveBeenCalledWith(acceptInvitation("invite-id")));
+  });
+
+  it("should call declineInvitation when decline button is clicked", async () => {
+    render(<ReplyToInvitation {...invitationProps} />);
+    await waitFor(() => expect(screen.queryByTestId("loader")).not.toBeInTheDocument());
+
+    const declineButton = screen.getByText("decline");
+    fireEvent.click(declineButton);
+    await waitFor(() => expect(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} />);
+
+    await waitFor(() => expect(screen.queryByTestId("loader")).not.toBeInTheDocument());
+    const invitationButtons = screen.queryAllByTestId("invitation-button");
+    expect(invitationButtons).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Rewards, { OverviewRewardsProps } from "@/components/cards/challenge/_partials/Reward";
+
+
+jest.mock("next-i18next", () => ({
+  useTranslation: jest.fn().mockReturnValue({
+    t: (key: string) => key,
+  }),
+}));
+
+const rewardProps: OverviewRewardsProps = {
+  reward: {
+    id: "1",
+    ref: "ref-1",
+    created_at: new Date(),
+    updated_at: new Date(),
+    challenge: "challenge-1",
+    type: "submission",
+    community: "community-1",
+    token: "Token",
+    stable: true,
+    amount: 100,
+    timestamp: Date.now(),
+  },
+  size: "medium",
+};
+
+describe("Rewards", () => {
+  it("should render the Rewards component with medium size", () => {
+    render(<Rewards {...rewardProps} />);
+    expect(screen.getByText("100")).toBeInTheDocument();
+    expect(screen.getByText("Token")).toBeInTheDocument();
+    expect(screen.getByText("reward.type.prefix")).toBeInTheDocument();
+    expect(screen.getByText("communities.challenge.submission")).toBeInTheDocument();
+  });
+
+  it("should not render the Rewards component if size is not medium", () => {
+    const smallSizeProps = { ...rewardProps, size: "small" };
+    render(<Rewards {...smallSizeProps} />);
+    expect(screen.queryByText("100")).not.toBeInTheDocument();
+    expect(screen.queryByText("Token")).not.toBeInTheDocument();
+  });
+
+  it("should not render the Rewards component if reward is not provided", () => {
+    const noRewardProps = { ...rewardProps, size: "" };
+    render(<Rewards {...noRewardProps} />);
+    expect(screen.queryByText("100")).not.toBeInTheDocument();
+    expect(screen.queryByText("Token")).not.toBeInTheDocument();
+  });
+});

src/components/cards/challenge/_partials/Button.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import CloseIcon from "@/icons/close-top-right.svg";
 import Loader from "@/components/ui/Loader";
 
-interface ButtonProps {
+export interface ButtonProps {
   text: string;
   onClick: () => void;
   loading: boolean;
@@ -11,14 +11,18 @@ interface ButtonProps {
 export default function Button({ text, onClick, loading }: ButtonProps) {
   const [isTextVisible, setistextVisible] = useState(false);
   return (
-    <div className="ml-auto cursor-pointer relative" onMouseEnter={() => setistextVisible(true)} onMouseLeave={() => setistextVisible(false)} onClick={onClick}>
+    <div className="ml-auto cursor-pointer relative " onMouseEnter={() => setistextVisible(true)} onMouseLeave={() => setistextVisible(false)} onClick={onClick}
+    data-testid = "button"
+    >
       <>
         {loading ? (
-          <Loader isSmallSpinner />
+          <Loader isSmallSpinner  data-testid = "loader"/>
         ) : (
           <>
             <CloseIcon />
-            <span className={`absolute -top-8 -right-6 text-sm bg-white p-0.5 px-1.5 rounded shadow-md ${isTextVisible ? "block" : "hidden"}`}>{text} </span>
+            <span className={`absolute -top-8 -right-6 text-sm bg-white p-0.5 px-1.5 rounded shadow-md ${isTextVisible ? "block" : "hidden"}`}
+            data-testid="button-text"
+            >{text} </span>
           </>
         )}
       </>

src/components/cards/challenge/_partials/FormTeam.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 /**
  * Props for the FormTeam component.
  */
-interface FormTeamCardProps {
+export interface FormTeamCardProps {
   title: string;
   description: string;
   index: number;

src/components/cards/challenge/_partials/InvitationButton.tsx

@@ -10,7 +10,7 @@ import CheckIcon from "@/icons/check.svg";
  * @interface InvitationButtonProps
  * @typedef {InvitationButtonProps}
  */
-interface InvitationButtonProps {
+export interface InvitationButtonProps {
   text: "accept" | "decline";
   confirmInvitation: (text: "accept" | "decline") => void;
 }
@@ -36,6 +36,7 @@ export default function InvitationButton({ text, confirmInvitation }: Invitation
         e.stopPropagation();
         confirmInvitation(text);
       }}
+      data-testid="invitation-button" 
     >
       {text === "accept" ? <CheckIcon className="text-green-700" /> : <CloseIcon className="text-red-700" />}
       <span className="capitalize">{text}</span>