Merge branch 'stage'

Author: musayann

__mocks__/fixtures/challenge.ts

@@ -96,7 +96,7 @@ export const submission: Submission = {
       token: "",
     },
     reviewed: false,
-    feedbacks: 0,
+    feedbacks: 3,
     language: "",
     evaluation: {
       points: 8,
@@ -170,3 +170,11 @@ export const mockFeedback: Feedback = {
   ranking: 0,
   text: "I am providing a feedback",
 };
+
+export const challengeSliceData = {
+  current: challenge,
+  list: [challenge],
+  submission: submission,
+  loading: false
+
+}

__mocks__/fixtures/colors.ts

@@ -1,4 +1,6 @@
-export const colors = {
+import { Colors } from "@/types/community";
+
+export const colors: Colors = {
   textAccent: "--tm-text",
   text: "--tm-text",
   accent: "--tm-accent",

__mocks__/fixtures/course.ts

@@ -1,5 +1,6 @@
 import { Course, Format, LearningModule, Material } from "@/types/course";
 import { mockTrailer } from "./bounty";
+import { RatingCriteria } from "@/types/challenge";
 
 
 export const Introduction = {
@@ -25,7 +26,7 @@ export const Rubric = {
     typeSlug: "slug",
 };
 
-export const mockRatingCriteria = {
+export const mockRatingCriteria: RatingCriteria = {
     name: "rating criteria",
     order: 4,
     rubric: [Rubric],
@@ -131,6 +132,4 @@ export const mockFormat: Format = {
     githubLink: true,
     text: true,
     disclaimer: true,
-};
-
-
+};

__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,
+});

__tests__/components/badges/RewardBadges.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+import RewardBadge, { RewardBadgeProps } from "@/components/badges/RewardBadge";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+const mockRewardBadges: RewardBadgeProps = {
+  type: "transparent",
+  reward: {
+    token: "BTC",
+    amount: 2,
+  },
+  displayAmount: true,
+};
+jest.mock("../../../src/utilities", () => ({
+  shortenNumber: (num: number) => `shortened-${num}`,
+}));
+
+describe("RewardBadges", () => {
+  it("should render  rewardBadges", () => {
+    renderWithRedux(<RewardBadge {...mockRewardBadges} />);
+    const rewardBadge = screen.getByTestId("RewardBadge");
+    expect(rewardBadge).toBeInTheDocument();
+  });
+  it("should render rewardBadges with coin when the token is provide", () => {
+    renderWithRedux(<RewardBadge reward={{ token: "BTC" }} />);
+    const rewardBadge = screen.getByTestId("RewardBadge");
+    const coin = screen.getByTestId("coin");
+    expect(rewardBadge).toBeInTheDocument();
+    expect(coin).toBeInTheDocument();
+  });
+
+  it("should render rewardBadges with amount and token", () => {
+    renderWithRedux(<RewardBadge reward={{ token: "BTC", amount: 1000 }} displayAmount={true} />);
+    const text = screen.getByText("shortened-1000 BTC");
+    expect(text).toBeInTheDocument();
+  });
+
+  it('should display "0" when the reward amount is 0 and token is empty', () => {
+    renderWithRedux(<RewardBadge reward={{ token: "", amount: 0 }} />);
+    const rewardBadge = screen.getByTestId("RewardBadge");
+    expect(rewardBadge).toBeInTheDocument();
+    expect(rewardBadge).toHaveTextContent("0");
+  });
+});

__tests__/components/cards/Story.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Story from "@/components/cards/Story";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: any) => <img {...props} />,
+}));
+
+describe("Story Component", () => {
+  const mockStory = {
+    content: "Test story content",
+    icon: "/test-icon.png",
+  };
+
+  const defaultProps = {
+    story: mockStory,
+    position: 0,
+    gridPosition: 0,
+    count: 5,
+    showingBubble: { card: null, grid: null },
+    onShowBubble: jest.fn(),
+    onHideBubble: jest.fn(),
+  };
+
+  it("renders the story icon", () => {
+    render(<Story {...defaultProps} />);
+    expect(screen.getByTestId("storyId")).toBeInTheDocument();
+    const icon = screen.getByAltText("story icon");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "/test-icon.png");
+  });
+
+  it("shows the bubble when clicked", () => {
+    render(<Story {...defaultProps} />);
+    fireEvent.click(screen.getByTestId("storyId"));
+    expect(screen.getByText("Test story content")).toBeInTheDocument();
+    expect(defaultProps.onShowBubble).toHaveBeenCalled();
+  });
+
+  it("hides the bubble when clicked again", () => {
+    render(<Story {...defaultProps} />);
+    fireEvent.click(screen.getByTestId("storyId"));
+    fireEvent.click(screen.getByTestId("storyId"));
+    expect(screen.queryByText("Test story content")).not.toBeInTheDocument();
+    expect(defaultProps.onHideBubble).toHaveBeenCalled();
+  });
+
+  it("shows the bubble initially when showingBubble matches position and gridPosition", () => {
+    const props = {
+      ...defaultProps,
+      showingBubble: { card: 0, grid: 0 },
+    };
+    render(<Story {...props} />);
+    expect(screen.getByText("Test story content")).toBeInTheDocument();
+  });
+});

