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 ( -
+