Merge pull request #1267 from dacadeorg/test/best-submission

Test: add test for BestSubmmission and Evaluation components

Author: serapieTuyishime

__mocks__/fixtures/challenge.ts

@@ -1,9 +1,9 @@
 import { mockFormat, mockCertificateData, mockCourse, mockLearningModule, mockRatingCriteria } from "./course";
 import { mockCommunity, mockMetadata } from "./community";
 import { reward } from "./reward";
-import { Submission } from "@/types/bounty";
+import { Evaluation, Submission } from "@/types/bounty";
 import { AdditionalInfo, Challenge } from "@/types/course";
-import { TEAM_FORMATION } from "@/constants/challengeInfo";
+import { GRADING_CRITERIA, TEAM_FORMATION } from "@/constants/challengeInfo";
 import { Team, TeamMember } from "@/types/challenge";
 import { Feedback } from "@/types/feedback";
 import { mockUser } from "./user";
@@ -51,6 +51,22 @@ export const challenge: Challenge = {
       type: "teamFormation",
       text: "Form your team details here",
     },
+    [GRADING_CRITERIA]: { type: "teamFormation", text: "Sample grading criteria text" },
+  },
+};
+export const evaluation: Evaluation = {
+  evaluator: mockUser,
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  comment: "comment",
+  criteria: [],
+  metadata: {
+    language: "language",
+  },
+  points: 10,
+  totalPoints: 1,
+  reward: {
+    amount: 10,
+    token: "token",
   },
 };
 
@@ -89,6 +105,7 @@ export const submission: Submission = {
       totalPoints: 10,
     },
   },
+  evaluation: evaluation,
   timestamp: 0,
   user: mockUser,
   reviewable: false,

__tests__/components/sections/submissions/BestSubmission.test.tsx

@@ -0,0 +1,42 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { challenge, submission } from "@__mocks__/fixtures/challenge";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import BestSubmissions from "@/components/sections/submissions/BestSubmissions";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    asPath: "next",
+    query: { challenge_id: "test-challenge-id", slug: "test-community-slug" },
+    pathname: "/communities/test-community-slug/challenges/test-challenge-id",
+  }),
+}));
+
+const mockBestSubmissions = {
+  challenges: {
+    current: {
+      ...challenge,
+      bestSubmissions: [submission],
+    },
+    list: [challenge],
+    submission: submission,
+    loading: true,
+  },
+};
+
+describe("BestSubmissions Component", () => {
+  it("Should render best submissions when they exist", () => {
+    renderWithRedux(<BestSubmissions testId="bestSubmissionId" />, mockBestSubmissions);
+    const bestSubmission = screen.getByTestId("bestSubmissionId");
+    expect(bestSubmission).toBeInTheDocument();
+    mockBestSubmissions.challenges.current.bestSubmissions.forEach((submission) => {
+      expect(screen.getByText(submission.text)).toBeInTheDocument();
+    });
+  });
+
+  it("Should render the link to submissions path", () => {
+    renderWithRedux(<BestSubmissions testId="bestSubmissionId" />, mockBestSubmissions);
+    const link = screen.getByRole("link", { name: /challenge.best-submissions.button/i });
+    expect(link).toHaveAttribute("href", "/communities/test-community-slug/challenges/test-challenge-id/submissions");
+  });
+});

__tests__/components/sections/submissions/Evaluation.test.tsx

