Merge pull request #1242 from dacadeorg/test/section-bounties-testing

feat: add test for the section bounties

Author: musayann

__tests__/components/sections/bounties/Navigation.test.tsx

@@ -0,0 +1,69 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import BountiesNavigation from "@/components/sections/bounties/Navigation";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { List } from "@/utilities/CommunityNavigation";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    query: "/",
+  }),
+}));
+
+const expectedNavItems: Omit<List, "id">[] = [
+  {
+    title: "bounties.navigation",
+    items: [
+      {
+        label: "bounties.navigation.all",
+        exact: true,
+        link: "/bounties",
+      },
+    ],
+  },
+];
+
+describe("Navigation", () => {
+  it("should render the navigation", () => {
+    renderWithRedux(<BountiesNavigation testId="bountiesNavigationId" />);
+    const bountiesNavigation = screen.getByTestId("bountiesNavigationId");
+    expect(bountiesNavigation).toBeInTheDocument();
+  });
+
+  it("should render menu items", () => {
+    renderWithRedux(<BountiesNavigation />);
+    const menuItems = screen.getAllByRole("listitem");
+    menuItems.forEach(() => {
+      expectedNavItems.forEach((menu) => {
+        if (!menu.hideTitle) {
+          const menuTitle = menu.title;
+          expect(screen.getByText(menuTitle)).toBeInTheDocument();
+        }
+      });
+    });
+  });
+
+  it("renders links with href", () => {
+    renderWithRedux(<BountiesNavigation />);
+    const links = screen.getAllByRole("link");
+    links.forEach((link) => {
+      expect(link).toHaveAttribute("href");
+    });
+  });
+
+  it("renders the item label", () => {
+    renderWithRedux(<BountiesNavigation />);
+    const menuItems = screen.getAllByRole("listitem");
+    menuItems.forEach(() => {
+      expectedNavItems.forEach((item) => {
+        expect(screen.getByRole("link")).toBeInTheDocument();
+        const itemLabel = item.items.find((item) => item.label);
+        const label = itemLabel?.label;
+        if (label) {
+          expect(screen.getByText(label)).toBeInTheDocument();
+          expect(screen.getByText(label).textContent).toContain("bounties.navigation.all");
+        }
+      });
+    });
+  });
+});

src/components/sections/bounties/Navigation.tsx

@@ -30,7 +30,7 @@ interface BountiesNavigationMultiSelector {
  * @export
  * @returns {ReactElement}
  */
-export default function BountiesNavigation(): ReactElement {
+export default function BountiesNavigation({testId}: {testId?: string}): ReactElement {
   const { t } = useTranslation();
   const router = useRouter();
   const { colors, bounties } = useMultiSelector<unknown, BountiesNavigationMultiSelector>({
@@ -70,7 +70,7 @@ export default function BountiesNavigation(): ReactElement {
 
   return (
     <ThemeWrapper colors={colors}>
-      <ul className="sticky top-10">
+      <ul data-testid={testId} className="sticky top-10">
         {menus.map((menu, i) => (
           <li key={`bounties-menu-${i}`} className="relative mb-8">
             {!menu.hideTitle && <span className="relative text-xs font-semibold uppercase">{menu.title}</span>}