__tests__/components/cards/Submission.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import SubmissionCard from "@/components/cards/Submission";
+import { useRouter } from "next/router";
+import { submission } from "@__mocks__/fixtures/challenge";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+
+
+describe("SubmissionCard", () => {
+  beforeEach(() => {
+    (useRouter as jest.Mock).mockReturnValue({
+      asPath: "/submissions",
+      push: jest.fn(),
+    });
+  });
+
+  it("renders the submission card with correct content", () => {
+    renderWithRedux(
+      <SubmissionCard submission={submission}>
+        <div>testing children</div>
+      </SubmissionCard>
+    );
+    expect(screen.getByTestId("submissionId")).toBeInTheDocument();
+    expect(screen.getByText("Submission")).toBeInTheDocument();
+    expect(screen.getByText("testing children")).toBeInTheDocument();
+  });
+
+  it("displays evaluation points when available", () => {
+    renderWithRedux(<SubmissionCard submission={submission} />);
+    expect(screen.getByTestId("badgeId")).toBeInTheDocument();
+    expect(screen.getByText("8")).toBeInTheDocument();
+    expect(screen.getByText("submissions.evaluation.points")).toBeInTheDocument();
+  });
+
+  it("displays feedback count when available", () => {
+    renderWithRedux(<SubmissionCard submission={submission} />);
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("submissions.feedback.feedbacks")).toBeInTheDocument();
+  });
+});

__tests__/components/sections/communities/_partials/Header.test.tsx

@@ -0,0 +1,45 @@
+import Header from "@/components/sections/communities/_partials/Header";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+const headerProps = {
+  description: "Test Description",
+  title: "Test Title",
+  subtitle: "Test Subtitle",
+  isTeamChallenge: true,
+  isHackathon: true,
+};
+
+describe("Header", () => {
+  it("renders the Header with Props", () => {
+    render(
+      <Header
+        description={headerProps.description}
+        title={headerProps.title}
+        subtitle={headerProps.subtitle}
+        isTeamChallenge={headerProps.isTeamChallenge}
+        isHackathon={headerProps.isHackathon}
+      />
+    );
+    expect(screen.getByRole("heading", { name: headerProps.title })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: new RegExp(headerProps.subtitle) })).toBeInTheDocument();
+    expect(screen.getByTestId("tag")).toBeInTheDocument();
+    expect(screen.getByText(headerProps.description)).toBeInTheDocument();
+  });
+
+  it("does not render subtitle when not provided", () => {
+    render(<Header />);
+    expect(screen.queryByRole("heading", { name: new RegExp(headerProps.subtitle) })).toBe(null);
+    expect(screen.queryByRole("tag")).toBe(null);
+  });
+
+  it("renders 'TEAM' if isHackathon is false", () => {
+    render(<Header subtitle={headerProps.subtitle} isTeamChallenge={headerProps.isTeamChallenge} />);
+    expect(screen.getByText("TEAM")).toBeInTheDocument();
+  });
+
+  it("renders 'Hackathon' if isHackathon is true", () => {
+    render(<Header subtitle={headerProps.subtitle} isTeamChallenge={headerProps.isTeamChallenge} isHackathon={headerProps.isHackathon} />);
+    expect(screen.getByText("Hackathon")).toBeInTheDocument();
+  });
+});

__tests__/components/sections/communities/_partials/Section.test.tsx

@@ -0,0 +1,28 @@
+import Section from "@/components/sections/communities/_partials/Section";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+describe("section", () => {
+  it("should render section", () => {
+    render(<Section />);
+    const communitySection = screen.getByTestId("sectionId");
+    expect(communitySection).toBeInTheDocument();
+  });
+
+  it("should render section with title and subtitle", () => {
+    render(<Section title={"section title"} subtitle={"section subtitle"} hideSubtitleOnMobile={false} />);
+    const communitySectionTitle = screen.getByText("section title");
+    expect(communitySectionTitle).toBeInTheDocument();
+    const communitySectionSubTitle = screen.getByText("section subtitle");
+    expect(communitySectionSubTitle).toBeInTheDocument();
+  });
+
+  it("should render with children", () => {
+    render(
+      <Section>
+        <div>community section child</div>
+      </Section>
+    );
+    expect(screen.getByText("community section child")).toBeInTheDocument();
+  });
+});

__tests__/components/sections/communities/overview/Courses.test.tsx

@@ -0,0 +1,28 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { CoursesOverview } from "@/components/sections/communities/overview/Courses";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { mockCourse } from "@__mocks__/fixtures/course";
+import { mockCommunity } from "@__mocks__/fixtures/community";
+
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    asPath: "next",
+  }),
+}));
+
+describe("CoursesOverview", () => {
+  it("renders the courses overview section with course cards", () => {
+    renderWithRedux(<CoursesOverview />, {
+      courses: { current: mockCourse, list: [mockCourse], content: mockCourse.community, count: 1, menus: [] },
+      community: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "" },
+    });
+    expect(screen.getByText("communities.overview.courses.title")).toBeInTheDocument();
+    [mockCourse].forEach((course) => {
+      const courseElement = screen.getByText(course.name);
+      expect(courseElement).toBeInTheDocument();
+      expect(courseElement.textContent).toBe(course.name);
+    });
+  });
+});