diff --git a/__tests__/components/popups/user/index.test.tsx b/__tests__/components/popups/user/index.test.tsx
new file mode 100644
index 000000000..520ee63f9
--- /dev/null
+++ b/__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();
+ 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(, mockInitialState );
+ expect(screen.getByTestId("currencyId")).toBeInTheDocument();
+ })
+ it("does not render the Currency component when mainWallet is not present", () => {
+ renderWithRedux( );
+ expect(screen.queryByTestId("currencyId")).toBeNull();
+ })
+
+ it("toggles the show state when the button is clicked", async () => {
+ renderWithRedux();
+ const button = screen.getByRole("button");
+ fireEvent.click(button);
+ expect(screen.getByTestId("dropdownpopup")).toBeInTheDocument();
+ });
+
+
+});
diff --git a/src/components/popups/user/index.tsx b/src/components/popups/user/index.tsx
index d4d007b5d..a4463bec2 100644
--- a/src/components/popups/user/index.tsx
+++ b/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({
@@ -64,7 +64,7 @@ export default function UserPopup({ buttonStyles }: { buttonStyles: CSSPropertie
useUnlockPageScroll();
return (
-