Merge pull request #1244 from dacadeorg/test/section-community

Test: add community tests

Author: serapieTuyishime

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

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

@@ -0,0 +1,26 @@
+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 { CommunitiesState } from "@/store/feature/community.slice";
+import { mockCommunity } from "@__mocks__/fixtures/community";
+import { mockCourse } from "@__mocks__/fixtures/course";
+
+describe("MainHeader", () => {
+  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.getByAltText(mockCommunity.name)).toBeInTheDocument()
+    }
+    expect(screen.getByText("communities.submissions")).toBeInTheDocument();
+    expect(screen.getByText("communities.feedbacks")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,34 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import Sidebar from "@/components/sections/communities/overview/Sidebar";
+import { mockCourse } from "@__mocks__/fixtures/course";
+import { mockCommunity } from "@__mocks__/fixtures/community";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    asPath: "next",
+  }),
+}));
+
+describe("Sidebar", () => {
+  beforeEach(() => {
+    renderWithRedux(<Sidebar />, { communities: { current: mockCommunity, list: [mockCommunity], courses: [mockCourse], status: "succeeded", error: "" } });
+  });
+  const mainLink = `/communities/${mockCommunity.slug}`;
+    const learningMaterialsLink = `/communities/${mockCommunity.slug}/learning-materials`;
+    const scoreboardLink = `/communities/${mockCommunity.slug}/scoreboard`;
+
+  it("displays the sidebar", () => {
+    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.getByText("communities.overview.challenges.title").closest("a")).toHaveAttribute("href", mainLink);
+    expect(screen.getByText("communities.overview.learning-materials.title").closest("a")).toHaveAttribute("href", learningMaterialsLink);
+    expect(screen.getByText("communities.overview.scoreboard.title").closest("a")).toHaveAttribute("href", scoreboardLink);
+  });
+});

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

@@ -0,0 +1,26 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import Wrapper from "@/components/sections/communities/overview/Wrapper";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    asPath: "next",
+  }),
+}));
+
+
+describe("Wrapper", () => {
+  it("displays the wrapper with all the children", () => {
+    renderWithRedux(
+      <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

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { SectionWrapper } from "@/components/sections/communities/overview/_partials/SectionWrapper";
+
+describe("SectionWrapper", () => {
+  it("renders with title and description", () => {
+    const title = "Test Title";
+    const description = "Test Description";
+    render(
+      <SectionWrapper title={title} description={description}>
+        <div>Test Children</div>
+      </SectionWrapper>
+    );
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.getByText(description)).toBeInTheDocument();
+    expect(screen.getByText("Test Children")).toBeInTheDocument();
+  });
+
+  it("renders without title and description when they are not available", () => {
+    render(
+      <SectionWrapper>
+        <div>Test Children</div>
+      </SectionWrapper>
+    );
+    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/Filter.test.tsx

@@ -0,0 +1,80 @@
+import Filters, { filterOptions, sortingOptions } from "@/components/sections/communities/overview/scoreboard/Filter";
+import "@testing-library/jest-dom";
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+jest.mock("next/router", () => {
+  const mockRouter = {
+    query: { slug: "test-slug" },
+    locale: "en",
+    push: jest.fn(),
+  };
+  return {
+    useRouter: jest.fn().mockReturnValue(mockRouter),
+  };
+});
+
+describe("Filter", () => {
+
+  it("renders filter options", () => {
+    renderWithRedux(<Filters />);
+    expect(screen.getByText("Filter by")).toBeInTheDocument();
+    filterOptions.forEach((option) => {
+      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) => {
+      const value = screen.getByDisplayValue(option.value);
+      fireEvent.change(value, { target: { value: "new filter option" } });
+      expect(value.getAttribute("value")).toContain("new filter option");
+    });
+  });
+
+  it("renders sort options", () => {
+    renderWithRedux(<Filters />);
+    expect(screen.getByText("Sort")).toBeInTheDocument();
+    sortingOptions.forEach((option) => {
+      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);
+    });
+  });
+
+  it("updates filter options on change on sort", () => {
+    renderWithRedux(<Filters />);
+    sortingOptions.forEach((option) => {
+      const value = screen.getByDisplayValue(option.value);
+      fireEvent.change(value, { target: { value: "new filter option" } });
+      expect(value.getAttribute("value")).toContain("new filter option");
+    });
+  });
+});

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

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import FilterOption from "@/components/sections/communities/overview/scoreboard/_partials/FilterOption";
+
+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();
+  });
+
+  it("should be disabled when value matches data", () => {
+    const label = "Test Label";
+    render(<FilterOption label={label} value="1" data="1" />);
+    const radio = screen.getByRole("radio");
+    expect(radio).toBeDisabled();
+  });
+});