@@ -0,0 +1,69 @@
+import Evaluations from "@/components/sections/submissions/Evaluation";
+import { challenge, submission } from "@__mocks__/fixtures/challenge";
+import { colors } from "@__mocks__/fixtures/colors";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    asPath: "next",
+  }),
+}));
+
+const mockEvaluationState = {
+  ui: { colors: colors, locked: false, showReferralPopup: false, showJobOffersPopup: false },
+  submissions: {
+    current: {
+      ...submission,
+    },
+    list: [submission],
+    text: "",
+  },
+  challenges: { current: challenge, list: [challenge], submission: submission, loading: false },
+};
+
+describe("Evaluations", () => {
+  it("Should render evaluations", () => {
+    renderWithRedux(<Evaluations />, mockEvaluationState);
+    const evaluations = screen.getByTestId("evaluationsId");
+    expect(evaluations).toBeInTheDocument();
+  });
+
+  it("Should render RatingRubric when the challenge is present", () => {
+    renderWithRedux(<Evaluations />, mockEvaluationState);
+    const ratingCriteriaName = challenge.ratingCriteria[0].name;
+    const ratingRubric = screen.getByText(ratingCriteriaName);
+    expect(ratingRubric).toBeInTheDocument();
+  });
+
+  it("Should conditionally render reward information when evaluation reward is present and the challenge is not a hackathon", () => {
+    const nonHackathonState = {
+      ...mockEvaluationState,
+      challenges: {
+        ...mockEvaluationState.challenges,
+        current: { ...challenge, isHackathon: false },
+      },
+    };
+
+    renderWithRedux(<Evaluations />, nonHackathonState);
+    const token = submission.evaluation?.reward?.token;
+    if (token) {
+      expect(screen.getByText(token)).toBeInTheDocument();
+    }
+  });
+
+  it("Should conditionally render reward information when evaluation.reward is present and challenge is a hackathon", () => {
+    const hackathonState = {
+      ...mockEvaluationState,
+      challenges: {
+        ...mockEvaluationState.challenges,
+        current: { ...challenge, isHackathon: true },
+      },
+    };
+
+    renderWithRedux(<Evaluations />, hackathonState);
+    expect(screen.getByText("USD")).toBeInTheDocument();
+    expect(screen.getByText("communities.challenge.evaluation.message.nominated")).toBeInTheDocument();
+  });
+});

src/components/sections/submissions/BestSubmissions.tsx

@@ -9,14 +9,18 @@ import ArrowButton from "@/components/ui/button/Arrow";
 import { useSelector } from "@/hooks/useTypedSelector";
 import Accordion from "@/components/ui/accordion/Accordion";
 
+interface BestSubmissionsProps {
+  testId?: string;
+}
+
 /**
  * BestSubmissions Component
  * @date 4/25/2023 - 2:21:45 PM
  *
  * @export
  * @returns {ReactElement}
  */
