Test: add test for SidebarPopup

__mocks__/fixtures/auth.ts

@@ -0,0 +1,9 @@
+import { mockUser } from "./user";
+
+export const mockAuth = {
+  data: mockUser,
+  isAuthLoading: false,
+  userBalance: null,
+  balance: null,
+  walletAddresses: null,
+};

__tests__/components/popus/Sidebar.test.tsx

@@ -0,0 +1,106 @@
+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";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    isFallback: false,
+  }),
+}));
+
+const SidebarMockState = {
+  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 },
+  auth: {
+    data: mockUser,
+    isAuthLoading: false,
+    userBalance: null,
+    balance: null,
+    walletAddresses: null,
+  },
+  notifications: { unread: 0, notifications: [], count: 0 },
+};
+const authenticatedUserMockState = {
+  ...SidebarMockState,
+  auth: { ...SidebarMockState.auth, data: { ...SidebarMockState.auth.data, emailVerified: true } },
+};
+
+const triggerSidebarOpen = async () => {
+  const toggleButton = screen.getByTestId("sidebar-toggle-button");
+  await act(async () => {
+    fireEvent.click(toggleButton);
+  });
+};
+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 />, SidebarMockState);
+
+    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 />, SidebarMockState);
+
+    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();
+  });
+
+  it("should not display authenticated user content when isAuthenticated is false", async () => {
+    renderWithRedux(<Sidebar />, SidebarMockState);
+
+    await triggerSidebarOpen();
+
+    expect(screen.queryByText(mockUser.username)).not.toBeInTheDocument();
+    expect(screen.queryByText("nav.wallet")).not.toBeInTheDocument();
+    expect(screen.queryByText("job.offers.title")).not.toBeInTheDocument();
+    expect(screen.queryByText("nav.view-profile-codes")).not.toBeInTheDocument();
+  });
+
+  it("should display authenticated user content when isAuthenticated is true", async () => {
+    renderWithRedux(<Sidebar />, authenticatedUserMockState);
+
+    await triggerSidebarOpen();
+
+    expect(screen.getByText(mockUser.username)).toBeInTheDocument();
+    expect(screen.getByText("nav.wallet")).toBeInTheDocument();
+    expect(screen.getByText("job.offers.title")).toBeInTheDocument();
+    expect(screen.getByText("nav.view-profile-codes")).toBeInTheDocument();
+  });
+});

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">