fix: improve the community tests

Author: mhenriette

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

@@ -13,7 +13,9 @@ describe("CoursesOverview", () => {
     });
     expect(screen.getByText("communities.overview.courses.title")).toBeInTheDocument();
     [mockCourse].forEach((course) => {
-      expect(screen.getByText(course.name)).toBeInTheDocument();
+      const courseElement = screen.getByText(course.name);
+      expect(courseElement).toBeInTheDocument();
+      expect(courseElement.textContent).toBe(course.name);
     });
   });
 });

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

@@ -1,33 +1,52 @@
 import Filters, { filterOptions, sortingOptions } from "@/components/sections/communities/overview/scoreboard/Filter";
 import "@testing-library/jest-dom";
 import { fireEvent, screen } from "@testing-library/react";
-import { useRouter } from "next/router";
 import { renderWithRedux } from "@__mocks__/renderWithRedux";
 
-jest.mock("next/router", () => ({
-  useRouter: jest.fn(),
-}));
-
-describe("Filter", () => {
+jest.mock("next/router", () => {
   const mockRouter = {
     query: { slug: "test-slug" },
     locale: "en",
     push: jest.fn(),
   };
+  return {
+    useRouter: jest.fn().mockReturnValue(mockRouter),
+  };
+});
 
-  beforeEach(() => {
-    (useRouter as jest.Mock).mockReturnValue(mockRouter);
-  });
+describe("Filter", () => {
 
   it("renders filter options", () => {
     renderWithRedux(<Filters />);
     expect(screen.getByText("Filter by")).toBeInTheDocument();
     filterOptions.forEach((option) => {
-      expect(screen.getByText(option.label)).toBeInTheDocument();
-      expect(screen.getByDisplayValue(option.value)).toBeInTheDocument();
+      const labelElement = screen.getByText(option.label)
+      const valueElement = screen.getByDisplayValue(option.value)
+      expect(labelElement).toBeInTheDocument();
+      expect(labelElement.textContent).toBe(option.label)
+      expect(valueElement).toBeInTheDocument();
+      expect(valueElement.getAttribute("value")).toBe(option.value)
     });
   });
 
+  it("renders default filter and sort values", () => {
+    renderWithRedux(<Filters />);
+    const defaultFilter = screen.getByDisplayValue("all");
+    const defaultSort = screen.getByDisplayValue("score");
+    expect(defaultFilter).toBeChecked();
+    expect(defaultSort).toBeChecked();
+  });
+
+  it("disables filter options when value matches data", () => {
+    renderWithRedux(<Filters />);
+    filterOptions.forEach((option) => {
+      const valueElement = screen.getByDisplayValue(option.value);
+      if (option.value === "all") {
+        expect(valueElement).toBeDisabled();
+      } 
+    });
+  });
+  
   it("updates filter options on change on filter", () => {
     renderWithRedux(<Filters />);
     filterOptions.forEach((option) => {
@@ -41,8 +60,12 @@ describe("Filter", () => {
     renderWithRedux(<Filters />);
     expect(screen.getByText("Sort")).toBeInTheDocument();
     sortingOptions.forEach((option) => {
-      expect(screen.getByText(option.label)).toBeInTheDocument();
-      expect(screen.getByDisplayValue(option.value)).toBeInTheDocument();
+      const labelElement = screen.getByText(option.label)
+      const optionElement = screen.getByDisplayValue(option.value)
+      expect(labelElement).toBeInTheDocument();
+      expect(labelElement.textContent).toBe(option.label);
+      expect(optionElement).toBeInTheDocument();
+      expect(optionElement.getAttribute("value")).toBe(option.value);
     });
   });
 

__tests__/components/sections/communities/overview/scoreboard/_partials/FilterOption.test.tsx

@@ -6,7 +6,6 @@ describe("FilterOption", () => {
   it("renders with label and is not checked by default", () => {
     const label = "Test Label";
     render(<FilterOption label={label} value="1" data="2" />);
-
     expect(screen.getByLabelText(label)).toBeInTheDocument();
     expect(screen.getByRole("radio")).not.toBeChecked();
   });

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

@@ -29,7 +29,9 @@ describe("ScoreboardOverview", () => {
     });
     if ([mockScoreboard] && [mockScoreboard].length !== 0) {
       [mockScoreboard].slice(0, items).forEach((item) => {
-        expect(screen.getByText(item.user.displayName)).toBeInTheDocument();
+        const displayNameElement = screen.getByText(item.user.displayName);
+        expect(displayNameElement).toBeInTheDocument();
+        expect(displayNameElement).toHaveTextContent(item.user.displayName)
       });
     } else {
       expect(screen.getByText("communities.scoreboard.empty-state.title")).toBeInTheDocument();

src/components/sections/communities/_partials/Section.tsx

@@ -16,6 +16,7 @@ interface SectionProps {
   className?: string;
   hideSubtitleOnMobile?: boolean;
   children?: ReactNode;
+  testId?:string
 }
 
 /**
@@ -33,9 +34,9 @@ interface SectionProps {
 }
  * @returns {ReactElement}
  */
-export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className }: SectionProps): ReactElement {
+export default function Section({ title, testId="sectionId", titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className }: SectionProps): ReactElement {
   return (
-    <div data-testid="sectionId" id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
+    <div data-testid={testId} id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
       {title && <H3 bold={titleBold}>{title}</H3>}
       <p className={`text-base md:text-.5xl font-normal leading-normal ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
       <div>{children}</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[];
@@ -106,7 +106,7 @@ export type Rubric = {
   points: number;
   timestamp: number;
   typeSlug: string;
-  [key?: string]: any;
+  [key: string]: any;
 };
 
 export type Format = {