Test: add test for SidebarPopup

__tests__/components/popus/Sidebar.test.tsx

@@ -0,0 +1,100 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import Sidebar from "@/components/popups/Sidebar";
+import { colors } from "@__mocks__/fixtures/colors";
+import { mockUser } from "@__mocks__/fixtures/user";
+
+// Mocking the required hooks and functions
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    isFallback: false,
+    pathname: "mocked-pathname",
+  }),
+}));
+
+// Mock the functions to be used in the Sidebar component
+jest.mock("@/store/feature/ui.slice", () => {
+  const toggleBodyScrolling = jest.fn();
+  const toggleJobOffersPopup = jest.fn();
+  const toggleShowReferralPopup = jest.fn();
+
+  return {
+    toggleBodyScrolling,
+    toggleJobOffersPopup,
+    toggleShowReferralPopup,
+  };
+});
+jest.mock("@/store/services/notification.service", () => ({
+  readNotification: jest.fn(),
+}));
+
+jest.mock("@/hooks/useTypedDispatch", () => ({
+  useDispatch: jest.fn(() => jest.fn()),
+}));
+
+jest.mock("@/components/ui/button", () => {
+  return function MockButton({ children, ...props }) {
+    return (
+      <button data-testid="mock-button" {...props}>
+        {children}
+      </button>
+    );
+  };
+});
+
+const mockState = {
+  ui: { colors: colors, locked: false, showReferralPopup: false, showJobOffersPopup: false },
+  user: { data: mockUser, userBalance: null, balance: null, walletAddresses: null, token: null, referrals: null, fetchingUserLoading: false, filteredUsers: null },
+  isAuthenticated: true,
+  unread: 0,
+};
+
+describe("Sidebar Component", () => {
+  it("should render the Sidebar component", () => {
+    renderWithRedux(<Sidebar testId="popup-sidebar" />);
+    const sidebar = screen.getByTestId("popup-sidebar");
+    expect(sidebar).toBeInTheDocument();
+  });
+
+  it("should toggle between menu and close icons when the toggle button is clicked", async () => {
+    renderWithRedux(<Sidebar />, mockState);
+
+    const toggleButton = screen.getByTestId("sidebar-toggle-button");
+    expect(toggleButton).toBeInTheDocument();
+
+    expect(screen.getByTestId("mobile-menu-logo")).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    expect(screen.getByTestId("close-icon")).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    expect(screen.getByTestId("mobile-menu-logo")).toBeInTheDocument();
+  });
+
+  it("should open the popup when the toggle button is clicked", async () => {
+    renderWithRedux(<Sidebar />, mockState);
+
+    const toggleButton = screen.getByTestId("sidebar-toggle-button");
+    expect(toggleButton).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    const popup = screen.getByTestId("popup-sidebar");
+    expect(popup).toBeVisible();
+  });
+});

jest.config.js

@@ -28,6 +28,7 @@ const config = {
     "react-markdown": "<rootDir>/__mocks__/react-markdown.tsx",
     [`^(${esModules})-.*`]: "<rootDir>/__mocks__/plugin.ts",
     unified: "<rootDir>/__mocks__/unified.ts",
+    "^@/(.*)$": "<rootDir>/src/$1",
   },
 };
 

src/components/popups/Sidebar.tsx

@@ -43,6 +43,8 @@ interface SidebarMultiSelector {
  */
 interface SidebarProps {
   burgerColor?: boolean;
+  testId?: string;
+  toggleButtonTestId?: string;
 }
 
 /**
@@ -53,7 +55,7 @@ interface SidebarProps {
  * @param {SidebarProps} { burgerColor }
  * @returns {ReactElement}
  */
-export default function Sidebar({ burgerColor = false }: SidebarProps): ReactElement {
+export default function Sidebar({ burgerColor = false, testId = "popup-sidebar", toggleButtonTestId = "sidebar-toggle-button" }: SidebarProps): ReactElement {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -97,19 +99,19 @@ export default function Sidebar({ burgerColor = false }: SidebarProps): ReactEle
   };
 
   return (
-    <div className="relative">
-      <li className="inline-block align-middle z-40 relative ease-linear transition-all duration-150" onClick={toggle}>
+    <div className="relative" data-testid={testId}>
+      <li className="inline-block align-middle z-40 relative ease-linear transition-all duration-150" onClick={toggle} data-testid={toggleButtonTestId}>
         {!show ? (
           <div>
-            <MobileMenuLogo className={burgerColor ? "text-white" : "text-black"} />
+            <MobileMenuLogo data-testid="mobile-menu-logo" className={burgerColor ? "text-white" : "text-black"} />
           </div>
         ) : (
           <div>
-            <CloseIcon />
+            <CloseIcon data-testid="close-icon" />
           </div>
         )}
       </li>
-      <Popup center={false} show={show} className="px-3 pt-16 pb-2" onClose={externalClick}>
+      <Popup center={false} show={show} className="px-3 pt-16 pb-2" data-testid="popup-sidebar" onClose={externalClick}>
         <div className="max-h-full overflow-scroll md:max-w-sidebar relative ml-auto mt-0 md:mr-12 w-full z-40 bg-tertiary rounded-3.5xl text-gray-900">
           <div className="divide-y divide-gray-200">
             <div className="flex flex-col text-left justify-between">