Merge pull request #1268 from dacadeorg/test/list-view-for-submissions

feat: add tests for submission card

Author: musayann

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

@@ -0,0 +1,55 @@
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { useRouter } from "next/router";
+import List from "@/components/sections/submissions/List";
+import { submission } from "../../.../../../../__mocks__/fixtures/challenge";
+import React from "react";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+
+const mockState = {
+  submissions: {
+    current: {
+      ...submission,
+    },
+    list: [submission, submission, submission],
+    hasMore: true,
+    text: "",
+  },
+};
+
+const mockEmptyState = {
+  submissions: {
+    current: {
+      ...submission,
+    },
+    list: [],
+    hasMore: false,
+    text: "",
+  },
+};
+
+describe("List Component", () => {
+  beforeEach(() => {
+    (useRouter as jest.Mock).mockReturnValue({
+      query: { challenge_id: "1" },
+    });
+  });
+
+  it("Should render the List component with submissions", () => {
+    renderWithRedux(<List />, mockState);
+    const listElement = screen.getByTestId("listId");
+    expect(listElement).toBeInTheDocument();
+    const submissionCardElements = screen.getAllByTestId("submissionId");
+    expect(submissionCardElements.length).toBe(mockState.submissions.list.length);
+  });
+
+  it("Should render the empty state when there are no submissions", () => {
+    renderWithRedux(<List />, mockEmptyState);
+    const emptyStateTitle = screen.getByText(/submissions.empty-state.title/i);
+    expect(emptyStateTitle).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,42 @@
+import View from "@/components/sections/submissions/View";
+import { submission } from "../../.../../../../__mocks__/fixtures/challenge";
+import { renderWithRedux } from "../.../../../../../__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    asPath: "next",
+  }),
+}));
+
+const mockStateWithSubmission = {
+  submissions: {
+    current: {
+      ...submission,
+    },
+    list: [submission],
+    text: "",
+  },
+};
+
+const mockStateWithNoSubmission = {
+  submissions: {
+    current: null,
+    list: [],
+    text: "",
+  },
+};
+describe("View component", () => {
+  it("Should render the submission view card and evaluation", () => {
+    renderWithRedux(<View />, mockStateWithSubmission);
+    expect(screen.getByTestId("viewId")).toBeInTheDocument();
+    // TODO: add this test once the pr for testing evaluations is merged
+    // expect(screen.getByTestId("evaluationsId")).toBeInTheDocument();
+    expect(screen.getByTestId("feedbackId")).toBeInTheDocument();
+  });
+  it("Should display a message when submission is not available", () => {
+    renderWithRedux(<View />, mockStateWithNoSubmission);
+    expect(screen.getByText("communities.challenge.submission.no.feedbacks")).toBeInTheDocument();
+  });
+});

__tests__/components/sections/submissions/_partials/SubmissionCard.test.tsx

@@ -0,0 +1,51 @@
+import "@testing-library/jest-dom";
+import { renderWithRedux } from "../../../../../__mocks__/renderWithRedux";
+import { screen } from "@testing-library/react";
+import SubmissionCard from "@/components/sections/submissions/_partials/SubmissionCard";
+import { submission } from "../../../../../__mocks__/fixtures/challenge";
+
+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",
+  }),
+}));
+
+describe("Submission Card", () => {
+  beforeEach(()=>{
+    renderWithRedux(<SubmissionCard submission={submission} />);
+  })
+  it("should render submission card", () => {
+    const submissionCard = screen.getByTestId("submissionCardId");
+    expect(submissionCard).toBeInTheDocument();
+  });
+  it("should display the user's display name", () => {
+    const displayName = screen.getByText(submission.user.displayName);
+    expect(displayName).toBeInTheDocument();
+  });
+
+  it("should display the submission text", () => {
+    const submissionText = screen.getByText(submission.text);
+    expect(submissionText).toBeInTheDocument();
+  });
+
+  it("should display the submission status", () => {
+    const submissionDate = screen.getByText(/submissions.submitted/);
+    expect(submissionDate).toBeInTheDocument();
+  });
+
+  it("should display evaluation points", () => {
+    const evaluationPoints = screen.getByText(submission.metadata.evaluation.points.toString());
+    expect(evaluationPoints).toBeInTheDocument();
+  });
+
+  it("should have a link to the submission details", () => {
+    const mockSubmission = submission;
+    const communitySlug = "test-community-slug";
+    const submissionId = mockSubmission.id;
+    const submissionLink = screen.getByRole("link");
+    expect(submissionLink).toBeInTheDocument();
+    expect(submissionLink).toHaveAttribute("href", `/communities/${communitySlug}/challenges/test-challenge-id/submissions/${submissionId}`);
+  });
+});

public/locales/bg/common.json

@@ -168,6 +168,7 @@
   "communities.challenge.evaluation.points": "Points",
   "communities.challenge.evaluation.message": "Congratulations you gained at least 70% of the available learning points.",
   "communities.challenge.evaluation.message.nominated": "Поздравления, печеленето на {{threshold}}% ви номинира за наградния фонд от:",
+  "communities.challenge.submission.no.feedbacks": "Обратната връзка за това подаване вече не е налична",
   "communities.submission.title": "Submissions",
   "communities.feedbacks": "Feedbacks",
   "communities.navigation.overview": "Преглед",

