fix: improve the community components testing

Author: mhenriette

__mocks__/course.ts

@@ -92,40 +92,40 @@ export const mockLearningModule: LearningModule = {
 };
 
 export const mockCourse: Course = {
-  id: "course",
-  ref: "course ref",
-  created_at: new Date("2022-05-01T12:00:00Z"),
-  updated_at: new Date("2022-05-01T12:00:00Z"),
-  duration: 3,
-  summary: "Course description",
-  level: 3,
-  name: "course name",
-  description: "Course description",
-  objectives: ["course description", "course objectives"],
-  locale: "English",
-  community: "community",
-  slug: "course description slug",
-  introduction: Introduction,
-  active: true,
-  certificateIcon: "certificate",
-  certificateData: mockCertificateData,
-  timestamp: 0,
-  learningModules: [mockLearningModule],
-  trailer: mockTrailer,
-  disclaimer: "Course",
-  items: ["item 1", "item 2"],
-  faq: [
-    {
-      description: "faq description",
-      title: "faq title",
-    },
-  ],
-  prerequisite: {
+    id: "course",
+    ref: "course ref",
+    translations: ["these are the translations"],
+    created_at: new Date("2022-05-01T12:00:00Z"),
+    updated_at: new Date("2022-05-01T12:00:00Z"),
+    duration: 3,
+    summary: "Course description",
+    level: 3,
+    name: "course name",
+    description: "Course description",
+    objectives: ["course description", "course objectives"],
+    locale: "English",
+    community: "community",
+    slug: "course description slug",
+    introduction: Introduction,
+    active: true,
+    certificateIcon: "certificate",
+    certificateData: mockCertificateData,
+    timestamp: 0,
+    learningModules: [mockLearningModule],
+    trailer: mockTrailer,
+    disclaimer: "Course",
     items: ["item 1", "item 2"],
-    hint: "prerequisite hint",
-  },
+    faq: [
+        {
+            description: "faq description",
+            title: "faq title",
+        },
+    ],
+    prerequisite: {
+        items: ["item 1", "item 2"],
+        hint: "prerequisite hint",
+    },
 };
-
 export const mockFormat: Format = {
   githubLink: true,
   text: true,

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

@@ -23,7 +23,6 @@ describe("section", () => {
         <div>community section child</div>
       </Section>
     );
-    const communitySectionChildren = screen.getByText("community section child");
-    expect(communitySectionChildren).toBeInTheDocument();
+    expect(screen.getByText("community section child")).toBeInTheDocument();
   });
 });

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

@@ -2,12 +2,24 @@ import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import CommunitySection from "@/components/sections/communities/overview/MainHeader";
 import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { mockCommunity } from "@__mocks__/community";
+import { mockCourse } from "@__mocks__/course";
+import { CommunitiesState } from "@/store/feature/community.slice";
 
 describe("MainHeader", () => {
-  it("displays the header", () => {
-    renderWithRedux(<CommunitySection testId="mainHeaderId" />);
-
-    expect(screen.getByTestId("mainHeaderId")).toBeInTheDocument();
+  const communityMockState = {
+    communities: { current: mockCommunity, courses: [mockCourse], list: [mockCommunity], status: "succeeded" as CommunitiesState["status"], error: null },
+  };
+  it("renders community section component", () => {
+    renderWithRedux(<CommunitySection />, communityMockState);
+    expect(screen.getByRole("heading", {name:mockCommunity.name})).toBeInTheDocument();
+    const summaryElements = screen.queryAllByText(mockCommunity.summary);
+    summaryElements.forEach(element=>{
+      expect(element).toBeInTheDocument()
+    })
+    if(mockCommunity.icon){
+      expect(screen.getByRole('img')).toBeInTheDocument()
+    }
     expect(screen.getByText("communities.submissions")).toBeInTheDocument();
     expect(screen.getByText("communities.feedbacks")).toBeInTheDocument();
   });

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

@@ -12,10 +12,21 @@ jest.mock("next/router", () => ({
 }));
 
 describe("Sidebar", () => {
+  beforeEach(() => {
+    renderWithRedux(<Sidebar />, { communities: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "" } });
+  });
+  const mainLink = `/communities/${mockCommunity.slug}`;
+  const scoreboardLink = `/communities/${mockCommunity.slug}/scoreboard`;
+
   it("displays the sidebar", () => {
-    renderWithRedux(<Sidebar testId="sidebarId" />, { community: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "" } });
-    expect(screen.getByTestId("sidebarId")).toBeInTheDocument();
     expect(screen.getByText("communities.overview.challenges.title")).toBeInTheDocument();
     expect(screen.getByText("communities.overview.challenges.description")).toBeInTheDocument();
+    expect(screen.getByText("communities.overview.scoreboard.title")).toBeInTheDocument();
+    expect(screen.getByText("communities.overview.scoreboard.description")).toBeInTheDocument();
+  });
+
+  it("renders the links correctly", () => {
+    expect(screen.getByRole("link", { name: "main link" })).toHaveAttribute("href", mainLink);
+    expect(screen.getByRole("link", { name: "scoreboard link" })).toHaveAttribute("href", scoreboardLink);
   });
 });

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

@@ -9,14 +9,17 @@ jest.mock("next/router", () => ({
   }),
 }));
 
