test: add test for UserPopup

__tests__/components/popups/user/index.test.tsx

@@ -0,0 +1,61 @@
+import UserPopup from "@/components/popups/user";
+import { mockUser } from "@__mocks__/fixtures/user";
+import { mockWallet } from "@__mocks__/fixtures/wallet";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { fireEvent, screen } from "@testing-library/react";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    isFallback: false,
+    pathname: "mocked-pathname",
+  }),
+}));
+
+const mockInitialState = {
+  wallets: { main: mockWallet, list: [mockWallet], current: mockWallet },
+  user: {
+    data: mockUser,
+    userBalance: "0",
+    balance: "0",
+    walletAddresses: "",
+    token: "",
+    referrals: [],
+    fetchingUserLoading: false,
+    filteredUsers: [],
+  },
+};
+
+describe("UserPopup component", () => {
+
+  it("renders the user popup component and all the required elements", () => {
+    renderWithRedux(<UserPopup buttonStyles={{}} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByTestId('avatar')).toBeInTheDocument();
+    expect(screen.getByTestId("user-popup")).toBeInTheDocument();
+  });
+
+  it("renders the Currency component when mainWallet is present", () => {
+    renderWithRedux(<UserPopup buttonStyles={{}} />, mockInitialState );
+    expect(screen.getByTestId("currencyId")).toBeInTheDocument();
+  })
+  it("does not render the Currency component when mainWallet is not present", () => {
+    renderWithRedux(<UserPopup buttonStyles={{}} /> );
+    expect(screen.queryByTestId("currencyId")).toBeNull();
+  })
+
+    it("toggles the show state when the button is clicked", async () => {
+      renderWithRedux(<UserPopup buttonStyles={{}} />);
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+      expect(screen.getByTestId("dropdownpopup")).toBeInTheDocument();
+    });
+
+
+});

src/components/popups/user/index.tsx

@@ -37,7 +37,7 @@ interface UserPopupMultiSelector {
 }
  * @returns {ReactElement}
  */
-export default function UserPopup({ buttonStyles }: { buttonStyles: CSSProperties }): ReactElement {
+export default function UserPopup({ buttonStyles, testId = "user-popup" }: { buttonStyles: CSSProperties, testId?: string }): ReactElement {
   const [show, setShow] = useState(false);
   const dispatch = useDispatch();
   const { mainWallet, user } = useMultiSelector<unknown, UserPopupMultiSelector>({
@@ -64,7 +64,7 @@ export default function UserPopup({ buttonStyles }: { buttonStyles: CSSPropertie
   useUnlockPageScroll();
 
   return (
-    <div>
+    <div data-testid={testId}>
       <div>
         <div className={`inline-block align-middle relative ${show === true ? "z-50" : "z-10"}`} onClick={toggle}>
           <Button customStyle={buttonStyles} padding={false} variant="secondary" className={`p-0.5 bg-tertiary hover:bg-secondary ${mainWallet ? "pr-5" : ""}`}>