-export default function BestSubmissions(): ReactElement {
+export default function BestSubmissions({ testId }: BestSubmissionsProps): ReactElement {
   const { t } = useTranslation();
   const router = useRouter();
   const navigation = new CommunityNavigation(router);
@@ -29,7 +33,7 @@ export default function BestSubmissions(): ReactElement {
         subtitle=""
         isExpanded
         content={
-          <div>
+          <div data-testid={testId}>
             <p className="leading-normal text-sm capitalize md:w-full w-64 pt-6">{t("communities.challenge.best-submissions.description")}</p>
             <div className="text-xl md:text-.5xl px-0">
               <div className="md:grid grid-cols-2 gap-5 pt-6 flex-wrap">

src/components/sections/submissions/Evaluation.tsx

@@ -9,6 +9,10 @@ import { Colors } from "@/types/community";
 import { Challenge } from "@/types/course";
 import { IRootState } from "@/store";
 
+interface EvaluationsProps {
+  testId?: string;
+}
+
 /**
  * interface for Evaluations multiSelector
  * @date 9/13/2023 - 9:21:32 AM
@@ -29,7 +33,7 @@ interface EvaluationsMultiSelector {
  * @export
  * @returns {ReactElement}
  */
-export default function Evaluations(): ReactElement {
+export default function Evaluations({testId = "evaluationsId" }: EvaluationsProps): ReactElement {
   const { t } = useTranslation();
   const { colors, submission, challenge } = useMultiSelector<unknown, EvaluationsMultiSelector>({
     colors: (state: IRootState) => state.ui.colors,
@@ -39,45 +43,47 @@ export default function Evaluations(): ReactElement {
   const evaluation = submission?.evaluation as Evaluation;
 
   return (
-    <EvaluationCard evaluation={evaluation}>
-      <>
-        {challenge && <RatingRubric hideTitle ratingCriteria={challenge.ratingCriteria} selected={evaluation.criteria} />}
-        <div className="grid grid-cols-1 mt-3 space-y-4 md:space-y-0 md:grid-cols-2 lg:grid-cols-4 gap-y-5 gap-x-5">
-          <div className="text-sm">
-            <span className="block font-medium">{t("communities.challenge.evaluation.total")}</span>
-            <span className="text-xl" style={{ color: colors?.textAccent }}>
-              {evaluation.points}
-            </span>
-            <span style={{ color: colors?.textAccent }}>
-              /{evaluation.totalPoints}
-              {t("communities.challenge.evaluation.points")}
-            </span>
-          </div>
-          {evaluation.reward && (
-            <div className="relative text-sm">
-              {challenge?.isHackathon ? (
-                <>
-                  <div>{t("communities.challenge.evaluation.message.nominated", { threshold: challenge.threshold })}</div>
-                  <div className="inline-block font-medium" style={{ color: colors?.textAccent }}>
-                    <span className="text-xl">{evaluation.reward.amount}</span> USD
-                  </div>
-                </>
-              ) : (
-                <>
-                  <span className="block font-medium">{t("communities.challenge.evaluation.total")}</span>
-                  <div className="absolute -left-5 top-7">
-                    <Coin token={evaluation.reward.token} size="small" />
-                  </div>
-                  <div className="inline-block font-medium" style={{ color: colors?.textAccent }}>
-                    <span className="text-xl">{evaluation.reward.amount}</span> <span>{evaluation.reward.token}</span>
-                  </div>
-                  <div>{t("communities.challenge.evaluation.message")}</div>
-                </>
-              )}
+    <div data-testid={testId}>
+      <EvaluationCard evaluation={evaluation}>
+        <>
+          {challenge && <RatingRubric hideTitle ratingCriteria={challenge.ratingCriteria} selected={evaluation?.criteria} />}
+          <div className="grid grid-cols-1 mt-3 space-y-4 md:space-y-0 md:grid-cols-2 lg:grid-cols-4 gap-y-5 gap-x-5">
+            <div className="text-sm">
+              <span className="block font-medium">{t("communities.challenge.evaluation.total")}</span>
+              <span className="text-xl" style={{ color: colors?.textAccent }}>
+                {evaluation?.points}
+              </span>
+              <span style={{ color: colors?.textAccent }}>
+                /{evaluation?.totalPoints}
+                {t("communities.challenge.evaluation.points")}
+              </span>
             </div>
-          )}
-        </div>
-      </>
-    </EvaluationCard>
+            {evaluation?.reward && (
+              <div className="relative text-sm">
+                {challenge?.isHackathon ? (
+                  <>
+                    <div>{t("communities.challenge.evaluation.message.nominated", { threshold: challenge.threshold })}</div>
+                    <div className="inline-block font-medium" style={{ color: colors?.textAccent }}>
+                      <span className="text-xl">{evaluation.reward.amount}</span> USD
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <span className="block font-medium">{t("communities.challenge.evaluation.total")}</span>
+                    <div className="absolute -left-5 top-7">
+                      <Coin token={evaluation.reward.token} size="small" />
+                    </div>
+                    <div className="inline-block font-medium" style={{ color: colors?.textAccent }}>
+                      <span className="text-xl">{evaluation.reward.amount}</span> <span>{evaluation.reward.token}</span>
+                    </div>
+                    <div>{t("communities.challenge.evaluation.message")}</div>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      </EvaluationCard>
+    </div>
   );
 }

src/types/course.d.ts

@@ -23,7 +23,7 @@ export type Course = {
   learningModules: LearningModule[];
   challenge?: Challenge;
   challenges?: Challenge[];
-  translations: any[];
+  translations?: any[];
   trailer: Trailer;
   disclaimer: string;
   items?: string[];

tsconfig.json

@@ -16,7 +16,8 @@
     "incremental": true,
     "paths": {
       "@/*": ["./src/*"],
-      "react": ["./node_modules/@types/react"]
+      "react": ["./node_modules/@types/react"],
+      "@__mocks__/*": ["./__mocks__/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/components/sections/learning-modules/_partials/MarkDown.jsx", "jest.config.js"],