+
 describe("Wrapper", () => {
   it("displays the wrapper", () => {
     renderWithRedux(
-      <Wrapper testId="wrapperId" filter={<div>Test Filter</div>}>
+      <Wrapper filter={<div>Test Filter</div>}>
         <div>Wrappper test</div>
       </Wrapper>
     );
+
     expect(screen.getByTestId("wrapperId")).toBeInTheDocument();
+    expect(screen.getByText("communities.overview.challenges.title")).toBeInTheDocument();
     expect(screen.getByText("Wrappper test")).toBeInTheDocument();
     expect(screen.getByText("Test Filter")).toBeInTheDocument();
   });

__tests__/components/sections/communities/overview/_partials/SectionWrapper.test.tsx

@@ -11,7 +11,6 @@ describe("SectionWrapper", () => {
         <div>Test Children</div>
       </SectionWrapper>
     );
-
     expect(screen.getByText(title)).toBeInTheDocument();
     expect(screen.getByText(description)).toBeInTheDocument();
     expect(screen.getByText("Test Children")).toBeInTheDocument();
@@ -23,9 +22,8 @@ describe("SectionWrapper", () => {
         <div>Test Children</div>
       </SectionWrapper>
     );
-
-    expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
-    expect(screen.queryByText("Test Description")).not.toBeInTheDocument();
+    expect(screen.queryByText("Test Title")).toBe(null);
+    expect(screen.queryByText("Test Description")).toBe(null);
     expect(screen.getByText("Test Children")).toBeInTheDocument();
   });
 });

__tests__/components/sections/communities/overview/scoreboard/index.test.tsx

@@ -17,10 +17,10 @@ describe("ScoreboardOverview", () => {
   };
 
   it("displays the scoreboard overview", () => {
-    renderWithRedux(<ScoreboardOverview testId="scoreboardId" />, {
+    renderWithRedux(<ScoreboardOverview />, {
       scoreboard: { list: [mockScoreboard], loading: true, filterBy: "" },
     });
-    expect(screen.getByTestId("scoreboardId")).toBeInTheDocument();
+    expect(screen.getByTestId("loader")).toBeInTheDocument();
   });
 
   it("renders scoreboard cards when not loading and list is not empty", () => {

src/components/sections/communities/overview/MainHeader.tsx

@@ -3,28 +3,22 @@ import { useSelector } from "@/hooks/useTypedSelector";
 import { useTranslation } from "next-i18next";
 import Image from "next/image";
 import { ReactElement } from "react";
-
-interface CommunitySectionProps {
-  testId?: string;
-}
-
 /**
  * Represents the Community Section
  * @date 4/13/2023 - 5:56:41 AM
  *
  * @export
  * @returns {ReactElement}
  */
-export default function CommunitySection({ testId }: CommunitySectionProps): ReactElement {
+export default function CommunitySection(): ReactElement {
   const { t } = useTranslation();
   const community = useSelector((state) => state.communities.current);
-
   const submissions = community?.metadata?.submissions || 0;
   const feedbacks = community?.metadata?.feedbacks || 0;
 
   return (
     <Section className="bg-theme-primary text-theme-text">
-      <div data-testid={testId} className="py-2 md:py-8 mx-auto">
+      <div className="py-2 md:py-8 mx-auto">
         <div className="flex flex-col justify-between lg:flex-row">
           <div className="max-w-md mb-4 md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl lg:mr-6">
             <h1 className="text-5xl tracking-tight sm:text-6.5xl xl:text-7.75xl max-w-text-xs">{community?.name}</h1>

src/components/sections/communities/overview/Sidebar.tsx

@@ -4,10 +4,6 @@ import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import classNames from "classnames";
 
-interface SidebarProps {
-  testId?: string;
-}
-
 /**
  * @interface SidebarProps
  * @description The props for the Sidebar component.
@@ -18,7 +14,7 @@ interface SidebarProps {
  * @param {} SidebarProps - The props for the Sidebar component.
  * @returns JSX.Element - The rendered Sidebar component.
  */
-export default function Sidebar({ testId }: SidebarProps): JSX.Element {
+export default function Sidebar(): JSX.Element {
   const currentCommunity = useSelector((state) => state.communities.current);
   const hasCurrentCommunity = !!currentCommunity; // Check if currentCommunity exists
   const router = useRouter();
@@ -32,20 +28,19 @@ export default function Sidebar({ testId }: SidebarProps): JSX.Element {
   const isActive = (link: string) => {
     return router.asPath === link;
   };
-
   const scoreboardLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}/scoreboard` : "";
   const mainLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}` : "";
 
   return (
-    <div data-testid={testId} className="flex flex-col md:divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
-      <Link href={mainLink}>
+    <div className="flex flex-col md:divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
+      <Link href={mainLink} aria-label="main link">
         <div className={isActive(mainLink) ? "" : "opacity-80"}>
           <div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>
           <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.challenges.description")} </div>
         </div>
       </Link>
       {hasCurrentCommunity && (
-        <Link href={scoreboardLink}>
+        <Link href={scoreboardLink} aria-label="scoreboard link">
           <div className={classNames("pt-6", { "opacity-80 md:block hidden scroll-smooth": isActive(scoreboardLink) })}>
             <div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>
             <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.scoreboard.description")}</div>

src/components/sections/communities/overview/Wrapper.tsx

@@ -20,7 +20,7 @@ interface WrapperProps {
  * @returns {JSX.Element} A styled Wrapper component containing a MainHeaderSection, CommunitySidebar, 
  * optional filter component, and children content.
  */
-export default function Wrapper({ children, filter, testId }: WrapperProps): JSX.Element {
+export default function Wrapper({ children, filter, testId = "wrapperId" }: WrapperProps): JSX.Element {
   return (
     <div data-testid={testId} className="relative">
       <MainHeaderSection />