public/locales/en/common.json

@@ -169,6 +169,7 @@
   "communities.challenge.evaluation.points": "Points",
   "communities.challenge.evaluation.message": "Congratulations you gained at least 70% of the available learning points.",
   "communities.challenge.evaluation.message.nominated": "Congratulations, earning {{threshold}}% nominates you for the prize pool of:",
+  "communities.challenge.submission.no.feedbacks": "The feedback for this submission is no longer available",
   "communities.submission.title": "Submissions",
   "communities.feedbacks": "Feedbacks",
   "communities.navigation.overview": "Overview",

public/locales/es/common.json

@@ -172,6 +172,7 @@
   "communities.challenge.evaluation.points": "Puntos",
   "communities.challenge.evaluation.message": "¡Felicidades, ha ganado al menos el 70% de los puntos disponibles!",
   "communities.challenge.evaluation.message.nominated": "Felicitaciones, ganar el {{threshold}}% te nominó para el fondo de premios de:",
+  "communities.challenge.submission.no.feedbacks": "La retroalimentación para esta presentación ya no está disponible",
   "communities.submission.title": "Propuestas",
   "communities.feedbacks": "Feedbacks",
   "communities.navigation.overview": "Vista general",

public/locales/hr/common.json

@@ -141,6 +141,7 @@
   "communities.challenge.evaluation.points": "Points",
   "communities.challenge.evaluation.message": "Congratulations you gained at least 70% of the available learning points.",
   "communities.challenge.evaluation.message.nominated": "Čestitamo, osvajanje >{{threshold}}% nominira vas za nagradni fond od:",
+  "communities.challenge.submission.no.feedbacks": "Povratne informacije za ovu prijavu više nisu dostupne",
   "communities.submission.title": "Submissions",
   "communities.feedbacks": "Feedbacks",
   "communities.navigation.overview": "Pregled",

src/components/cards/Submission.tsx

@@ -23,13 +23,14 @@ interface SubmissionCardProps {
     date: string;
   };
   children?: ReactNode;
+  testId?:string;
 }
 
 /**
  * Submission card component
  * @return {ReactElement}
  */
-export default function SubmissionCard({ submission, link = "", children }: SubmissionCardProps): ReactElement {
+export default function SubmissionCard({ submission, link = "", children, testId = "submissionId" }: SubmissionCardProps): ReactElement {
   const { t } = useTranslation();
   const router = useRouter();
   const colors = useSelector((state) => state.ui.colors);
@@ -79,7 +80,7 @@ export default function SubmissionCard({ submission, link = "", children }: Subm
       boxLayout
       onClick={displaySubmission}
     >
-      <div className="divide-y divide-gray-200 flex flex-col">
+      <div className="divide-y divide-gray-200 flex flex-col" data-testid={testId}>
         <div className="pb-5">
           <p className="text-base sm:text-lg line-clamp-3 leading-normal text-gray-700 break-words">{submission.text}</p>
         </div>

src/components/sections/feedbacks/index.tsx

@@ -14,6 +14,10 @@ import { Challenge } from "@/types/course";
 import { Feedback as FeedbackType } from "@/types/feedback";
 import { IRootState } from "@/store";
 
+interface FeedbackProps {
+  testId?: string;
+}
+
 /**
  * interface for Feedback multiSelector
  * @date 9/13/2023 - 9:12:52 AM
@@ -35,7 +39,7 @@ interface FeedbackMultiSelector {
  * @export
  * @returns {ReactElement}
  */
-export default function Feedback(): ReactElement {
+export default function Feedback({testId = "feedbackId" }: FeedbackProps): ReactElement {
   const dispatch = useDispatch();
   const route = useRouter();
 
@@ -59,7 +63,7 @@ export default function Feedback(): ReactElement {
   }, [fetchList]);
 
   return (
-    <div className="relative">
+    <div className="relative" data-testid={testId}>
       {isFetching ? <Loader loading={isFetching} /> : feedbacks.map((feedback, index) => <FeedbackCard key={feedback.id} value={feedback} last={index === feedbacks.length - 1} />)}
       {isAuthenticated && challenge?.feedbackInfo && (
         <Section>

src/components/sections/submissions/List.tsx

@@ -15,14 +15,17 @@ interface SubmissionListMultiSelector {
   submissions: Submission[];
   hasMore: boolean;
 }
+interface ListProps {
+  testId?: string;
+}
 /**
  * Submissions list component
  * @date 4/25/2023 - 2:21:17 PM
  *
  * @export
  * @returns {ReactElement}
  */
-export default function List(): ReactElement {
+export default function List({ testId = "listId" }: ListProps): ReactElement {
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
@@ -58,7 +61,7 @@ export default function List(): ReactElement {
   return (
     <>
       {submissions && submissions.length ? (
-        <div className="text-xl md:text-.5xl px-0 py-5 md:py-10 md:pb-5 relative">
+        <div data-testid={testId} className="text-xl md:text-.5xl px-0 py-5 md:py-10 md:pb-5 relative">
           <InfiniteScroll
             dataLength={submissions.length}
             next={nextPage}